Add Google Official Contact Form Widget to Blogger?

Contact Form Widget is used to send mails to the Blog owner from the visitors/users. Do your blog looks anything missing?. I think a Contact Form is an important widget that was missed for long time. Are you using Contact From in your blog? If so, it will not Google's Official contact Form. That may be from other hosted providers. Here Google released its brand new Contact Form Widget for Blogger Users. It helps to send e-mails to blog owner without Sign In to Google or any other account. Anyone can send mails by providing a valid e-mail address and Message. This Contact Form can add to any blogger blogs that hosted in Google's Server.


 It have three Fields- Name,e-mail and Message and a Send Button. E-mail and Message field are mandatory. It also have e-mail validation, checks whether the e-mail address provided is valid or not. And a notice or message will appear to show the status of sending e-mail, Shows success message it it delivered to user,otherwise shows error message.  There is no CAPTCHA (Used to prevent Spam) in the Contact Form, but Google implemented its effective Spam detection mechanisms. The problem exist with the Contact Form is it can only use as Widget (in Sidebar or  Footer or Under Posts). In many popular websites/blogs they use a page for Contact Form. By default this Contact Form can used as widget, we introduce a technique to use Google Official contact Form on Blogger Static Pages

Advantages

•     Send e-mails to Blog owner without Sign In to any Accounts.
•     E-mail validation is provided.
•     Spam detection Mechanism.
•     Show status message of sending.

 

Disadvantages

• Use only as Widget (in Sidebar/ in Footer)
• No CAPTCHA

How to Add:


   Step 1:  Sign In to Blogger Dashboard

   Step 2:  Select Layout -> Click on Add a Gadget

   Step 3:  Select More Gadgets in Left Side and Select Contact Form            

   Step 4:Give the Title and Click Save

 

 You have done please check your blog.

When visitor drop a message it goes straight to your inbox. One copy of the message will send to each Admin.

Awsome Multi-Colored Popular Posts Widget for Blogger powered CSS3

Popular Posts Widget is a Widget providing by Blogger and we can add it to our Blog. This Widget displays the Most Viewed posts of your blog that maybe of month or in week or All the time. You can select how Popular posts are to be displayed. By default it shows an image(if the post has any) and Title of Post followed by the content of post wrapped by 20-25 words. This article is a tutorial to Style that Popular posts Widget to an Awesome Multi-Colored Popular posts Widget.





Click on the Link to see the Preview of this Post => See


How to do :

Step 1: Sign in to your Blogger Account and Add Popular Post Widget to Blogger.

            Go to  Layout ->  Select  "Add a Gadget" and take  Popular Posts Widget from the Widget List.

Step 2: Go to Template ->  Edit HTML, Find ]]></b:skin> by pressing Ctrl+F

Step 3: Copy the following code and Paste it Just above it

<!-- Popular posts multi colored UI theme -->
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:97%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored UI theme -->

Step 4: Click on Preview Template.

Step 5: Save The Template and you are Done.

Making A Gadget Visible Only To The Blog Administator

Now the post title says it all. There are gadgets that sometimes we want to be visible only to us and not to other people.

The procedure is simple, we just have to add two lines to our gadget that we want to hide.


How to do:

Step 1: Go to Template > Edit HTML and then search for the gadget's code we want to hide by clicking  Ctrl + F.

As an example in a HTML/JavaScript gadget,we will see a code like this:

<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
<span class='item-control blog-admin'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</span>
</b:includable>
</b:widget>

 Now all you have to do is add the parts in RED and ready to go. If you close the session go to your blog you'll not be able to view the gadget that you have hidden, but as soon as you sign in you will see that it is visible to you.

Not all gadgets have the same structure like in this example, but it will be easier to guide you, just place the first code in the red just after <b:includable id='main'>

And the second red code just before  </b:includable>

Note: To look inside the widget's code, click on the sideways arrow next to the widget's id.

And with that the gadget will be hidden for readers except you. 

Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post title but also post excerpts or snippets and it's easy to customize/apply different style on it. To style it into your own design, you just have to modify the CSS style.


What are the facilities:

       

         1.display post title only

         2.change the number of posts
         3.change the number of characters of the post snippet/excerpt.
         4.show the post dates

How to do it:

Step 1: Log in to your Blogger account and go to Dashboard, click on Layout and then click on Add a Gadget .

Step 2: A pop-up window will open, scroll down and choose HTML/JavaScript from there.

Step 3: Select & Copy the code from one of the options below and paste it into new HTML/JavaScript.

option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQaxQ61ht-nXDIvdVbhJm8cBV18kJvWGjGItd4ljW_SHiZq_y3vAu_zUFDV9bJrp9Dy03fTrgRFGpzCUGhbjEsEZcfnkpSW1F6FcLViYBRph5X2ScrmPLVG1jul4s8lz2v3zrqM5PrqYY/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

  


Option 2: Recent Posts Widget Showing Post Titles Only 

 <div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNQaxQ61ht-nXDIvdVbhJm8cBV18kJvWGjGItd4ljW_SHiZq_y3vAu_zUFDV9bJrp9Dy03fTrgRFGpzCUGhbjEsEZcfnkpSW1F6FcLViYBRph5X2ScrmPLVG1jul4s8lz2v3zrqM5PrqYY/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style> 

Step 4: 

        1.Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
        2.Change false to true if you want the posts dates to appear. 
        3.Change 100 (option 1) if you want more characters to be displayed.
        4.To change the color and front size of the links, modify the values in blue (links) and violet (front size)
        5.To change the style of the posts summary, modify the values in green (color) and orange (front size) 
        6.Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with address link in this example: 

http://www.your-site.com/feeds/posts/default....

Step 5: Save your widget and you are ready now.

How to put Facebook like box in your blog/website with Video Help

What is Facebook Like Box?

Facebook like box is a social plugin which allows you to put your Facebook page link to your blog/website. So that if people click like button then he/she will get updates from your page,if you write something on your page. Also the good thing is that the post and the link will also be shown in their Facebook Home page who have Liked your page.

How to do:

Step 1: First go to this Link. <= Click here

Step 2: Copy your Facebook page link inside the "Facebook Page URL" and click "Get Code".

Step 3: After clicking "Get Code", you will get a code, click on the "IFRAME" and copy the code.

Step 4: Now go to your blogger DashBoard and click on Layouts. Then click "Add Gadget".

Step 5: A pop up window will open, click 'Java/HTML'.

Step 6: Paste the code inside the box and click Save.

Now you are Done. Refresh your browser to see the result.


Video Help:

    

Google +1 Button and Badge Widget

About:

 Google +1 button allows you to connect people with you easily. They will get your notifications that you will update for them and also allows you to share stuff with the world.

How to do:

Step 1:  Go to your Blogger Dashboard and click Layout.

Step 2:  Click on 'Add Gadget' and a popup window will open, from there choose '+1 Button'. Click the Plus sign to add it to your blog.

Step 3: Customize of your widget how the button will look like.

Step 4: Now click Save and You will get your Widget.

Facebook POPUP Like Box

About:

Facebook POP UP Like Box pops up when 
 someone visits your blog. He/She have to click like 
 button for your Facebook Page or have to wait for 10 seconds. The good thing is that, with this gadget you can easily gain more Facebook Likes than Normal.










How to do it:

Step 1: Go to your Blogger Dashboard and click Layouts.

Step 2: Click 'Add Gadget' and a popup window will open. Choose HTML/JavaScript.

Step 3: Simply Copy and Paste the Code into the Box.

 <!-- Facebook POPUP LikeBox With Timer Code Start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#crackstrickpopup{background-color:#fff;position: fixed;top:50%;z-index:9999;display:none;padding:0px;left:50%;border:10px solid rgba(82, 82, 82, 0.7);-webkit-background-clip: padding-box; /* for Safari */background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */-webkit-border-radius:8px 8px 8px 8px;-moz-border-radius:8px 8px 8px 8px;border-radius:8px 8px 8px 8px;width:400px;height:360px;margin-left:-200px;margin-top:0px;overflow:hidden;}#crackstrickpopup span{font-size:20px !important;font-weight:bold !important;}#crackstrickpopup h1{background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifxIN9LRP3UtBTQKpcj-D_JbIR3Saot53V0cEuH4NFmftYf5HTOeBIjtUusB0TRle84M4B8eiD4L0lGfG0xV-ncn-DDWBrhclgldUBL-CuFnkgc3rgHnlKpY8RcICI6xLZmuCflIJ3qkI/s1600/aktechz-fb-lock.png) 98% no-repeat;border:1px solid #3b5998 !important;color:#FFFFFF !important;font-size:20px !important;font-weight:700 !important;padding:5px !important;margin:0 !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;overflow:hidden !important;}.crackstrickpopupdata{font-size:12px !important;font-weight:normal !important;height:265px !important;padding:1px !important;background:#fff !important;border-bottom:2px solid #ddd;overflow:hidden !important;}#crackstrickpopupfooter{text-align:left;background:#F2F2F2 !important;height:56px !important;padding:10px 10px 10px 10px !important;overflow:hidden !important;}#crackstrickpopupclose{float:right;background-color:#eee !important;border:1px solid #ccc !important;color:#111 !important;font-weight:bold !important;padding:5px 8px 5px 8px !important;text-decoration:none !important;display:inline-block !important;font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;outline:none !important;position:relative !important;font-size:18px !important;margin:1px !important;}#crackstrickpopupclose:active{top:1px;left:1px;}</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function crackstrickpopupfunc() {
var sec = 10
var timer = setInterval(function() {
$("#crackstrickpopupfooter span").text(sec--);
if (sec == 0) {
$("#crackstrickpopup").fadeOut("slow");
clearInterval(timer);
}
},1000);
var crackstrickpopupwindow = jQuery(window).height();
var crackstrickpopupdiv = jQuery("#crackstrickpopup").height();
var crackstrickpopuptop = jQuery(window).scrollTop()+50;
jQuery("#crackstrickpopup").css({"top":crackstrickpopuptop});}
jQuery(window).fadeIn(crackstrickpopupfunc).resize(crackstrickpopupfunc)
//alert(jQuery.cookie('sreqshown'));
//var crackstrickpopupww = jQuery(window).width();
//var crackstrickpopupwww = jQuery("#crackstrickpopup").width();
//var crackstrickpopupleft = (crackstrickpopupww-crackstrickpopupwww)/2;
var crackstrickpopupleft = 500;
//var crackstrickpopupwindow = jQuery(window).height();
//var crackstrickpopupdiv = jQuery("#crackstrickpopup").height();
//var crackstrickpopuptop = (jQuery(window).scrollTop()+crackstrickpopupwindow-crackstrickpopupdiv) / 2;
jQuery("#crackstrickpopup").animate({opacity: "1", left: "0" , left: crackstrickpopupleft}, 0).show();
jQuery("#crackstrickpopupclose").click(function() {
jQuery("#crackstrickpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="crackstrickpopup">
<h1>Join Us On Facebook</h1>
<div class="crackstrickpopupdata"><iframe src="http://facebook.com/plugins/likebox.php?href=YOUR FACEBOOK PAGE LINK;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe></div>
<div id="crackstrickpopupfooter">Please Wait <span>10</span> Seconds...!!!<a href="#" id="crackstrickpopupclose" onclick="return false;">Skip</a></div></div>
<!-- Facebook POPUP LikeBox With Timer Code End --> 
         
Put your Facebook Page URL instead of  YOUR FACEBOOK PAGE NAME.

Step 4: Now Hit Save and You are Done.

Stylish Clock widget for Blog/Website

About:

Clock on your blog/website can turn your website into a beautiful website. You can put clocks according to the matching content of your website. It will show the time on your blog/website.

Choose your design

HTML for this clock:

<div class="noop-clock"><center><embed height="140" src="http://www.hitarek.com/clock/clock24-6.swf?TimeZone=IST&amp;Place=&amp;" type="application/x-shockwave-flash" width="210"></embed></center><center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center></div>


Design 2:

HTML for this clock:

<center><!-- hitarek.com --><embed width="130" src="http://www.hitarek.com/clock/clock18-3.swf?TimeZone=IST&Place=&" height="130" wmode="transparent" type="application/x-shockwave-flash"></embed></center>
<center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>

Design 3:

HTML for this clock:

<center><!-- hitarek.com --><embed width="150" src="http://www.hitarek.com/clock/clock15-6.swf?TimeZone=IST&Place=&" height="150" wmode="transparent" type="application/x-shockwave-flash"></embed></center>
<center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center> 


Design 4:

HTML for this clock:

<center><!-- hitarek.com --><embed width="150" src="http://www.hitarek.com/clock/alhlal-sa.swf?TimeZone=IST&Place=&" height="150" wmode="transparent" type="application/x-shockwave-flash"></embed></center>
<center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>
 

Design 5:

HTML for this clock:

<center><!-- hitarek.com --><embed width="142" src="http://www.hitarek.com/clock/clock20-3.swf?TimeZone=IST&Place=&" height="142" wmode="transparent" type="application/x-shockwave-flash"></embed></center>
<center><a style="font-size: 3mm" target="_blank" href="http://www.hitarek.com">Free Clock</a></center>

Floating Social Media Widget for Blogger

About:

A floating social media tab allows other people to share your post with their friends and family so that other people come to your blog/website. It helps to gain your blog traffic.

How to do it:

Step 1:  Go to your Blogger Dashboard and click on Layout

Step 2:  Click on 'Add Gadget'. A popup window will open. Click HTML/JavaScript.

Step 3:  Copy the code below and Paste it inside the box.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:03px;
top:300px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-516ff8e04b04378b"></script>
<!-- AddThis Button END -->


Step 4: Now click Save and you are Done.

Recent Comment widget for Blogger

Recent Comments Widgets can be used to display the latest Comments that your blog receive. Comment is a good way to get in touch with your visitors and make them to come to your blog more often. This widget will encourage your visitors to post a comment in your blog. 

This Widget shows the Commentators name with his/her Profile link followed by the Post name and followed by their Comment. It can be added to Sidebar or Footer or anywhere which can draw attention to the visitors.

How to do this: 

1.  Sign in to Blogger Dashboard.

2. Select Layout -> Click on Add a Gadget

3. Take HTML/Javascript from the list.

4. Put a title and Copy, Paste the code below inside the box.


<script style=text/javascript src="http://netoopscodes.googlecode.com/svn/branches/Js 
files/recent_comments_netoopsblog_min.js"></script><script style=text/javascript >var 
a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script  
src=http://4bloggingtips.blogspot.com/feeds/comments/default?alt=json-in-script&
callback=showrecentcomments ></script>
<a style="display:none" href=http://netoopsblog.blogspot.com>Recent Comments Widget</a>
<style type=text/css>
.rcw-comments a {text-transform: capitalize;}
.rcw-comments {border-bottom: 1px solid #666; padding-top: 6px!important; padding-bottom: 6px!important;}

 </style>

5. Change the RED highlighted with you blog url.

6. Now click save and you are good to go.

How to add Pinterest Pin it Button to Blogger

Pinterest is a social sharing site, which allows you to organize and share(pin) your interest, has now become so popular as the site is more simple,  beautiful and organizable.

Now they launched their sharing buttons known as "Pin it".

Pinterest share button has counter and comes in different sizes. So choose your size as I show you how to do that.

How to do it:

1. Go to your blogger Dashboard > Template and click "Edit HTML"

2. Now click any where inside the HTML box and press Ctrl+F, a search box will open.

3. Find </body> by typing inside the search box.

4. Now simply copy and paste the code right above the </body>.

       <script type="text/javascript" src="//assets.pinterest.com
       /js/pinit.js"></script>

 5. Find <data:post.body/> and before/after it (or both) add any one of the following codes: 



         
      Horizontal Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div style='float:left;padding:4px;'>

<b:if cond='data:post.thumbnailUrl'>

           <a class='pin-it-button' count-layout='horizontal' expr:href='&
           quot;http://pinterest.com/pin/create/button/?url=&quot; + 
           data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl 
           + &quot;&amp;description=&quot; + data:post.title'>Pin It</a>

  <b:else/>

           <a class='pin-it-button' count-layout='horizontal' expr:href='&
           quot;http://pinterest.com/pin/create/button/?url=&quot; +  
           data:post.url + &quot;&amp;media=http://your-image.jpg& 
           amp;description=&quot; + data:post.title'>Pin It</a> 

</b:if>

</div>

</b:if>

  Vertical Count

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' count-layout='vertical' expr:href='&
quot;http://pinterest.com/pin/create/button/?url=&quot; +
data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl
+ &quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' count-layout='vertical' expr:href='&
quot;http://pinterest.com/pin/create/button/?url=&quot; + 
data:post.url + &quot;&amp;media=http://your-image.jpg&
amp;description=&quot; + data:post.title'>Pin It</a>

</b:if>
</div>
</b:if>           

If you don’t want any count for the Pinterest share buttons then add the following code:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float:left;padding:4px;'>
<b:if cond='data:post.thumbnailUrl'>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com
/pin/create/button/?url=&quot; + data:post.url + 
&quot;&amp;media=&quot; + data:post.thumbnailUrl + 
&quot;&amp;description=&quot; + data:post.title'>Pin It</a>
<b:else/>
<a class='pin-it-button' expr:href='&quot;http://pinterest.com
/pin/create/button/?url=&quot; + data:post.url + 
&quot;&amp;media=http://your-image.jpg&amp;description=&quot; 
+ data:post.title'>Pin It</a>
</b:if>
</div>
</b:if>             

6. Save your Template and get the result.

How to add ''You May Also Like'' widget in Blogger

If you want your visitors to recommend some     
other posts of your blog, then LinkWith in is 
the best option for you.

It will show some suggestions along side
with the main page so that people click on 
them to read more without going to any 
other page.

 Well, what does actually the widget do is- when you include this widget in your blog, the widget's (site's) crawlers (spiders) quickly crawl your whole site and make an index and from the index they show some results in "You may also read" or "You should also read" section.

How to do it: 

1. First go to LinkWithin.

2. Put your Email address,Blog link.

3. Choose the platform. If you are using Blogger, then choose Blogger.

4. Also choose the width of the widths. There are 3 types of widths. 3 stories  ,4 stories  ,5
  stories . I recommend you to choose 5 stories  .

If you have light text with dark background then tick the box which says "My blog has light text on a dark background ".

5. Then click Get Widget.

6. Now in the next page you have to click "Install Widget".

7. In the next page, choose select blog name where you want to put the widget.

8. Keep the Title blank. 

9. Hit Add widget and you are done. 

Side Open Egg Social Networking Buttons

It's basically the newer version of that 

awesome widget. It works the same as the 

Slide Open Heart Gadget but instead of the 

heart you'll get an egg getting slide open.The 

Oval shaped egg opens up once hovered and 

displays bookmarking buttons like Facebook 

share, Twitter, Google +, Blogger, LinkedIn, 

 Stumble Upon, Email and the Share This Icon (Which Offers plenty of Bookmarking 

choices). The position of the widget is the same as the earlier.


How to add this: 

1. Go to Blogger Dashboard>> Template >> Edit HTML

2. Click any where inside the box, then press Ctrl+F. Now a search box will appear. 

3. Find </head> by typing in the search box.

4. Now simply copy the code given below.

       <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js'
        type='text/javascript'/><script src='http://w.sharethis.com/button
       /buttons.js' type='text/javascript'/><script        
        type='text/javascript'>stLight.options({publisher:
       &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, 
       onhover:false}); </script><link href='http://w.sharethis.com/gallery
       /shareegg/shareegg.css' media='screen' rel='stylesheet'
       type='text/css'/> 

5. Paste the code just above </head> .

6. Now find </body>.

7. Copy and paste the following code right above </body>  

         <div style='position: fixed; bottom: 2%; left: 2%;'><div 
         class='shareEgg' id='shareThisShareEgg'/></div><script 
         type='text/javascript'>stlib.shareEgg.createEgg(&#39;
         shareThisShareEgg&#39;, 
         [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#
         39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#3
         9;sharethis&#39;], {title:&#39; 
         <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url
         />&#39;,theme:&#39;shareegg&#39;});</script><a 
         href="http://www.mybloggertips.com/">Blogger Gadgets</a>       

8. Now click Save Template and you are Done.