How And Why To Enable Meta/Search Description In Blogger

In this post I am going to provide a short and simple tutorial about enabling the search description for your whole blog and for every single post. This is a simple trick which can increase visits to your post by tonnes and more. Yes, you heard right ! Enabling meta and search description can increase your blogs appearance in search engines and this may bring lot of people to your blog.

What Is Meta Description:

In simple words meta or search description is a short introduction of a website or particular post which is text to support a listing in natural search and does influence click through rate and relevance.Following picture describes meta description:

Why Meta Description Is Important:

As I described above meta or search description is a bunch of targeted keywords which are searched by people on the search engines everyday. When a user search a keyword on internet which is in your websites or post's meta description your link will appear on search engines, which will help you to receive more and more targeted visitors.

You May Also Like:

Get High Quality Backlinks To  Boost Traffic For Free

How To Enable Meta Description On Blogger Blog - The Steps:

1) Log in to your Blogger account and go to settings:-

2) Under settings go to Search Preferences and you will find Meta Tags just enable and add your desired keywords there:-

3) Save the meta description.

4) Now create a new post and you will find a new tab added on the right side of page as 'Search Description' ( See the screenshot below) :-

5) Here you can add the desired keywords for the every single post you publish on your blog.

6) Click Done and publish the post, that's it..!

Final Words:

Hope you liked this post. If you are a good blogger and know the value of keywords, this post will definitely help you to increase the visitors to your blog but if you choose bad keywords then it might decrease the appearance on search engines. If you face any problems feel free to comment below. Good Day :)

By: Unknown On 03:39

Continue Reading

Create Social Content Locker (Share To Unlock) In Blogger

In today's post I am going to share a tricky trick that will help blogger users to hide their content and it will be only visible after a user shares that content. Yes, I know you are shocked but it is possible. This is very simple trick and requires just nothing except some straightforward easy scripts. Let us talk about look, features and uses first. When you add this to specific post for particular content or the download links it will look like following and when visitor shares to unlock it will disappear and will be replaced with the hidden content.

Features:

1) A very simple but attractive look.

2) Easy to access and no confusion for a visitor.

3) Twitter, Facebook and Google Plus buttons added.

4) You can add more buttons means easy to customize.

5) It will help you to increase your social enhancement.

Uses:

1) The main use of this plugin is to hide any type of content in your post.

2) Most of bloggers use it to lock the download links.

3) To increase social appearance in targeted users as content will be shared by a person who works in the same field.

How To Install Social Content Locker:

1) Log in to blogger and go to the template.

2) Edit HTML>> press CTRL+F to search the following code:

</head>

3) Above </head>  paste the following script:

<link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/>

4) Save the template now.

How To Hide Content With Social  Content Locker:

Follow these steps to lock the particular content in a post.

1) Go to Blogger and create a new post.

2) Select HTML tab in the post editor and paste the following code:

<article id="default-usage">
<div class="to-lock" style="display: none;">
       
<!--Hidden Content Starts (You can Use HTML BELOW)-->

<div style="text-align: center; margin-bottom: 20px;">
<img src="Add_Hidden_Image_Here" alt="" style="margin: auto;" />
</div>
<div style="text-align: justify">
Add Your Hidden Text Here
</div>
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</article>
</div><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script>
 
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Share it To Unlock This Content",
message: "Yes, this is Social Locker. Just try it, click on one of buttons."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://twitter.com/TricksDroid",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "http://www.facebook.com/TricksDroid",
appId: "408184445628791"
},
google: {
url: "http://plus.google.com/+TricksDroidPage"
}
});
});;;;
       
</script>

Customization: 

For Facebook: Replace http://www.facebook.com/TricksDroid with your Facebook Page.

For Twitter: Replace http://www.twitter.com/TricksDroid with your Website's URL or etc. 

For Google +: Replace http://plus.google.com/+TricksDroidPage with the URL of your website or post.

Replace 408184445628791 with your Facebook app id.

Replace "Add_Hidden_Image_Here" with the Image that you want to Hide.

Replace "Add Your Hidden Text Here" With the text that you want to hide from users.

3) Publish your post now. That's it :) :)

Final Words:

You have successfully locked the content you want very easily. But here is a free advice from me that do not lock the content from the every post you publish because this may bring adverse effects and disadvantages like you can loose your daily visitors. Hope you enjoyed the post and will help you to increase your social appearance. I have not locked this post because I know you will share it without any force from me :p Thanks for sharing. Keep visiting, Good Day :)

By: Unknown On 22:14

Continue Reading

Add Round Shaped Social Sharing Buttons Below Blog Posts In Blogger

Hello Everyone, posting after a long time due to exams. So today I am sharing a simple blogger widget which will allow visitors to share the blog post on social networks with their friends. This can be very useful plugin which can bring tons of visitors to your blog.Before turning towards the actual guide let us review design and features of this widget. The widget looks like the screenshot below :

Features:

1) All major sharing buttons such as Facebook,Twitter,Google Plus, Pinterest, StumbleUpon, Digg, LinkedIn etc.

2) You can add more buttons by editing the script.

3) Round Shape, which looks more attractive.

4) Hover effect : When the pointer of mouse is located on the button, it becomes dark and other whole page goes faint which brings more and more attraction.

5) Well designed and best looking.

You May Also Like: Round Sidebar Social Network Widget
                                     Highlight Author Comments With Stylish Label 

How To Install - The Steps:

1) Log in to your blogger account.

2) Go to template and edit HTML.

3) Click on box to activate it and press CTRL+F and search following code:

]]></b:skin>

4) Paste following code above ]]></b:skin> 

/*..Css3 round shape Social Sharing Widgets by tricksdroid.com..*/ul.social_btrix {list-style:none;display:inline-block;margin:15px auto;}ul.social_btrix li {display:inline;float:left;background-repeat:no-repeat;}ul.social_btrix li a {display:block;width:50px;height:50px;padding-right:10px;position:relative;text-decoration:none;}ul.social_btrix li a strong {font-weight:400;position:absolute;left:20px;top:-1px;color:#fff;z-index:9999;text-shadow:1px 1px 0 rgba(0,0,0,0.75);background-color:rgba(0,0,0,0.7);-moz-border-radius:3px;-moz-box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);border-radius:3px;box-shadow:0 0 5px rgba(0,0,0,0.5);padding:3px;}ul.social_btrix li.abfacebook {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ1NRcppaAI2eiGuyd0e11L2T5rZFfoBoPZIH7Ly-wWm79HLisZnyRzirMVAfhJm15UgOG3ONyuBzIUuyz7w6EAEuykOaGoO8FUcO0wL2EQYzqDkZoYAbe_MWbZnTr-aKtG-0lb47OS4t9/s1600/btrix-facebook-icon.png);}ul.social_btrix li.abtwitter {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1aqFyF8bnHR829DRQ2vMwAFFSlMkr5p3TFWFJ01VIlTFaEM067VqJVmYzcA6VSmmopARliFYi4O8Jzx6s18NN_dzvmZP1EdvKtjJ4y3giImMp_RF5UgI0r9S9v-owic8l0jHQPgftyGY/s1600/btrix-twitter-icon.png);}ul.social_btrix li.abgoogleplus {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip8TSXAob308ikyviurtR7ug0Szy2qX0Lhf44_Lf7Qeaym_g4Bz0hNG7DfyOW_zHPtPXc3uvpFXWdvFqZIKFoHByWpQuVyfi0txyJGtovLNllCEZM9PSnFo36VJ9rjv8kUu4KI9cIFXq9P/s1600/btrix-google-icon.png);}ul li.abpinterest {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggSmU6lMwv0iE6QRJbfhhGoUob8eI0f3zl5ru-_I8bScVReyk1St22njB9VNMJ6rG2Z5tu2exL6B2TS5VlJGKEwBoyVi09nsRGYPWYR5DsecESBdx4xIYaNPLb1LeAigprw_J3L0plWDnH/s1600/btrix-Pinterest-icon.png);}ul.social_btrix li.abstumbleupon {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswE4BLxRrd3c-EHVRJnxzRI5TP3zK-1SbYc2-rv-S6Hjy67671Ui2yf0dEfzEDsQczvjrmszT1mKfZnwML2QnDHJXFq46DeH8VMc1SDJ-fvRgZ_bSlABDnLxnswf0e5HAPBqksode0SNG/s1600/btrix-StumbleUpon-icon.png);}ul.social_btrix li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7JjOXmYlQoiOZ4ISPEk5LfmzM4dbSmG3Rg1B-S0ymUVW2tqvK3O9Nx_FmwmsBA8F5zCk-RqTjm0KIuA97s4fz06PGoa8x2IYzol45R-sCMMg83-qneXZzts0F3LKzzvSrIyWsBtRKzMCG/s1600/btrix-Digg-icon.png);}ul.social_btrix li.ablinkedin {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdbvB1xSruCNg1uvp9UcC5c3qDv2p85sY-MZuEbcCS-Aj0yyNQ1WGKjORZWhMW2EJq6nbDtvyWI9-SJKLdvl-gP1LImClYNIR415XMVspxJ_O58YjxPXPl8tR1BEbz6HNgm1N73HGo-qr7/s1600/btrix-Linkedin-icon.png);}#animation_btrix:hover li {opacity:0.2;}#animation_btrix li {-webkit-transition-property:opacity;-webkit-transition-duration:500ms;-moz-transition-property:opacity;-moz-transition-duration:500ms;}#animation_btrix li a strong {opacity:0;-webkit-transition-property:opacity, top;-webkit-transition-duration:300ms;-moz-transition-property:opacity, top;-moz-transition-duration:300ms;}#animation_btrix li:hover {opacity:1;}#animation_btrix li:hover a strong {opacity:1;top:-10px;}

5)  Now search the following tag

<data:post.body/>

6) Paste following code above <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div style='font-size: 22px;'><b>Share this article with your friends.</b></div>    <ul class='social_btrix' id='animation_btrix'>    <li class='abfacebook'>    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>    </li>    <li class='abtwitter'>    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>    </li>    <li class='abgoogleplus'><a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>    </li>    <li class='abpinterest'><a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>    </li>    <li class='abstumbleupon'>    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>    </li>    <li class='abdig'>      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>    </li>    <li class='ablinkedin'>    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>    </li>    </ul></b:if>

7) Save the template now and you are done :)

NOTE: You may find more than one <data:post.body/> in the template, so if one does not work for you please try with another one and it will solve the problem.

Final Words:

This was the perfect social share button plugin for blogger I have ever seen. Hope you also likes it and I know if you liked it you will definitely share it :p so that this post will also help others.You will notice increase in the visitors to your site from social networks due to this widget in some days. If any problem persists you can feel free to comment below.Happy Blogging, Good Day :) :)

By: Unknown On 09:47

Continue Reading

Simple Recent Posts Widget For Blogger

Today I am writing a short and simple guide about adding Recent Posts widget to your bloggers blog. This is a simple but very powerful widget which should be installed by every blogger on their blogs. You can keep your visitors engaged with this plugin. I think most of the visitors visit the blog through search engines and leave without having look on other awesome posts you made on your blog. So if you add widgets like recent posts, related posts you may increase their attraction towards your blog and make them a daily reader. Before turning towards the actual steps let us take a look on the features.

Features:

1) A simple but attractive design.

2) With and without thumbnails.

3) With and without snippet.

4) Very simple to add on any blog.

Steps To Add This Widget:

1) Log in to blogger and go to layout.

2) Now click add gadget and select HTML/Javascript.

3) Just copy and paste following script in it.

<style type='text/css'>
img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:left;margin:10px;}
.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}
.recent_posts_with_thumbs a {text-decoration:none;}
.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script>
<script style='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
<hr/><small><a style='margin-left:10px;align:right;' href='http://tricksdroid.com' target='_blank'>Recent Posts Widget</a></small>

4) Custumization:

• Change 5 to number of posts you want to show.
• Change true to false to deactivate features.
• Change 100 to number of words you want to show in summary.

5) Save the gadget now.

6) Fix the position of gadget and save arrangement. You are done..!

Final Words:

This was a tutorial which describes how to add Recent Posts widget to your bloggers blog. Hope this worked for you and you liked it. If you face any problem while adding this widget you can leave a comment below. Keep visiting..Happy Blogging..!

By: Unknown On 00:22

Continue Reading

Perfect Social Networks Follow Widget For Blogger

In this post I am going to share a beautiful and well designed Social Networks Follow Widget for bloggers blog. Its a simple but perfect plugin every blog must have so that to increase number of social fans and flow tons of visitors to your blog. This script is very easy to add and will require a very little space. So let us turn towards the tutorial.

Before turning towards actual guide let us know some features of this widget.

Features:

1) The widget has a attractive look, same like given in above image.

2) When mouse arrow moves on it, the images start rotating.

3) Easy to install on any blog.

4) Contains top social networks with their attractive logos.

Steps To Add Social Follow Widget:

1) Go To Blogger >> Select Your Blog >> Layout

2) Click on add a gadget where you want to add this widget.

3) From the list of gadgets select HTML/Javascript.

4) Now paste the following script in it.

<style>
#wc-rotico
{
background:#ffffff;
border:1px solid #dcdcdc;
padding:10px;
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}
#wc-rotico img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#wc-rotico img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div id="wc-rotico">
<a href='http://www.facebook.com/TricksDroid' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-FLrQQv4zXYY/Uh3H5HMmtLI/AAAAAAAACSo/CNjUCyfZY9E/s1600/Facebook.png" /></a>
<td valign="top" width="33"><a href='https://twitter.com/TricksDroid' target='_blank'  rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-zsElLEeWt_s/Uh3H7UcozEI/AAAAAAAACTE/wuU-BI1CZAc/s1600/Twitter.png" /></a>
<a href='http://feeds.feedburner.com/TricksDroid' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-i8XfPimO5lo/Uh3H7NLikpI/AAAAAAAACTA/b81bQXaDtVM/s1600/RSS.png" /></a>
<a href='https://plus.google.com/+TricksDroidpage' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-aBIFDEM9KR8/Uh3H5tRMZQI/AAAAAAAACS0/z6u6L8WXFgY/s1600/Google+plus.png" /></a>
<a href="http://www.linkedin.com/TricksDroid" target='_blank' rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-YFcScg8c5M8/Uh3H5QygjhI/AAAAAAAACSs/vvGO9oPWwZs/s1600/LinkedIn.png" /></a>
</td></div>

5) Now change usernames in Green color with your usernames.

6) Save the widget now and you are done.

Final Words:

Now you have successfully added this beautiful social network follow widget. Hope it will help you to increase social  appearance of your blog and you will like it. If you have any queries regarding this article you can feel free to leave a comment below. Good Day And Happy Blogging..!

By: Unknown On 07:13

Continue Reading

How To Create Notification Bar In Blogger

In this post I am going to share some scripts which will help the blogger users to add a notification bar in their blog. You may have seen this type of notification bars on many blogs so you are willing to add one for your blog and reading this post. There are many benefits of adding this widget to the blog and I am also going to explain them. It is easy to add and you will just need to install some scripts developed by MBT. Let us know something about the notification bar before turning towards the steps.

What Is The Notification Bar ?

Many of our readers are new to blogger and they are eager to know many things about this. So for those who are newbies and don't know what is the notification bar and what it is used for ?

So I think that you may have seen on many top blogs this type of widget. This box is used to notify the readers something you want to tell and share with them. This can also be used for giving introduction about your blog with little description or you can also introduce the author with his biography so that user can follow and know him. Now let us turn towards the actual procedure to add this widget to your blog.

How Can I Add This To Blogger ? The Steps:

This ia a most simple and easy tutorial about adding this plugin to blog, you just need to follow the steps given below, so let us start now:

1) Go to Blogger >> Template >> Backup Template

2) Now click on edit HTML and click on the script box to activate it.

3) Now press CTRL+F and search for <head>

4) Just paste following code above <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><!--Blogger Notification Bar --><script language='JavaScript'>//<![CDATA[var _0x519b=["\x6A\x51\x75\x65\x72\x79","\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x6E","\x74\x6F\x70","\x6C\x69\x6E\x65\x61\x72","\x65\x78\x74\x65\x6E\x64","\x65\x61\x73\x69\x6E\x67","\x73\x77\x69\x6E\x67","","\x74\x6F\x74\x61\x6C\x48\x65\x69\x67\x68\x74","\x68\x65\x69\x67\x68\x74","\x62\x6F\x72\x64\x65\x72\x53\x69\x7A\x65","\x64\x75\x72\x61\x74\x69\x6F\x6E","\x73\x68\x6F\x77\x41\x66\x74\x65\x72","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x66\x69\x6E\x64","\x2E\x6C\x69\x6E\x6B","\x23\x63\x6C\x6F\x73\x65\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x23\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x61\x6E\x69\x6D\x61\x74\x65","\x6F\x70\x65\x6E\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x61\x62\x73","\x61\x64\x64\x43\x6C\x61\x73\x73","\x6D\x61\x72\x67\x69\x6E\x54\x6F\x70","\x74\x6F\x70\x5F\x66\x69\x78\x65\x64","\x62\x6F\x74\x74\x6F\x6D","\x62\x6F\x74\x74\x6F\x6D\x5F\x66\x69\x78\x65\x64","\x70\x6F\x73\x69\x74\x69\x6F\x6E","\x64\x65\x74\x61\x63\x68","\x62\x6C\x6F\x63\x6B","\x63\x73\x73","\x62\x6F\x64\x79","\x70\x72\x65\x70\x65\x6E\x64\x54\x6F","\x6C\x65\x6E\x67\x74\x68","\x2E\x6D\x75\x6C\x74\x69\x4D\x65\x73\x73\x61\x67\x65\x73","\x69\x6E\x69\x74","\x6D\x75\x6C\x74\x69\x70\x6C\x65\x4D\x65\x73\x73\x61\x67\x65\x73","\x6B\x65\x65\x70\x48\x69\x64\x64\x65\x6E","\x63\x6C\x6F\x73\x65\x61\x62\x6C\x65","\x63\x6C\x69\x63\x6B","\x70\x6F\x73\x74","\x63\x6C\x69\x63\x6B\x3D\x74\x72\x75\x65","\x61\x6A\x61\x78","\x3C\x61\x20\x73\x74\x79\x6C\x65\x3D\x22\x6D\x61\x72\x67\x69\x6E\x2D\x74\x6F\x70\x3A\x35\x70\x78\x3B\x20\x6D\x61\x72\x67\x69\x6E\x2D\x6C\x65\x66\x74\x3A\x37\x70\x78\x3B\x20\x63\x6F\x6C\x6F\x72\x3A\x23\x36\x36\x36\x36\x36\x36\x3B\x20\x66\x6C\x6F\x61\x74\x3A\x6C\x65\x66\x74\x3B\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x54\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x22\x3E\x3C\x69\x6D\x67\x20\x73\x72\x63\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x34\x2E\x62\x70\x2E\x62\x6C\x6F\x67\x73\x70\x6F\x74\x2E\x63\x6F\x6D\x2F\x2D\x36\x44\x37\x6D\x2D\x69\x74\x57\x64\x6E\x6F\x2F\x55\x4E\x32\x77\x30\x54\x54\x33\x5A\x6C\x49\x2F\x41\x41\x41\x41\x41\x41\x41\x41\x49\x59\x63\x2F\x43\x4A\x78\x64\x73\x4C\x72\x57\x6B\x51\x67\x2F\x73\x34\x30\x30\x2F\x6D\x62\x74\x2E\x70\x6E\x67\x22\x2F\x3E\x3C\x2F\x61\x3E","\x70\x72\x65\x70\x65\x6E\x64","\x65\x61\x73\x65\x4F\x75\x74\x42\x6F\x75\x6E\x63\x65","\x68\x61\x73\x4F\x77\x6E\x50\x72\x6F\x70\x65\x72\x74\x79","\x23\x62\x6C\x6F\x67\x67\x65\x72\x6E\x6F\x74\x69\x66\x69\x63\x61\x74\x69\x6F\x6E\x57\x72\x61\x70","\x72\x65\x61\x64\x79"];;;(function (_0xd41ax1){_0xd41ax1[_0x519b[2]][_0x519b[1]]=function (_0xd41ax2){var _0xd41ax3={duration:500,position:_0x519b[3],closeable:true,showAfter:0,keepHidden:false,borderSize:3,height:40,easing:_0x519b[4]},_0xd41ax4=_0xd41ax1[_0x519b[5]]({},_0xd41ax3,_0xd41ax2);if(_0xd41ax4[_0x519b[6]]==_0x519b[7]){_0xd41ax4[_0x519b[6]]=_0x519b[8];} ;_0xd41ax4[_0x519b[9]]=parseInt(_0xd41ax4[_0x519b[10]],10)+parseInt(_0xd41ax4[_0x519b[11]],10);_0xd41ax4[_0x519b[12]]=parseInt(_0xd41ax4[_0x519b[12]],10);_0xd41ax4[_0x519b[13]]=parseInt(_0xd41ax4[_0x519b[13]],10)*1000;var _0xd41ax5=_0xd41ax1(this),_0xd41ax6=_0xd41ax5[_0x519b[15]](_0x519b[14]),_0xd41ax7=_0xd41ax6[_0x519b[15]](_0x519b[16]),_0xd41ax8=_0xd41ax6[_0x519b[15]](_0x519b[17]),_0xd41ax9=_0xd41ax5[_0x519b[15]](_0x519b[18]),_0xd41axa={},_0xd41axb=_0x519b[8],_0xd41axc={},_0xd41axd=_0x519b[8],_0xd41axe=function (){_0xd41axc[_0xd41axd]=_0xd41ax4[_0x519b[9]];_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),_0xd41ax4[_0x519b[6]]);_0xd41ax5[_0x519b[21]](_0x519b[20]);} ,_0xd41axf=function (){_0xd41axc[_0xd41axd]=-Math[_0x519b[22]](34-_0xd41ax4[_0x519b[10]]);_0xd41ax9[_0x519b[19]](_0xd41axc,(_0xd41ax4[_0x519b[12]]/2),function (){_0xd41ax10();} );} ,_0xd41ax10=function (){_0xd41axa[_0xd41axb]=0;_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],_0xd41ax4[_0x519b[6]],function (){_0xd41ax5[_0x519b[23]](_0x519b[20]);} );} ,_0xd41ax11=function (){_0xd41axa[_0xd41axb]=-_0xd41ax4[_0x519b[9]];_0xd41ax5[_0x519b[19]](_0xd41axa,_0xd41ax4[_0x519b[12]],function (){_0xd41axe();} );} ,_0xd41ax12=false;switch(_0xd41ax4[_0x519b[28]]){case _0x519b[3]:_0xd41axb=_0x519b[24];_0xd41axd=_0x519b[3];break ;;case _0x519b[25]:_0xd41axb=_0x519b[3];_0xd41axd=_0x519b[3];break ;;case _0x519b[27]:_0xd41axb=_0x519b[26];_0xd41axd=_0x519b[26];break ;;} ;_0xd41ax5[_0x519b[29]]();_0xd41ax5[_0x519b[33]](_0x519b[32])[_0x519b[31]]({display:_0x519b[30]});if(_0xd41ax6[_0x519b[15]](_0x519b[35])[_0x519b[34]]){bloggernotificationExtras[_0x519b[37]][_0x519b[36]]();} ;if(_0xd41ax12&&_0xd41ax4[_0x519b[38]]&&_0xd41ax4[_0x519b[39]]){setTimeout(function (){_0xd41axe();} ,_0xd41ax4[_0x519b[13]]);} else {setTimeout(function (){_0xd41ax10();} ,_0xd41ax4[_0x519b[13]]);} ;_0xd41ax8[_0x519b[40]](function (){_0xd41ax11();setCookie();} );_0xd41ax9[_0x519b[40]](function (){_0xd41axf();setCookie();} );_0xd41ax7[_0x519b[40]](function (){_0xd41ax1[_0x519b[43]]({type:_0x519b[41],data:_0x519b[42],success:function (_0xd41ax13){} });return true;} );} ;} )(window[_0x519b[0]]);jQuery(document)[_0x519b[49]](function (_0xd41ax1){_0xd41ax1(_0x519b[14])[_0x519b[45]](_0x519b[44]);if(!_0xd41ax1[_0x519b[6]][_0x519b[47]](_0x519b[46])){_0xd41ax1[_0x519b[5]](_0xd41ax1[_0x519b[6]],{easeOutBounce:function (_0xd41ax14,_0xd41ax15,_0xd41ax16,_0xd41ax17,_0xd41ax18){if((_0xd41ax15/=_0xd41ax18)<(1/2.75)){return _0xd41ax17*(7.5625*_0xd41ax15*_0xd41ax15)+_0xd41ax16;} else {if(_0xd41ax15<(2/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(1.5/2.75))*_0xd41ax15+0.75)+_0xd41ax16;} else {if(_0xd41ax15<(2.5/2.75)){return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.25/2.75))*_0xd41ax15+0.9375)+_0xd41ax16;} else {return _0xd41ax17*(7.5625*(_0xd41ax15-=(2.625/2.75))*_0xd41ax15+0.984375)+_0xd41ax16;} ;} ;} ;} });} ;_0xd41ax1(_0x519b[48])[_0x519b[1]]({position:_0x519b[3],showAfter:0,keepHidden:true,duration:300,closeable:true,height:40,borderSize:1,easing:_0x519b[7]});} );
//]]></script>

5) Now again search for the code ]]></b:skin>

/* ----Blogger Notification bar ----- */#bloggernotificationWrap{    display: none;    margin: 0;    padding: 0;    position: fixed;    margin-top: -41px;    z-index: 999999;    width: 100%;    height: 41px;}#bloggernotification {    width: 100%;    height: 28px;    margin: 0px;    padding-top: 7px;    text-align: center;    background: none repeat scroll #2E2F2E;    position: relative;    box-shadow:0px 1px 3px #666;    z-index: 9998;    text-decoration: none;    color: #cccccc;    font-family: arial,sans-serif;    font-size: 13px;    font-weight: bold;    text-shadow: 1px 1px 1px #000;    border-bottom:2px solid #fff;}
#bloggernotification a{    text-decoration: none;    color:#FFFC00;     font-family: arial,sans-serif;    font-size: 13px;    font-weight: bold;    text-shadow: 1px 1px 1px #000;    outline: none;}#bloggernotification a:hover{    text-decoration: underline;}#bloggernotificationWrap #closebloggernotification{    display: block;    position: absolute;    top: 0;    right: 23px;    height: 40px;    width: 21px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBaEodKKJb8G_QoeAs6bv0YNJfPdz_CQppLoevUrxbHpSy93O_slVdFy-ae-HYkXw50QYPUXIJFe89_fTyImQAM3QCvuU9p67u01XMu7UGaJf_jhXON9mmYyXKKbwL9b-8gyCzQEYoGOj/s400/light.png) no-repeat 0 center;    cursor: pointer;}#bloggernotificationWrap #closebloggernotification:hover{    background-position: -21px 50%;}#bloggernotificationWrap.bottomPosition #closebloggernotification{    background-position: right 50%;}#bloggernotificationWrap.bottomPosition #closebloggernotification:hover{    background-position: -42px 50%;}#bloggernotificationWrap #openbloggernotification{    display: block;    position: absolute;    top: -6px;    right: 15px;    padding: 0 7px;    background: #2E2F2E;    border-left: 3px solid #fff;    border-right: 3px solid #fff;    border-bottom: 3px solid #fff;    cursor: pointer;    z-index: 1;    -webkit-border-bottom-right-radius: 5px;    -webkit-border-bottom-left-radius: 5px;    -moz-border-radius-bottomright: 5px;    -moz-border-radius-bottomleft: 5px;    border-bottom-right-radius: 5px;    border-bottom-left-radius: 5px;       box-shadow:0px 1px 3px #666;}#bloggernotificationWrap #openbloggernotification span{    display: block;    width: 21px;    height: 34px;    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFBaEodKKJb8G_QoeAs6bv0YNJfPdz_CQppLoevUrxbHpSy93O_slVdFy-ae-HYkXw50QYPUXIJFe89_fTyImQAM3QCvuU9p67u01XMu7UGaJf_jhXON9mmYyXKKbwL9b-8gyCzQEYoGOj/s400/light.png) no-repeat right 50%;}

6)  Now search for the code <body>

7) Just paste the following code below <body>

<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'><div id='bloggernotification'>Write Your Notification Message Here<span id='closebloggernotification'/></div><span id='openbloggernotification' style='top: -6px;'><span/></span></div>
<br/><br/>

•  Change "Write Your Notification Message Here" with your message.

8) To add link in the message, you can use following code:

<a class='link' href='ADD-URL-HERE' target='_blank'>Link Text</a>

• Replace  ADD-URL-HERE with your link.
• Replace Link Text with the text to which you want to add a link.

9) Now save the template and you are done.

Final Words:

This was a tutorial about adding the notification bar in your blogger blog and I hope you liked that. If you have any problems with installation or working of this notification bar then feel free to comment below. Keep visiting for more such updates. Good Day And Happy Blogging..!

By: Unknown On 08:27

Continue Reading

How To Add Next And Previous Numbered Page Navigation In Blogger

Hello Bloggers, In the last post we discussed that how we can add author name; publishing date; labels and other such elements below the title of the post and today I am back with another plugin for a bloggers blog. In this post I am providing a tutorial about adding the numbered page navigation or Pagination in blogger. In the default blogger themes they have provided a simple next and previous button pagination which looks little boring. The first challenge for the new bloggers is making a attractive design for their blog so that readers will get attracted to it. So this type of navigation may help you for making your blog a bit more attractive.

Image Source:Google Image Search

How Will This Pagination Look Like:

You are now interested to add this element to your blog but have a question in mind, How will this numbered pagination look like ? The answer is you may have seen this type of pagination on the top blogs because almost every top blogger use it. If you need a example then you can see the homepage of tricksdroid as well. We also use it here.

Guide To Add Next And Previous Numbered Pagination:

1) Go to blogger >> Template >> Backup your template.

2) Now click on edit HTML and click on the box to activate it.

3) Press CTRL+F and search for following code.

</body>

4) Just above </body> paste the following code.

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'>  /*<![CDATA[*/    var postperpage=5;    var numshowpage=2;    var upPageWord ='« Previous Page';    var downPageWord ='Next Page »';    var urlactivepage=location.href;    var home_page="/";  /*]]>*/</script><script type='text/javascript'>  /*<![CDATA[*/    var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}  /*]]>*/</script></b:if></b:if>

5)  Now search for following code.

]]></b:skin>

6) Following are the codes with different colors. Select the one you like and paste above ]]></b:skin>.

• Red Style

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid #862B20;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}.showpageOf{display:none!important}@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

• Blue Style

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid #246EA0;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}.showpageOf{display:none!important}@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')} 

• Green Style

#blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid #208C4D;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}.showpageOf{display:none!important}@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

• Dark Style

 #blog-pager{float:left;font-size:16px;line-height:normal;margin:0 20px;padding:2em 0}.showpageNum a,.showpage a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid #202D3A;color:#FFF;font-size:15px;font-family:open sans;font-weight:700;margin-left:10px;border-radius:5px 5px 5px 5px;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px 5px;transition:background 400ms;-webkit-transition:background 400ms;-moz-transition:background 400ms;-o-transition:background 400ms;padding:10px 20px}.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}.showpageOf{display:none!important}@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff')}

7) Now just save the template and check your pagination.

Final Words: 

This was a tutorial about adding the next and previous numbered pagination for a bloggers blog. Hope this will work for you. If any problem persist feel free to leave a comment below. Give your suggestions if you have any, keep visiting the blog. Good day and happy blogging..!

By: Unknown On 03:56

Continue Reading

Display Post Author,Date,Labels And Number Of Comments Below Post Title On Blogger

Today I am going to share a nice tutorial about adding some elements below the post title of your blog. The elements which will be shown after adding this widget will be name of author, publishing date, labels you have added to the post and number of comments on your post. This is the simplest guide I found on internet to add all these things at one place through some simple scripts.

Image Source: Google Image Search

Features:

1) Shows all elements in one line and requires very little space.

2) A simple but attractive design.

3) Shows number comments on the post and if there are no comments it will appear as "Be the first to comment!"

How To Add This Widget - The Steps :

To add this attractive widget to your blogger blog, just follow the steps given below:

1) Go to blogger and select your blog.

2) Now go to the template tab.

3) Click on Edit HTML.

4) Now the script box will appear, click on it to activate it.

5) Press CTRL+F and search for following code:

<div class='post-header-line-1'>

6)  If you can not find the above one then search for the following code:

<div class='post-header'>

7) Just paste the following code before the above one. 

<div style="margin: 5px 0; border-bottom: 1px solid #F2F2F2;padding: 5px;"><font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJE0n0kuhs1hu7_dKpklufxf6eD3FpklDp0xeKb-dDFDVZPc1vuS4bYQsl5RfZt9T-CyIcDH51GpAme_e0MZU74wqtfMZRp_uDLKjyK9cX0ahNaCNUVmZtQpljLKAelpYujqs6cynzMxs/s1600/author.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHcNVdqWxRYHz2mNReyUZkWw7zhe4kMULFe-d1oHGJcFq3eRuQlphZGoLEuXDtFrLNIZRjpbjt0YC31rR5iDuExedV6ib2WtUmXatfNe_HmTw4La-IMRrfJxrd-9laMlWXNxJt_xcmsvWQ/s1600/clock.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5XL2u0btsW7rwDr5Ful1FRe5ILw-SlU1o458YRmPBBGI3TuiIARKDlVqJ1AE6e1KmuvT8bnvbx4PK2iRbi-gkkRdTM_GhPUk96v4J1B2CVExilMYL-ttS2ylcIoPETSN7gLbB97CcQ2B1/s1600/tag.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if></b:loop></b:if></font>    <span class='post-comment-link' style='Float:right;'>        <b:if cond='data:blog.pageType != &quot;item&quot;'>          <b:if cond='data:post.allowComments'>            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVCkf366Fhz1AvOcTf7JYyNHjPFOdP7Voq6TQARJiEsJkbTiUhr-nRNXeE4Ufe9Dd4vkRZ8s-zPvas6yeVzl_CB7-9nuK4o8RxRRS2j57PkiW3B0ceObpQTXuvx3n6c9MsG6dlverv93wy/s1600/comment.png) no-repeat;padding-left:20px;font-size:11px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>          </b:if>        </b:if>    </span></div>

NOTE: 

If you wish to change the icons, then replace the image links from the script.

•  Green link is for Author icon.
•  Brown link is for Clock icon.
•  Violet link is for Labels icon.
•  Blue link is for comment bubble.

8) Save the template now and you are done.

Final Words:

This was a guide to add author name,number of comments,labels and date of publishing.You have successfully added this gadget to your bloggers blog now. You may want to add a short but sweet author introduction below the post on your blog, if you want so then here is guide- Add Attractive Author Box Widget Below Post. I am sure that you will like that too. If you have any problems related to this post then you can feel free to comment below. Eager  to see you comments, happy blogging..!

By: Unknown On 07:04

Continue Reading