11/04/13 | PreToPro Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxkM1-AhZii01YKazzVuN3vl_MBZOyBMuFgboR3nZH5pVZXqlXnIoSR1c57eDf0CVKAGmGpx-rsZldIKSjU3ln_Ba2-5EAoBsWiNoEKJuRz82cJWYkVr1b7d7Yg-ASK06QNBo8mQzcC4j/s1600/floating+social+bar+top.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxkM1-AhZii01YKazzVuN3vl_MBZOyBMuFgboR3nZH5pVZXqlXnIoSR1c57eDf0CVKAGmGpx-rsZldIKSjU3ln_Ba2-5EAoBsWiNoEKJuRz82cJWYkVr1b7d7Yg-ASK06QNBo8mQzcC4j/s320/floating+social+bar+top.JPG" width="278" /></a></div>
 
 
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsz5N9D6MPYJSM3bfuBw-Ii7xNEptcbpyDpCh4l20LG4u9lqy5Q7WgGwNSDx7GB2kPx8wWBic2Zrwu6fyMlhR8DWVwfEU7DUXPwx4BnRfuA5U90il1bcubofC10hKnwGdRslcHqLScBH/s1600/floating+social+bar.JPG" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" padding="10" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeQsz5N9D6MPYJSM3bfuBw-Ii7xNEptcbpyDpCh4l20LG4u9lqy5Q7WgGwNSDx7GB2kPx8wWBic2Zrwu6fyMlhR8DWVwfEU7DUXPwx4BnRfuA5U90il1bcubofC10hKnwGdRslcHqLScBH/s320/floating+social+bar.JPG" width="62" /></a>Today I am going to show you how to add a cool Social sharing widget with a nice hover effect (See the figure at the right) in your blogger blog. Social sharing widget is really important for any blog as it helps a blog to be socially active thus bringing you high traffic to your blog. This widget is very clean, sleek and has cool hover effect. It is well-coded and uses simple CSS and javascript coding and will also not slow your blog loading speed (Recommended : <a href="http://pretoproblogger.blogspot.com/2013/08/10-tips-to-increase-your-blog-loading.html" target="_blank">10 Tips To Increase your Blog loading speed.</a>) 
<div class="post-body entry-content" id="post-body-7556505276072292084" itemprop="description articleBody" style="color: #333333; font-family: Verdana, Geneva, sans-serif; font-size: 12px; line-height: 1.6em; margin: 0px 0px 0.75em;">
</div>
It Contains five social buttons: 
<ul style="text-align: left;">
<li>Twitter</li>
</ul>
<ul style="text-align: left;">
<li>Google+</li>
</ul>
<ul style="text-align: left;">
<li>Facebook</li>
</ul>
<ul style="text-align: left;">
<li>Rss</li>
</ul>
<ul style="text-align: left;">
<li>Pinterest</li>
</ul>
 
For adding this widget just follow the simple steps given below- 
 
Recommended : 
 
<ul style="text-align: left;">
<li><a href="http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html" target="_blank">How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)</a></li>
<li><a href="http://pretoproblogger.blogspot.com/2013/10/how-to-add-floating-navigation-bar-in.html" target="_blank">How to add a floating navigation bar in blogger blog?</a></li>
</ul>
 
<div>
<h3>
How To Add this Social Sharing Widget :</h3>
</div>
<div>
 </div>
<div>
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">Go to your blogger dashboard</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Select your blogger blog</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Click on Layout from Drop Down menu (shown in picture)</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhFC00yUiEneD6AjI38US0XzgRdNNkTHwtoqTm9JAIePU5WoBPQ15Tbz9E1zq7eJgaqmu9nmXkP5hZ-elIzdQu-_aArare_n3GyD-Zb0rm7bk-L5MzwqzO_sXvn1rJIxJZDQ3IOQGf0QE/s900/1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-color: white; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
 
 
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">A new Window appear</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Click on Add gadget</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">And select HTML/JavaScript</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">Next Box of HTML/JavaScript will appear (shown in picture)</li>
</ul>
</div>
<div style="text-align: center;">
     
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGAMOxnn2e2idyVYMtV5VFR0V8y4gRM4WvXfjh-Uj4RTeahMfv0NZ4KMtnTL0hgUsBSHtjW0v96bm52gxxVuAlZLOH4mSyV4liN99iqDL0EEBjA-ISYSmmMoHMEa9y-xUOmQ5ADyld1wk/s900/2.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></a></div>
 
 
<div style="background-color: white; font-size: 13px; line-height: 18px; text-align: left;">
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">Now the box of HTML/JavaScript will appear when you click on the box.</li>
</ul>
</div>
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" imageanchor="1" style="color: #6a6a6a; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="1" height="221" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuUdV6YIWJL_6zaX7XjWBObPleQyH90jbXnEyWlI1cx-p71AHEPFFTP_HHljNXTZsdowc_jZVihijglqjUzCgfqwCt7ENToRb94VpaD7pBmHPYYdY1epu_Cw5TmOh7S2SVcGqujzXNRB0/s900/5.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></a></div>
<div style="text-align: left;">
<ul style="background-color: white; font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">Now paste the following code to install the gadget to your blog.</li>
</ul>
<div style="background-color: white;">
 </div>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
 </div>
<div>
<blockquote class="tr_bq" style="font-size: 13px; line-height: 18px;">
<blockquote>
<style type="text/css"> 
ul#social { 
 position: fixed; 
 margin: 0px; 
 padding: 0px; 
 top: 10px; 
 left: 0px; 
 list-style: none; 
 z-index:9999; 
} 
ul#social li { 
 width: 100px; 
} 
ul#social li a { 
 display: block; 
 margin-left: -2px; 
 width: 100px; 
 height: 70px; 
 background-color:#fff; 
 background-repeat:no-repeat; 
 background-position:center center; 
 border:1px solid #AFAFAF; 
 -moz-border-radius:0px 10px 10px 0px; 
 -webkit-border-bottom-right-radius: 10px; 
 -webkit-border-top-right-radius: 10px; 
 -khtml-border-bottom-right-radius: 10px; 
 -khtml-border-top-right-radius: 10px; 
 -moz-box-shadow: 0px 4px 3px #000; 
 -webkit-box-shadow: 0px 4px 3px #000; 
} 
ul#social .twitter a{ 
 background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3LfXgl6ZjCj9Qy1-xa18z5gVVppTNBomcxZbOBQYhZ-9gQ0qyVSmSI9Jld7eoKgrTG5af5hOwB6Mn3yfpZsCIwq87Kq88uD75VGJwchCYss9-FrisdoAA4Ee0zYcrhau_9sBp4BA0Rk/s1600/Twitter.png)no-repeat; 
background-position:center center; 
} 
ul#social .googleplus a { 
 background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMh_4ZBofpG_IU7WIx0MWd4Hu1MqSdUh0rU-cvsorHnaBKjkehp_6jZGaQvGPBzkIxA6wtlC__80WadJYNt_F6mUD80Wum6pnP71QI_H-GkO2U94J4_VKCCVvEWT0Xf3ixXMI89c2J3OQ/s1600/GOOGLE+PLus.png)no-repeat; 
background-position:center center; 
} 
ul#social .facebook a { 
 background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jKVu979veqCYDoY_63q-N4wHkZpomddlqZV3B_N5kISo-BtU4wV4eQh4BjxYa_hEdwjJXv-i6W0l4ry7vzo2I23MHxXu8_Y0eA9s449n1vM4Uk0XDNSQxtWqdTE1s8wANb0XNlzr8WI/s1600/Facebook.png)no-repeat; 
background-position:center center; 
} 
ul#social .rss a { 
 background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsku2BlsiS-iPM1gF5TNACPsjWiLqFUKK_KDpFOCDBcTH9HbgPNE_w9I31R7WpEHHw0IIzlbGwvnnZhSZCXaC36a5vVtT_RPfwVFf9iWKh4d9anOB4JoihpQdrEXmI1OFM9T4V2oNnjQU/s1600/rss.png)no-repeat; 
background-position:center center; 
} 
ul#social .pinterest a { 
 background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEq3fRFBgVZYNcBEhGrAMfma-rRPeFBXIV4Ki1_cQLJuJbhiGDQ244av-46_XeGBQnxdzZguuMoza84WienSUIqeABlCaQe0rA57uc7iV2zjQ9ZlDBIM-ibCYsisgLFHl7Sd2MEj94pg/s1600/Pinterest.png)no-repeat; 
background-position:center center; 
} 
</style> 
<code style="color: #333333; font-family: 'Courier New', monospace; margin: 0px; padding: 0px;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></code><script type='text/javascript'> 
$(function () { 
 $('#social a').stop().animate({ 
 'marginLeft': '-85px' 
 }, 1000); 
 $('#social > li').hover( 
 function () { 
 $('a', $(this)).stop().animate({ 
 'marginLeft': '-2px' 
 }, 200); 
 }, 
 function () { 
 $('a', $(this)).stop().animate({ 
 'marginLeft': '-85px' 
 }, 200); 
 } 
 ); 
}); 
</script> 
<ul id='social'> 
 <li class='twitter'><a href='#' title='Twitter'></a></li> 
 <li class='googleplus'><a href='#' title='Google Plus'></a></li> 
 <li class='facebook'><a href='#' title='Facebook'></a></li> 
 <li class='rss'><a href='#' title='Rss'></a></li> 
 <li class='pinterest'><a href='#' title='Pinterest'></a></li> 
</ul></blockquote>
</blockquote>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
 </div>
<div style="font-size: 13px; line-height: 18px;">
Now you are almost done, just replace the Highlighted  #  with your social handles. Also if you have jquery plugin already in your blog template, delete the code highlighted in yellow (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>) . </div>
<div style="font-size: 13px; line-height: 18px;">
 </div>
You are done. Now Just Save Your changes.</div>
<div>
 </div>
<div>
Having problems? Feel free to ask to me through comments section.</div>
</div>
</div>
</div>
</div>

How To Add Cool Social Sharing Widget with hover Effect?

Kaushal Srivastava 2 Blog Gadgets, Blog Widgets, Floating Gadget, Floating Widget, PreToPro Blogger, Social Buttons, Social Widgets 04:26

Today I am going to show you how to add a cool Social sharing widget with a nice hover effect (See the figure at the right) in your blogger blog. Social sharing widget is really important for any blo…

Advertise Here

How To Add Cool Social Sharing Widget with hover Effect?

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive