Best Gadget 2014

                    If your blog is success in heavy traffic there is a secret behind it.it is called as "tags".All your posts in blog are grouped & arranged by their tags to find them easily for visitors.And the other thing ,visitors will stay on your blog if posts arranged well by their tags.Since, the default Labels Widget of Blogger Platform does not have a clean and elegant look. Therefore, we have to customize it with the help of CSS.

See here the difference between the old tag cloud and the customized   tag cloud.

How to customize the Tag cloud 

/*--- MBL Custom Label Cloud With CSS3 --- */ .Label a{ padding-left:20px; background:#000; padding:0 20px; color:#fff!important; border-radius:100px; -moz-border-radius:100px; height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; border:none !important; -webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px; float:left; margin-left:5px; margin-top:5px; font-size:14px; } .Label a:hover{ color:#000 !important; background:#ff0; }


To Change the Hover Color Replace #ff0; with any color according to the desire needs.
To increase/decrease the font size replace 14px according to your needs.

Now save the template.

Related posts widget is very important for a blog, because it increases the number of page views and also help the visitor to view other posts related to blog. Now here is wonderful trick to display links to related posts beneath each posts. At their blogs today there are many types of related post widget, and related items thumbnail images using HTML, Java script, etc. .. Here I will show a method that is easy to show install.It only title jQuery.It related post widget will look like a picture below.




How To Add Related Posts Widget For Blogger


I have seen few who are showing the Related Posts Widget of posts below their posts. It’s also a good script placement which can increase your pageviews.

To add the code , just follow the above instructions.


I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout.Backup your template before attempting this tutorial.

Step 1:



In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.
In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

</head>
And immediately before it, paste this code:


<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #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:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihr9NttiRyDXMpfTRVpXwkdaNXHMbYE0k6q5Ikxw0DCWwU6TYic8S72BkewiZUdknFnoEvkHDCDZKiJ0xEGF2TysS3_NHmic9rX0vL561uj6-l-rm7F7awGcyC4jeAyGfVaqhl_E6a8ws/s200/greentickbullet.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Related Posts"; </script> <script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->

2.Now find this line of code <div class='post-footer-line post-footer-line-1'/>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'/>

Now immediately after any of these lines(whichever you could find) place this code snippet



<!-- Related Posts Code www.bdlab.blogspot.com 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> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://24work.blogspot.com'><img style="border: 0" alt="Related Posts Widget for Blogger" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsMpxKR6_BVwBDjfeaA1nuSgzfBN9f9hcE8ChWaIIi7Q9DQe6jh0Qey8kh8Ju5QJ0_YXSIc3Y-bSoEYq0r2JKAtNpyf3HWXGoMpWE4jiph8acsgn-U3ok1kPuCei701XOQUDPN_jZpUz76/s1600/blogger-widgets.png" /></a> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div><!--Remove--></b:if> <!-- Related Posts Code www.bdlab.blogspot.com End-->

And now click Save Template 

view original article here