PreToPro Blogger: Floating Gadget | Turning PreBloggers Into ProBloggers.

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

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<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>
<br />
<br />
<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 (<b>Recommended</b> : <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>)<br />
<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:<br />
<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>
<br />
For adding this widget just follow the simple steps given below-<br />
<br />
<b>Recommended</b> :<br />
<br />
<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>
<br />
<div>
<h3>
<span style="font-family: inherit;">How To Add this </span>Social Sharing Widget <span style="font-family: inherit;">:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></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;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></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;"><span style="font-family: inherit;"><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" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<b><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;"><span style="font-family: inherit;"><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" /></span></a></b></div>
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;"></b><span style="background-color: white; font-size: 13px; line-height: 18px;"></span><br style="background-color: white; font-size: 13px; line-height: 18px;" /></span>
<br />
<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;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></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;"><span style="font-family: inherit;"><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" /></span></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;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="background-color: white;">
<span style="font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<blockquote class="tr_bq" style="font-size: 13px; line-height: 18px;">
<blockquote>
<span style="background-color: white;"><style type="text/css"></span><br />
<span style="background-color: white;">ul#social {</span><br />
<span style="background-color: white;">    position: fixed;</span><br />
<span style="background-color: white;">    margin: 0px;</span><br />
<span style="background-color: white;">    padding: 0px;</span><br />
<span style="background-color: white;">    top: 10px;</span><br />
<span style="background-color: white;">    left: 0px;</span><br />
<span style="background-color: white;">    list-style: none;</span><br />
<span style="background-color: white;">    z-index:9999;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social li {</span><br />
<span style="background-color: white;">    width: 100px;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social li a {</span><br />
<span style="background-color: white;">    display: block;</span><br />
<span style="background-color: white;">    margin-left: -2px;</span><br />
<span style="background-color: white;">    width: 100px;</span><br />
<span style="background-color: white;">    height: 70px;</span><br />
<span style="background-color: white;">    background-color:#fff;</span><br />
<span style="background-color: white;">    background-repeat:no-repeat;</span><br />
<span style="background-color: white;">    background-position:center center;</span><br />
<span style="background-color: white;">    border:1px solid #AFAFAF;</span><br />
<span style="background-color: white;">    -moz-border-radius:0px 10px 10px 0px;</span><br />
<span style="background-color: white;">    -webkit-border-bottom-right-radius: 10px;</span><br />
<span style="background-color: white;">    -webkit-border-top-right-radius: 10px;</span><br />
<span style="background-color: white;">    -khtml-border-bottom-right-radius: 10px;</span><br />
<span style="background-color: white;">    -khtml-border-top-right-radius: 10px;</span><br />
<span style="background-color: white;">    -moz-box-shadow: 0px 4px 3px #000;</span><br />
<span style="background-color: white;">    -webkit-box-shadow: 0px 4px 3px #000;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .twitter a{</span><br />
<span style="background-color: white;">     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg3LfXgl6ZjCj9Qy1-xa18z5gVVppTNBomcxZbOBQYhZ-9gQ0qyVSmSI9Jld7eoKgrTG5af5hOwB6Mn3yfpZsCIwq87Kq88uD75VGJwchCYss9-FrisdoAA4Ee0zYcrhau_9sBp4BA0Rk/s1600/Twitter.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .googleplus a      {</span><br />
<span style="background-color: white;">    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;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .facebook a      {</span><br />
<span style="background-color: white;">    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9jKVu979veqCYDoY_63q-N4wHkZpomddlqZV3B_N5kISo-BtU4wV4eQh4BjxYa_hEdwjJXv-i6W0l4ry7vzo2I23MHxXu8_Y0eA9s449n1vM4Uk0XDNSQxtWqdTE1s8wANb0XNlzr8WI/s1600/Facebook.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .rss a      {</span><br />
<span style="background-color: white;">    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsku2BlsiS-iPM1gF5TNACPsjWiLqFUKK_KDpFOCDBcTH9HbgPNE_w9I31R7WpEHHw0IIzlbGwvnnZhSZCXaC36a5vVtT_RPfwVFf9iWKh4d9anOB4JoihpQdrEXmI1OFM9T4V2oNnjQU/s1600/rss.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;">ul#social .pinterest a   {</span><br />
<span style="background-color: white;">    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyEq3fRFBgVZYNcBEhGrAMfma-rRPeFBXIV4Ki1_cQLJuJbhiGDQ244av-46_XeGBQnxdzZguuMoza84WienSUIqeABlCaQe0rA57uc7iV2zjQ9ZlDBIM-ibCYsisgLFHl7Sd2MEj94pg/s1600/Pinterest.png)no-repeat;</span><br />
<span style="background-color: white;">background-position:center center;</span><br />
<span style="background-color: white;">}</span><br />
<span style="background-color: white;"></style></span><br />
<code style="color: #333333; font-family: 'Courier New', monospace; margin: 0px; padding: 0px;"><span style="background-color: #ffd966;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></span></code><span style="background-color: white;"><script type='text/javascript'></span><br />
<span style="background-color: white;">$(function () {</span><br />
<span style="background-color: white;">    $('#social a').stop().animate({</span><br />
<span style="background-color: white;">        'marginLeft': '-85px'</span><br />
<span style="background-color: white;">    }, 1000);</span><br />
<span style="background-color: white;">    $('#social > li').hover(</span><br />
<span style="background-color: white;">        function () {</span><br />
<span style="background-color: white;">            $('a', $(this)).stop().animate({</span><br />
<span style="background-color: white;">                'marginLeft': '-2px'</span><br />
<span style="background-color: white;">            }, 200);</span><br />
<span style="background-color: white;">        },</span><br />
<span style="background-color: white;">        function () {</span><br />
<span style="background-color: white;">            $('a', $(this)).stop().animate({</span><br />
<span style="background-color: white;">                'marginLeft': '-85px'</span><br />
<span style="background-color: white;">            }, 200);</span><br />
<span style="background-color: white;">        }</span><br />
<span style="background-color: white;">    );</span><br />
<span style="background-color: white;">});</span><br />
<span style="background-color: white;"></script></span><br />
<span style="background-color: white;"><ul id='social'></span><br />
<span style="background-color: white;"> <li class='twitter'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Twitter'></a></li></span><br />
<span style="background-color: white;"> <li class='googleplus'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Google Plus'></a></li></span><br />
<span style="background-color: white;"> <li class='facebook'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Facebook'></a></li></span><br />
<span style="background-color: white;"> <li class='rss'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Rss'></a></li></span><br />
<span style="background-color: white;"> <li class='pinterest'><a href='</span><span style="background-color: #e1704b; margin: 0px; padding: 0px;">#</span><span style="background-color: white;">' title='Pinterest'></a></li></span><br />
<span style="background-color: white;"></ul></span></blockquote>
</blockquote>
<div style="background-color: white; font-size: 13px; line-height: 18px;">
<br /></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="background-color: white;">Now you are almost done, just replace the Highlighted  </span><span style="background-color: #e1704b;">#</span><span style="background-color: white;">  with your social handles. Also if you have jquery plugin already in your blog template, delete the code highlighted in yellow (</span><span style="background-color: #ffd966; color: #333333; font-family: 'Courier New', monospace;"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></span><span style="background-color: white;">) . </span></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="background-color: white;"><br /></span></div>
You are done. Now Just Save Your changes.</div>
<div>
<br /></div>
<div>
<i>Having problems? Feel free to ask to me through comments section.</i></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...

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Kaushal Srivastava 207 Blog Gadgets, Blog Widgets, Floating Gadget, PreToPro Blogger, Social Buttons 07:41

<div dir="ltr" style="text-align: left;" trbidi="on">
<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/AVvXsEh6xh-p7uS_J_syubNud57za-RiR4oxXji2qZ3xGs4D4CtxpU7w04K0vu7sqz8vjV_lefnhsWaGcdsad3DgOJfk43Mq_juSXNiGFfimzXnkaUT_RfS0HBdB6u5eQbT2j7fXJX6uAQuKNDbj/s1600/social.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: inherit;"><img border="0" height="386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6xh-p7uS_J_syubNud57za-RiR4oxXji2qZ3xGs4D4CtxpU7w04K0vu7sqz8vjV_lefnhsWaGcdsad3DgOJfk43Mq_juSXNiGFfimzXnkaUT_RfS0HBdB6u5eQbT2j7fXJX6uAQuKNDbj/s400/social.jpg" width="400" /></span></a></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<i><span style="font-family: inherit;">Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use this gadget..</span></i><br />
<div>
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<i><span style="font-family: inherit;">Design 1: </span></i></h2>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV8rOsW_3X6I-qrwUR6JSAs_jnqEKXGYFmtho4Ne_Mm0txCajni8AoyvSy7DbtA-RTHrXR2Dyjyknjw7L8AffhZ2nAuk3PQq4bp_pDQs8_8Ahm8PGddhyphenhyphenqLsTrA-U5Dt_KqYcBvK26Isg/s1600/social+gadget+design+1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsV8rOsW_3X6I-qrwUR6JSAs_jnqEKXGYFmtho4Ne_Mm0txCajni8AoyvSy7DbtA-RTHrXR2Dyjyknjw7L8AffhZ2nAuk3PQq4bp_pDQs8_8Ahm8PGddhyphenhyphenqLsTrA-U5Dt_KqYcBvK26Isg/s200/social+gadget+design+1.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<br />
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit;">How To Add It:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></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;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></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;"><span style="font-family: inherit;"><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; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="background-color: white; clear: both; font-size: 13px; line-height: 18px;">
<b><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;"><span style="font-family: inherit;"><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" /></span></a></b></div>
<span style="font-family: inherit;"><b style="background-color: white; font-size: 13px; line-height: 18px;"></b><span style="background-color: white; font-size: 13px; line-height: 18px;"></span><br style="background-color: white; font-size: 13px; line-height: 18px;" /></span>
<br />
<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;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></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;"><span style="font-family: inherit;"><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" /></span></a></div>
<div style="background-color: white; text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<h3 style="text-align: left;">
<span style="font-family: inherit;">Code For Design 1:</span></h3>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<blockquote class="tr_bq">
<span style="font-family: inherit;"><br /><div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;"><br /><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a><br /><a class="addthis_button_tweet" tw:count="vertical"></a><br /><a class="addthis_button_google_plusone" g:plusone:size="tall"></a><br /><a class="addthis_counter"></a><a href="</span>http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html<span style="font-family: inherit;">">Widget</a><br /></div><br /><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script><br /> </span></blockquote>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<h2 style="text-align: left;">
<i><span style="font-family: inherit;">Design 2:</span></i></h2>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="font-size: 13px; line-height: 18px; margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3mzl_Luo12T0PWNPUyrY5ajCV-_dbE_SO-BalJ6_VFPdL6r4QHPM8pjngblT5xjMNQeY6V5jMU2mhGuzfopcAJs2Giw-HMtYt3drdKlph-DfHo9Z7EEcyMWSMz5e6MztKCWkkl03vv0T/s1600/social+gadget+design+2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib3mzl_Luo12T0PWNPUyrY5ajCV-_dbE_SO-BalJ6_VFPdL6r4QHPM8pjngblT5xjMNQeY6V5jMU2mhGuzfopcAJs2Giw-HMtYt3drdKlph-DfHo9Z7EEcyMWSMz5e6MztKCWkkl03vv0T/s200/social+gadget+design+2.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<h3 style="text-align: left;">
<span style="font-family: inherit;"><br /></span><span style="font-family: inherit;">How To Add It:</span></h3>
<div>
<div style="font-size: medium; line-height: normal;">
<span style="font-family: inherit;"><br /></span></div>
<div>
<ul style="font-size: medium; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></li>
</ul>
<div class="separator" style="clear: both; font-size: medium; line-height: normal; 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;"><span style="font-family: inherit;"><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; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; font-size: medium; line-height: normal; text-align: center;">
</div>
<div style="font-size: medium; line-height: normal;">
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<b><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;"><span style="font-family: inherit;"><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" /></span></a></b></div>
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;"></b><span style="font-size: 13px; line-height: 18px;"></span><br style="font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="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;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="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;"><span style="font-family: inherit;"><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" /></span></a></div>
<div style="text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">Code For Design 2:</span></span></h3>
</div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></span></span><br />
<blockquote class="tr_bq">
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;"></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_facebook"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_twitter"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_delicious"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_pinterest_share"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_digg"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_orkut"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_google_plusone_share"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_myspace"></a></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a class="addthis_button_compact"></a><h6></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><a href="http://</span></span><span style="font-size: 13px; line-height: 18px;">http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html</span><span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">">Widget</a></h6></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"></div></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script></span></span><br />
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"> </span></span></blockquote>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;">
</span></span></div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<h2 style="text-align: left;">
<span style="font-family: inherit; font-size: large;"><span style="line-height: 18px;"><i>Design 3 :</i></span></span></h2>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8usf48TJsRv2xWOXNmmTpo5_gPAunZm8vdl-WuNTwMlYysL_i4oaBR64A1YwGDbsPuZrbeU8HAPxqXT9uV1jWLnwfLdp7amJsGD6dWji-aEotPk-HcMuILXSsT8xxeCfty4daLUZrxll/s1600/social+gadget+design+3.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><span style="font-family: inherit;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy8usf48TJsRv2xWOXNmmTpo5_gPAunZm8vdl-WuNTwMlYysL_i4oaBR64A1YwGDbsPuZrbeU8HAPxqXT9uV1jWLnwfLdp7amJsGD6dWji-aEotPk-HcMuILXSsT8xxeCfty4daLUZrxll/s200/social+gadget+design+3.jpg" width="63" /></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: inherit;">Click to Enlarge</span></td></tr>
</tbody></table>
<span style="font-family: inherit;"><br /></span>
<br />
<div>
<div>
<h3 style="text-align: left;">
<span style="font-family: inherit;">How To Add It:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></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;"><span style="font-family: inherit;">Go to your <b>blogger dashboard</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Select your blogger blog</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Layout </b>from Drop Down menu (shown in picture)</span></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;"><span style="font-family: inherit;"><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; border: 1px solid rgb(230, 230, 230); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 1px; position: relative;" width="400" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<span style="font-family: inherit;"><br /></span>
<br />
<ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">A new Window appear</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Click on <b>Add gadget</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">And select <b>HTML/JavaScript</b></span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Next Box of HTML/JavaScript will appear <b>(shown in picture)</b></span></li>
</ul>
</div>
<div style="text-align: center;">
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;">    </b></span><br />
<div class="separator" style="clear: both; font-size: 13px; line-height: 18px;">
<b><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;"><span style="font-family: inherit;"><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" /></span></a></b></div>
<span style="font-family: inherit;"><b style="font-size: 13px; line-height: 18px;"></b><span style="font-size: 13px; line-height: 18px;"></span><br style="font-size: 13px; line-height: 18px;" /></span>
<br />
<div style="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;"><span style="font-family: inherit;">Now the box of HTML/JavaScript will appear when you click on the box.</span></li>
</ul>
</div>
<div class="separator" style="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;"><span style="font-family: inherit;"><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" /></span></a></div>
<div style="text-align: left;">
<ul style="font-size: 13px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: inherit;">Now <b>paste the following code to install the gadget</b> to your blog.</span></li>
</ul>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<h3 style="text-align: left;">
<span style="font-family: inherit;">Code for Design 3:</span></h3>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<blockquote class="tr_bq">
<span style="font-size: x-small;"><span style="font-family: inherit;"><br /><div class="addthis_toolbox addthis_floating_style addthis_16x16_style" style="left:50px;top:50px;"><br /><a class="addthis_button_facebook"></a><br /><a class="addthis_button_twitter"></a><br /><a class="addthis_button_delicious"></a><br /><a class="addthis_button_pinterest_share"></a><br /><a class="addthis_button_digg"></a><br /><a class="addthis_button_orkut"></a><br /><a class="addthis_button_google_plusone_share"></a><br /><a class="addthis_button_myspace"></a><br /><a class="addthis_button_compact"></a><h6><br /><a href="</span><span style="line-height: 18px;">http://pretoproblogger.blogspot.com/2013/07/how-to-add-best-floating-social-media.html</span><span style="font-family: inherit;">">Widget</a></h6><br /></div><br /><script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-508240f16db23831"></script><br /> </span></span></blockquote>
</div>
</div>
</div>
</div>
</div>
<div>
<span style="font-family: inherit; font-size: x-small;"><span style="line-height: 18px;"><br /></span></span></div>
</div>
</div>
</div>
</div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-size: 13px; line-height: 18px;">
<span style="font-family: inherit;"><br /></span></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18px;">
<br /></div>
</div>
</div>
</div>
</div>
<br />
<script type="text/javascript">
ch_fluidH = 1;
ch_nump = "3";
ch_client = "pretoproblogger";
ch_width = 600;
ch_height = "auto";
ch_type = "mpu";
ch_sid = "Chitika Default";
ch_color_site_link = "000000";
ch_color_title = "000000";
ch_color_border = "FFFFFF";
ch_color_text = "000000";
ch_color_bg = "FFFFFF";
</script>
<script src="http://scripts.chitika.net/eminimalls/amm.js" type="text/javascript">
</script></div>

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Here is the best (for me) floating social media buttons gadget that have a clean and simple design. Many Professional blogger too use ...

Advertise Here

How To Add Cool Social Sharing Widget with hover Effect?

How to add the best floating social media buttons gadget in blogger (3 Designs To Choose)

Get FREE updates on your Email | RSS

Popular Posts

Comments

Blog Archive