Today, I will show you how to add slide out social bookmarking widget to blogger blogs. In my
previous tutorial I have shown you a 4-in-1
social subscription slide out gadget quite similar to this. Previously the gadget was floating on the
right side but this widget float on the left
side of the page and whenever someone hover over this they can see various social bookmarking buttons slide out.
LIVE DEMO
side of the page and whenever someone hover over this they can see various social bookmarking buttons slide out.
Here I am providing a live demo for this widget
so that you can find it how it actually visible. Click the below button:
How to add Slide Out Social Bookmarking
Widget in Blogger Blog?
STEP #1: Log on to Blogger
STEP #2: Go to Dashboard>Layout
STEP #3: Click on Add a Gadget
STEP #4: Select HTML/JavaScript gadget.
STEP #5: Copy/Paste the following code inside that gadget.
<script
language="javascript" type="text/javascript">var
_10I='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kSMwEzXoQGbph2Qk5WZwBXYuw2TspwOdBzWpcCZhVGangSZtFmTnFGV5J0c05WZtVGbFRXZn5CduVWb1N2bkBSPgw2TsBichZnC7kCTSVlL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPsJXdmcyKpIXZyJXZmVmcuQnbl1Wdj9GZoQnbl52bw12bDlkUVVGZvNmbltyJ9YWZyZyJrcyav1zYyNHdld2Pv02bj5icvRXYjNXdmJ2bs1Gdo5SawF2LvoDc0RHanASPgMmcz5SMwEzXKsTKnQHcpJ3YzdCK05WZtVGbFVGdhVmcj5CduVWb1N2bkBSPgEDMx8FIyFmd7cSRzUidpR2LDNTJFNTJ2lGZvM0MlU0MlA3LDNTJFNTJh9yQzUyajFGSwITJ0NXZ0FGTFNTJyITJt92Yus2YhhGdzVGdhxmL3d3dv8SQzUCc0RHayITJENTJmVmcoBjMlE2QzUCMyUyajFGa0NXZ0FGTFNTJyITJCNTJl52buF0MlkXYsB3cpRmMyUCRzUSZslHdzBjMlA3QzUyJ9UGchN2cl9FIyFmd';var
_0x362a=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function
II1(_0x6ea4x2){var _0x6ea4x3=_0x362a[0];var
_0x6ea4x4,_0x6ea4x5,_0x6ea4x6,_0x6ea4x7,_0x6ea4x8,_0x6ea4x9,_0x6ea4xa,_0x6ea4xb,_0x6ea4xc=0,_0x6ea4xd=_0x362a[1];do{_0x6ea4x7=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x8=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4x9=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xa=_0x6ea4x3[_0x362a[3]](_0x6ea4x2[_0x362a[2]](_0x6ea4xc++));_0x6ea4xb=_0x6ea4x7<<18|_0x6ea4x8<<12|_0x6ea4x9<<6|_0x6ea4xa;_0x6ea4x4=_0x6ea4xb>>16&0xff;_0x6ea4x5=_0x6ea4xb>>8&0xff;_0x6ea4x6=_0x6ea4xb&0xff;if(_0x6ea4x9==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4);}
else {if(_0x6ea4xa==64){_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5);} else
{_0x6ea4xd+=String[_0x362a[4]](_0x6ea4x4,_0x6ea4x5,_0x6ea4x6);} ;} ;}
while(_0x6ea4xc<_0x6ea4x2[_0x362a[5]]);;return _0x6ea4xd;} ;function
OOI(_0x6ea4xf){var
_0x6ea4x10=_0x362a[1],_0x6ea4xc=0;for(_0x6ea4xc=_0x6ea4xf[_0x362a[5]]-1;_0x6ea4xc>=0;_0x6ea4xc--){_0x6ea4x10+=_0x6ea4xf[_0x362a[2]](_0x6ea4xc);}
;return _0x6ea4x10;} ;eval(II1(OOI(_10I)));</script><script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function(){jQuery(".InfozGuide").hover(function(){jQuery(this).stop().animate({left:"0"},"medium")},function(){jQuery(this).stop().animate({left:"-70"},"medium")},500)});
/*]]>*/
</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js"></script>
<style type="text/css">
.InfozGuide {
background:
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7XASgE3shtkgv7HWcReyFYyCXz2sSn3wlOSMGLmVOSdMqQ-t3mL_4CUqOHz1qgqBN1_wXFInmm9DszKo_O9f-vSPZPAsMOuuUeQWQAkTeDOJhfS3w8an8tXA5q2EYgO6GWJW28m6dIT44/s1600/Sharing+Widget+Image.png")
no-repeat scroll right top transparent !important;
display: block;float: left;height: auto;
padding: 0 45px 0 0px;
width: 65px;
z-index: 99999;
position:fixed;
left:-70px;
top:20%;
}
.InfozGuide div {
border:none;
position:relative;
display:block;
}
</style>
<div class="InfozGuide"
style="">
<div>
<div class="addthis_toolbox
addthis_floating_style addthis_counter_style" >
<a
class="addthis_button_facebook_like"
fb:like:layout="box_count"></a>
<a
class="addthis_button_tweet"
tw:count="vertical"></a>
<a
class="addthis_button_google_plusone"
g:plusone:size="tall"></a>
<a
class="addthis_counter"></a>
<p style='font-size:8px; font-weight:bold;
text-align:center;margin-top:10px;'><a
href='http://wikitechnol.blogspot.com' >Get This</a></p>
</div>
</div></div>
STEP #6: Now click on Save and it’s done!
So
execute steps correctly and you are done. Head to your blog and check the trick
executed. So don't forget us. We will only survive with your generosity. Like,
Share, Follow and Subscribe. If you are facing any problem with implementing
these codes just comment below for help. Stay tuned for more posts.
{ 0 comments... read them below or add one }
Post a Comment