Related Posts With Thumbnails In Blogger Post
Posted by Unknown in Blogger, Blogger Resources, Blogger Tutorials, CSS, HTML, Java Script, Related Post Widget, Widgets on Monday, December 24, 2012
Visitors who come to one of our posts is probably not going to browse for another post after they already found what they've been looking for. Most of them came after the search result shows something related in our post and will close our page after they finished reading it.
The question now : How to make them stay a little longer in our blog ? In other words, We want them to read another post to make them stay for more.
Others beside the popular posts or the post labels is the related posts reference that will keep them stay. If you put another interesting post for them right after the post, They might be interested to click the post link.
The related post i'm going to show you is the widget that will show the thumbnail of the post as well as the post title.
Here's how you create it :
- Log in to Blogger.
- Go to the dashboard > Template > Edit HTML > Proceed
- Tick Expand Widget Templates.
- Use the Ctrl+F function to find this code :
</head>Copy and paste the below codes right BEFORE the </head> code :
<!--Related Posts with thumbnails Scripts and Styles Start-->The default image will be the image from your individual post, You don't have to change anything for the post thumbnail.
<!-- remove --><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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScgmP8hSi2GRcxX4xGSd7Olo81fBLSwPgDbSRe1OeN5Vs9-E9oImXmYlNmj_4YD0diU1Gs7W4okw7wHLl6zV1AUI_GUlYx2Hmrq6YCC141HVpHsVM8ztP_URH_N7AQbVob8Iu171DUHvv/s1600/no_image.jpg";
var maxresults=4;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
But you can replace 4 from var maxresults=4 with your own value. This value indicates the amount of related post that will be shown after your post.
- Now use the Ctrl+F function again to find this code :
<div class='post-footer'>*This code will be available for your editing only if you Tick the Expand Widget Templates. Please make sure you already did this.
Copy and paste the below codes right BEFORE the <div class='post-footer'>
code :
Replace the above value marked with red with your value again for related post amount and save your widget.
<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<script expr:src='"/feeds/posts/default/-/" data:label.name "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvzu06o5w2cMsrEapta9uBxfro2HsDHZqBV-moVekue9vkeu8akkkdYfDaQWBohkrNVtfr9WUA8yB6RjTIYm2x810FUJEdtq6jYNvfMB9s4zPnovIWp1GDFGsqN_jO9rEHnwe-BnhRqpi/s1600/best blogger tips.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Also from Amazon :
1,000 Creative Writing Prompts : Ideas for Blogs, Scripts, Stories and More
When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.
Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.
Other Great Stuffs :
When you finally have the opportunity to sit down and write, you want absolutely nothing to get in your way. In an ideal world, the ideas would flow from head to pen quickly and easily. You would have thousands of ideas at your fingertips. This new idea-generating book makes that dream a reality.
Becoming A Blogger: How to Start a Blog This Afternoon and Make Money From Home For Years to Come (Make Money Online)
Some bloggers make small, part-time incomes that supplement their full-time job. Others are making blogging their sole pursuit and earning a huge income each month. Blogging can be a big thing or a small thing depending upon how much time and energy you invest into your new venture.
Other Great Stuffs :
Celebrity Blogging
Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!
If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!
Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29
1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !
Discover The Secrets To Setting Up Your Own Personal Blog For MASSIVE Brand Building... And Build A Name For Yourself That People Will Know, Like And Trust!
If You Have A Few Hours Per Week, Then We Can Show You How To Earn Significant Income With Your Own Blog! Step by Step. Click to find out !
Know how to find a great market niche and write a successful blog? Great, you don’t need the steps within each of these components. Know how to design the web page and overcome technical difficulties? No? No problem, Here is a deeper level of instruction for that!
Struggling to make money online? It's about to get quicker and easier than ever before...Click here !
How JUST One Of The Blogs I Create During By The Forth Month Has Already Netted Me $2,537.29
1500 MB of disk space, 100 GB of data transfer, PHP and MySQL support with no restrictions, cPanel control panel, Website Builder, Absolutely no advertising ! Join now : CLICK HERE !
This entry was posted on Monday, December 24, 2012 at 11:44:00 pm and is filed under Blogger, Blogger Resources, Blogger Tutorials, CSS, HTML, Java Script, Related Post Widget, Widgets. You can follow any responses to this entry through the RSS 2.0. You can