Create a widget displaying an image related to the article, to beautify your blog,in the presence of associated widget on your blog articles to attract visitors as well as allowing visitors to make it easier to find the content they need.
- First go to your blog account
- You'll be on the dashboard page BLOG. On that page, click the button DRAFT.
- Furthermore, the DRAFT page, click EDIT HTML tab.
- Checklist Tick / Check the small box in front of the posts EXPAND WIDGET TEMPLATE
- Look for the code </ head> press F3 to facilitate the search
- Then change the code </ head> with the code below:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>
- Further search <div class='post-footer-line post-footer-line-1'> on your blog template code. If you do not find it on your blog template, find this code: <p class='post-footer-line post-footer-line-1'>
- Copy the code below and place it UNDER one of the codes mentioned above. Here's the code:
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
- Save your Template
- And finished
Additional : Any CSS or HTML editing to make sure you download your template first, in order to anticipate the event ERROR.
Globsi Heel
Published :
2011-09-30T21:59:00+07:00
Title : Make a related post thumbnails
Rating :
5 On
2014 reviews
Please Give Your Comment for "Make a related post thumbnails"
Maybe You're Looking For :