Blogger Buzz: social media plugins

Share blog posts in social medias using Sharethis

<div dir="ltr" style="text-align: left;" trbidi="on">
In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the buttom of this post to see the AddThis sharing buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zLFvtsUe1PHwyEcFevyxNMXB2h0sRMkRhEWR3gV5CGlvSbgw5cYSa0voi_BgcbxgvI1kOupaWyY8bOlG5Jkw0nVlmXySDpqnnjDa3SrlK0MssInaTrB1v5EaG6waF_P1_LTcOO11ca_P/s1600/addthis-share-buttons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zLFvtsUe1PHwyEcFevyxNMXB2h0sRMkRhEWR3gV5CGlvSbgw5cYSa0voi_BgcbxgvI1kOupaWyY8bOlG5Jkw0nVlmXySDpqnnjDa3SrlK0MssInaTrB1v5EaG6waF_P1_LTcOO11ca_P/s1600/addthis-share-buttons-for-blogger.png" width="320" /></a></div>
 
This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started! 
 
 
<h3>
Getting the AddThis share buttons code</h3>
Step 1. Visit the <a href="https://www.addthis.com/get/sharing" rel="nofollow" style="color: blue;" target="_blank">https://www.addthis.com/get/sharing</a> page. 
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC45autfEhuFkdA2edJnCQwUrBaZcNmtbHGb0faJ-pWT2f_4QfpaSBj8PTdlYVLnJJbRTNX0iqxYwYClVsZAap-bUEreVwQi4PVnyM4BKCjPt391iUE1487IIpVDRONBYSsIxJ6FNegidE/s1600/how-to-create-addthis-account.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="create addthis account" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC45autfEhuFkdA2edJnCQwUrBaZcNmtbHGb0faJ-pWT2f_4QfpaSBj8PTdlYVLnJJbRTNX0iqxYwYClVsZAap-bUEreVwQi4PVnyM4BKCjPt391iUE1487IIpVDRONBYSsIxJ6FNegidE/s1600/how-to-create-addthis-account.png" title="share blog posts in social medias using Sharethis" width="400" /></a></div>
 
The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrAxhvJi6-wj32cRu6bQZSeYVD5s9QpYVuxXXOl6P1CforF-GoGFH8e5Eh3N1PW1UDKflnHlaLo61as79A4gTXt2WMbt-CF6tUFzJ-AbTwnk4KDtllOHnicvSr9jMF8NFjMA-pte0rxbT/s1600/register-addthis-for-sharing-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="register addthis" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrAxhvJi6-wj32cRu6bQZSeYVD5s9QpYVuxXXOl6P1CforF-GoGFH8e5Eh3N1PW1UDKflnHlaLo61as79A4gTXt2WMbt-CF6tUFzJ-AbTwnk4KDtllOHnicvSr9jMF8NFjMA-pte0rxbT/s1600/register-addthis-for-sharing-buttons.png" title="share blog posts in social medias using Sharethis" width="320" /></a></div>
 
Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5NZzuQHARxpN7LYqPS4tKuAMgAOCxCAHHEZThbrnj6W1afwSWBhXruECL0vyr4H6vXKNlxwThLc2IYCqE0cbP5QtzriCtQGz1VJxLYJcNifQk7JkD5NDLGCyIi0kOFapKXmB6ZLSq9bk/s1600/sharing-buttons-blogger-style-addthis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis share buttons" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5NZzuQHARxpN7LYqPS4tKuAMgAOCxCAHHEZThbrnj6W1afwSWBhXruECL0vyr4H6vXKNlxwThLc2IYCqE0cbP5QtzriCtQGz1VJxLYJcNifQk7JkD5NDLGCyIi0kOFapKXmB6ZLSq9bk/s1600/sharing-buttons-blogger-style-addthis.png" title="Share blog posts in social medias using Sharethis" width="251" /></a></div>
 
Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfdwneCS7DUUBT_ANwsbvudbJNc3VQq5A_9EBd5XcBYA7J02hm8plMsS72hj04DVvt912beWCvpZyAE-xv3pVrFnEfEEPPjf-0Q8zevUlph8Xnms2uB1ioKGH2ZA2-N97Z2HO6dM_qm72/s1600/addthis-social-buttons-preview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis sharing buttons " border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfdwneCS7DUUBT_ANwsbvudbJNc3VQq5A_9EBd5XcBYA7J02hm8plMsS72hj04DVvt912beWCvpZyAE-xv3pVrFnEfEEPPjf-0Q8zevUlph8Xnms2uB1ioKGH2ZA2-N97Z2HO6dM_qm72/s1600/addthis-social-buttons-preview.png" title="share blog posts in social medias using Sharethis" width="400" /></a></div>
 
Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pEQTiseQ6HZTCRHKiTbF4nfru5aCLVF5uHS7ovyyrvhgko0pWhdBVSuSiTa7ReUu5jc6On3tbm8AfrUpW8DXielHhoWYirHNmeYohP3-YYlMskGWoQiXQ1VNIwYGOj95vBei3SDMwW9f/s1600/grab-it-addthis-social-sharing-buttons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis code" border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pEQTiseQ6HZTCRHKiTbF4nfru5aCLVF5uHS7ovyyrvhgko0pWhdBVSuSiTa7ReUu5jc6On3tbm8AfrUpW8DXielHhoWYirHNmeYohP3-YYlMskGWoQiXQ1VNIwYGOj95vBei3SDMwW9f/s1600/grab-it-addthis-social-sharing-buttons-for-blogger.png" title="Share blog posts in social medias using Sharethis" width="400" /></a></div>
 
The code provided will look like this: 
<blockquote class="tr_bq">
 
<div class="addthis_toolbox addthis_default_style "> 
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
<a class="addthis_button_tweet"></a> 
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a> 
<a class="addthis_counter addthis_pill_style"></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-XXXXXXXXXXX"></script> 
</blockquote>
 
Now that you have selected and set up your AddThis sharing buttons, it is recommended to add them in the footer of your posts... 
 
 
<h3>
Adding the AddThis sharing buttons on Blogger</h3>
Step 1. Access your <a href="http://blogger.com/" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a> and go to Template, then click on the Edit HTML button on the right: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Template Edit HTML" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="Share blog posts in social medias using Sharethis" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. 
 
Step 3. Type the following line inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
<div class='post-footer'> </blockquote>
Step 4. Just above this line, add the code for the AddThis social sharing buttons. 
 
Note: If you want to add at the beginning of your posts, add the code below the second <div class='post-header'> 
 
 
<h3>
Adding more buttons</h3>
To add more buttons, simply choose the button for that social network and add the code just above the </div> tag (see step 5 above). 
 
Some examples: 
<blockquote class="tr_bq">
<a class="addthis_button_linkedin"></a> /* linkedin button */ 
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*gplus button */ 
<a class="addthis_button_digg"></a> /* digg button */ 
<a class="addthis_button_stumbleupon"></a> /* stumbleupon button */ 
<a class="addthis_button_print"></a> /* print button */</blockquote>
 
 
<h3>
CSS3 AddThis Share Buttons </h3>
You can add just a single button, so that when the reader hover over it, a menu will open with the options of social networks to share the post. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr4t0U_ncRepo-YGjhBSpsXpajxpwI4cdJVM90Vka6iWfhmIV_JBP6TEhFckZlEvWpebvBHtKC_AHRNj7ObFCk6gj9DNSyEnm2BVYtPHihZ8r3xvZJ6EloyyMeBPY2Mj3eRSgjW1mX5rj/s1600/css3-addthis-share-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="css3 share buttons, addthis" border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr4t0U_ncRepo-YGjhBSpsXpajxpwI4cdJVM90Vka6iWfhmIV_JBP6TEhFckZlEvWpebvBHtKC_AHRNj7ObFCk6gj9DNSyEnm2BVYtPHihZ8r3xvZJ6EloyyMeBPY2Mj3eRSgjW1mX5rj/s1600/css3-addthis-share-buttons.png" title="CSS3 AddThis Share Buttons " width="400" /></a></div>
 
Visit <a href="http://www.addthis.com/pages/gallery-demo-css3-buttons" rel="nofollow" style="color: blue;">this page</a> for a demo. 
 
Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search for the <div class='post-footer'> line. Just above this line, paste the following code: 
<blockquote class="tr_bq">
<style type='text/css'> 
.addthis_share_btn a, .addthis_share_btn a:visited { 
background: #FF5C00; /* background color of the button */ 
display: inline-block; 
padding: 6px 12px; 
font-family: arial,helvetica,lucida,verdana,sans-serif; 
font-size: 12px; 
line-height: 1em; 
color: #fff; 
text-decoration: none; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
border-radius: 5px; 
box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
border-bottom: 1px solid rgba(0,0,0,0.25); 
position: relative; 
cursor: pointer; 
} 
.addthis_share_btn a:hover { 
background: #D45500; /* background color on mouse hover */ 
color: #fff; 
} 
.addthis_share_btn a:active { top: 1px; } 
 
.addthis_share_btn a span, .addthis_share_btn:visited a span { 
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left; 
padding: 1px 0 1px 18px; 
} 
</style> 
 
<div class='addthis_toolbox addthis_share_btn'> 
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'> 
Share</a> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
</blockquote>
Customization 
 
- To change the color of the button according to the colors of your template, modify the color value in red. 
- If you want to change the "Share" text, replace the text in blue. 
 
Step 2. Save the changes by clicking on the Save template button and you're done! </div>

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks....

Add floating social media sharing buttons below Blogger post titles

<div dir="ltr" style="text-align: left;" trbidi="on">
It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic to our blog/website and boost sharing stats is to add social sharing buttons. 
 
In this tutorial we will see how to add a floating social media sharing bar below the title of Blogger posts, so when a reader scrolls down the page, he will still be able to see the sharing buttons without having to scroll back to the top. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa4nUDZB_CrtZe9SDC3ryNfZQ0BhPMuaOB78tru0m0LIBVNz2W4YgoAGqRWXwBLtx15BzpKHPETlHKxtR0jq_UCEidBlobxJUXgZR66yaOlEnIljxtyyztBmYYYy8Bua1QhHWceiHuqnV/s1600/floating-social-media-sharing-bar-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add floating social media sharing buttons below Blogger post titles" border="0" height="182" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaa4nUDZB_CrtZe9SDC3ryNfZQ0BhPMuaOB78tru0m0LIBVNz2W4YgoAGqRWXwBLtx15BzpKHPETlHKxtR0jq_UCEidBlobxJUXgZR66yaOlEnIljxtyyztBmYYYy8Bua1QhHWceiHuqnV/s1600/floating-social-media-sharing-bar-for-blogger.png" title="Add floating social media sharing buttons below Blogger post titles" width="320" /></a></div>
Adding the below jQuery script will make the buttons float in a fixed position as soon as they reach "the top" of the page. By scrolling back, the buttons will return to their initial position. 
 
The social sharing bar includes buttons for Facebook, Twitter, Google+, and Pinterest. 
 
 
<h3>
Adding the social media sharing buttons below every Blogger post title</h3>
 
Step 1. From the <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger Dashboard</a>, go to Template and click on the Edit HTML button: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add floating social media sharing buttons below Blogger post titles" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="Add floating social media sharing buttons below Blogger post titles" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and type the </head> tag inside the search box. 
 
Step 3. Just above </head> add this script: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
 
<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
var $movesbuttons = $("#floating-social-buttons"), 
$window = $(window), 
offset = $movesbuttons.offset(); 
$window.scroll(function() { 
if ($window.scrollTop() > offset.top) { 
$movesbuttons.css({'position' : 'fixed', 'width' : '550px', 'top' : '0px'}); 
} else { 
$movesbuttons.css({'position' : 'absolute', 'top' : 'auto'}); 
} 
}); 
}); 
//]]> 
</script></blockquote>
Step 4. Now before ]]></b:skin> add the following CSS styles: 
<blockquote class="tr_bq">
#floating-social-buttons { 
padding: 6px 0px 12px; 
position: absolute; 
background: #F6F6F6; 
border-bottom: 1px solid #DEDEDE; 
width: 550px; 
height: 18px; 
z-index: 99; 
} 
.floating-social-buttons { 
margin-left: 5px !important; 
} 
.floating-social-buttons li { 
float: left; 
margin-left: 5px; 
list-style:none; 
}</blockquote>
To change the width of the bar, modify the 550px values in red. Note that this value also appears in the script which also needs to be modified. 
 
Step 5. Finally, just below the second <div class='post-header'> (press CTRL + F and hit Enter twice to find the second one) add the following code: 
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div style='padding:5px 0 35px 0;clear:both;'> 
<div id='floating-social-buttons'> 
<ul class='floating-social-buttons'> 
 
<li><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url+ &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;height=25&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:25px;'/></li> 
 
<li><a class='twitter-share-button' data-lang='en' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></li> 
 
<li><script src='http://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone expr:href='data:post.url' size='medium'/></li> 
 
<li><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.snippet' style='margin:0 10px 5px 0;'>Pin It</a> <script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/></li> 
 
</ul> 
</div> 
</div> 
</b:if></blockquote>
Customization: 
 
If you want the buttons appear at the end of the post, paste this code before or after <div class='post-footer'> 
If the bar overlaps with the post content, then change 35px to a higher value. 
 
Step 6. Click on the Save template button... and that's it! 
 
So these were the steps for adding the horizontal social buttons bar on Blogger. I highly recommend using this bar as it could really help you to get more social traffic for your blog.</div>

Facebook social media social media plugins Widgets Add floating social media sharing buttons below Blogger post titles

It is becoming increasingly important to make our posts appreciated and shared on social networks and one of the best ways to get traffic t...

How To Add Social Media Icons to Blogger Header

<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTQlhHoUDesHsR64JN5vYfTl4iecY4Ikfq2vWh6JEDqXhhhjZZYYN41Ng3Tbu-W1_5WoTGCk7o3pl-iT_gC44Bojy_W5pvYTnKydNe9NHzVVKAmd5PHM6XddJIewyWhgq8zUoHH5wPL-d/s1600/social-media-icons-to-blogger-blogspot-header.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="social media icons, facebook icons, social media icons for blogger" border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRTQlhHoUDesHsR64JN5vYfTl4iecY4Ikfq2vWh6JEDqXhhhjZZYYN41Ng3Tbu-W1_5WoTGCk7o3pl-iT_gC44Bojy_W5pvYTnKydNe9NHzVVKAmd5PHM6XddJIewyWhgq8zUoHH5wPL-d/s1600/social-media-icons-to-blogger-blogspot-header.png" title="social media icons to blogger header" width="200" /></a>This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers can follow through the various social networks. There are several ways to do this, like <a href="http://helplogger.blogspot.ro/2012/03/how-to-add-gadgetwidget-inside-your.html" style="color: #0b5394; font-weight: bold; text-decoration: none;">adding a new widget section to the blog header</a> but now, we'll do it using an unordered list that uses icons of Facebook, Twitter, Google+ and blog feed, and as a bonus, the icons will rotate when you hover over them. 
 
 
 
<h2>
Adding Social Media Icons to Blogger Header</h2>
Step 1. From your Blogger dashboard, go to Template and click on the Edit HTML button: 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJ1pnEzwZkV1r1FFW47LuUL4BvKiCJXtidBlRSLb8sNELEJOXhC0meMd9bVc6PRLBp0mtguq87foRxuFwzdd1uRYU9ZVeMhhg0cpLGhg3azZP7TMGcxNtv9aOXBAJNLau3yb3P38AF6te/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Add Social Media Icons to Blogger Header" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFJ1pnEzwZkV1r1FFW47LuUL4BvKiCJXtidBlRSLb8sNELEJOXhC0meMd9bVc6PRLBp0mtguq87foRxuFwzdd1uRYU9ZVeMhhg0cpLGhg3azZP7TMGcxNtv9aOXBAJNLau3yb3P38AF6te/s1600/edit+html.jpg" title=" Add Social Media Icons to Blogger Header" width="320" /></a></div>
 
Step 2. To expand the style, click on the small arrow on the left of <b:skin>...</b:skin> (screenshot 1), then click anywhere inside the code area to search (using CTRL + F) for the ]]></b:skin> tag (screenshot 2) and add this code just above it: 
 
<blockquote class="tr_bq">
 /* Social icons for Blogger 
----------------------------------------------- */ 
 
#social-icons { 
margin-bottom:-30px; 
height:50px; 
width:100%; 
clear:both; 
z-index: 2; 
position: relative; 
} 
.social-media-icons { 
display:table 
} 
.social-media-icons ul { 
text-align:right; 
padding:5px 5px 0 0 
list-style-image:none; 
list-style-position:outside; 
list-style-type:none; 
} 
.social-media-icons ul { 
margin-bottom:0; 
padding:0; 
float:right; 
} 
.social-media-icons li.media_icon { 
margin-left:6px; 
padding-left:0 !important; 
background:none !important; 
display:inline; 
float:left; 
} 
.social-media-icons li:hover { 
-moz-transform: rotate(360deg); 
-webkit-transform: rotate(360deg); 
-o-transform: rotate(360deg); 
transform: rotate(-360deg); 
-moz-transition: all 0.5s ease-in-out; 
-webkit-transition: all 0.5s ease-in-out; 
-o-transition: all 0.5s ease-in-out; 
-ms-transition: all 0.5s ease-in-out; 
transition: all 0.5s ease-in-out; 
}</blockquote>
<div style="text-align: center;">
 
Screenshot 1:</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-777bvXfRXczNeichwahnqI5fKlkD0VUw45BgF84YZON83C0TdIAz-vC-rULiP6LRbJxxjke-2BPCBIfnNc-ZqbLfEuygyPpVDeNRY5yOAaaHBMbdjqwFJebH_a-AkGvjfWyj_v-BNA1F/s1600/blogger-template-editor-css-styles.png" /></a></div>
 
<div style="text-align: center;">
Screenshot 2:</div>
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8xwLb_1jXGh8qFUp5fvIv24VRXlokQXUwlmyAut9p9xRzhf621CuRUi5rXm1BQCkeEvBf5kViDWutLtRlI3GlIr-zuBDX_-z8_uU8j6Xs4i4ZTbDsXzdHXU43Z1fX5SwMNEOPO90jlH1/s1600/how_to_search_in_blogger_template_editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi8xwLb_1jXGh8qFUp5fvIv24VRXlokQXUwlmyAut9p9xRzhf621CuRUi5rXm1BQCkeEvBf5kViDWutLtRlI3GlIr-zuBDX_-z8_uU8j6Xs4i4ZTbDsXzdHXU43Z1fX5SwMNEOPO90jlH1/s1600/how_to_search_in_blogger_template_editor.png" width="400" /></a></div>
 
Step 3. Now search for this line 
 
<blockquote>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'></blockquote>
 
Step 4. And just above it, add this code: 
 
<blockquote class="tr_bq">
<div class='social-media-icons' id='social-icons'> 
<ul> 
 
<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtULe9cWsv-7Jl7IxoZ3cA534JNkzWnNewS0Oh0YmXvgukscLXEDIeE2D5Z5VLbJSYq4Mx2n3h12oGEXgmsbiebKNJoS7EJRErXbEuyRncr45AWB6kFYRtiAaX70hmQZ7IIBqMoUH4yTM/s1600/Facebook.png'/></a></li> 
 
<li class='media_icon'><a href='http://twitter.com/#!/username'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHW04kraxL0EbTX3dHshbNMagUY4CkMRTHtA13H2JJm8wTf1hz1KV5qBF2-lq15BbbUfZli5rqC2qbUpnSLE-Z-PlIZxdMqBoYZYNC5DxbiyUe00qfg4afj-TaeZsG518V8RWAJeojjuk/s1600/Twitter.png'/></a></li> 
 
<li class='media_icon'><a href='https://plus.google.com/XXXXXXXXXXXXXXXXXX/about'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSTBh3JhjA4SYEj62kTzxtDEFqd9gJihNuisC-VIDv7LO9kQ0BnyspFFs3cWS2fx67C3sauyCzPSsrzpRlOz567PPq08sWnRQojfhBPLQ8FNiLYzQQMz54fHmKqK2mwftQltVhtykUQrU/s1600/googleplus.png'/></a></li> 
 
<li class='media_icon'><a href='http://name-of-your-blog.com/feeds/posts/default'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijH9-v5ft2lk3oSySvSlTKFo6KWKYZn12vyP-Njp5TUNS8Y_OGzW-0kQy7kQ9MJBDvFsHrzyIKufFWYd-inYmgPEgVbmz9ih52WIQiFZofmZaFeZeATcoBV4dcf7RmhQ6jwtkrvvhtvfs/s1600/RSS.png'/></a></li> 
 
</ul></div></blockquote>
 
Customization 
 
- Change what's in red with your usernames and id: the first is your Facebook username, the second is that of Twitter, in the third you should change the X by the ID of your Google+ profile and in the fourth you will put the name of your blog. 
- To change the icons, just replace the urls in blue with the ones of your images. 
- You can add more icons if you want, you just have to add before </ul></div> a line like this for each extra icon you want: 
 
<blockquote>
<li class='media_icon'><a href='Link URL'><img border='0' src='Image URL'/></a></li></blockquote>
 
Step 5. Finally, Save the Template to apply the changes. 
The effect is done with CSS3, so this effect will not work in older browsers.</div>

Facebook how to social media social media plugins Widgets How To Add Social Media Icons to Blogger Header

This tutorial will help you to add social media icons in the top right corner of the page which could increases the likelihood that readers...

Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times your posts get shared on Twitter, Facebook and other social networks. This floating social bar has the following options: Facebook Like, StumbleUpon, Twitter Share, Digg This, Google+ and each of them comes with a live counter. You can add more sharing buttons or social bookmarking icons later if you want. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1O7KSwDkBAHEAL0RKwuJcfnVCT95mliPtuFmmyq_2PPI_5gsYRCveHi41a7hyphenhyphenELyMqBIqRyFe3c9vCppXgdXNxmDJ4VQ0Whg5pSPrPO7ukBGtySzT_xigiedlJPt9pEGHmSy9qjspXTr/s1600/01-06-2012+01-27-30.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger, WordPress, Facebook, Share" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW1O7KSwDkBAHEAL0RKwuJcfnVCT95mliPtuFmmyq_2PPI_5gsYRCveHi41a7hyphenhyphenELyMqBIqRyFe3c9vCppXgdXNxmDJ4VQ0Whg5pSPrPO7ukBGtySzT_xigiedlJPt9pEGHmSy9qjspXTr/s320/01-06-2012+01-27-30.png" title="floating social bookmarking buttons" width="320" /></a></div> <h3>How to add the scrolling social bookmarking bar</h3> Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a>, select your blog and go to Layout  Step 2. Click on Add A Gadget link <div> </div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2H4lqlJpI8_6T6QkBqj3kHiUgAtGyzOXHdUSVMnYkouKjNuY5OqKik32ERlYwwLC9vjLEYma2DYIfrb308oXcigHeEa4OvnpIxYnn8sngN9I1i8cBjx-oTphqOOTSRZUcURJ3Yp58EyGd/s1600/add-a-gadget-blogger-layout.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="81" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2H4lqlJpI8_6T6QkBqj3kHiUgAtGyzOXHdUSVMnYkouKjNuY5OqKik32ERlYwwLC9vjLEYma2DYIfrb308oXcigHeEa4OvnpIxYnn8sngN9I1i8cBjx-oTphqOOTSRZUcURJ3Yp58EyGd/s1600/add-a-gadget-blogger-layout.png" width="400" /></a></div> Step 3. From the pop-up window, scroll down and select HTML/Javascript  <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6yYRlxsLNAvxfHwEXtc9LOrSn6K71PaKhoWCqG5RuzH8EbETMgOJlGpKNNQSpJfbxrc7uM_MvwrOPF20MUnNszqFuDr5hzqaXJL3-HIye0z52kUe-6hsOHSn06edDcvyaHvJXByBDqum/s1600/html-javascript-blogger-gadgets-widgets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD6yYRlxsLNAvxfHwEXtc9LOrSn6K71PaKhoWCqG5RuzH8EbETMgOJlGpKNNQSpJfbxrc7uM_MvwrOPF20MUnNszqFuDr5hzqaXJL3-HIye0z52kUe-6hsOHSn06edDcvyaHvJXByBDqum/s1600/html-javascript-blogger-gadgets-widgets.png" width="320" /></a></div><div> Step 4. Copy the code below and paste it inside the empty box. <div> Step 5. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_uhv8hnx0eIjGpYMMTtNNZZBUX4DSsWfpdFdHf07c5VfgFf6tez13bl6TUr96vuSN90TH64Brszf0E56hZkUOAxrn4N_ktjYMv6NkbbzQt_Y0P5QOnhhM4Halj1QcV38FV2CSqe_xWB3/s1600/save-html-javascript-blogger-widget.png">Save</a> the gadget.</div> The code to copy-paste (updated!): <blockquote class="tr_bq"><style type="text/css"> #social-buttons { position:fixed; bottom:15%;  margin-left:-721px; float:left; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; background-color:#fff; padding:0 0 2px 0; z-index:10; } #social-buttons .button-share { float:left; clear:both; margin:5px 5px 0 2px; } </style> <div id='social-buttons' title="Get this from helplogger.blogspot.com"> <div class='button-share' id='like' style='margin-left:7px;'> <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' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Helplogger' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> <div class='button-share' style="margin-left: 3px;" id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script> </div> <div class='button-share' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='button-share' style='margin-left:3px;' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div> <div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://helplogger.blogspot.com/">widget</a></div></div></div></blockquote>Customization:</div><ul><li>Vertical alignment - Change the 15% value of bottom. The code positions the social bar relative to the bottom of your browser window. To fix the distance even when window is resized, specify the value in px (pixels) instead of %.</li></ul><ul><li>Horizontal alignment - Change the -721px value from margin-left. Negative value pushes the button to the left of the main blog column, positive value pushes it to the right. Increase or decrease the value based on your needs.</li></ul><ul><li>Twitter setting - Replace Helplogger with your Twitter username</li></ul><ul><li>Replacing and removing buttons - You can replace existing buttons with your own. Each button is represented by this code:</li></ul><blockquote class="tr_bq"><div class='sbutton'> BUTTON CODE HERE </div></blockquote><ul></ul>Enjoy!!! :)

social media social media plugins Widgets Add Floating Social Media Sharing Buttons To Blogger

The Floating Social Media Sharing is a very popular widget on all the top blogs and this is one of the ways to increase the number of times ...

Add Facebook Like Button Below Post Titles

<div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2w4XFvXUZl3UwUdvZHsGRuUGjG9rmMEX9TJHg-f05lJnPh5Ap4DvrpnBa3aE5Gae4SVEvvXJLM22fdJ1zCBjAll2v8neVDhtD2LhKGxsCklOXs9Q23uDVlJEdZZQnMliAZlTnHK6KNPb/s1600/how+to+add+facebook+like+button+for+blogger+just+under+below+blogger+blogspot+titles.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook like button, blogger tricks" border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio2w4XFvXUZl3UwUdvZHsGRuUGjG9rmMEX9TJHg-f05lJnPh5Ap4DvrpnBa3aE5Gae4SVEvvXJLM22fdJ1zCBjAll2v8neVDhtD2LhKGxsCklOXs9Q23uDVlJEdZZQnMliAZlTnHK6KNPb/s200/how+to+add+facebook+like+button+for+blogger+just+under+below+blogger+blogspot+titles.jpg" title="How to Add Facebook Like Button Below Post Title in Blogger" width="200" /></a></div> This Facebook Like button will allow visitors to Like your post and share it to their Facebook friends. In this post we will see how we can add a Like button for each individual Blogger post, and not a <a href="http://helplogger.blogspot.com/2012/03/how-to-add-facebook-likefan-box-to.html" style="color: blue;">Facebook fan box for the entire blog</a> (which is also a good idea to have in your sidebar). Having a Facebook Like button below your post titles makes easier for Facebook users to like specific posts on your blog, which in turn displays the liked content on their profile (and potentially on their friend's feeds). If you want to add the Facebook Like Button below your blogger post title, then follow these steps: <h3>Adding Facebook Like Button Below Post Titles</h3> Step 1. Go To <a href="https://www.blogger.com/home">Blogger Dashboard</a> > Template > Edit HTML  <div style="text-align: center;">Screenshot  </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook for blogger, facebook button" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s320/blogger_blogspot_template_edit_html_tutorial.png" title="facebook like button below blogger post titles" width="320" /></a></div> Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code: <blockquote><data:post.body/></blockquote>Note: you might find it more than 3 times, stop to the second one (or third one in case it won't show up after applying the code from step 3) Step 3.  Just above it, paste this code: <blockquote><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></blockquote><div style="text-align: center;">Screenshot</div><div style="text-align: center;"> </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K8FcBDY_Ze9x673JWfK19VL4AmDDEZYaoFxIURmQYdIpUDYGy_yjXuNOnpmH6v66FZiP4RRemxYyJmjvvVPICpY5dvkDOZ-TSeblWIXrZvCMk4vMwLiM-O9f3KO9Ykj4EGlXqDkroKiI/s1600/how-to-add-facebook-button-below-blogger-post-titles.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="facebook button" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_K8FcBDY_Ze9x673JWfK19VL4AmDDEZYaoFxIURmQYdIpUDYGy_yjXuNOnpmH6v66FZiP4RRemxYyJmjvvVPICpY5dvkDOZ-TSeblWIXrZvCMk4vMwLiM-O9f3KO9Ykj4EGlXqDkroKiI/s400/how-to-add-facebook-button-below-blogger-post-titles.png" title="facebook like button for blogger" width="400" /></a></div> Step 4. Save your template and you are done with this simple implementation of the Facebook Like button on your Blogger blog.

Facebook social media social media plugins Widgets Add Facebook Like Button Below Post Titles

This Facebook Like button will allow visitors to Like your post and share it to their Facebook friends. In this post we will see how we can ...

Awesome Slide Open Heart Bookmarking Gadget For Blogger

This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that makes the heart icon split each time you mouse hover it, displaying several bookmarking buttons like Facebook, Twitter, Pinterest, LinkedIn, Stumble Upon, Email and many more bookmarking choices. This gadget/widget comes with a fixed position and stays in the corner of the page, so it will grab your readers attention and make them share your posts easily. I'm sure you will love it after seeing the demo of this gadget: <div class="separator" style="clear: both; text-align: center;"><a href="http://helplogger.googlecode.com/svn/trunk/html/Open%20Heart%20Bookmarking%20Gadget.html" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0XXum_amsWozSEJuXXm1dIt80OSbfd6hrJRfw-S0RwgCcZtTJdmROBQMjt7ckRTNw8om02KdIvePBjKny0pqLzK0OZcwFyhPwkU5RyFF32rUQcb1dNM48n8rQMEiefkmBAm2lzVPaYKxD/s1600/blogger-share-slide-out-heart-bookmarking-gadget-blogger-widgets.png" /></a></div> <div style="text-align: center;"><a href="http://helplogger.googlecode.com/svn/trunk/html/Open%20Heart%20Bookmarking%20Gadget.html">View Demo</a> </div>Adding The Open Heart Bookmarking Gadget to Blogger Step 1. Go to your <a href="http://www.blogger.com/home">Blogger Dashboard</a>, select Template and click the Edit Html button: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0WFm2maQ8jfFGzqbdJ8qG0m82l3i-6nCIWTLxSPJ6NpJ9dmillvV-rPJE62D7RnZ-TFXGGZd-2Xq901cguD0-uz96btz9JdSLO7o74YTmBCq0turA9hja8rumEqnYx4F5tK-20EwjbI2m/s1600/remove-blogger-labels.png" width="320" /></a></div>  ....select the "Expand Widget Templates" box (it is recommended to make a backup first) <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="126" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqmak8_EJ1vAGJDseuaWQf8_zHDw59qKUbdu5oblyzvqOzlyaVu7Tre2SEcvfFNcO94GNzrXlQ2Qgnx7pZBbP615fvj_Fnqgj2Jpgn6yhzOhyaKtjQWJh-PnTIENnZ97ZJONnBptP-rDq5/s1600/blogger-expand-widget-templates.png" width="320" /></a></div> Step 2. Find the following tag (Ctrl + F): <blockquote class="tr_bq"></head></blockquote><div> Step 3. Paste above/before the </head> tag, the following code:</div><div> </div><div><div><blockquote class="tr_bq"> <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;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/> </blockquote></div></div> <div>Step 4: Now find (CTRL + F) this tag: </div><blockquote class="tr_bq"></body></blockquote><div> Step 5: Paste above/before </body> tag... the following code: </div><div><blockquote class="tr_bq"> <div style='position: fixed; bottom: 2%; left: 2%;'> <div class='shareEgg' id='shareThisShareHeart'/> </div> <script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.helplogger.blogspot.com/">Blogger Gadgets</a> </blockquote></div> How To Move The Position Of The Gadget To move the position of this widget from the bottom right corner of your blog to any location you want, change the percentages of the red code from Step 5. Step 6. Now preview and Save Template. Done!

social media social media plugins Widgets Awesome Slide Open Heart Bookmarking Gadget For Blogger

This widget released by Sharethis team was made as a Valentine gift from them. The heart bookmarking gadget has a cool slide out effect that...

Add Social Bookmarking Buttons near Adsense Ads

<div class="tr_bq"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebPVNqtXXabZu30JE3hoIwOER3NrsYq103W2DB2Bf1l9cgUcf3vhp_79yYePuQAbjjyOcyxTjOdYXj1Ig3v7BVZDWfYVGQLdStJ5p-WF1wB0O6CS01xSGbVRnnbqVDF_FX2bji0vZ6dj7/s1600/share+bookmarking+near+adsense+in+blogger+blog+how+to.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebPVNqtXXabZu30JE3hoIwOER3NrsYq103W2DB2Bf1l9cgUcf3vhp_79yYePuQAbjjyOcyxTjOdYXj1Ig3v7BVZDWfYVGQLdStJ5p-WF1wB0O6CS01xSGbVRnnbqVDF_FX2bji0vZ6dj7/s200/share+bookmarking+near+adsense+in+blogger+blog+how+to.jpg" width="200" /></a></div>The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space besides Adsense units, making your blog look more attractive.</div> Adding the social bookmarking buttons at the top of your blogger post, will make things easier when your readers will want to share your posts via the networking sites. The widget includes buttons for Del.icio.us, Twitter, Facebook, StumbleUpon, Technorati and Digg. How to add this widget: 1. Firstly, login to your <a href="http://www.blogger.com/home">Blogger Dashboard</a> and go to Template and then click on the Edit HTML button  (don't forget to make a backup of your template) 2. Search (CTRL + F) for the following tag: <blockquote class="tr_bq">]]></b:skin></blockquote> 3. Paste the following CSS code just above it: <blockquote class="tr_bq">.ads{margin-bottom:10px; border-top:solid 1px #DEDEDE; padding-top:10px; font-size:13px;} .ads-right-min{border-left:solid 1px #DEDEDE; height:250px; padding-left:10px;} .ads-right-min a:link, .ads-right-min a:visited, .bottom-share-links a:link, .bottom-share-links a:visited{ font-size:12px; color:#222; display:block; height:22px; line-height:22px; margin-bottom:16px; padding-left:32px; } .ads-right-min a:hover, .bottom-share-links a:hover{color:#666;} .mini-tech{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhg_a0cey5LAplY2RfZ_dDCjyEuQxIiVJ1vIHP72vX6QbbBRBIxlmfM6cN3BR_KQd7DsKfU7yCREmTiNJCYUI9PJVkIZFoKVTdSnao2CydegSFdwH54wDM-uwLm2UnPa1iuCbToMh2U7Ng/s1600/technorati.gif) no-repeat;} .mini-facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2J2cw14HeihB4M7WkIvQ44QfTH0WCCf3IUwWgJkNzqZt_tEohBdCfqo9DvURA9I7rWTxcD9DgiboROWWRquMQwgQPeeHoK7IpOxz_fLeGuyLkXJ-hKZfqCH1jrmqTEw03SrgelG9ftdNx/s1600/facebook.gif) no-repeat;} .mini-tweet{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUISTwf9fmpBFm6D7wnM436HzdizNXN4jwQ-mMPeEdJLgAzB0DbaId1-xILID_PruOhijvw7ZM1-DjZmFRlSdfqIUlNrkrDgOVY0mIKL3wTuX5qkpFK0mvJvhQLwVCk9xHNLfaxaePgoYJ/s1600/tweet.gif) no-repeat;} .mini-del{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQaxNB5hmmvojGl_nDPzKahqjUrlZPCbgXfuuyOFQgFEBT6jngFZKoAk17WxIz_iysIyPQnzqVD3aLdu7gpiTuAOQoAWc_1W7gB2XOqc0HrWsmsiZ196tovv9E7dFhTn0GR6l0SxHmuEQr/s1600/delicious.jpg) no-repeat;} .mini-stumble{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKv80zInoWig-e5HCIgPiRctC5X2v8XsT1-s1WdM2N7Z_KItBCQkAtWUvqE_f9MK8olKou9yjdxQZxzpIKhnUdDFSPY2fRVp_4mxeI4sRXJQt3MTSs6p_Gbf9QpN9cb6ur2giWH2eTgFm0/s1600/stumbleupon.png) no-repeat;} .mini-digg{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUnhSlODfbBlLvejtGluJ7sYVaPgUzhgTGKXhIqo_GaL7tXtkgA1ID3sUJgnCZGTatk973zihI-SGz7znt5emVlMMo5RzAeIhLQLnu9pn3nOeX2bh6TrJWc-kbIjdlnoDlERwKQeyVqNEq/s1600/Digg.png) no-repeat;}</blockquote> 4) Now search - using "CTRL+F" - for the following line: <blockquote><div class='post-body entry-content'> </blockquote>  If you can't find it, search for this one: <blockquote class="tr_bq"><div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'></blockquote> 5) Add the following code directly below it: <blockquote class="tr_bq"><b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='ads'> <table border='0' cellpadding='0' cellspacing='0' width='100%'> <tr> <td width='354'> &lt;script type=&#39;text/javascript&#39;&gt;&lt;!-- google_ad_client=&quot;pub-YOUR PUBLISHER ID&quot;; google_ad_host=&quot;pub-1556223355139109&quot;; google_ad_width=300; google_ad_height=250; google_ad_format=&quot;300x250_as&quot;; google_ad_type=&quot;text_image&quot;; google_ad_host_channel=&quot;0001&quot;; google_color_border=&quot;FFFFFF&quot;; google_color_bg=&quot;FFFFFF&quot;; google_color_link=&quot;0000FF&quot;; google_color_url=&quot;008000&quot;; google_color_text=&quot;000000&quot;; //--&gt;&lt;/script&gt; &lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt; &lt;/script&gt; </td> <td><div class='ads-right-min'> <a class='mini-del' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Add To Del.icio.us'>Add This To Del.icio.us</a> <a class='mini-tweet' expr:href='&quot;http://twitter.com/home?status=Reading &quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Post this article on Twitter'>Tweet/ReTweet This</a> <a class='mini-facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Share On Facebook'>Share on Facebook</a> <a class='mini-stumble' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumble This'>StumbleUpon This</a> <a class='mini-tech' expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url' target='_blank' title='Add To Technorati'>Add to Technorati</a> <a class='mini-digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg This'>Digg This</a> </div> </td> </tr> </table> </div> </b:if> </blockquote> Replace YOUR PUBLISHER ID with your AdSense account ID. You'll find it with the Home tab, on your "Account settings" page. It should look something like this: pub-5623269265862168 (copy only the numbers and then paste them) 6) Save template... and just go to one of your post to see the changes.

adsense adsense optimization social media social media plugins Add Social Bookmarking Buttons near Adsense Ads

The main advantages of this widget is that you can increase your AdSense impressions along with CTR - and of course, fill up the empty space...