BLOG POST THUMBNAIL WITHOUT JAVA CODE WITH MOBILE THUMBNAIL

Saturday, 26 October 2013

BLOG POST THUMBNAIL WITHOUT JAVA CODE WITH MOBILE THUMBNAIL

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>

<b:else/>

</b:if>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Iphone Wallpapers Blogger Template

Designer: FB GADGETS

http://fbgadgets.blogspot.co.uk/

----------------------------------------------- */

..single-post,.single-post table.tr-caption-container {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #000;
border: 1px solid #292929;
}
.post-title-head{
width: 164px;
height: 35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrD_SRnq72-hXe_PFgyFP6olDUKBBeiZ36fIWYPb60Sy5moMnBrJOqWwMLMhzUE-iHqP53EYPGsMhSdKRSNMd8By7s-RHeODlq2G3u8Ggpu5cDObMTeq3kCpnf5dz9AAuULLxJT-2tTHi3/s1600/PostTitleHead.png) repeat scroll left top transparent;
bottom: 8px;
margin-left: -7px;
position: absolute;
}
.post {
width: 149px;
height: 345px;
background-repeat: no-repeat;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGaC0Zxjj6CJGPQinL5d9eZaODT0uvyN6Opu7hpVXhJJvHeP-_dnFkA-EcSs6EhiqUUad6DI_4pfj2eb1HuveyakJksjNkfU8Bg3X-CFWasWX92rxfkCk6MCOHe2cOPkEcKhejMYNRTWd/s1600/Post.png");
}
.post{
float: left;
margin: 0px 19px 20px 0px;
padding: 8px;
position: relative;
}
.post:hover {
border-bottom-color: #fff600;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #fff600;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #fff600;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #fff600;
border-top-style: solid;
border-top-width: 1px;
}
.lcover{
top: 8px;
width: 160px;
height: 310px;
text-indent: -9999px;
position: absolute;
}
.post h3{
color: #FFF;
position : center;
font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
margin: 3px 3px 3px 8px;
font-size:11px;padding-top:0px;margin:1;line-height:13px;text-align:center;
}
.post h3 a{
color: #FFF;
}
.post img{
width: 136px;
height: 195px;
}

.post img, table.tr-caption-container {
padding: 0px;
background: 0;
border: 0;
margin-top:60px;
margin-left:-7px;
padding-left:-13px;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post-title a:hover{
color: #fff600;
}

.post-body .tr-caption{
display: none;
}
.jump-link{
display: none;
}

.single-post{
line-height: 1.6em;
max-width: 91%;
padding: 5px 22px 20px 22px;
}
.single-post-body{
margin: 10px 0px 0px 0px;
}
.single-post img{
max-width: 100%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: #292929;
position:center;
padding: 6px 6px 6px 6px;
}
.single-post img:hover {
border-bottom-color: #fff600;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-color: #fff600;
border-left-style: solid;
border-left-width: 1px;
border-right-color: #fff600;
border-right-style: solid;
border-right-width: 1px;
border-top-color: #fff600;
border-top-style: solid;
border-top-width: 1px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}

.single-post-title-head h3{
font-size: 16px;
color: #666;
margin: 10px 0px 0px 0px;
}
.single-post-title-head h3 a{
color: #666;
}
.post-header{
font-size: 11px;
margin: 2px 0px 20px 0px;
}
#ishare{
margin: 15px 0px 0px 0px;
}
.single-post table.tr-caption-container {
padding: 10px 10px 10px 10px !important;
border:0px !important;
color: #FFF;
font-size:12px !important;
line-height: 20px;
margin:0px !important;
}
.tr-caption-container img {
max-width: 642px;
}
.tr-caption{
padding: 0px 0px 10px 0px;
}
.single-post table {
border-collapse: collapse;
}
.single-post blockquote {
margin: 1em 20px;
border-left: 2px dashed #999;
padding-left: 10px;
}
.single-post blockquote p {
margin: .75em 0;
}
.post-footer{
margin: 20px 0px 20px 0px;
}
.post-footer img{
border: 0;
padding: 0;
background: none;
}

]]></b:skin>

<style type='text/css'>
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
ul.way2blogging-social { list-style:none; margin:15px auto;display:inline-block; } /* www.way2blogging.org */
ul.way2blogging-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.way2blogging-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; } /* www.way2blogging.org */
ul.way2blogging-social li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999; text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7); -moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZcNuu9lPp6XMuN53qbmUrq4jN1-l0zdB9w4O2BzCgdnGQk36lDlGkOL2T6gTiffkAvkmoDd8lhTvZqid1SeXCZ3fELYICNFPmXWSFpG_cVll3vO2gfFyEerkH1ojbIAUFI7673CLV1M6/s1600/FaceBook.png)} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjknHgUjjjPE5lFD35AKoPpmC6Pp2x1z-gWuSZrLiZZMLbAZPwIS42Zbcz-g1aDzSMqWWNlxUOKBapRaUx3kS1HohdEF52LQsKu0oApXmz_LshOUxtXPl0iTHW5LDqqzMV48bg_HBEZCewe/s1600/Twitter.png)} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-googlebuzz { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizRKy8ebDZYkvfD8opVjtDLrgtHTNJORsoA8iRThmUAVcGyIYbi38bX8kATeSBrbfZgs9h0GjYhTfOGLoQBmU4ltX62dB4-84IHREbAcpfeC-XHXUvACWMX-JK935uPqSkW6iRu4r6RdNV/s1600/Google.png)} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM68ZeybE8HE02_tzccJIf_R3yUTmTYKl-ZwnMGj4VFR9CDGGTCFskZvJp874V9TU09AD7HAUIcirk_O7OjorHJGJL9dLPqcc-iBKpfmAMEWoy8rsicX8BHpX0Dg-XYK6CB7QigGeBHDvC/s1600/StumbleUpon.png)} /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-digg { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0wFpbhAeCnTyn_nTzA8R-VGbycnAvUXao9we5VVOMCNhKJxexvT03thYcWCPQkxRWOLIK9REQUdT8CQfKGcm5C3LyZtq-6P7a2Mj8eYhv4DzgVxGnp1glqdc6GizYGwnuyLOfVOKthD6q/s1600/Digg.png); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMaKhOVffM5g6AwZjrgQHmIIQwvqu0vp1GajEW024x44_j7GHUymu6QnhgPFHEQ6M21ct0IO7FYSPFpAGrd776lwpGwtMSHygRetRCOfQwwZaL2OKXxGZ5Sm_Fml7fhAFC1tL1sZBczzxQ/s1600/Delicious.png); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvxz3oaXvOZgeJNRgvmmFnMsF_Vnpf4G0bFPORo-AjoLKRGaWyY71DwhNPZ1bNkFvcjoSjgaJR8OhOqskazZ9t1V7jSo2TjmGUxeRS5TwK72gy4rOSkgYvOTHqvuR4O2ZGCefq4ajwgok2/s1600/Linkedin.png); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK6w1ix_yyMiK2TuEk8AG6Eopf5cxT3Q0Kp35C5JyobjlktgrT74cakq2DFW3TYAlaEnscEYoMi_ESpQLWQJhaOXv052CnQn2F2wH2dFZBfZ6t8AL0TjaqzSWoF1COKzP55i2cw4bEnvf_/s1600/Reddit.png); } /* www.way2blogging.org */
ul.way2blogging-social li.way2blogging-technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMqTomGjFgwdLpkWpPgzpGK1arF_f4bZUJFBRexKcS9Ibv1cGyRVMdACTvYTlJycq_ElB0bu-LPAXNQBNaJvepwzN405F4u7bl2bvWPgeYWdHCYmgGiK-iqWUbQ91e025k-rm03TjuxszR/s1600/Technorati.png); } /* www.way2blogging.org */
#way2blogging-cssanime:hover li { opacity:0.2; } /* www.way2blogging.org */
#way2blogging-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } /* www.way2blogging.org */
#way2blogging-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } /* www.way2blogging.org */
#way2blogging-cssanime li:hover { opacity:1; } /* www.way2blogging.org */
#way2blogging-cssanime li:hover a strong { opacity:1; top:-10px; } /* www.way2blogging.org */
/* Beautiful Social Bookmarking Widget By Harish @ www.way2blogging.org */
</style>

</head>

<body>

<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'>

<b:if cond='data:blog.pageType == "index"'>

<div class='post'>

<div class='post-content'>

<div class='post-title-head'>

<a expr:name='data:post.id'/>

<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>

</h3>

</b:if>

</div>

<a class='lcover' expr:href='data:post.url' rel='nofollow'>#</a>

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear:both'/>

</div>

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>

</div>

</b:if>

</div>

<div class='clear'/>

</div>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<div class='single-post'>

<div class='single-post-title-head'>

<div class='left'>

<a expr:name='data:post.id'/>

<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>

</h3>

</b:if>

</div>

<div class='right' id='ishare'><b:include data='post' name='shareButtons'/></div>

<div class='clear'/>

</div>

<div class='post-header'>

<div class='post-tag'> <b style='border-right:solid 1px #ccc;padding-right:10px;margin-right:10px'>Tag</b>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ "?max-results=10"' rel='tag' style='border-right:solid 1px #ccc;padding-right:10px;margin-right:10px'>

<data:label.name/>

</a>

<b:if cond='data:label.isLast != "true"'/>

</b:loop>

</b:if>

</div>

<div class='post-header-line-1'>

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'><data:post.author/></span>

</b:if>

</span>

<b:if cond='data:post.dateHeader'>

<span class='date-header'>on <data:post.dateHeader/></span>

</b:if>

<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

</b:if>

</span>

</div>

<div class='single-post-body entry-content'>

<data:post.body/>

<div style='clear:both'/>

</div>

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == "item"'>

<ul class='way2blogging-social' id='way2blogging-cssanime'>

<li class='way2blogging-facebook'>

<a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');return false' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>

</li>

<li class='way2blogging-twitter'>

<a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'><strong>Twitter</strong></a>

</li>

<li class='way2blogging-googlebuzz'>

<a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on GoogleBuzz'><strong>Google Buzz</strong></a>

</li>

<li class='way2blogging-stumbleupon'>

<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>

</li>

<li class='way2blogging-digg'>

<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'><strong>Digg</strong></a>

</li>

<li class='way2blogging-delicious'>

<a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>

</li>

<li class='way2blogging-linkedin'>

<a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>

</li>

<li class='way2blogging-reddit'>

<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>

</li>

<li class='way2blogging-technorati'>

<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'><strong>Technorati</strong></a>

</li>

</ul>

</b:if>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>

</a>

</span>

</b:if>

<b:include data='post' name='postQuickEdit'/>

</span>

<span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

</b:if>

</span>

</div>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

</div>

<div class='clear'/>

</div>

</b:if>

<b:if cond='data:blog.pageType == "static_page"'>

<div class='single-post'>

<div class='single-post-title-head'>

<div class='left'>

<a expr:name='data:post.id'/>

<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>

</h3>

</b:if>

</div>

<div class='post-tag'> <b style='border-right:solid 1px #ccc;padding-right:10px;margin-right:10px'>Tag</b>

<b:if cond='data:post.labels'>

<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url+ "?max-results=10"' rel='tag' style='border-right:solid 1px #ccc;padding-right:10px;margin-right:10px'>

<data:label.name/>

</a>

<b:if cond='data:label.isLast != "true"'/>

</b:loop>

</b:if>

</div>

<div class='right' id='ishare'><b:include data='post' name='shareButtons'/></div>

<div class='clear'/>

</div>

<div class='post-header'>

<div class='post-header-line-1'>

<span class='post-author vcard'>

<b:if cond='data:top.showAuthor'>

<data:top.authorLabel/>

<span class='fn'><data:post.author/></span>

</b:if>

</span>

<b:if cond='data:post.dateHeader'>

<span class='date-header'>on <data:post.dateHeader/></span>

</b:if>

<span class='post-timestamp'>

<b:if cond='data:top.showTimestamp'>

<data:top.timestampLabel/>

<b:if cond='data:post.url'>

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

</b:if>

</span>

</div>

<div class='single-post-body entry-content'>

<data:post.body/>

<div style='clear:both'/>

</div>

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>

<span class='post-icons'>

<b:if cond='data:post.emailPostUrl'>

<span class='item-action'>

<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>

<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>

</a>

</span>

</b:if>

<b:include data='post' name='postQuickEdit'/>

</span>

<span class='post-labels'>

<b:if cond='data:post.labels'>

<data:postLabelsLabel/>

<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>

</span> <span class='post-comment-link'>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:post.allowComments'>

</b:if>

</span>

</div>

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

</div>

<div class='clear'/>

</div>

</b:if>

</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>

<b:section class='footer' id='footer'/>

</div>

</body>

</html>

-------------------------------------------------------------------------------------------------
USED IMAGE IN THIS TEMPLATE
--------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------

OR USED BELOW REDUCED CODE

-----------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>

<b:else/>

</b:if>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Iphone Wallpapers Blogger Template

Designer: FB GADGETS

http://fbgadgets.blogspot.co.uk/

----------------------------------------------- */

.single-post,.single-post table.tr-caption-container {

-webkit-border-radius: 6px;

-moz-border-radius: 6px;

border-radius: 6px;

background: #000;

border: 1px solid #292929;

}

.post-title-head{

width: 164px;

height: 35px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrD_SRnq72-hXe_PFgyFP6olDUKBBeiZ36fIWYPb60Sy5moMnBrJOqWwMLMhzUE-iHqP53EYPGsMhSdKRSNMd8By7s-RHeODlq2G3u8Ggpu5cDObMTeq3kCpnf5dz9AAuULLxJT-2tTHi3/s1600/PostTitleHead.png) repeat scroll left top transparent;

bottom: 8px;

margin-left: -7px;

position: absolute;

}

.post-header{

font-size: 11px;

margin: 2px 0px 20px 0px;

}

.post {

width: 149px;

height: 345px;

background-repeat: no-repeat;

background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUGaC0Zxjj6CJGPQinL5d9eZaODT0uvyN6Opu7hpVXhJJvHeP-_dnFkA-EcSs6EhiqUUad6DI_4pfj2eb1HuveyakJksjNkfU8Bg3X-CFWasWX92rxfkCk6MCOHe2cOPkEcKhejMYNRTWd/s1600/Post.png");

}

.post{

float: left;

margin: 0px 19px 20px 0px;

padding: 8px;

position: relative;

}

.post:hover {

border-bottom-color: #fff600;

border-bottom-style: solid;

border-bottom-width: 1px;

border-left-color: #fff600;

border-left-style: solid;

border-left-width: 1px;

border-right-color: #fff600;

border-right-style: solid;

border-right-width: 1px;

border-top-color: #fff600;

border-top-style: solid;

border-top-width: 1px;

}

.post h3{

color: #FFF;

position : center;

font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;

margin: 3px 3px 3px 8px;

font-size:11px;padding-top:0px;margin:1;line-height:13px;text-align:center;

}

.post h3 a{

color: #FFF;

}

.post img{

width: 136px;

height: 195px;

}

.post img {

padding: 0px;

background: 0;

border: 0;

margin-top:60px;

margin-left:-7px;

padding-left:-13px;

}

.post-title a:hover{

color: #fff600;

}

.post-footer{

margin: 20px 0px 20px 0px;

}

.post-footer img{

border: 0;

padding: 0;

background: none;

}

.tr-caption{

display: none;

}

table.tr-caption-container {

padding: 0px;

background: 0;

border: 0;

margin-top:60px;

margin-left:-7px;

padding-left:-13px;

}

.post-body .tr-caption{

display: none;

}

.tr-caption-container img {

border: none;

padding: 0;

}

#ishare{

margin: 15px 0px 0px 0px;

}

.lcover{

top: 8px;

width: 160px;

height: 310px;

text-indent: -9999px;

position: absolute;

}

.jump-link{

display: none;

}

]]></b:skin>

</head>

<body>

<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'>

<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'>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:post.title'>

<h3 class='post-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>

</h3>

</b:if>

</div>

<a class='lcover' expr:href='data:post.url' rel='nofollow'>#</a>

<div class='post-body entry-content'>

<data:post.body/>

<div style='clear:both'/>

</div>

</div>

</div>

</b:if>

<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>

</h3>

</b:if>

</div>

<div class='right' id='ishare'><b:include data='post' name='shareButtons'/></div>

</div>

<data:post.body/>

</div>

</div>

</b:if>

</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>

<b:section class='footer' id='footer'/>

</div>

</body>

</html>

------------------------------------------------------------------------------------------------------

OR USE BELOW CODE FB GADGET LIKE THUMBNAIL TEMPALTE

-------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>

<b:else/>

</b:if>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Iphone Wallpapers Blogger Template

Designer: FB GADGETS

http://fbgadgets.blogspot.co.uk/

----------------------------------------------- */

.post-header{

font-size: 11px;

margin: 2px 0px 20px 0px;

}

.post {

background: #f1f1f1;

border-top:#fff 1px solid;

border-left:#fff 1px solid;

border-right:#fff 1px solid;

border-bottom:#7c7c7c 1px solid;

float:left;

height:230px;

margin:10px 15px 0 5px;

overflow:hidden;

position:relative;

width:280px;

-moz-box-shadow: 0px 2px 10px #989898;

-webkit-box-shadow:0px 2px 5px #989898;

}

.post h3 {

margin-top:5px;

margin-bottom: 10px;

margin-left:15px;

font-size: 1.2em;

text-align:left;

padding-bottom:10px;

overflow:hidden;

height:10px;

text-transform: uppercase;

}

.post h3 a {

color: #000000;

text-decoration: none;

}

post img {

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;

}

#ishare{

margin: 15px 0px 0px 0px;

}

.lcover{

top: 8px;

width: 160px;

height: 310px;

text-indent: -9999px;

position: absolute;

}

.jump-link{

display: none;

}

]]></b:skin>

</head>

<body>

<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'>

<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'>

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:post.title'>

<b:if cond='data:post.link'>

<b:else/>

<b:if cond='data:post.url'>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

</div>

<data:post.body/>

</div>

</div>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:post.title'>

<b:if cond='data:post.link'>

<b:else/>

<b:if cond='data:post.url'>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</b:if>

</div>

</div>

</div>

</b:if>

</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>

<b:section class='footer' id='footer'/>

</div>

</body>

</html>

----------------------------------------------------------------------------------------

OR USE BELOW COMPLETE CODE

----------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "index"'>

<b:else/>

</b:if>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: Iphone Wallpapers Blogger Template

Designer: FB GADGETS

http://fbgadgets.blogspot.co.uk/

----------------------------------------------- */

/*---------------- Posts ---------------------*/

h2.date-header {

margin:1.5em 0 .5em;

display:none;

}

/* ------------- Post page---------------- */

.post {

background: #f1f1f1;

border-top:#fff 1px solid;

border-left:#fff 1px solid;

border-right:#fff 1px solid;

border-bottom:#7c7c7c 1px solid;

float:left;

width:800px;

margin:10px 15px 0 5px;

overflow:hidden;

position:relative;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img {

height:600px;

width:600px;

}

.post h3 {

margin-top:10px;

margin-left:12px;

font-size: 1.2em;

text-transform: uppercase;

}

.post h3 a {

color: #000000;

text-decoration: none;

}

.post blockquote {

font-family:'Courier New', Courier;

color : #6e818c;

margin : 10px;

padding : 10px;

width : 90%;

background:#F3F3F3;

border-left:5px solid #900;

border-top: 1px solid #DDD;

border-right: 1px solid #666;

border-bottom: 1px solid #666;

font-size: 1.1em;

}

.lcover{

top: 8px;

width: 160px;

height: 310px;

text-indent: -9999px;

position: absolute;

}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>

<b:if cond='data:blog.pageType != "static_page"'>

<style>

.post {

background: #f1f1f1;

border-top:#fff 1px solid;

border-left:#fff 1px solid;

border-right:#fff 1px solid;

border-bottom:#7c7c7c 1px solid;

float:left;

width:240px;

height:240px;

margin:10px 15px 0 5px;

overflow:hidden;

position:relative;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post:hover{

float:left;

width: 240px;

height:240px;

border-radius: 50%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.post img {

float:left;

width: 240px;

height:240px;

border-radius: 0%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover{

float:left;

width: 240px;

height: 240px;

border-radius: 50%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

}

</style>

</b:if>

</head>

<body>

<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'>

<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'>

<b:if cond='data:blog.pageType == "index"'>

<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>

<div class='thumbs'>

<a class='lcover' expr:href='data:post.url' rel='nofollow'>

<data:post.body/>

</a>

</div>

</div>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<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>

</h3>

<div class='post-body-2'>

<p><data:post.body/></p>

<div style='clear:both'/>

</div>

</div>

</b:if>

</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>

<b:section class='footer' id='footer'/>

</div>

</body>

</html>

---------------------------------------------------------------------------------------------

READ MORE:

----------------------------------------------------------------------------------------------

FbGadgets

Saturday, 26 October 2013