wqwqqw

Hello Readers, in this article we will see how you can add a customized popular posts widget in your blogger blog. Popular posts widget is an important sidebar content for your blog and an important tool in blogging. It allows your online readers to see what is in trends on your blog these days and your visitors may find some cool articles to read. Blogger has given built-in popular posts widget for every blogger blog. We will be customizing its CSS styles to make it more attractive. This post features the complete tutorial to add this customized popular posts widget in your blog.

Popular posts widget will increase the internal linking of your blog. Internal linking has its own importance in blogging and SEO optimizations. We had shared an article for the benefits of using internal linking a few days ago; you should checkout that one as well. Apart from social networking sites widget you must place the widgets like this, to ensure better a better user experience. Now let us see how you can add this widget to your blog:

How To Add A Custom Popular Posts Widget In Blogger:

Part-I

Add default popular posts widget:

·         1. Login in to your Blogger account.

·         2. Navigate to the layout section and click on add a gadget from sidebar.

·         3. Choose popular posts widget from the gadgets list.

·         4. You will be asked to make some adjustments for your popular posts widget, as shown         below:

·         5. You can choose what to display and how. Like if you don't want to display the post snippet, you can simply uncheck that.

·         6. After making the important adjustments, click on add and save the arrangement.

·         7. This will add a default blogger popular posts widget in your blog.

·         8. Click on view blog to check the default blogger popular posts widget.

·          

·         You have just added built-in popular posts widget in your blog. Now we will customize its CSS styles to make it more attractive.

Part-II

Customize popular posts widget

·         Navigate to the template section and take backup of your blogger blog.

·         After taking backup click on edit HTML and find the code ]]></b:skin> using CTRL+F.

·         Now carefully paste the following code just before the code.

/*UT Popular posts Widget Style Rules*/
.popular-posts ul{padding-left:0px;}
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6BB5FF;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

·       

  Click on save template and then view blog.

You have customized the default popular posts widget in your blogger blog and given it a new look. You can make more adjustments in the CSS style rules according to your blog. If you need any help or have any doubt you can comment here. You can also suggest improvements so that we can create more user friendly widgets.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.

ddfsdfsds

Hello Readers, in this article we will see how you can add a customized Related post Widget in your blogger blog. Related post Widget is very important for any website and if widget is related animation then it always gives a very good impression to any blog and also your visitor like to play it and they also also want to see it many times but as we know about it, animated widget is hard to implement via html but we have a new and very fresh widget with animation.

Displaying related posts is a smart way for keeping your site visitors around and with thumbnails it is even smarter!This widgets is one of most popular way to increase to show related post to blogger.After you will add this widget it will start above comment section.The related articles are chosen from other posts in that same category/label/tag.Related post widget help you to show visitor your past and previous stories.It also help to increase page and make readers engaged on reading your blog post.

FEATURES

·         Responsive Design

·         Fast Loading And SEO Friendly.

·         Shows Post of  same category/label/tag.

·         Blog Post Title with Thumbnail.

·         Easy to Install.

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box; 

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails Scripts and Styles Start by www.the-geek-guru.blogspot.com-->

<!-- remove --><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: 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwKHR8M_Yv2Q6I3VOtaGFH7hzFFVZ4_LJkU9h5WZNM7yWHThhuLwWl__1bezX9gSyZcYqvMhvOEgkPkObJvcxHcXQW0J2HnbW-QcE3nBDYFQvQzuHzHtOeaycRa6OyuPEKqvjszf36vuMk/s1600/no_image.jpg&quot;;

var maxresults=5;

var splittercolor=&quot;#DDDDDD&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

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

Note:

- to change the default picture, replace the URL in blue with your own

- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"

- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code: ( Skip 1st found - code will be paste after 2nd search )

    <div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->

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

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

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);

</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/AVvXsEio2bMvyDBEuk4HxuhOZa7nG54dEpg0OrKOEOWLm5aFM5cnE6KyaoQIUC9RR7bmvHVE1tXmh6g6tm4ae5UJt7c_o6gvCSta33E6Mr92dOE299sam07QsIk6sbo5_BQ7242oTEC3NqZxpUb3/s1600/best+blogger+tips.png'/></a>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End by www.the-geek-guru.blogspot.com-->

Note:

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

- If you want the related posts to be displayed on homepage too, remove the code in violet.

Save your Widget.

You have customized the Related post widget in your blogger blog and given it a new look. You can make more adjustments in the CSS style rules according to your blog. If you need any help or have any doubt you can comment here. You can also suggest improvements so that we can create more user friendly widgets.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumbleupon or giving us a link back via the links below. Stay tuned for more updates.