Thursday, 23 January 2014
BLOG POST THUMBNAIL WITH SHARING BUTTON
------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
---------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
h2.date-header{margin:1.5em 0 .5em}
.post{margin:.5em 0 .1em;padding:15px;}
.post .jump-link{display:none}
.post h3{line-height:26px;margin:0 0 20px;padding:0 0 5px}
.post h3 a,.post h3 a:visited,.post h3 strong{font-size:30px;font-weight:700}
.post h3 strong,.post h3 a:hover{text-decoration:none}
.post-body{line-height:1.6em;font:14px Arial;margin:0 0 .75em}
.post-body blockquote{line-height:1.3em}
.post-footer{padding:5px}
.post img{max-width:600px;padding:4px}
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}
/* FINISH BLUR EFFECT CODE */
.post-thumbail img {
width: 305px;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.posting_image {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.posting_image img {
width:263px;
height:150px
}
.post {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KOXTS2mJqpa8NySgpe-IOa9J1-GA11NujGEBqRrWwtcsTZ4DKw8dnMiJITh7_HaZuRj1pZKXDEOJv3meOXK2ZQbJLO2MkgQ9KQPB6UOZ7KiXgPYRSQtXvJ0N8k4MK57w8YBsDjd9OVk1/s1600/post-img.png) repeat-x top;
border:1px solid #ccc;
list-style:none;
width:290px;
margin-left:15px;
margin-bottom:10px;
text-align:center;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
height:245px;
display:inline;
float:left;
overflow:hidden;
position:relative;
box-shadow:0 0 4px #bbb;
-moz-box-shadow:0 0 4px #bbb;
-webkit-box-shadow:0 0 4px #bbb;
padding:5px 10px 10px
}
.post:hover {
border:1px solid #FF0000;
box-shadow:0 0 6px #FF0000;
-moz-box-shadow:0 0 6px #FF0000;
-webkit-box-shadow:0 0 6px #FF0000
}
.post-footer {
display:none
}
.post h3 {
border:0 none;
line-height:13px;
margin:0 0 5px;
padding:3px
}
.post h3 a,.post h3 a:visited,.post h3 strong {
color:#333;
font:bold 13px Arial;
text-align:center;
text-shadow:none;
line-height:20px
}
.post-body {
font-size: 0px;
height:200px;
overflow:hidden;
width:280px;
padding: 5px
}
</style>
</b:if></b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<div class='post hentry'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div style='padding:5px 5px 15px 0; margin:5px;font-size:95%; line-height:1.4em; border-bottom:4px double #ccc;'>
Browse »<a expr:href='data:blog.homepageUrl'>Home</a> »
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'> , </b:if>
</b:loop>
</b:if> » <data:post.title/>
</div>
</b:if>
</b:if>
<a expr:name='data:post.id'/>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<data:post.body/>
</div>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png'/></a>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='widget-wrap'>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7gdNA75zZ_YjLlQg4xMpjIKshmliHBOVJX-GjxFdThlLsSR6txSOt0r_Ecth898UzUDqCG4uFzz2f18RLHKfDYiKXDTh1g28JZsTXsfz5ETMB5n9cn2HgN352QZFjNUt4mZ8AI9MX24kA/s1600/twitter.png' width='20'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttTq_rw5xfs9SeoyveB-Ad456siBvyKRVLoystC5ITprRti1pkTwdJPsqQ-a50vu1pghzmHw-_Ruow5zMjGo2gRaG3Gf_CcXsG_Asjvk0AOWq3r0TrhApCJqB72X5O1VUfC3d6ZZJ6dOe/s1600/delicious.png' width='20'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJrXW0sYrFzmN1HaOciKFSnOE8ggKnClo_UxXkeQ2wK1HUZl20RRlNB9JoJmhEDNw8XZOgBDS1cZeIHlEAGXoYZnEJqssUGolCUf_k9ZN4cVSrla1pWufNA1i7HPEHEdieJV7d2QYbBSI/s1600/pa.png' width='20'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3bLzgfLNmQxx2dpmIjk6lfaIO7X7Sv2AWmJ53qoWZvcK1p6NqQpwfdEWh-ZWLbAvWKjdpZkKiUL4EK68RNfwh7hYoa-tW35sNUzl7K4rKApaCPLi6DZlNqkVyl-Ed1T88GZ7KxHvbF0RN/s1600/digg.png' width='20'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnEvHgiQfoGTKpy9dqVIxwaqueF9q6tK7w0DsyahnZla35SFUKjM0QiHZivkEom1ns0GIVB69LRiijJXTTGGXxv231jxLHhISy81fFkg8Y5AB08Q-t1_yhKyQJznxIscHO8rKh4vMBfD6/s1600/stumbleupon.png' width='20'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVcEnyqY4lPcOE5sqbK5FxrQ6UppvmTLQ3gaLCNLADhPRAn3OsjY0sE29UCJyBSqfR4G0XienCXPlW1BuP341GMmwQ7ZFiLpRCTQHgXX5Kntmn6Pn1HAE7EpKHMd-goC2is8eRxB1WnwzC/s1600/favorites.png' width='20'/></a>
<a class='addthis_button_more'><img alt='More' height='20' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3CWlEhaiqUCA-YeIQe0CJk1v6ASOcpcQNg8GyH1mMnKhMklb4C-92t8vmyf2OG0z0MvPoy_eQ4qwivqsdMomfff_QtkR7RqkGH9iUBxbgVQZth28zAYWTg5rs7YRzB6vE5HiZalNyzIk0/s1600/more.png' width='20'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>
</b:if>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------
OR USE BELOW CODE WITHOUT SHARING BUTTON
------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: BLOG POST THUMBNAILS WITH SLIDER EFFECT
- Support Video Thumbnail
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
h2.date-header{margin:1.5em 0 .5em}
.post{margin:.5em 0 .1em;padding:15px;}
.post .jump-link{display:none}
.post h3{line-height:26px;margin:0 0 20px;padding:0 0 5px}
.post h3 a,.post h3 a:visited,.post h3 strong{font-size:30px;font-weight:700}
.post h3 strong,.post h3 a:hover{text-decoration:none}
.post-body{line-height:1.6em;font:14px Arial;margin:0 0 .75em}
.post-body blockquote{line-height:1.3em}
.post-footer{padding:5px}
.post img{max-width:600px;padding:4px}
.post blockquote{margin:1em 20px}
.post blockquote p{margin:.75em 0}
/* FINISH BLUR EFFECT CODE */
.post-thumbail img {
width: 305px;
}
/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}
.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.posting_image {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.posting_image img {
width:263px;
height:150px
}
.post {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KOXTS2mJqpa8NySgpe-IOa9J1-GA11NujGEBqRrWwtcsTZ4DKw8dnMiJITh7_HaZuRj1pZKXDEOJv3meOXK2ZQbJLO2MkgQ9KQPB6UOZ7KiXgPYRSQtXvJ0N8k4MK57w8YBsDjd9OVk1/s1600/post-img.png) repeat-x top;
border:1px solid #ccc;
list-style:none;
width:290px;
margin-left:15px;
margin-bottom:10px;
text-align:center;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
height:245px;
display:inline;
float:left;
overflow:hidden;
position:relative;
box-shadow:0 0 4px #bbb;
-moz-box-shadow:0 0 4px #bbb;
-webkit-box-shadow:0 0 4px #bbb;
padding:5px 10px 10px
}
.post:hover {
border:1px solid #FF0000;
box-shadow:0 0 6px #FF0000;
-moz-box-shadow:0 0 6px #FF0000;
-webkit-box-shadow:0 0 6px #FF0000
}
.post-footer {
display:none
}
.post h3 {
border:0 none;
line-height:13px;
margin:0 0 5px;
padding:3px
}
.post h3 a,.post h3 a:visited,.post h3 strong {
color:#333;
font:bold 13px Arial;
text-align:center;
text-shadow:none;
line-height:20px
}
.post-body {
font-size: 0px;
height:200px;
overflow:hidden;
width:280px;
padding: 5px
}
</style>
</b:if></b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<div class='post hentry'>
<div class='post-body entry-content'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</h3>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<data:post.body/>
</div>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png'/></a>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<div style='clear:both'/>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>
Related movie you might like to see :
DYNAMIC VIEWS BLOGGER TEMPLATE
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
WHACK A RAT CSS GAME
GOOGLE FILTER BUTTON IN IMAGE SEARC...
BUTTON PADDING CHANGE HEIGHT WIDTH
INPUT BUTTON VALUE SWAP
CSS SYNTAX HIGHLIGHT CHANGE IN NOT...
WEB IMAGE DOWNLOADER
TEXT COMPARE OR DUPLI TEXT FINDER
BLOCK JAVA SCRIPT BY GOOGLE CHROME
MOUSE COORDINATES IN JAVA SCRIPT
RELATED POST WIDGET LIST WITHOUT TH...
Related Post for BLOG POST THUMBNAIL WITH SHARING BUTTON
BRICK WALL MENU BAR CODE
Direct Links to your Files on Google Drive
ON LINE JAVA LIBRARY
DYNAMIC VIEWS BLOGGER TEMPLATE
BODY JS FILE LINK IN MAGENTO
WHACK A RAT CSS GAME
FLICKITY JS CSS SLIDER
GOOGLE FILTER BUTTON IN IMAGE SEARCH
FIREBUG LITE USE OFFLINE
RADIO BUTTON SLIDER TO KEY FRAME SLIDER
BLOG ZOOM EFFECT THUMBNAIL
FLICKITY SLIDER SCROLL WITH RADIO NEXT PREV BUTTON
FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES
FLASH 8 DOWNLOAD
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.