In Last Post I've explained about "
Stickler All In One Blogger Widget With Smooth JQuery Plugin" Now this is tutorial part 2 , here we are going to learn How To Add This Widget To Your Blogger Blog.
Steps for Adding Stickler Blogger Widget to Your Blog :
1. Go to Blogger > Dashboard > Template. [
Make Sure To Backup Your Blogger Template]
Copy Paste the following code just above
</head>
<style type='text/css'>
/*
* Sticklr v1.0
* Sticky Side Panel CSS + jQuery Plugin
*
* Copyright 2011 amatyr4n
* http://codecanyon.net/user/amatyr4n
*
* licensed under Envato licenses
* http://wiki.envato.com/support/legal-terms/licensing-terms/
*/
.sticklr,
.sticklr * {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #555;
vertical-align: baseline;
}
.sticklr,
.sticklr > li > ul {
list-style-type: none;
}
.sticklr {
position: fixed;
top: 43%;
left: 0;
background-color: #f7f7f7;
background-color: rgba(240, 240, 240, 0.75);
border: 1px solid #b7b7b7;
border-left: none;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
width: 25px;
overflow: visible;
z-index: 9999;
}
.sticklr-right {
left: auto;
right: 0;
border-right: none;
border-left: 1px solid #b7b7b7;
}
.sticklr > li {
position: relative;
}
.sticklr > li > a {
display: block;
width: 16px;
height: 16px;
padding: 4px;
margin-left:0px;
background-color: #f0f0f0;
background-color: rgba(240, 240, 240, 0.75);
background-position: 4px 4px;
background-repeat: no-repeat;
}
.sticklr > li {
border-bottom: 1px solid #f7f7f7;
border-right: 1px solid #f7f7f7;
border-top: 1px solid #ccc;
}
.sticklr > li:first-child {
border-top: 1px solid #f7f7f7;
}
.sticklr > li:last-child {
border-bottom: 1px solid #f7f7f7;
}
.sticklr > li > a:hover {
background-color: #eaeaea;
}
.sticklr > li > ul {
display: none;
position: absolute;
left: 25px;
top: -2px;
width: 180px;
overflow: hidden;
background-color: #f7f7f7;
background-color: rgba(240, 240, 240, 0.75);
border: 1px solid #b7b7b7;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
box-shadow: 0 0 5px #ccc;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
z-index: 95;
}
.sticklr-right > li > ul {
left: auto;
right: 25px;
}
.sticklr > li > ul:nth-child(3) {
left: 206px;
}
.sticklr > li > ul:nth-child(4) {
left: 387px;
}
.sticklr > li > ul:nth-child(5) {
left: 568px;
}
.sticklr > li > ul:nth-child(6) {
left: 749px;
}
.sticklr > li > ul:nth-child(7) {
left: 930px;
}
.sticklr-right > li > ul:nth-child(3) {
left: auto;
right: 206px;
}
.sticklr-right > li > ul:nth-child(4) {
left: auto;
right: 387px;
}
.sticklr-right > li > ul:nth-child(5) {
left: auto;
right: 568px;
}
.sticklr-right > li > ul:nth-child(6) {
left: auto;
right: 749px;
}
.sticklr-right > li > ul:nth-child(7) {
left: auto;
right: 930px;
}
.sticklr > li:hover > ul {
display: block;
float: left;
}
.sticklr.sticklr-js > li:hover > ul {
display: none;
}
.sticklr > li > ul > li {
border-bottom: 1px solid #f7f7f7;
border-right: 1px solid #f7f7f7;
border-top: 1px solid #ccc;
min-width: 180px;
text-shadow: 1px 1px 1px #fff;
}
.sticklr > li > ul > li:first-child {
border-top: 1px solid #f7f7f7;
}
.sticklr > li > ul > li:last-child {
border-bottom: 1px solid #f7f7f7;
}
.sticklr > li > ul > li {
border: none !ie;
}
.sticklr > li > ul > li > a {
display: block;
padding: 8px 10px 8px 32px;
background-color: #f0f0f0;
background-color: rgba(240, 240, 240, 0.75);
background-position: 10px;
background-repeat: no-repeat;
color: #555;
min-height: 20px;
text-decoration: none;
white-space: nowrap;
background-color: transparent !ie;
}
.sticklr > li > ul > li > a:hover {
background-color: #eaeaea;
}
.sticklr > li > ul > li.sticklr-title > a {
padding-left: 10px;
background-color: #e6e6e6;
cursor: default;
font-weight: bold;
background-color: transparent !ie;
}
.sticklr > li > ul > li.sticklr-title > a:hover {
background-color: #e6e6e6;
background-color: transparent !ie;
}
.sticklr > li > ul > li > table {
border-collapse:collapse;
border-spacing: 0;
}
.sticklr > li > ul > li > form {
padding: 8px 10px;
}
.sticklr > li > ul > li input,
.sticklr > li > ul > li select,
.sticklr > li > ul > li textarea,
.sticklr > li > ul > li button {
margin: 4px 0;
padding: 4px;
}
.sticklr > li > ul > li input[type="text"],
.sticklr > li > ul > li input[type="password"],
.sticklr > li > ul > li textarea {
border: 1px solid #ccc;
box-shadow: inset 0 0 3px #ccc;
-moz-box-shadow: inset 0 0 3px #ccc;
-webkit-box-shadow: inset 0 0 3px #ccc;
min-width: 150px;
width: auto;
}
.sticklr > li > ul > li input[type="submit"] {
background-color: #f0f0f0;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
}
.sticklr-arrow {
position: absolute;
left: 25px;
top: 8px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #b7b7b7;
border-right: none;
}
.sticklr-right .sticklr-arrow {
left: auto;
right: 25px;
border-right: 5px solid #b7b7b7;
border-left: none;
}
/* icons */
.icon-Serachbox {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv04VWU-EHIbmZGnntXfK6h1ZR-YY8pG7XFpJJbyf4HRyp5dvnflTlBipTs5i2h8eVCV8i5HFjFu-Vc39oh-2IC10gxN7UH1bogqjjgCvmVfz-vZpav6HmASCuUEKfxVCkaMRoGqEIJVxH/s1600/search.png);
}
.icon-Star {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7x0zEWIWW-DjHiuAsCGQJ8t8sHTmi1b3FY53aeXfGufILQwraPWhDgiyvZ5VQE47mc3nKAmLFiktpAecG3eQjLnrsrMM_n9tiEESnQHToe_NEnU9RZ__D00k9KJV_umil8Bh5Nhpz6HcW/s1600/blip.png);
}
.icon-feed {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdKJU07mEn_L3vL7isO7lFNZn89qdrLY7GAdiSEIjBj87oduYllCJ2lUnBtzX3qZl0juWuQfRPv6YI994xnXG6o5Xn2OyxB9NxuprnwTeJ1Vl2hZa61Y0EqAm5Z_jRtD_Qvzz7-1rFnWR/s1600/feed.png);
}
.icon-emails {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4ICgYuHnJfD9GP8mG8uOnwDYBrphtahaLJGfdsEeMOkktbzd-yXlgAAnNJppAoSdeGSi87AzIdraS4Q7WWbVaLGp3R6saDy-qzrv-2-YA2m0BxUtm-jVzTwE6UaUJV8upfjumXJDdqOL/s1600/email.png);
}
.icon-Followers {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIO130-PmtpKcw-vGEN9jUHHXWfr_mk3uA_ck9wlEmx9GIoPtbms-IWRg3E41kxS2J2mrjtrnW6yeqKw3ws1g1LEQBi2Og8M4CutvEdz9AT8iBmcuvWkKAgT5Pl-KbpQwJsed-yyTtSZY8/s1600/customers.png);
}
.icon-submite {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-SqOXprNSSBsdcyFxVvJoamO2z10ZuyjixeOb33YqV5pkgE6P0SPxhl2tc0o8R2WrdvPhZqP0yzZY_MCT3yE3qPKxBNr25IKZo3t-yBxLF-7qbgUJXrWxU0xlzGjLr30IQ4MIyiOB7nx_/s1600/netvibes.png);
}
.icon-login {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRMjPUKEdjqCVykaN4J6lyKRy6msth2MjeuvNc8oPCfuT71zpqXUPUjcI2bm3jKRQ2X6WVDP5KN-fLjROa3dD-36yvhpDrpU04JdvBuGJJNduXSNvjmNPcKLsJSFM27wpofGYPmK9il2X2/s1600/heart.png);
}
.icon-twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXm9NoQBzwdYWWftkxLHSwzDMiU0QY_Uln3QT8uf-maCFjrYJq9fvmHCkT1FRbSUta5xbE_KI4tIBTyyr_vpgoTCyx7l60JUNpCBrJDWgi5NTLQNhJRNbXpZxxtjHocCb9x2WWYVDhnE98/s1600/twitter-2.png);
}
.icon-facebook {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB0FMs2kGprYfoREpWzKPEqFgIXliMQUHzQrWiuC_SJ1m0yXR91vMxsy0yFeZLCAvewMF3UmClFMzu7fkQg4Oc-Acdx8yXNTV6_kFY_DZ2WtbBCuTqt791FJ9ji-oh_eRmlQf8JcDIpk0X/s320/facebook.png);
}
.icon-friendconnect {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3xmLz6xDxHcTFt5KPUKMLo0klbEE26IjZL4UdZ2GxnVtN9Fb_QY5W8gcU61qUNWWbhPw3TenhdxDG4PZwR3BgvpFo-HeDTabpCLQxpBj9WTBeym9m-h0uyjR3XPVa4yusNzZ9D16t5XrY/s1600/google.png);
}
.icon-upload {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4A7mMykOgJRHDLByy2vtT4TNdv6Zc4zsnYZGYs2F126hoDX_AgN4bCBE4xr4N48neqjxB2wLucbjUTfeOVwzcjiMsB8J7H7pcbg2kZ9ury9ASVLuwEx2kP_wjLEDoHL1DuX9JbHPu0FUx/s1600/upcoming-work.png);
}
.icon-flickr {
background-image: url();
}
.icon-google {
background-image: url();
}
.icon-lastfm {
background-image: url();
}
.icon-reddit {
background-image: url();
}
.icon-technorati {
background-image: url();
}
.icon-yahoo {
background-image: url();
}
</style>
2. Now find the code
</html> after finding it, copy paste the following codes just above it.
<script type='text/javascript'>
//<![CDATA[
/*
* Sticklr v1.0
* Sticky Side Panel CSS + jQuery Plugin
*
* Copyright 2011 amatyr4n
* http://codecanyon.net/user/amatyr4n
*
* licensed under Envato licenses
* http://wiki.envato.com/support/legal-terms/licensing-terms/
*/
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('(5($){$.13.3=5(h){b B={l:17,m:\'14\',s:\'H\',C:\'n\'},c={J:5(X){k 4.G(5(){b $3=$(4);b 7=$.Z({},B,X);6(!$3.I(\'3\'))$3.t(\'3\');6(7.C==\'d\')$3.t(\'3-d\');6(7.s==\'1i\')7.s=\'1k 1f\';$3.t(\'3-1b\').g({\'D\':7.l?\'F\':\'1c\',\'f\':7.l?(($(8).9()-$3.9())/2):(($(8).9()-$3.9())/2)+$(8).w()}).E(\'a[1l="#"]\').V(\'H\',5(e){e.1e()}).1d().R(\'Q\').R(\'a\').V(7.s,5(){6($(4).P().I(\'3-r\'))k U;c.o();$(4).1g(\'<u 1j="3-Y"></u>\').P().G(5(){$(4).g({\'j-n\':\'q\',\'j-d\':\'q\',\'v\':0,\'D\':\'F\',\'f\':0}).1h();b A=$(4).9()+$(4).19().f;b z=$(8).9()+$(8).w();b y=0;6(A>z){y=O($(4).g(\'f\'),10)-(A-z)}$(4).g({\'f\':y}).l({\'j-n\':\'S\',\'j-d\':\'S\',\'v\':1.0},W)}).t(\'3-r\');k U});6($.15.18||7.m!=B.m){16(b i=2;i<10;i++){b p=1a+i+(O(7.m,10)*(i-2));b x=\'N\';6(7.C==\'d\'){x=p;p=\'N\'}$3.E(\'Q\').E(\'1F:1E-1D(\'+i+\')\').g({\'n\':p,\'d\':x,\'1L\':7.m})}}})},K:5(){$(\'.3\').G(5(){6($(4).g(\'D\')==\'F\'){$(4).1A().l({\'f\':($(8).9()/2-$(4).9()/2)+$(8).w()},1q)}L{$(4).g({\'f\':($(8).9()/2-$(4).9()/2)})}})},o:5(){$(\'.3-r\').l({\'j-n\':\'q\',\'j-d\':\'q\',\'v\':0},W,5(){$(4).1w(\'3-r\').o()});$(\'u.3-Y\').1v()}};$(8).1C(5(){c.K()});$(8).1u(5(){c.K()});$(1x).H(5(e){6($(e.1s).1r().I(\'3\'))k;c.o()});6(c[h]&&h.1B()!=\'J\'){k c[h].M(4,1J.1H.1G.1m(T,1))}L 6(11 h===\'12\'||!h){k c.J.M(4,T)}L{$.1z(\'1t "\'+h+\'" 1y 1o 1n 1I 1K\')}}})(1p);',62,110,'|||sticklr|this|function|if|props|window|height||var|methods|right||top|css|method||margin|return|animate|colWidth|left|hide|newLeft|50px|active|showOn|addClass|span|opacity|scrollTop|newRight|newTop|windowHeight|totalHeight|defaults|stickTo|position|find|absolute|each|click|hasClass|init|fixPos|else|apply|auto|parseInt|siblings|li|children|20px|arguments|false|bind|200|opts|arrow|extend||typeof|object|fn|180px|browser|for|true|msie|offset|23|js|fixed|end|preventDefault|mouseleave|append|show|hover|class|mouseenter|href|call|exist|not|jQuery|1000|parents|target|Method|scroll|remove|removeClass|document|does|error|stop|toLowerCase|resize|child|nth|ul|slice|prototype|in|Array|Sticklr|width'.split('|'),0,{}))
//]]>
</script>
<script src='http://b-templates-4u-com.googlecode.com/svn/jquery-sticklr-1.0.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('#flaymenu').sticklr({
showOn : 'click'
});
});
</script>
3. Now find the code
</body> just above it paste the following code.
<!-- Start TechEthix.tk --><div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareEgg'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEggundefined'shareThisShareEgg', ['facebook','twitter','googleplus','linkedin','blogger','stumbleupon','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareegg'});</script><a href="http://techethix.blogspot.com/">sticklr</a><!-- End TechEthix.tk -->
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=YOUR-PROFILE-ID' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_offset_top: 16
};
</script>
4. Now Hit Save Template and Go To Layout > Click Add Gadget > Select "HTML/Java Script" Copy and Paste the Following Code just in it and Hit Save
<a href="http://techethix.blogspot.com"></a>
<ul id="flaymenu" class="sticklr">
<li>
<a href="#" class="icon-Followers" title="Follow Us"></a>
<ul>
<li class="sticklr-title">
<a href="#">Follow me</a>
</li>
<li>
<a href="http://www.facebook.com/ilovemyindiaz" rel="nofollow" target="_blank" class="icon-facebook">Facebook</a>
</li>
<li>
<a href="http://twitter.com/rohitasare1" rel="nofollow" target="_blank" class="icon-twitter">Twitter</a>
</li>
<li>
<a href="http://www.blogger.com/follow-blog.g?blogID=3109959972547792806" rel="nofollow" target="_blank" class="icon-friendconnect">Google Friend Connect</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-login" title="Share this"></a>
<ul>
<li class="sticklr-title">
<a href="#">Share</a>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="button_count" show_faces="false" font=""></fb:like>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<div style="height:20px"><g:plusone size="medium"></g:plusone><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script></div>
</div>
</li>
<li>
<div class="sticklr-custom" style="padding:10px">
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_counter addthis_pill_style"></a>
</div>
</div>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-Star" title="Feeds"></a>
<ul>
<li class="sticklr-title">
<a href="#">Feeds</a>
</li>
<li>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=techethix" rel="nofollow" target="_blank" class="icon-emails">Email</a>
</li>
<li>
<a href="http://feeds.feedburner.com/techethix" rel="nofollow" target="_blank" class="icon-feed">Rss</a>
</li>
</ul>
</li>
<li>
<a href="#" class="icon-submite" title="Best Blogger Tricks"></a>
<ul>
<li class="sticklr-title">
<a href="#">Bookamark Now</a>
</li>
<li><br /><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_stumbleupon"></a>
<a class="addthis_button_delicious"></a>
<a class="addthis_button_blogger"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_digg"></a>
<a class="addthis_button_reddit"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5016150e17f9b102"></script>
<!-- AddThis Button END --><br />
</li>
</ul>
</li>
<li>
<a href="#" class="icon-Serachbox" title="Search"></a>
<ul>
<li>
<form action="/search" method="get">
<input type="text" id="s" name="q" value="" placeholder="Type and Hit Enter" />
</form>
</li>
</ul>
</li>
<div style="text-align: center;">
<a href="http://techethix.blogspot.com/2013/09/sticklr-all-in-one-blogger-widget-with-smooth-jquery-plugin.html" target="_blank" title="Get This Widget"><span style="font-size: xx-small;">Get</span></a></div>
</ul>
<div class='clear'></div>
5. Now replace the texts which I've Highlighted with
Orange Color and finally hit "Save".
That's it, go To your blog and check is it working or not. I've explained well therefore it should be working awesome on your blog. and I also expect that you should keep the Attribution Link on this widget.
If you have any problems simply drop here comment or feel free to contact me, you can also say thanks fot his widget by dropping a comment. Kindly share this post with your friends ! Subscribe Us and Share ! Let Our Voice Be Spread !
