Blogger Buzz: social media

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...

Add A CSS Animated Share Button on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
I saw this on <a href="http://www.paulund.co.uk/animated-css-share-button" rel="nofollow" style="color: blue;">Paulund</a>, a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop small utilities, all of these being applicable to web design. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunGEyyN9Ili7BdQRVCwlW1-la3f29IcPtqJeFQ2-eZ5RIJg1x02MF3mFLW4AAWQ9OEoYmO-IeCEIXCzHtEV82n3EUpt_S83pYwGQL9bx_umBi2ZhF-W7HPEeLfyAHFHggqeirDLyozQH_/s1600/css-animated-share-button-with-social-media-icons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="CSS Animated Share Buttons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhunGEyyN9Ili7BdQRVCwlW1-la3f29IcPtqJeFQ2-eZ5RIJg1x02MF3mFLW4AAWQ9OEoYmO-IeCEIXCzHtEV82n3EUpt_S83pYwGQL9bx_umBi2ZhF-W7HPEeLfyAHFHggqeirDLyozQH_/s1600/css-animated-share-button-with-social-media-icons-for-blogger.png" title="CSS Animated Share Buttons" /></a></div>
 
In this tutorial we will see how we can add as similar button with a really cool hover effect and four social media icons on Blogger with links to share the current page on Facebook, Twitter, Google+ and Pinterest. However, we can replace these social networks later with any other just by changing the links below. 
 
Demo 
<style>.share_button { width: 300px; height: 50px; margin: 10px auto; } .share_button ul { width: 50%; height: inherit; float: left; list-style: none; margin: 0 !important; padding: 0 !important; } .share_button ul h1 { margin-top: 9%; overflow: hidden; width: 100%; color: #4889F0; font-size: 18px; text-shadow:2px 2px 2px #fff; } .share_button ul li { position: absolute; height: inherit; width: 150px; margin: 0 !important; padding: 0 !important; background: #EEEEEE; -webkit-transition: all 600ms; -moz-transition: all 600ms; -o-transition: all 600ms; -ms-transition: all 600ms; transition: all 600ms; text-align: center; } .share_button ul li h2 { display: inline-block; width: 32%; height: 40px; overflow: hidden; margin-top: 5%; cursor: pointer; border: 0 !important; } .share_button ul:first-child li:first-child{ text-align: right; } .share_button ul:last-child li:first-child{ text-align: left; } .share_button ul:first-child li:last-child, .share_button:hover ul:first-child li:first-child { -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); -o-transform: rotateY(90deg); -ms-transform: rotateY(90deg); transform: rotateY(90deg); } .share_button ul:last-child li:last-child, .share_button:hover ul:last-child li:first-child { -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } .share_button:hover ul:first-child li:last-child, .share_button:hover ul:last-child li:last-child { -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -o-transform: rotateY(0deg); -ms-transform: rotateY(0deg); transform: rotateY(0deg); } </style> 
<div class="share_button">
<ul>
<li><h1>
 Share t </h1>
</li>
<li><h2>
 <a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&t=" + data:post.title " href="https://www.blogger.com/null" title="Share on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPu54V7eq7mMwRR_gcJ_6oMB2-l4C2vEU44j4Uv0WrniCmBD13OlmGdmi9SJn7OL-AC1xLhgDr2RluHrZU6DYzMRh4H_ByaMYtCj9s6Bmf17hJb-yVKbsBfBRd-hfqpD7lUaWkWY-8AZ7x/s1600/Facebook.png" /></a></h2>
<h2>
<a expr:href=""http://twitter.com/home?status=" + data:post.title + " " + data:post.canonicalUrl " href="https://www.blogger.com/null" title="Share on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAia8t_UvGp6cOQmfDo7bR0XFrh69Ew8MTJ2KxA1WqiXJWbLebuFwsZYJRed265zihe2tX4Tw0GKbXi8DSeN1t93X2VgZewLe2lXA1mJ8RYx9Jl4HB1vQ7emhdDWf3IpAiByVwmmvq4ZE/s1600/Twitter.png" /></a></h2>
</li>
</ul>
<ul>
<li><h1>
his page</h1>
</li>
<li> <h2>
<a expr:href=""https://plus.google.com/share?url=" + data:post.canonicalUrl " href="https://www.blogger.com/null" title="Share on Google Plus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHsj4dx6oSwk6JjiuoX_EBTatgTJ1DX-1rnwHOkYIQF4XA3URP13vIVvvivhoCfP3bSvSc4CWk5iuQYrBTbzmFMBSxsztkXjGaH7e13qyBQwPZ0zTMKvPoCGeFVykqslcRPkPaFSwsPzi/s1600/Google-plus.png" /></a></h2>
<h2>
 <a href="javascript:void((function(){var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());" title="Share on Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTgU4UcSyqn6_VsHYQKp8-WDoME_un3m36cCc7VHoETFsGSKsQRMw_WvD8DDJWw69e_P9RpeVzct75oyI5HWh1QlRzN-PtojIrKhVQpymVKKLldla8sztQROHSUQKBCaqOJh-VxgCV3gC/s1600/Pinterest.png" /></a> </h2>
</li>
</ul>
</div>
 
<h3>
Creating A CSS Animated Share Button</h3>
 
Step 1. From your <a href="http://blogger.com/" rel="nofollow" style="color: blue;">Blogger dashboard</a> > go to Template > click on the Edit HTML button. 
 
Step 2. Click anywhere inside the code area and press the Ctrl + F keys to open the blogger search box. Type or paste the ]]></b:skin> tag and hit Enter to find it. Step 3. Just above ]]></b:skin> add this CSS: 
<blockquote class="tr_bq">
.share_button { 
width: 300px; 
height: 50px; 
margin: 10px auto; 
} 
.share_button ul { 
width: 50%; 
height: inherit; 
float: left; 
list-style: none; 
margin: 0 !important; 
padding: 0 !important; 
} 
.share_button ul h1 { 
margin-top: 9%; 
overflow: hidden; 
width: 100%; 
color: #4889F0; 
font-size: 18px; 
text-shadow:2px 2px 2px #fff; 
} 
.share_button ul li { 
position: absolute; 
height: inherit; 
width: 150px; 
margin: 0 !important; 
padding: 0 !important; 
background: #EEEEEE; 
-webkit-transition: all 600ms; 
-moz-transition: all 600ms; 
-o-transition: all 600ms; 
-ms-transition: all 600ms; 
transition: all 600ms; 
text-align: center; 
} 
.share_button ul li h2 { 
display: inline-block; 
width: 32%; 
height: 40px; 
overflow: hidden; 
margin-top: 5%; 
cursor: pointer; 
border: 0 !important; 
} 
.share_button ul:first-child li:first-child{ 
text-align: right; 
} 
.share_button ul:last-child li:first-child{ 
text-align: left; 
} 
.share_button ul:first-child li:last-child, 
.share_button:hover ul:first-child li:first-child { 
-webkit-transform: rotateY(90deg); 
-moz-transform: rotateY(90deg); 
-o-transform: rotateY(90deg); 
-ms-transform: rotateY(90deg); 
transform: rotateY(90deg); 
} 
.share_button ul:last-child li:last-child, 
.share_button:hover ul:last-child li:first-child { 
-webkit-transform: rotateY(-90deg); 
-moz-transform: rotateY(-90deg); 
-o-transform: rotateY(-90deg); 
-ms-transform: rotateY(-90deg); 
transform: rotateY(-90deg); 
} 
.share_button:hover ul:first-child li:last-child, 
.share_button:hover ul:last-child li:last-child { 
-webkit-transform: rotateY(0deg); 
-moz-transform: rotateY(0deg); 
-o-transform: rotateY(0deg); 
-ms-transform: rotateY(0deg); 
transform: rotateY(0deg); 
}</blockquote>
 
Step 5. And now let's go ahead and insert the HTML button in the template. The most common place would be just after <div class='post-footer'> - find the second <div class='post-footer'> and paste the following code just above it: 
<blockquote class="tr_bq">
<div class='share_button'> 
 
<ul> 
<li><h1> 
Share t 
</h1></li> 
 
<li><h2> 
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title ' title='Share on Facebook'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPu54V7eq7mMwRR_gcJ_6oMB2-l4C2vEU44j4Uv0WrniCmBD13OlmGdmi9SJn7OL-AC1xLhgDr2RluHrZU6DYzMRh4H_ByaMYtCj9s6Bmf17hJb-yVKbsBfBRd-hfqpD7lUaWkWY-8AZ7x/s1600/Facebook.png"/></a></h2> 
 
<h2><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; &quot; + data:post.canonicalUrl ' title='Share on Twitter'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGAia8t_UvGp6cOQmfDo7bR0XFrh69Ew8MTJ2KxA1WqiXJWbLebuFwsZYJRed265zihe2tX4Tw0GKbXi8DSeN1t93X2VgZewLe2lXA1mJ8RYx9Jl4HB1vQ7emhdDWf3IpAiByVwmmvq4ZE/s1600/Twitter.png"/></a></h2> 
</li> 
</ul> 
<ul> 
<li><h1>his page</h1></li> 
 
<li> 
<h2><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl ' title='Share on Google Plus'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMHsj4dx6oSwk6JjiuoX_EBTatgTJ1DX-1rnwHOkYIQF4XA3URP13vIVvvivhoCfP3bSvSc4CWk5iuQYrBTbzmFMBSxsztkXjGaH7e13qyBQwPZ0zTMKvPoCGeFVykqslcRPkPaFSwsPzi/s1600/Google-plus.png"/></a></h2> 
 
<h2> 
<a href='javascript:void((function(){var%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)})());' title='Share on Pinterest'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGTgU4UcSyqn6_VsHYQKp8-WDoME_un3m36cCc7VHoETFsGSKsQRMw_WvD8DDJWw69e_P9RpeVzct75oyI5HWh1QlRzN-PtojIrKhVQpymVKKLldla8sztQROHSUQKBCaqOJh-VxgCV3gC/s1600/Pinterest.png"/></a> 
</h2> 
</li> 
</ul> 
 
</div></blockquote>
Note: if you want to change the icons, replace the URLs in blue. 
 
Step 5. Click on the Save template button and we're done! Enjoy ;)</div>

Blog Design social media Widgets Add A CSS Animated Share Button on Blogger

I saw this on Paulund , a highly recommended site with a good collection of snippets, i.e., a collection of different codes that develop sm...

jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. But to add the gadgets that we want, we need to have enough space. A solution would be using an expanding/collapsing menu that is hidden and expands when the user clicks on it. 
 
Originally, this plugin called Sliding Login Panel was created so that users could register on the site, but as we know, in Blogger we don't have the option to add a user registration, however, that doesn't mean that we can't take advantage of this plugin and use it to add other elements, such as a menu, search box, social icons, feed subscription etc.  
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVzI2MRKkKL2FP7pwPXs14LeRh-ZSj0pKH_mRR7Ulqx-ce3IhYwv_Ev2kXtZDPvIpIuTAmY7rnCQZIPIzISZxGJaFC5G8FKislhCoD9r5TZMBron2uUQ4klq5VjjrcpMbcZf2v5oy4Vs7/s1600/jquery-sliding-panel-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Sliding Panel Menu Using JQuery" border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVzI2MRKkKL2FP7pwPXs14LeRh-ZSj0pKH_mRR7Ulqx-ce3IhYwv_Ev2kXtZDPvIpIuTAmY7rnCQZIPIzISZxGJaFC5G8FKislhCoD9r5TZMBron2uUQ4klq5VjjrcpMbcZf2v5oy4Vs7/s1600/jquery-sliding-panel-blogger.png" title="Sliding Panel Menu Using JQuery" width="400" /></a></div>
You can find a demo of this panel in this blog - just click on the Open menu link on the top. 
 
<h3>
Adding the jQuery Expand/Collapse Slider Panel to Blogger</h3>
This sliding menu is made with jQuery, so the first thing is to add the script by pasting it just below the <head> tag: 
 
Step 1. From your Blogger dashboard > go to Template > 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;"><img alt="blogger template" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="add a jQuery sliding panel with expanding/collapsing content to Blogger" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and search by pressin the CTRL + F keys for the <head> tag 
 
Step 3. Below the <head> tag, add this script: 
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript'> 
$(document).ready(function() { 
 
$(&quot;#open&quot;).click(function(){ 
$(&quot;div#panel&quot;).slideDown(&quot;slow&quot;); 
}); 
 
$(&quot;#close&quot;).click(function(){ 
$(&quot;div#panel&quot;).slideUp(&quot;slow&quot;); 
}); 
 
$(&quot;#toggle a&quot;).click(function () { 
$(&quot;#toggle a&quot;).toggle(); 
}); 
 
});</script> 
 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<style> 
body#layout #slide-top-panel {display:none !important;} 
</style> 
</b:if></blockquote>
 
Step 4. Now search (CTRL + F) the </head> tag and add the CSS styles just above it: 
<blockquote class="tr_bq">
<style> 
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} 
.clearfix {display: inline-block;} 
* html .clearfix {height: 1%;} 
.clearfix {display: block;} 
.clearfix {height: 1%;} 
.clearfix {display: block;} 
 
.tab { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-b05NntsFIN1FdHWBTDYfNnISjfXiEz01OxPoRBnwFkRsPxFgprBVwI0jz5PUz10JyMT5_UfOKIaAw7sfiaGcRg9aqKkxzPVQOFtvp5SBMPIwXwb0IvkK8awkcLloMwzLVYzZKebtsxm4/s1600/sliding-panel-tab-0.png) repeat-x 0 0; 
height: 42px; 
position: relative; 
top: 0; 
z-index: 999; 
} 
.tab ul.login { 
display: block; 
position: relative; 
float: right; 
clear: right; 
height: 42px; 
width: auto; 
font-weight: bold; 
line-height: 42px; 
margin: 0; 
right: 150px; 
color: white; 
font-size: 80%; 
text-align: center; 
} 
.tab ul.login li.left { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNxwMJQGeAreiEBWh1ylSOz0g7IthlmCahm_JBE2vOADK11nM9gDUimBxMYt3AWqmLOI-8_NVt_GtqyY-PbG0zsnafVoMCAqUqespN1Imqx7Uw6w3sRY5HfwachHKBx3jGHW6_6woJkIXp/s1600/sliding-panel-tab-left.png) no-repeat left 0; 
height: 42px; 
width: 30px; 
padding: 0; 
margin: 0; 
display: block; 
float: left; 
} 
.tab ul.login li.right { 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZkUS66S4fKBS59M9LYkt4rc7a5BFEgG9SYrEsJUb-dn9l19mGS9qxR4aodZQ5kpEk5q92zKv_ZXwkzDcZsycndMv5XPn96ccpdLvmbe28RlJX-juDAcEvS92JHWTFOYHynwDk_hlInZtn/s1600/sliding-panel-tab-right.png) no-repeat left 0; 
height: 42px; 
width: 30px; 
padding: 0; 
margin: 0; 
display: block; 
float: left; 
} 
.tab ul.login li { 
text-align: left; 
padding: 0 6px; 
display: block; 
float: left; 
height: 42px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHPrUBiCahx_ypqksz7wQoN0poJBOa9WsT-9TymNWVI0r6GW7BAywQAIKMWqyfcdjBk8AMAJq-yalldI21EzmdDMcNRAM4fh_FVbh6yOA5ux6Qfu8BvyTE8nSzT8kkwF16WtK4iTk8oAl0/s1600/sliding-panel-tab.png) repeat-x 0 0; 
} 
 
.tab ul.login li a {color: #15ADFF;} 
.tab ul.login li a:hover {color: #FFFFFF;} 
.tab .sep {color:#414141} 
 
.tab a.open, .tab a.close { 
height: 20px; 
line-height: 20px !important; 
padding-left: 30px !important; 
cursor: pointer; 
display: block; 
width: 100px; 
position: relative; 
top: 11px; 
} 
 
.tab a.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8roioylkiuNUdR839v8XcmoxDfwyu32-_jBVAr1hF64ojcI0X50OUlnduPz6DwRfsI19XEC7m8Dyt_r4XhtNgIjaKmiCEMaAw4Sb542s-5acfUSA5q64-LoFWWmx6gWa0KUPtjbAnasr/s1600/button-open.png) no-repeat left 0;} 
.tab a.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZuJB7H81yhTFHRf1jMAHtSQoV4uli-b7P7BPxnOz5bB1veQ-Ke8ozmiopVPFEIqmuKE0b7CoXlq-Y7DVSoX_8Jt6WP5NgeaT1Z-Wvp1bz8i-CgRi9JLuNWoJX9xCC_ET1UC4q2lNXYCf/s1600/button-close.png) no-repeat left 0;} 
.tab a:hover.open {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge8roioylkiuNUdR839v8XcmoxDfwyu32-_jBVAr1hF64ojcI0X50OUlnduPz6DwRfsI19XEC7m8Dyt_r4XhtNgIjaKmiCEMaAw4Sb542s-5acfUSA5q64-LoFWWmx6gWa0KUPtjbAnasr/s1600/button-open.png) no-repeat left -19px;} 
.tab a:hover.close {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZuJB7H81yhTFHRf1jMAHtSQoV4uli-b7P7BPxnOz5bB1veQ-Ke8ozmiopVPFEIqmuKE0b7CoXlq-Y7DVSoX_8Jt6WP5NgeaT1Z-Wvp1bz8i-CgRi9JLuNWoJX9xCC_ET1UC4q2lNXYCf/s1600/button-close.png) no-repeat left -19px;} 
 
#slide-top-panel { 
position: absolute; 
top: 0; 
width: 100%; 
z-index: 999; 
text-align: center; 
margin-left: auto; 
margin-right: auto; 
} 
#panel { 
width: 100%; 
height: 230px; 
color: #999999; 
background: #272727; 
overflow: hidden; 
position: relative; 
z-index: 3; 
display: none; 
} 
#panel h4 { 
font-size: 18px; 
color: #F2F2F2; 
text-align: center; 
padding: 5px 0 10px; 
margin: 0; 
} 
#panel p { 
margin: 5px 0; 
padding: 0px; 
} 
#panel a { 
text-decoration: none; 
color: #15ADFF; 
} 
#panel a:hover { 
color: white; 
} 
#panel .content { 
width: 960px; 
margin: 0 auto; 
padding-top: 15px; 
text-align: left; 
font-size: 0.85em; 
} 
#panel .content .left { 
width: 280px; 
float: left; 
padding: 0 15px; 
border-left: 1px solid #333; 
} 
#panel .content .right { 
border-right: 1px solid #333; 
} 
#panel .content form { 
margin: 0 0 10px 0; 
} 
#panel .content label { 
float: left; 
padding-top: 8px; 
clear: both; 
width: 280px; 
display: block; 
} 
#panel .content input.field { 
border: 1px #1A1A1A solid; 
background: #545454; 
border-radius: 10px; 
margin-right: 5px; 
margin-top: 4px; 
width: 200px; 
color: white; 
height: 18px; 
} 
#panel .content input:focus.field { 
background: #7F7F7F; 
} 
#panel .content input.button-register { 
display: block; 
clear: both; 
height: 24px; 
width: 94px; 
color: white; 
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZqorYdzXobgF4z7lASgnk8JdDcJj0c-zJgFBD7RzDMfQwuSj87irGh04Y7dnI5RJ3O6hyA1G8H5uF3YkP3zhrfcZ3lAPl7yRwvc-0rvlwbgsE07WMfcCBavY2b7hiZ_MDZMC7Tx6MmsA8/s1600/button-register.png) no-repeat 0 0; 
text-align: center; 
cursor: pointer; 
border: none; 
font-weight: bold; 
margin: 10px auto; 
} 
#sliding-panel { 
width: 160px; 
float: left; 
} 
#sliding-panel2 { 
width: 160px; 
float: right; 
} 
#sliding-panel ul, #sliding-panel2 ul{ 
font-family: Arial, Helvetica, sans-serif; 
list-style-type:none; 
margin:0; 
padding:0; 
} 
#sliding-panel ul li a, #sliding-panel2 ul li a { 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix6lpEwD7y-NA0JUVpR4-9dsL0c5NzrcW0ewQnZ3C48d4BfXYyMAMup2nhUWYht6LcD4oA1qccUw0I60Cbmz8G7xzdZebe7YITSvIhEzRwj9WPQZAz8gdpiOQSRTEJu4VcYSluTTpgMSWh/s1600/star-bullet.png) center left no-repeat; 
margin:0; 
padding:3px 3px 3px 18px; 
} 
#sliding-panel li, #sliding-panel2 li { 
display: inline; 
} 
#sliding-panel a, #sliding-panel2 a{ 
color: #999999; 
text-decoration: none; 
font-size: 11px; 
display: block; 
padding: 3px; 
width: 160px; 
} 
#sliding-panel a:link, #sliding-panel a:visited, #sliding-panel2 a:link, #sliding-panel2 a:visited { 
color: #999999; 
text-decoration: none; 
} 
#sliding-panel a:hover, #sliding-panel2 a:hover { 
color: #FFFFFF; 
} 
 
#search-box22{ 
margin-top: 20px; 
} 
 
#search-box22 input[type="text"] { 
float: right; 
background: 10px 6px #444; 
border: 0 none; 
font: bold 12px Arial,Helvetica,Sans-serif; 
color: #777; 
width: 160px; 
padding: 6px 15px 6px 35px; 
-webkit-border-radius: 20px; 
-moz-border-radius: 20px; 
border-radius: 20px; 
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
-webkit-transition: all 0.7s ease 0s; 
-moz-transition: all 0.7s ease 0s; 
-o-transition: all 0.7s ease 0s; 
transition: all 0.7s ease 0s; 
} 
 
#search-box22 input[type="text"]:focus { 
width: 190px; 
} 
 
.about-author { 
width: 100%; 
text-transform: none; 
margin-top: 15px; 
} 
.authorbox { 
overflow: hidden; 
padding: 0; 
width: 100%; 
} 
.authorbox .authorinfo { 
} 
.authorbox .authorinfo img { 
float: left; 
margin: 4px 10px 4px 5px; 
border-radius: 100%; 
width: 20%; 
background: #222; 
padding: 5px; 
} 
.authorbox .authorinfo p { 
margin: 0; 
padding: 0 5px; 
text-align: left; 
} 
.authorinfo p a { 
text-decoration:none; 
} 
.authorbox h3 { 
margin: 0; 
display: inline-block; 
} 
h3.boxtitle { 
font-size: 14px; 
} 
</style></blockquote>
Note: 
- in case you need more space for your widgets, the height of the entire container can be changed by modifying the 230px value from height: 230px; 
- To change the background color, change this color value: #272727 
 
Step 5. And finally, we will place the HTML structure of it - right after the <body> tag, add this code: 
<blockquote class="tr_bq">
 
<div id='slide-top-panel'> 
<div id='panel'> 
<div class='content clearfix'> 
 
 
<div class='left' style='width:240px !important'> 
 
<h4>Welcome to my blog!</h4> 
<div class='about-author'> 
<div class='authorbox'> 
  <div class='authorinfo'> 
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTl6nOLTkjg_0xC7gxHIY8-X4zlBWX6F5KGTS6Ra5TnYVgtAV-Yp5ABioPs2MAR-OjytXIG7BfCb6wegm3N4eQYuhDtVmPtFmeC6BnaI7VjIDy0O04UlBkln3nEWEkUOjplgrF7WA-SG-g/s1600/profile-pic.png'/> 
<h3 class='boxtitle'>Meet the Author</h3> 
Ut eleifend tortor aliquet, fringilla nunc non, consectetur magna. Suspendisse potenti. 
</div> 
</div> 
</div> 
Looking for something? 
<form method="get" action="/search" id="search-box22"> 
  <input name="q" type="text" size="40" placeholder="Search..." /> 
</form> 
 
</div> 
 
 
<div class='left' style='width:320px !important'> 
<h4>Categories</h4> 
 
<div id='sliding-panel'> 
<ul> 
<li><a href='Link URL'>Category 1</a></li> 
<li><a href='Link URL'>Category 2</a></li> 
<li><a href='Link URL'>Category 3</a></li> 
<li><a href='Link URL'>Category 4</a></li> 
<li><a href='Link URL'>Category 5</a></li> 
<li><a href='Link URL'>Category 6</a></li> 
<li><a href='Link URL'>Category 7</a></li> 
</ul> 
</div> 
 
<div id='sliding-panel2'> 
<ul> 
<li><a href='Link URL'>Category 1</a></li> 
<li><a href='Link URL'>Category 2</a></li> 
<li><a href='Link URL'>Category 3</a></li> 
<li><a href='Link URL'>Category 4</a></li> 
<li><a href='Link URL'>Category 5</a></li> 
<li><a href='Link URL'>Category 6</a></li> 
<li><a href='Link URL'>Category 7</a></li> 
</ul> 
</div> 
</div> 
 
 
<div class='left right' align="center"> 
 
<h4>Subscribe to this blog!</h4> 
Receive the latest posts by email. Just enter your email below if you want to subscribe! 
 
<form action='http://feedburner.google.com/fb/a/mailverify?uri=Feed-Name' method='post' target='_blank'> 
<input class='field' name='email' type='text/' value=''/> 
<input name='uri' type='hidden' value='Feed-Name'/> 
<input name='lang' type='hidden' value='en_EN'/> 
<input class='button-register' type='submit' value='Subscribe'/></form> 
 
<div align='center' style="clear: both;"> 
<a href='http://www.facebook.com/username'><img title="Follow on Facebook" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9P6-xKIH_jZnfREWHuQysH1yvQrtqB2wB3_fp49l9q9x9LwsD91Lx44ZcI4feQBKFOK5rkyAZH9vwUD7SdrXul0-RvPxuNf_ydLT5vC3tc2mO4tRijGVZp-B7o1EigvNu9fzqKWNdpFze/s1600/Facebook.png' style='padding:5px;' width='32'/></a> 
<a href='http://blog-address.blogspot.com/atom.xml'><img title="RSS Feed" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFxhFlhT_MakFkszr7Vz7Tj6Z7sMSkGOiUXZacQyQ2iXqrRKU0hJpXWSr4bA_ta8eoZm3XR9cWht0tJojw7vhWQxpB3aXV6UWlM9xNeNc5oo-MTAsmFjdZjVw40wfcdkgpjBnX4DPiGuzR/s1600/RSS.png' style='padding:5px;' width='32'/></a> 
<a href='https://plus.google.com/username'><img title="Follow on Google" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtwHFZBBfSznHearVciTF5wmThGOSP94usFH2uUlRjgYn_RVOZMYDZa268wYVyjGzR6-w_17OxLJLa3MMCs9pE2zSKR_UzjLApF1nTVK3HsB4sAPu5X1N7l0E70frvgEa7i4fMsUOxjto/s1600/Google-plus.png' style='padding:5px;' width='32'/></a> 
<a href='http://twitter.com/username'><img title="Follow on Twitter" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxUFAEGH_QeLSaI6SfaK_YWwOMdJR13mZGS4yq8Y54a6dADmZOWDhKsCw2-W97TlFR6LpYzm4YXpiWVZeyM8WdFW_7sAKHLYR13uROfLE79QVvXMftLq4At3p9Kkt9Ig3NDlP3ZJNIymm/s1600/Twitter.png' style='padding:5px;' width='32'/></a> 
</div> 
 
</div> 
</div> 
</div> 
 
<div class='tab'> 
<ul class='login'> 
<li class='left'/> 
<li>Hello guest!</li> 
<li class='sep'>|</li> 
<li id='toggle'> 
<a class='open' href='#' id='open'>Open menu</a> 
<a class='close' href='#' id='close' style='display: none;'>Close menu</a> 
</li> 
<li class='right'/> 
</ul> 
</div> 
</div></blockquote>
Note: if you can't find the <body> tag, then try to find this one: 
<blockquote class="tr_bq">
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'></blockquote>
Here we have added the content in the sliding panel which will be hidden and will show on mouse click. In green are the names of each section so to make it easier to recognize them. 
 
Note: 
- In the first section, you can change the welcome message, "Meet the author" title and add your description by replacing the text in bold. To add your own picture, replace this URL: 
<blockquote class="tr_bq">
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTl6nOLTkjg_0xC7gxHIY8-X4zlBWX6F5KGTS6Ra5TnYVgtAV-Yp5ABioPs2MAR-OjytXIG7BfCb6wegm3N4eQYuhDtVmPtFmeC6BnaI7VjIDy0O04UlBkln3nEWEkUOjplgrF7WA-SG-g/s1600/profile-pic.png</blockquote>
- In the second section you have the categories - there add the URLs of your links by replacing the addresses in blue and replace Category 1, 2, 3... with the titles that you want to appear for the links. 
- In the third section is the email subscription - you must have enabled this option in your Feedburner account - just replace the text in blue with the name of your blog's feed. As for the social icons below, change the URLs in blue with your Facebook and Twitte and add the URL of your blog's RSS feed address. 
 
Basically, those are the main sections that can be customized, though, we can take some parts and paste something else instead. 
 
Step 6. Save the template and that's it! Note that this menu works with jQuery, so if you are already using Scriptaculous, Prototype or Mootools, then it will not work. 
 
I hope you'll enjoy this elegant menu with sliding effect, which will look way better if we <a href="http://buzzblogger1.blogspot.com/2012/02/how-to-remove-blogger-navbar.html" rel="nofollow" style="color: blue;" target="_blank">remove the Blogger navbar</a>.</div>

jQuery menus social media Widgets jQuery Sliding Panel with Expanding/Collapsing Content for Blogger

Many times when we think about making a blog, we want to put many gadgets, although many are not necessary, or perhaps only a few of them. ...