Subscribe For Free Updates!

We'll not spam mate! We promise.

Thursday, May 30, 2013

Add Related Posts Widget For Blogger With Thumbnails

Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

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

How To Add Related Posts Widget For Blogger With Thumbnails

  • First for All Go To Blogger.com > Design > Edit Html
  • Find </head> Using CTRL+F
  • Copy the code below and paste it just after </head> tag 
<!--Related Posts with thumbnails Scripts and Styles Start B2W--><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 type='text/javascript'>var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/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><!--Related Posts with thumbnails Scripts and Styles End B2W-->
  • Now find the following code: 
<div class='post-footer-line post-footer-line-1'>
  • If you can't find it, then search for this one: 
<p class='post-footer-line post-footer-line-1'>
OR:
<data:post.body/>
  • Copy the code below and paste it just after <data:post.body/> tag and save your template.   
<!-- Related Posts with Thumbnails Code Start B2W-->
<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://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="http://2.bp.blogspot.com/-Hn8-zTJf3L0/T9cqAcnrfJI/AAAAAAAAAGM/5gBy5_MPPBQ/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End B2W-->
  • Change the 6 value from max-results=6 with the number of posts you want to be displayed.  

Wednesday, May 22, 2013

How To Show Adsense Ads Between Post Title In Blogger ? Two Methods


Hello Readers!
Today I am going to share with you a small tip that how to add adsense inside your blogger's blog. Mostly people think that thay earned not too much from adsense and they want to earn more from adsense , so Guys follow this
small trick and get a chance to earn more from blogger's blog .




How To Show Adsense Ads Between Post Title In Blogger ?


Method no 1:
  • First of all goto this link and convert your adsense code: http://htmlentities.net/
  • Find <data:post.body/> using CTRL+F 
  • Now paste the following code above "<data:post.body/>"

           <div style ="float: left; margin 10px 10px 10px 0px;">
                        YOUR ADSENSE CODE HERE</div>

  • Replace "YOUR ADSENSE CODE HERE" to your converted code 
All done!

If this method is not working try Method No 2:

Method No 2:
  • First of all goto this link and convert your adsense code: http://htmlentities.net/
  • Find <div class='post-body entry-content'> using CTRL+F 
  • Now paste the following code above "<div class='post-body entry-content'>"
                    
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
   YOUR ADSENSE CODE HERE
  </div>
</b:if>

  • Replace "YOUR ADSENSE CODE HERE" to your converted code 
All done! 
Take care friends

Sunday, May 19, 2013

How To Add Facebook Like Box In Blogger Blog


Hello Readers, Today we will learn how to add a facebook like box in Bloggers Blog. Social networking websites like Facebook, Twitter and Google+ are providing the custom follow and like boxes which helps every blogger in many ways. Now social networks are one the most important part of blogging. Facebook like box help you to extend your reach and connect to the audience by proving them a mean to join you on facebook. It does not only help you to grow your community but traffic as well. Every blogger knows the importance of social networking websites for referral traffic.

When you start your Facebook page you ask your friends and family members to like it and after that it all depends upon the content you write. If people like your content they will voluntary like your Facebook page. But still you need to provide them with an easy method of doing this. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Facebook developers have made this thing very easy to integrate a Facebook like box in to your Blog by adding a few lines of code in it. No let us take a look at the steps you need to follow.

How To Add Facebook Like Box In Blogger Blog.
  • This process includes the editing of your Blog's template, so it is recommended to take a backup of your Blog. First click on the template from your Blogger Dashboard. Then click on Backup/Restore and download the template from the pop-up window.
  • Now that you have taken the backup, you are ready for the process. Visit the FacebookDevelopers.
  • You will see a window like the one shown below.


  • Customize the look and feel, height, width of your Like box from this window.
  • Uncheck the show stream if you don't want the latest posts with this widget.
  • Uncheck the header checkbox if you don't want to display "Find us on Facebook".
  • Once you are done with the customization, click on Get code. It would pop-up a window like the one shown below.



  • Click on Edit template from the Blogger dashboard. Copy the code 1 from the above window and paste it just after the <body> tag.
  • Now save the template and click the Layout button.
  • Click on add a gadget from your sidebar. Add HTML/JavaScript gadget and Paste the code 2 in it.
  • Now you are done. Save the arrangement and click on View Blog.

  • You just added a Facebook like Box in your Blog. If you need any help you can comment here. You should also see other Blogging and SEOtips on Unziptech, it will help you improve your Blogging experience.
  • 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 stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.