Related Posts Widget With Image Thumbnail For Blogger

Displaying  related posts at the bottom of each post is a best way to keep to visitor busy and increase your page views.The related posts widget with thumbnails lists a selected number of posts with image thumbnail from each post.This gadget is quite similar to linkwithin's related posts but if you are going use this gadget then you are getting many options to customize this gadget according to your template.The original script is created by Blogger's Master Aneesh of BloggerPlugins and I customized some CSS part and increases the thumbnail size to give it more beautiful look.You can see the live preview of this gadget below in preview.

• 

How To Add Related Posts With Thumbnail To Blogger

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Download a copy of your template first.
3. Tick  "Expand Widget Templates" checkbox.
4. Now search for below tag in your template

</head>

Just above it paste below code

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<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;
font-size
}

#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: #6E6E6E;
color: #ffffff;
}
</style>
<script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDarHe_AXwDmRJtEN20sXjHp1zNJHVlpe-Z5NuTuaEdTqfGHPzWB8IZquLyD-LzdjYwCkeNb87TnZA7oZ0th_reFlH7DeoQP_XbFUkrK38g1RbbFseplwRwzwb4SgdnpKPDSu_Zjr-9vc/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>>
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Now search for below code in your template

<div class='post-footer-line post-footer-line-1'/>

Now place below code snippet just before of above line.

<!-- Related Posts with Thumbnails Code 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 != &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=7&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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations

• To change the title of widget find the Related Posts in 2nd code.
• To change the number of posts to display find this var maxresults=5; code in 2nd code.

Read More

Blogger - Increase Your Label Limit Per Page

Blogger - Increase Your Label Limit Per Page

Have you ever wanted to show all of your blog post from a single Label?
It’s actually very easy to show all the blog post from one label, on a single webpage in Blogger, here’s how:
1) First we need a Label from our own blog, I’ll use the Label Blogger from this blog, as an example.
2) Next we need the URL/link of our Label, so for my Label Blogger, I go to my blog that already has a link to my Label (Blogger), & Right click –> Properties then copy the URL. My Blogger Label URL/Link looks like this: ( http://soswitcher.blogspot.com/search/label/Blogger )
Notice the name of my Label at the very end of the URL/Link (Blogger), that Label can be any Label that is on your own blog. Also you should know, that Labels are case sensitive.
3) Here is how we control the maximum number of Blogger blog post for a specific Label, on a single page. We already have the URL/Link from our Label (Blogger), now we need to add this small bit of code to the end of the Label ?&max-results=3 so now our Labels new URL/Link will look like this:
http://soswitcher.blogspot.com/search/label/Blogger?&max-results=3
The example URL/Link above will return the last three blog post from my blog, click here to see.
4) The last step is to put our new Label URL/Link into HTML code so we can use the link anyplace inside our blogger post, or a Blogger HTML/Javascript gadget. Here is how to do that:
<a href="http://soswitcher.blogspot.com/search/label/Blogger?&max-results=3">Blogger Label=3</a>
This text ( Blogger Label=3 ) can be anything you want it to be.
A few examples from my Blogger Label:

• Blogger = 2 results per page
• Blogger = 3 results per page
• Blogger = 5 results per page
• Blogger = 7 results per page
• Blogger = 9 results per page

NOTE:
In my example above I have a total of 11 blog post on this blog that include the Label Blogger, so any number higher than 11 will still only show 11 blog post. This can be a good thing, If you want to show a fixed amount of blog post (example=30).
Just remember it’s annoying to have a single webpage with long blog post that runs on forever, so don’t over do it. :)
Again, all Blogger Labels are case sensitive, so make sure you don’t use blogger instead of Blogger, for our example, because my Blogger Label started with an uppercase B.

Technorati Tags: Blogger,Label,Post

Read More

ADD FACEBOOK LIKE, TWEET, +1 AND SHARE BUTTON BELOW POST TITLE

Like, Tweet and Google +1 button are being mainly used for sharing on every blog. These are placed on every single page and post at the end of article or just below post title to attract the viewers attention. It increases your site's social rate by 40% and also the traffic. Your readers attraction on these buttons depends on how you present these buttons, where you place it and their style. So, to get the most shares, you should place it just below your blog post title.

In this plugin, there are four horizontally placed buttons. These are facebook like, twitter tweet, google plus one and addthis share button respectively.

Add Social Share Buttons Below Post Title

1. Go to Addthis.

2. Now on the left side, you will see many widgets. Select Facebook Like, Tweet and +1 buttons' widget as pointed in the image below.

3. Now copy the code in the filed at the right side of the widget you selected.

4. Now go to Blogger > Template > Edit HTML.

5. Check the box of expand widget template.

6. Search for <data:post.body/>.

7. Now place the copied code just before it and save your template.

Note: Your buttons will appear only on blogger post pages.

Read More

HOW TO ADD BLOGGER WEBSITE IN GOOGLE SEARCH - Site map

This is the first tutorial of my blog in which I have teach you how to add your Blogger website to Google search engine. There are many search engines like Yahoo, Bing etc. but the Google search engine is the best one of them. Google is used everywhere in the world and everybody knows about it. Majority of the people use Google search engine to search anything. To increase the popularity and visitors of your blog you must add your website to Google immediately. Every Blogger website has a sitemap. You just want to add the sitemaps of your website to Google. The sitemap contains all the links, posts and labels of your blog. Google Webmaster is a tool that adds your website to Google.  It is recommended that you have a Gmail account to add your website to google search engine. If you don't have then make it and if you have it, then follow the steps below to add your Blogger website to Google Search Engine.

1. Go to Google Webmasters and click "Sign in to webmaster tool".

2. Now a sign in box will appear. Sign in with your gmail account.

3. After you have signed in, You will get in your dashboard. Click the button of "Add a Site".

4. Now add your site url and click Continue.

5. Now click "Submit a Sitemap" on the right corner of your dashboard.

6. Now click "Add a sitemap" and a box will appear. Write    atom.xml   and press "Submit Sitemap" button.

7. Now add another sitemap of    feeds/posts/default . You can add this one with the same way you have added atom.xml.

8. Now add the last sitemap of    /atom.xml?redirect=false&amp;start-index=1&amp;max-results=100 .

If you have any problem then comment me below. 

Read More

What are Meta Tags & How to Add Meta Tags in Blogger/Blogspot

What are Meta Tags?

Meta Tags are tiny pieces of code and contain vital info of a web page like description & keywords. When a search engine like Google visits a blog, it checks for meta tags and uses the meta tags data to index the web page.

How to insert meta tags in Blogger?

There are many types of meta tags but the most important one is description meta tag. Just follow these steps to add that tag in your template.

1- Go to Layout then Edit HTML tab.

2- Find <head> tag and place the following code right after it:

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>
<meta content='PUT BLOG DESCRIPTION HERE' name='description'/>
</b:if>

3- Just replace PUT BLOG DESCRIPTION HERE with your blog description. Write precise and short sentences which should clearly convey the cliche of your blog.

4- Now, search engines will see the meta description tag only on the homepage.

How your site will be displayed in search results?

This is how your blog will look like in search results. Of course, a clear description will force the reader to visit your site.

Read More