Free Tools: thumbnails

Showing posts with label thumbnails. Show all posts

Friday, October 28, 2016

How To Add Related Posts Widget For Blogger With Thumbnails

Today topic is "How You Can Added Related Posts Widget For Blogger With Thumbnails". When you add this widget your blog looks beautiful. It helps your readers to go through the similar posts they were reading and so this widget helps to decrease your bounce rate by increasing blog page views.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to added it to your template? Go through the steps by steps below. Lets sarts.

How to Added Your blog Sitemap widget automatically

How To Add Related Posts Widget For Blogger With Thumbnails

Firstly Go To Blogger Dashboard.
Back up your existing Template before making any changes!
Make sure to check the "Expand Widget Templates " box.
Find </head> Using CTRL+F
Copy the code below and paste it just after </head> tag.

<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, &# 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 type=text/javascript>var defaultnoimage=" http://1 . bp.blogspot.com/_ u4gySN2ZgqE/ SosvnavWq0I/ AAAAAAAAArk/ yL95WlyTqr0/s 400 / noimage.png";var maxresults=5;var splittercolor="#d4eaf2";var relatedpoststitle="Related Posts";</script><script src=http:// beautifulbloggerwidgets. googlecode.com/files/ related_posts_with_ thumbnails_min.js type=text/javascript/></ b:if>

Now find the following code below:

<div class=post-body>

If you cant find it, then search for this below one by using Ctrl+F.

<data:post.body/>

Copy the code below and paste it just after <data:post.body/> tag and save your template.

<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=6" type=text/ javascript/></b:loop> <script type=text/ javascript> removeRelatedDuplicates_ thumbs(); printRelatedLabels_ thumbs ("<data:post.url/ >"); </script> </div><div style=clear:both/> </b:if> <b:if cond=data:blog.url == data:blog.homepageUrl>< b:if cond=data:post.isFirstPost> <a href=http:// beautifulbloggerwidgets. blogspot.com/ ><img style="border: 0" alt="Blogger Widgets" src=" http://2.bp.blogspot . com/-Hn8-zTJf3L0/ T9cqAcnrfJI/ AAAAAAAAAGM/5gBy5_ MPPBQ/s 1600 /blogger- widgets.png" /></a> </b:if></b:if>

Change the 6 value from max-results=6 with the number of posts you want to be displayed.

Now youve done all the proccess correct, congrat youve been added the related post widget successful into your blogger post.

Enjoy and dont forget to share this tutorial to your friends and other communities.

Go to link Download

How To Add Recent Posts Widget With Thumbnails On Blogger NairotechBlog

Recent posts widget is quite a lovely widget that can be used to beautify & add spice to your Blogger & Wordpress Site, these widget stands out from other Recent post widget because it shows the date in which the post was published, no. of comments and read more link.
Let get to the real deal for Today......

Steps To Install Recent Post Widget On Your Blog

Navigate your blogger dashboard
Click on Layout > Add a Gadget > HTML/JavaScript
Copy and paste the following code in the content box.

< style type=text/css>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style=text/javascript src=http://www.webaholic.co.in/other/recent-posts-widget-with-images.js></script>
<script style=text/javascript>
var numposts = 6;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 98;</script>
<script src=http://www.YOUR-BLOGGER-URL.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs></script>

You can alter the number of post to be displayed, by simply find var numposts = 6 and replace 6 with your desired number.

Change YOUR-BLOGGER-URL to your blog url

Now, Click on the Save button.

You Are Done!
Please, Share this with friends and use our subscription links below.

Hope This Helps, Pals?

Go to link Download

Friday, October 28, 2016

How To Add Related Posts Widget For Blogger With Thumbnails

How To Add Related Posts Widget For Blogger With Thumbnails

Saturday, September 17, 2016

How To Add Recent Posts Widget With Thumbnails On Blogger NairotechBlog

How To Add Recent Posts Widget With Thumbnails On Blogger NairotechBlog