5 Types of Related Post Widget For Blogger With Thumbnails

5 Types of related post widget for blogger with images and thumbnails. Ways for how to use this gadget from the Manual, Linkwithin, Nrelate, Outbrain and Zemanta widgets for blogger blog.

5 Type of  Related Post Widget For Blogger With Thumbnails
5 Type of  Related Post Widget For Blogger With Thumbnails

Related posts widget for blogger with images and thumbnails plays an important role in increasing your traffic to your blog. Such widgets help to get clicks on related posts on your blog. There are lots of posts in your blog that does not get good amount of traffic does not matter they are written good and unique so how to get traffic for those posts which are still unnoticed by readers. Then such widgets like related post widget comes to importance. Many of your posts with the same labels appear in related post widget above comments and readers are more often clicks them and hence you get more traffic for your blogger blog. There are many ways to add related post widget for blogger. First one that I am describing is manual and other ones are third party widgets from this website like Nrelate, Linkwithin, Outbrain and from Zemanta. All of them have their own pros and cons. So the choice is yours which one you would like to add in your blogger blog.

(1) Manually ADD Related post widget for blogger



Below are the step by step procedure to add related post widget for blogger. Do not edit the code otherwise it would not work all the customization that are required I will explain it to you. So learn how to add related post widget in blogger or blogspot blog.


  • Go To Blogger.
  • Click on the template and then on edit HTML.
  • Type (CTRL+F) and search this piece of code.
  • Type </head> in search box.
  • Now copy and paste the below code before the </head> Tag.




<!--Related Posts widget for blogger Start-->
<!-- 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;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://avdhootblogger.googlecode.com/files/avdhootblogger.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->


Customizations


If you want to change the default picture in case one of your post does not have any thumbnails then this will appear. So if you want to change the picture then change the URL in bolder color.

If you want to display more than 5 posts then change the value 5 from
"var maxresults=5;"
Of your own numbers.
If you do not want related post widget to appear on the homepage also then delete the code in blue color. So your widget will only appear in posts only.


Now find the following code.
<div class='post-footer'>


And just above it, copy and paste the below code:
<!-- Related Posts widget for blogger 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://www.avdhootblogger.com'><img alt='widgets for blogger' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->


Note -

If you want to display more than 6 posts then change the number 6 in max-results=6 with the number of posts that you want to display in that widget.

Save your blogger Template and you are done.

(2) Linkwithin Related Post Widget For Blogger with thumbnails and images


Linkwithin is a good widget fast and stylish for blogger. It shows all related posts on your blog within each post above the comment box. The good thing is it is free to use and installation is free from all types of coding. They automatically add their widget when you are logged into your blogger account just few clicks required.

Installation

Installation of this related post widget for blogger is quite easy. You have to edit some entries like:-

  • Your email address
  • Your Blog URL
  • Type of platform choose blogger.
  • Width means how many posts you want. 3 or 5.

(3) Nrelate Related Post widget for blogger with thumbnails or images.

Nrelate is a popular and reputed website for widgets. They have two types of widgets for you one is most relevant posts and the other one is most popular post widget for blogger blog.

Below is the screenshot how to add a Nrelate related post widget for blogger blog and Wordpress.

                                             

(4) Outbrain related post widget for blogger with thumbnails and images



Outbrain is a standard website. Many of the biggest websites are using its widget. You can understand it's popularity that it has an Alexa rank of 164. It also has some of the best widgets for blogger blog with thumbnails and images . And, one of them is related post widget. You must give a try to their widget.



(5) Zemanta Related post widget for blogger with thumbnails and images


Zemanta claims that they have the best related post widget on the planet. Well you must give a try to check this. They have already 3,00,000 users who are using Zemanta. Zemanta has a page rank of 13,000 worldwide. As far as installation is concerned. Installation is quite simple just like linkwithin. You just have to sign up and all the remaining things they will do it. So try this one also. Below is the screenshot how does it look like.

So here I have described 5 types of related post widget for blogger blog with thumbnails and images using Nrelate, Outbrain, Zemanta, linkwithin and the manual one. Now the choice is yours which one you want to choose. If you liked the post please comment and feel free to share.

6 SEO Tips To Bring New Blogger Post In Google Search Results

6 SEO Tips and Blogging Tips that puts new blogger posts into Google search results. It enforces search engine to index your blog faster.



Social bookmarking sites that give instant traffic to new blogger post, blogging and SEO tips for new blogger post from Google index and to appear in search results.


Why social bookmarking



Social bookmarking has very much importance if you are interested in getting your post in Google search results and for fast Google indexing. If you do social bookmarking effectively your new post can appear in Google search results within minutes and hence it will be indexed faster and get organic search results. So here I am writing those blogging tips and SEO tips that put me in Google search results and also all of my posts get indexed by Google just after publishing.

What happens after social bookmarking



If one of your post gets a good number of Facebook likes and plus one then you do not need to create backlinks for that post because that post will instantly appear in Google search results. And if people know just about Google plus and Facebook that give them traffic but there are other sites as well that can increase your social bookmarking weighted and put you in search results forever. So there are two benefits first you get backlinks from those high PR sites and second is your post appear in Google search results. Below I am listing all those social bookmarking sites with their benefits that will put your new blogger post in Google search results. Search engines and Google bots treat differently to those posts that gets lots of sharing in social bookmarking sites so take advantage of such sites.

Google plus.

6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results


Google plus is the best way to get indexed your post faster by Google. Just after publishing your new post go to Google plus and start sharing your new post not only in your profile but in all trends so that your new blogger post gets more exposure and plus one. One of my post named as Google plus pop up box widget for blogger is on the first page of Google just because of plus ones. I got too many plus one for that post and the result was it was on the first page of Google for some highly competitive keywords. So give special attention to Google plus .

4 On Page Optimization Blogging Tips to Get Traffic From Google Search Results
Blogging Tips For How To Center Google Adsense Ads Between Posts

Google Trends

6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results


Another blogging tips that I would like to mention here about Google plus is that always share your post in Google trends. Google trends are like discussion area where people like to share their post and discuss about a particular subject. You will see on the right hand side of your Google plus profile. Just click on one of the trends and share your post their automatically all the post that you share in Google trends also appear in your profile. So if people find it interesting they will plus one of your post and hence it increases search engine visibility of your new blogger post.

Facebook likes

6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results


Try to share your new blogger post in your Facebook profile and your Facebook fan page. So that it gets more Facebook likes and if your new blogger post a good number of Facebook likes and sharing then that a new post will appear in Google search engine results.


Stumbleupon


6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results

Stumbleupon is the best way to notify search engines and Google that you have written a new post and enforce them to index you. But how it is actually quite simple Google index many times Stumbleupon because thousands of articles are added within the minutes
6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results


And all are indexed because the speed of updating of Stumbleupon is too fast and that is why you must take advantage of it. Go to Stumbleupon after publishing the new article and submit your article links at relevant category and see in 10 min you will get at least 100 page views. I also do this for all of my posts.

Submit your posts to your website Fan pages

6 SEO Tips To Bring New Blogger Post In Google Search Results
6 SEO Tips To Bring New Blogger Post In Google Search Results


Well if you have not created yet your fan pages then do it now. Business fan pages remain in more touch with the readers than your website because of common platform like Facebook and Google plus. So when you publish your post then do submit them on your fan pages also so the readers could know about it and again visit your post. You can create such pages from here.

Facebook Fan Page
Google Plus Fan Page


6 Kings of Social Network which gives enormous traffic to the new blogger post



Folkd
Identi.ca
Diigo
Delicious
Twitter
Tumblr



Blogging tips


Blogging Tips To Hide Google Adsense ads from the homepage
Blogging Tips For Post title before the homepage title.
How to create mobile apps of blogger blog.
Blogging tips to find the widget id of any blogger widget.
Jump to widget feature in a new blogger update.


Blogger Widgets

Navigation menu bar widget
Recent posts widget for blogger
Popular posts widget for blogger
Tabbed social media sharing widget for blogger
Tabbed content box widget for blogger
Google plus pop up box widget for blogger.
Image accordion blogger widget for blogger

Use all above social media sharing and social bookmarking sites effectively and your post will be on the first page of Google if done effectively. Feel free to share and comment if you like the post.

4 On page optimization Blogging tips To Get Traffic From Google Search results

4 On page optimization Blogging tips To Get Traffic From Google Search results or to get organic search results from search engines.

4 On page optimization Blogging tips To Get Traffic From Google Search results
4 On page optimization Blogging tips To Get Traffic From Google Search results

On page optimization blogging tips plays an important role in getting traffic from Google search results and traffic from other search engines. The traffic that you receive from Google and search engines is called organic search results but what are those factors that enforces Google bots to send you traffic or to enlist in you Google search results. In this post we will be discussing those factors which enforces search engines like Google to send you traffic from their search results. Blogging tips

Page rank and Alexa rank also depend on the amount of traffic that you receive for your blog. And if you have Google Adsense ads then earnings will also be higher if you receive Google search results. So below are those methods that I use to receive Google search results or say use to get traffic from Google search engines.

Use of H1 Tag

Use of H1 Tag
Use H1 tag
Use h1 tag when you write a little description about your posts. Search engines like Google, Yahoo loves h1 tag and whatever you type in between the h1 tags brings you traffic. You can check out many of the famous blogs who use h1 tags and it brings them traffic. Do not out too many keywords in h1 tags. But use only 1 or 2 that matches with your post title and you will see getting traffic from search engines.

Post title before the Blog Homepage Title.

Post title before the homepage title
The post title before the homepage title
Use post title before the homepage title. Many times you have seen your blog title appears before the homepage title which is not good from SEO point of view. If you want to receive traffic from search engines then put your post title before the homepage title. You can do this here. I have written all the required codes which will put your post title before the homepage title. The post title before the homepage title.

Use Caption and Properties On images.

Caption and properties on images
Caption and properties of images

In order to receive traffic from Google images, you need to put captions and also use properties of images which indicates search engines like Google and Yahoo about the description of images. Anytime a user types a keyword that matches with your images caption or properties then your images will start appearing in Google images search results. So use effective keywords in your image captions .

Make bolder your anchor text and link them in a blog post.

make anchor text bolder
Make anchor text bolder

Always use anchor text in your blog post and link them to your related posts and make them bold. Google bots find bolder keywords in your blog post and if your anchor text matches with user query then you will start getting traffic from Google search results. And the moral is make search engines easier to find the keywords in your blog posts. So always make them bold. For example my anchor text is blogging tips so see in the above image I have made blogging tips bolder.



Blogging tips


Blogging Tips To Hide Google Adsense ads from homepage
Blogging Tips For Post title before the homepage title.
How to create mobile apps of blogger blog.
Blogging tips to find the widget id of any blogger widget.
Jump to widget feature in a new blogger update.


Blogger Widgets

Navigation menu bar widget
Recent posts widget for blogger
Popular posts widget for blogger
Tabbed social media sharing widget for blogger
Tabbed content box widget for blogger
Google plus pop up box widget for blogger.
Image accordion blogger widget for blogger

Blogging Tips For How To Center Google Adsense Ads between Blog Post

Blogging tips to center Google Adsense ads between blog post and how to insert Google Adsense ads between post.



How To Center Google Adsense Ads between Blog Post
How To Center Google Adsense Ads between Blog Post
Google Adsense ads look so weird when inserted between a blog post because they align either left or right. So here are some blogging tips to center Adsense ads. And also great tips to insert Google Adsense ads between posts. There is no need of html escape tools or html encoder to do this job. Just a few smart html code would insert Adsense ads between posts and also center them.

As we all know you can earn money with Google Adsense ads only when you smartly put Google Adsense ads in proper place some say your CTR will increase when you put Google Adsense ads below the post title and below navigation menu bar. But it happens when you get clicks. You need to place Google Adsense ads at that place where your readers are most likely to stop or say where you share the key knowledge of your post. So chances are higher to get clicked and do not worry about CTR and other things because all these depends on the keywords that you put in your blog post. So questions is what are those blogging tips for how to insert Google Adsense ads between post and also how to center Google Adsense ads. Below I would be describing the tips to do that.

Code

<center>
........your adsense code........
</center>


As you can see you have to put your Adsense ads raw code between the center tag and then close the center tag. And now you are ready to insert it. Now paste this code anywhere between the blog post and Adsense ads will appear where you want. But to put it in blogger follow the below steps.


  • Go to Blogger.
  • Click on write a post and then go to edit html section.
  • And then put your code over there where ever you want.
  • Check the image below.

How To Center Google Adsense Ads between Blog Post
How To Center Google Adsense Ads between Blog Post

Here we are in the edit html mode and have inserted the code between post. And then publish and you are done.

Blogging tips


Blogging Tips To Hide Google Adsense ads from homepage
Blogging Tips For Post title before the homepage title.
How to create mobile apps of blogger blog.
Blogging tips to find the widget id of any blogger widget.
Jump to widget feature in a new blogger update.


Blogger Widgets

Navigation menu bar widget
Recent posts widget for blogger
Popular posts widget for blogger
Tabbed social media sharing widget for blogger
Tabbed content box widget for blogger
Google plus pop up box widget for blogger.
Image accordion blogger widget for blogger


King Of Black Navigation Menu Bar Widget For Blogger

King of Black navigation menu bar widget for blogger. Black nav bar for blogger very beautiful and with drop down submenu one of the most beautiful widgets for blogspot blogs.

King Of Black Navigation Menu Bar Widget For Blogger
King Of Black Navigation Menu Bar Widget For Blogger


Black navigation menu bar widget for blogger. Black is a very professional color and this is the reason it is most widely used in all major blogs and successful blog and websites. This black navigation menu bar widget is based on pure CSS and HTML. And hence compatible with all websites and blogs. Compatible to work on all platforms like Blogger, Wordpress and all other customized websites. Along with it is completely customizable. You can edit its text and even color as well. So below is the method and code to add this black navigation menu bar widget to blogger and other websites.

Live demo

CREDIT:-http://www.red-team-design.com/css3-dropdown-menu

How to add a black nav bar in blogger




  • Go to blogger.
  • Go to layout.
  • Click on add a gadget.
  • Choose html/javascript.
  • Copy the below code.
  • And paste the code into an html / javascript gadget.
  • You are done.


Nav Bar Widget



Attitude navigation menu bar widget for blogger.
Dashed rich navigation menu bar widget for blogger.
Professional navigation menu bar widget for blogger.
Fashion style navigation menu bar widget for blogger.
Cute yellow navigation menu bar widget for blogger.


<style type="text/css">
/* this code is by www.avdhootblogger.com Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #fafafa;
}

*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */

#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}

#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

</style>



<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
if ($.browser.msie && $.browser.version.substr(0,1)<7)
{
$('li').has('ul').mouseover(function(){
$(this).children('ul').show();
}).mouseout(function(){
$(this).children('ul').hide();
})
}
});
</script>


<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>


I hope you liked the black navigation menu bar widget for blogger. Feel free to comment and share.
Like us on Facebook
Follow us on Twitter
Recommend us on Google Plus
Subscribe me on RSS