Monday, July 18, 2011

Related Articles Accompanied Make Thumbnails on blogspot


Related to the article with pictures course will attract readers to click and view the contents of our other writings that still has something to do with artikle they read previously. And the end result that we can get is a page view our blog to be increased, people will be comfortable to linger on our blog.

How To Create Articles Related to Accompanied Thumbnails
1. Log in to Blogger.
2. On the Dashboard page, we select Layout.
3. Then select Edit HTML
4. Tick ​​the Expand Widget Templates
5. Find the code </ head>
6. Put (paste) the following code on it


<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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-->
7. Find the code below
<div class='post-footer-line post-footer-line-1'> 
Or if you do not find it looking for the following code
<p class='post-footer-line post-footer-line-1'> 
8. If you've met, put (copy paste) the following code under one of the above code (No.7)
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://adsense4udomain.blogspot.com/2011/07/related-articles-accompanied-make-thumbnails-on-blogspot.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://adsense4udomain.blogspot.com/' style='display:none;'>blogger tutorials</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
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--> 
9. We also can come up some CSS code, such as the following
var maxresults=5; 
Means that the linked article we will show is 5
var relatedpoststitle="Related Posts"; 
The title is a Related Posts

10. Save the template when finished.

No comments:

Post a Comment

Popular Posts