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?

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

Advertise Here

How To Add Cool Social Sharing Widget with hover Effect?

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive