Showing posts with label How To Blogspot. Show all posts
Showing posts with label How To Blogspot. Show all posts

Thursday, November 20, 2014

Automatically Install Meta Description On Blogspot

Automatically install meta description on Blogspot is probably the thing you need and the step is also easy. Since it's too easy therefore this article won't be lengthy. Actually if you want to be right, then setting a meta description manually is more recommended rather than automatically. Because you have a chance to put the keyphrases you believe will be typed by people on search engine box. But of course it's your choice.

Again, manually write meta description for an article you are about to publish is a lot better and if you choose that you made a right decision.

But if you prefer to set the meta descriptions automatically, then this article will guide you to accomplice it. Before we begin, make sure you have enable meta description on your Blogger by going to Settings -> Search Preferences and then write your home page blog meta descriptions on the top part and then save it.

Enable Meta Tag Description Blogger

How to automatically set Blogspot meta description

  1. Open the template of your Blogger.
  2. Now click Edit HTML.
  3. Find this tag </title> then place the following lines of codes after the tag.
    <meta expr:content='data:blog.pageName + &quot; dari blog &quot; + data:blog.title + &quot; dengan judul &quot; + data:blog.pageName' name='description'/>
  4. Then hit the Save Template.
  5. Done! Now you have set your meta tag description automatically and of course it's more SEO friendly.
You can now check your blog view source to see whether you have an automatic meta description in your Blogger blog.

Thursday, October 16, 2014

Parse Your HTML Code First Before Posting Tutorials

I would like to share a parse html services that are available in the internet, my purpose of sharing this information is for WordPress or Blogspot bloggers that LOVE to share tutorials and how to guide related posts which involving to post HTML and PHP codes.

But unfortunately not all them realize that the codes must firstly be parsed before they are published!

Parse Your HTML Code First Before Posting Tutorials
I know your intention for providing the tutorials to help others fellow bloggers online is sincere.

However, make sure you have set everything accordingly before presenting to your readers. Undefined codes you published is not going to give any help, let alone useful.

If your readers use your codes and past them to their themes or templates, then the sky will fall down on their heads. And you are the culprit of the turmoil.

For example do not use this ” but this ". Of course you don’t need to manually parse your code one by one, simply go to BlogCrowds and parse your codes there.

Or to be simpler just install Wp SyntaxHighlighter plugins if you are using a Wordpress based blog, In that post I have listed 5 most used plugins to syntax-highlighted codes (HTML, PHP, etc).

Wednesday, October 15, 2014

Change Blogspot Pages Navigation Into Numbers Navigation

In general, pages navigation in Blogspot presented with the text links wrapped with the words Older Posts and Newer Posts. Differs from Wordpress that can be changed into numbers so we can jump to the certain pages to find the older articles.

If you wish to change the blogger Older / Newer Posts navigation into Number, it's your lucky day because in this post you will be guided to do so. The point of having this numeric navigation installed is of course to make easier to navigate to your old posts.

As the result you will see the following numbers navigation like in the following picture.
Change Blogspot Pages Navigation Into Numbers Navigation

Steps to change Older / Newer Posts navigation into Number


Step 1. Firstly your need to go to Edit HTML of your Blogspot (Template -> Edit HTML)

Step 2. After you are in the Edit HTML, just find this code ]]></b:skin> once you found it then place this script right above that code.
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Note. The code you just placed above ]]></b:skin> is the CSS code to form the page numbers navigation so it will look just like in the above picture example.
Step 3. Now you need to find this tag </body> then place the following lines of codes right before it.
<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>
<!--Page Navigation Ends -->
Save your template, now open your Blogspot homepage to see the result.

Monday, October 6, 2014

Complete Ways To Clean Blogspot From Duplicate Content

Google hates duplication, thus as a blogger we better avoid the duplicate content that will effect nothing but negative to our blog's performance.

If your blog is detected to have duplicate contents then it will perform poorly in Google. As the result we don't get the amount traffic we are expecting. Nobody wants that.

Luckily in the modern blogger.com we are spoiled with many features to keep our blog clean from duplicate content.

If you have been blogging in Blogger.com for the last one year. Then you should already know that we can instruct Google not to index the certain area of our blog.

The area we should exclude from Google indexing is of course the archive. Archive contains the lists of articles we published for certain periods like months for example.

If you have a published article and it's indexed by Google its archive will be indexed too. The archive will show the same description as the article. Here is the example.

As you see the post A gives the similar description as the Archive A. Both of them will be detected as the duplicate description by Google, beside it's not good for our blog's performance in Google result page, it will also confuse our visitors.

Complete Ways To Clean Blogspot From Duplicate Content

So to deal with the said situation, you can do a little thing and you will be guided by this post to do so.
  1. Login to your Blogger.com account.
  2. Now to the Settings -> Search Preferences -> Custom robots header tags then set it to Yes.
  3. And then do exactly like shown in the below screenshot.
Complete Ways To Clean Blogspot From Duplicate Content
By setting Noindex to Archive and Search pages you have asked Google not to index all the archive of your blog. This way will save your blog from being detected containing the duplicate content.

And if you want to totally clean your blog from other duplication you can also add the following commands in your robots.txt file.
Disallow: /search
Disallow: /?m=1
Disallow: /?m=0
Disallow: /*?m=1
Disallow: /*?m=0
By adding the above commands on your robots.txt file, all your URL blog's mobile pages will not being indexed to stop generating duplicate contents.

After performing the methods here your blog will be free from duplication and you can expect to get the best performance possible in Google result page.

Any question? Don't be shy to reveal them here.

How To Create Site Map On Blogspot Blog

How to create Site Map on Blogger, may be you have not realized that Google really likes a blog or website with neat design and all the contents compiled smartly, to ease visitors when browsing each part or contents of the site.

There are many ways to ease our visitors or readers when interacting with our blogs, like installing Breadcrumbs or putting related post with thumbnails for blogspot.  And creating Site Map is one of the ways recommended by me.

A Site Map page is a place contains a list of all contents of our blogs, like postings classified based on categories. A category that the post is listed. Like a book, we usually find one page (or two) containing table of contents to navigate the readers.

That is what Site Map is for like a table of contents in a book, you can create it on your Blogspot blog easilly. And the result can be seen in this Site Map page.

If you want to create the same on your blog to make your Blogspot blog looks smarter and more reader friendly, then follow the steps below.

How to create Site Map page on Blogspot Blogger

Step 1. Login to your Blogger.com

Step 2. Now open a new page, remember not a post but a page. See the following picture.
Laman
Step 3. Now put the following code to the page and select Edit HTML.
Remember to create a page for the Site Map not a post, then place the code on the Edit HTML just like on the right side picture.
<script src="http://myjsdot.googlecode.com/files/sitemap.js">
</script>
<script src="http://yourname.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Change yourname.blogspot.com with your own URL name this can be applied on custom domain too. After that click the Publish button to publish your newly Site Map page.
Done, because you just followed the easiest instructions to create a Site Map page on Blogspot Blog.

How To Create Blogspot Related Posts Below Post

Related post can be regarded as a simple thing, but has the good effect for our blog. With related post, we can increase our blog's pageview. And can also helping our readers to find another interesting posts related to the one they are reading. To create a related post, you can follow the tutorials written on this.

So have your blog installed this wonderful feature? If it has not yet, then you get one! By simply follow the guide here.

How to create related posts in Blogspot Blog


Step 1. Now login to your Blogger.com.

Step 2. Now go to Edit HTML from Template.

Step 3. Now find the code then past the following code before the .
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>
Step 4. Now find this code Cari kode <data:post.body/> use CTRL+F to find it. Once you find the code then paste the following code right below this code <data:post.body/>.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Step 5. Step Now save the template.

The related post will appear like this right below after your post.
Note
► To display as many related posts as you like just change the number in blue color into the number of your wish.
► To change the icon beside the related post, you have to change the picture URL (in the red color) into the picture you like. You can create your own icon then upload it online to get the URL picture.
► To change the color or hover style (the hover color appears on the related post when pointed by the mouse) then you can modify the CSS code, like in the below.
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
If you prefer to have something more interesting, I think you should install related post with thumbnails for your Blog.

It's pretty easy, to create Blogspot related post, right?

3 Related Post With Thumbnails For Blogger And Wordpress

If you want to show related post with thumbnail on your Blogspot blog, Wordpress or any other CMS. Then let me recommend you the 3 most popular and used free services that can be used to display related post with thumbnail.

These free services are not only giving you related post with thumbnail but also with very eye-catching designs and looks, your visitors's eyes won't avoid to see them and hopefully click the related posts to increase the page views of your blog.

Well here are the names of the services I am talking about, they are

  • LinkWithin.
  • Outbrain.
  • Nrelate.
They are pretty popular among blogger that prefer to use the third-party services rather than widget for Blogspot or plugins for Wordpress.

You can use one of them that you think serve you most, each of these services have their own superiority and shortcoming. And to install them is pretty easy no need to have a coding skill, simply copy and paste!

And I will give a short review to help you decide which one of these related post with thumbnail services that serve you most and deserves to be installed. But I recommend you to test them by yourself to find out which of which is displaying the most relevance posts.

3 Most Used Related Posts For Blogger And Wordpress


With related posts you can expect that your blog's page view will increase because this feature will inform your readers about other posts related to the one they are reading. So here the related post with thumbnail services you can try.

1. LinkWithin.

Related Post With Thumbnails LinkWithin
This is the first and most used related post, to use the service you don't need to make any registration just fill the data of you and your blog, then hit the Get Widget button then you will be provided with javascript code that you can copy to be pasted on your Blogspot template or Wordpress.

Visit LinkWithin.

2. Outbrain.

Related Post With Thumbnails Outbrain
On contrary to the LinkWithin, in Outbran you need to firstly register to use the service, then enter your blog's data to get the javascript code you need. The good thing about Outbrain is; you will receive reports containing stats which page that gets the most views and its CTR.

Visit Outbrain.

3. Nrelate

Related Post With Thumbnails Nrelate
You can register or not register to use this service, but if you register then you will enjoy all the feature offered by Nrelate, the feature I am talking about is stats of your pages, etc.

Visit Nrelate.
Those are three free related posts with thumbnails for Blogger and Wordpress that I think the best. Or you prefer to have the same without thumbnail? No worry you can head to create Blogspot related post.

How To Tell Google Not To Index Specific Post In Blogspot

No Index Google
Every blogger that is expecting traffic from Google is of course wishing all their posts are entirely and routinely crawled and indexed by Google's bots.

However there is a time that we want a specific post to be excluded from being indexed by Google. So why do people want their post to be excluded from Google?

The reason can be vary for every person, as for your own is of course your own business. And my part is only informing what to do for Google to not indexing your specific post.

In Blogspot, just like in Wordpress we are given a very easy road to tell Google not to index our post. No need to use the old fashion which is adding a command in your robots.txt manually.

So how to tell Google not to index a specific post in Blogspot?


When you have finished writing a post, and before you hit the publish button, there is one thing you should do if the post should not be indexed by Google.

See the right sidebar of your screen, find the option called Custom Robots Tag. Once you found it then click the NoIndex. See the picture below to get a clearer picture.
How To Tell Google Not To Index Specific Post In Blogspot
Now you can publish the post. And Google will not index the post. Surely you have fully understood the consequence if you wish to make your post excluded from Google.

Any question about blogging in Blogspot? Then don't be shy to ask me.

How To Modify Blogger Popular Posts For Gallery Template

Today I will try to discuss a feature that commonly provided in the current Blogger template, which is Popular Post / Most Viewed Post. This feature is provided by default in Blogger, just go to your Layout are to find it by adding a new Widget / Gadget.

Popular Posts is a list containing the posts that are getting the most views among other posts published on your Blogspot blog, so they deserve to appear on Popular Post section. You can limit the number of posts according your own wish.

In Blogger, this feature appears interesting without modification. You will be given number of options like how many post should appear, thumbnail and descriptions / summary.

If your blog is gallery type blog, then you will likely to have thumbnail only than having summary + thumbnail. Here is the example of what I am talking about.

How To Modify Blogger Popular Posts For Gallery Template

And now I will try to modify the Popular Post widget to be matched if installed on the gallery content blog. The result of the modification is that the Popular Posts will display thumbnail with horizontal title. If you want to install the such Popular Posts just follow the guides below.

Step 1. Login to your Blogger.com.

Step 2. Now head to Template, then find this code ]]></b:skin>, and put the following code right above it.
.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}
.PopularPosts ul{padding:5px 0}
.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}
.PopularPosts .item-content{position:relative;float:left;margin:0}
.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}
.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}
.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}
.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}
The red code on the above CSS codes is referring to the length and width of the thumbnail, you can change it according your need or to match with the size of your sidebar.
Step 3.  Now go to layout >> add a gadget, select Popular Post.

Step 4. Now you will see the Popular Post setting box / window to configure its appearance. Like in the following picture.

Step 5. What you need to notice; just check on the thumbnail only, and leave the Snippet un-checked. As for the number of titles and posts is totally your choice. You decide by yourself how many title should be appearing.
Now we have to edit the Popular Post code to make it appear like in the picture above.
Step 6. After you done with the above step, now back to the Template, then find this code.
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2>
<data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul><b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop> </ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget></pre>
<b>Step 7</b>. After you found it, then replace the above code with the following code.
<pre class="brush: html; auto-links: false; html-script: false;"><b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2>
<data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul><b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'>
<data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop> </ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Done! You can now save your template.

How To Modify Blog Horizontal Menu Into Animation

Just like I promised in the previous post that I will talk about how to Blogspot tutorial, this time let's talk about modifying the horizontal navigation menu into animation navigation menu. And yes to those who like to have navigation menu in the animation atmosphere could follow the instructions written here.

An interesting blog's look and dynamic design will grab the visitors's attention. Beside that will satisfy ourselves for having a blog with all features and designs modified by us. From a simple blog's appearance into the look we want Today we will be animating our horizontal menu. Please see the following picture to get the picture of the topic I am talking now.


To those who like to modify their template will not find it hard to follow the instructions here. Because it's simply easy.

How to modify blog horizontal menu into animation


Step 1. Login to your Blogge.com.

Step 2. Inside Dashboard go into Template, then find this tag ]]></b:skin>, then paste the following code above the ]]></b:skin> tag.
.animatedtabs{ 
border-bottom: 1px solid gray; 
overflow: hidden; 
width: 100%; 
font-size: 14px; /*font of menu text*/ 
} 
.animatedtabs ul{ 
list-style-type: none; 
margin: 0; 
margin-left: 10px; /*offset of first tab relative to page left edge*/ 
padding: 0; 
} 
.animatedtabs li{ 
float: left; 
margin: 0; 
padding: 0; 
} 
.animatedtabs a{ 
float: left; 
position: relative; 
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */ 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-S8Y7Z1mXsl1CoxeyBZ-UXeNZ9pqNOIwxtK7TSRg5VGCh0KQ6gdWiBJwtXbr0Y64Y-BKnUIU7PHeYtul5-kMuIiOSGhowGBMh5qHJ3I10fCe0EVoe7nwe-0_5N3JllwkBvWYN3KiJKbs/s320/tab-blue-left.gif) no-repeat left top; 
margin: 0; 
margin-right: 3px; /*Spacing between each tab*/ 
padding: 0 0 0 9px; 
text-decoration: none; 
} 
.animatedtabs a span{ 
float: left; 
position: relative; 
display: block; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyu19lsTF_fdPfo_cN3VA6ONOmKxJWFO5xmnNciJ7f-oYeQ5nAjRzfDLgb1vk1xb17mgfi6EYzzpMuWOc-0k7hsAhbfIL5Nb8NsL5CnT6bPV5-abRIVsAlWUGvzoAeGsm6jRdp-UR4QII/s320/tab-blue-right.gif) no-repeat right top; 
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */ 
font-weight: bold; 
color: black; 
} 
/* Commented Backslash Hack hides rule from IE5-Mac \*/ 
.animatedtabs a span {float:none;} 
/* End IE5-Mac hack */ 
.animatedtabs .selected a{ 
background-position: 0 -125px; 
top: 0; 
} 
.animatedtabs .selected a span{ 
background-position: 100% -125px; 
color: black; 
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ 
top: 0; 
} 
.animatedtabs a:hover{ 
background-position: 0% -125px; 
top: 0; 
} 
.animatedtabs a:hover span{ 
background-position: 100% -125px; 
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */ 
top: 0; 
}
Step 3. Now add the following HTML code right / or below this tag <div id='header-wrapper'>. You can also add it into the Widget in the Layout area.
<div class='animatedtabs'>
<ul>
<li><a href='https://tilbit.blogspot.com/' title='Home'><span>Home</span></a></li>
<li><a href='https://tilbit.blogspot.com/search/label/blog' ><span>Tutorial Blog</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/SEO''><span>SEO</span></a></li>
<li><a href='https://yourblogname.com/search/label/wp'><span>Wordpress</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/aff'><span>Affiliate</span></a></li>
<li><a href='https://yourblogname.blogspot.com/search/label/hosting'><span>Hosting</span></a></li>
</ul>
</div>
Now save your template and done!

How To Show Threaded Comments (Reply Button) In Every Blogger Post

You can now show threaded comments in every post of your Blogspot here is how to do it.

Many blogger friends asked me how to show threaded comments in Blogspot just like in the Wordpress. Surely that question is interesting and I decided to post the tutorials to show threaded comments now so anyone who search the same question get the answer from this post.

The threaded comments will provide you a reply button on every comments blog. For example if your visitors dropped a comment asking about a specific question, then you can directly respond him by hitting the Reply button on his comments blog. Just like in the following picture.
Reply Button Threaded Comments Blogspot
And you will need to edit your template and doing several copy and paste to lines of codes to finally show the threaded comments in every Blogger's post.
Perhaps you need to see what kind of Blogger threaded comments with reply buttons I am talking now. Just see the following picture as the example. Or if you want to see the demo you can look on the comments area below this post. Let's do it.

How to show threaded comments (reply buttons) in Blogger Blogspot post.


Step 1. Login to Blogger.com.

Step 2. Now go to Template.

Step 3. Now find this tag ]]></b:skin> and paste the following code before it.
#comments h4 {font-size: 18px;font-weight: normal;margin: 20px 0} 
.cm_wrap {clear: both;margin-bottom: 10px;float: right;width: 100%} 
.cm_head {margin: 0;width:60px;float: left} 
.cm_avatar {margin: 0;vertical-align: middle;outline: 1px solid #fff;border: 1px solid #ddd;padding: 3px;background-image:  url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);background-position:center;background-repeat:no-repeat;width: 35px;height: 35px} 
.cm_avatar_a {margin: 0;vertical-align: middle;border: 1px solid #ddd;padding: 3px; 
background:#c6e5f7;background-position:center;background-repeat:no-repeat;width: 35px;height: 35px} 
.cm_reply {padding-top: 5px} 
.cm_reply a {display: inline-block;margin: 0;padding: 1px 6px;border: 1px solid #C4C4C4;border-top-color: #E4E4E4;border-left-color: #E4E4E4;color: #424242 !important;text-align: center;text-shadow: 0 -1px 0 white;text-decoration: none; 
-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;background: #EDEDED;background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );font: 11px/18px sans-serif} 
.cm_reply a:hover {text-decoration: none !important;;background: #ccc;;background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; 
} 
.cm_entry {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden} 
.cm_entry_a {padding: 16px;background: #FCFCFC;outline: 1px solid #fff;border: 1px solid #ddd;overflow: hidden} 
.cm_arrow {display: block;width: 9px;height: 18px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii-nLjZpbGGz-XYP9xwQ5B9sip-WlrR7gRp-cEba532WIaDeEC2LGTYvSM6jg9q_9jHJeinz1mIud3UgBFl8619LEayfYRxpox2l-j8MclshasXg3ZprgxFNzFqAD0zfBTZYSzskC_xzw/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px} 
.cm_info {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #F4F4F4;padding: 5px} 
.cm_info_a {margin-bottom: 5px;border: thin solid #E6E6E6;background-color: #dff0fa; 
padding: 5px} 
.cm_name {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: bold;float: left} 
.cm_name_a {font-size: 13px;color: #666666 !important;text-decoration:none;font-weight: 250;float: left} 
.cm_date {font-size: 10px;color: #999;text-decoration:none;float: right} 
.cm_date_a {font-size: 10px;color: #2D5E7B;text-decoration:none;float: right; 
padding-top:5px} 
.cm_entry p {padding: 5px;line-height:1.4em;clear: both;border: thin solid #E6E6E6;background-color: #F4F4F4;font-size: 13px;color: #333;word-wrap:break-word} 
.cm_entry_a p {padding: 5px;clear: both;border: thin solid #E6E6E6;background-color:  #dff0fa;font-size: 13px;color: #333;word-wrap:break-word} 
.cm_pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold} 
.cm_pagenavi a {color: #666;text-decoration: none;padding:10px} 
.cm_pagenavi a:hover {text-decoration: underline} 
.cm_pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0} 
.owner-Body p{margin-bottom: 5px;border: thin solid #E6E6E6;background:#EFF5FB;padding: 5px}
Step 4. Now try to find the code like this.
<b:includable id='comments' var='post'>
....................................
....................................
</b:includable>
Step 5. Now erase the above code then replace it with the followinig code.
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments &gt; 0'>
<b:if cond='data:post.numComments == 1'>
<span id='cm_total'>1</span> comment
<b:else/>
<span id='cm_total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>
<div id='cm_reply_css'/>
<div class='cm_pagenavi' id='cm_page'/>
<div id='cm_block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>
<div expr:id='data:comment.anchorName'>
<div class='cm_wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='cm_head'>
<div class='cm_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='cm_reply'>
<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=90113338580645433&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
</div>
</div>
<div class='cm_entry'>
<span class='cm_arrow'/>
<div class='cm_info'>
<div class='cm_name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='cm_date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p>
<data:comment.body/></p>
</div>
<b:else/>
<div class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/></p>
</b:if>
</div>
</b:if>

</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy'/>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
Note.
  • At the line 18 from the above code, you will see the Blogger-Id like this.
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=90113338580645433&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
  • Change the red numbers with your own Blogger Id. Where to find your Blogger-Id? It's simple, just point your eyes at your Browser address when you are at your Blogger Dashboard, Layout, etc. See the picture below.
  • After you found your Blogger-Id now copy it from your browser then replace the read numbers with your own Blogger-Id.
  • Now you can save your template.
Well done you just managed to show threaded comments or reply buttons in every blogger post. You can now start more interesting discussion with your readers.

How To Install Floating Buttons Of Facebook, Twitter, Google Plus On Blogspot Or Wordpress

The guides to install Facebook, Twitter and Google Plus floating buttons beside Blogspot / Wordpress post.

Google Plus, Twitter, Facebook and StumbleUpon are the social networking services that created to expose our stories, blogs and thoughts to the world and get new friends. With those services you can reach people far from your radar.

Anyway speaking about those services, as bloggers we can also utilize them to spread our stories to people who can't find our blog through search engines, like Google or Yahoo!

My point is if your blog / post shared by a Facebook user to its Facebook profile, then their friends see your shared post, if they are interested they can visit your blog then read the post. From that, we will get visitors.

So services like Google +, Facebook or Twitter can be sources of traffic that we can generate by simply adding their buttons.

If we provide our visitors / readers with those social network buttons, they will easily share our post to their friends.

And in this post I will share to you the how to guide to install floating social networking buttons (Facebook, Google+, Twitter, StumbleUpon) at the right side of your post. Just like this.

How To Add Floating Buttons Of Facebook, Twitter, Google Plus On Blogspot Or Wordpress

The reasons I prefer floating social media buttons style is more attractive and easily reach reader's attentions. As the result we can expect them to click one of the social media buttons.

Also learn on how to install a single Twitter count button style on Blogspot / Wordpress.

So how to install floating Facebook, Twitter, Google Plus, StumbleUpon buttons on Blogspot?

  • Now login to your blogger.com account.
  • Then go to layout.
  • Add the following codes to the HTML/Javascript (in add a gadget).
  • Save.
So how to add floating Facebook, Twitter, Google Plus, StumbleUpon buttons on Wordpress?

  • Dashboard > Appearance > Widgets > Available Widgets.
  • Drag Text widget to sidebar.
  • Then now you need to paste in the code.
  • Save.
Here is the floating buttons codes for Google+, Facebook, Twitter and StumbleUpon.
<style type="text/css">
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}
</style>
<div id='pageshare' title="Get this from Tilbit.Blogspot.com">
<div class='sbutton' id='like' style='margin-left:8px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='BloggerSentral' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div><!-- Do not remove this link -->
</div>
Now you will see the floating buttons of Facebook, Google Plus, Twitter and StumbleUpon on your Blogspot or Wordpress post.

Install Twitter Count Button On Blogspot / Wordpress Post

Today we would like to show you how to install Twitter count button on your Blogspot or Wordpress based blog. The reason we are doing that is to make our blog post shared on that very popular social network site.

Millions of people use Twitter now as their hangout place or to find a good content to read or following anyone they think deserve to be followed.

At the same, we can utilize Twitter to gain more traffic to our blog. Luckily it is easy to install Twitter count button within our posts -- whether below title or beneath blog's post.

And Twitter had officially provided number of looks and designs of their Twitter buttons. You can pick which one that you think the most fit with your blog's post.

How to install Twitter count button on Blogspot.

  • As usual login to your Blogger.com account.
  • Then to Template, and search for this tag.
    <data:post.body>
  • Now you can add the following code to above or beneath that tag.
    <!-- Twitter tweet button Start -->
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='text-align:left;padding:5px 5px 5px 0;'>
    <a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='BloggerSentral' data-related='' href='http://twitter.com/share'>Tweet</a>
    <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
    </div>
    </b:if>
    <!-- Twitter tweet button End -->
  • In the code above, look at the bolded vertical word, the button would look like this Twitter Count Button.
The vertical style button is the most-used I think.

So if you want to other design style, you can see from the reference below.

Twitter Count Button Types

For example if you choose horizontal rather than vertical look, then change the vertical on the code into horizontal.

How to install Twitter count button on Wordpress.

The process to install the button on Wordpress you can follow the instructions here.

  • You can login to your Wordpress blog.
  • To Appearance -> Editor.
  • Then click Single Post (single.php).
  • Add the code above to above or beneath this tag.
    <?php the_content(); ?>
The functions.

Once you have installed the Twitter button your Blogspot / Wordpress blog, the button will appear anywhere near your preferred post. So each time your reader found your post interesting they can simply hit the button and the hit will be counted.

If it is the first hit, then the interface will be like this.

Share WP / Blogspot Post To Twitter Site
Well done, all the steps neatly compiled. If you followed them correctly. You should now see the Twitter count button on your Wordpress or Blogspot post. Anyway if you prefer something more interesting, you can follow the instructions to add floating social media buttons on Blogspot / Wordpress too.

Install Pin It Pinterest Button On All Images In Blog Post

You can install Pin It button on every images of your Blogspot post to submit your stories / images to Pinterest easily.

Surely, as a blogger we usually post images within our post to help reader understand deeper on the issue we bring to. And as a blogger we also want more exposure over our post.

We can utilize so many services in the internet to make our posts found by people on the internet, one of them is social networking site like Pinterest.

Pinterest is a visual discovery tool that can be used by anyone connected to the internet to get ideas of their projects or interests.

See? Anyone who are connected to internet and trust on Pinterest to assist them finding things / ideas for their own bussiness are all a potential visitors for us.

For Blogger who wants more traffic, then Pinterest just like Facebook, Google+ or Twitter that can generate us an extra traffic.

The main difference that Pinterest has among any other mentioned services is "a picture sharing". Yes if your picture / images managed to interest your reader, the can easily share it -- or in the Pinterest's term pint it -- to Pinterest.

Once your image is pinned, your image with its post will appear on their Pinterest and of course their Pinterest's friends will see. If they are moved by your images they can visit your post and hit another pin.

Now let's install Pin It feature to all your posted images in Blogspot. As the result, each time your reader hover to your image, they will find a Pin button on. Just like this.

Pin It Button On Images
Hover the above image, you'll find a Pin button appear.

How to install Pin It button on images.


  • Login to your Blogger.com account.
  • To template.
  • Then add the following codes above </body>.
    <script>
    //<![CDATA[
    var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF6V52bA3Ul8V9Py6kcUtwfWzW8J90G1Lv6JLK9mdiP7pFZRlc6uRvqa4EXBWphCen07_QTpb_mugoDBsi77FtGf42gheXxKXKkFxOyBmb10zFvUOrahhSylYVnEt_4zDh7E5C0wvPpdZh/s1600/pinterestx1_72.png";
    var bs_pinButtonPos = "center";
    var bs_pinPrefix = "";
    var bs_pinSuffix = "";
    //]]>
    </script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
    <script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
    // This Pinterest Hover Button is brought to you by bloggersentral.com.
    // Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
    // Feel free to use and share, but please keep this notice intact.
    </script>
  • Save.
Now you should see the Pin it Pinterest button on all your images.