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 :
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...
DYNAMIC VIEWS BLOGGER TEMPLATE
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
Related Post for BLOG POST THUMBNAIL WITH SHARING BUTTON
CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER
INPUT BUTTON VALUE SWAP
BASIC BLOGGER TEMPLATE
CSS CLICK DROPDOWN
BLOG ZOOM EFFECT THUMBNAIL WITH POST TITLE TOP EFFECT
BLOGGER INCLUDABLE SECTION 
ARROW BUTTON
IMAGE UPLOAD WITH JAVA WITH PHP CODE
Bread Crumb Navigation Menu Guardian Style
MULTI COLOR LABEL CLOUD WIDGET
RESPONSIVE BLOGGER TEMPLATE 
IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE
BOOTSNIPP LOGIN SIGNUP FORM
JS IMAGE SCROLLER
RAINBOW RANDOM POST CODE WITH BLOG URL BUT NO IMAGE
BLOCK JAVA SCRIPT BY GOOGLE CHROME
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.