Add WikiHow Styled Like us on Facebook Slide out Widget to Blogger

Here i am with an another jQuery widget which is from famous How-to Website "Wikihow.com" wikinow.com is one of my favorite website where i am spending lots of time in reading how-tos articles. When it was on old design i noticed slide out Facebook like us widget but never thought to re-design it and make it available for blogger. but recently it designed for blogger by someone else, i don't know who is the designer but i would like to re-share the same here.

Add WikiHow Styled Facebook Like us Slide out Widget to Blogger

If you haven't noticed this widget on wikihow, You can see above screenshot to get idea about how actually it looks like . or i have also installed it in this blog, You can see live demo by scrolling down to the end of the post. Once you scroll down till end of the post, pop out slide widget will be bring with the option to like my Facebook fan page.

Also See : Add Labnol.org style Facebook Like Box to Blogger

So, if you would like to have the same widget on your blog, just follow the simple steps given below.

How to Add this Widget to Blogger?

Go to blogger dashboard > Layout > Add a Gadget.
Choose HTML/Javascript from the list.
Copy and Paste below code into it.

<style>
#scrollwig {
position: fixed;
right: -510px;
z-index: 4;
opacity:0.99;
width: 275px;
bottom: -300px;
}
#scroll_content{
border: 5px solid #FFF;
border-radius: 150px 150px 0 150px;
box-shadow: -3px 3px 4px #BFBFBF;
margin-bottom: 0;
}
#follow {
background-color: #FFF;
border:15px groove #F8DA39;
border-right: none;
border-bottom: none;
border-radius: 150px 150px 0 150px;
font-size: 0.9em;
height: 185px;
margin-bottom: 0;
padding: 40px;
text-align: center;
}
.text{margin:0 0 0 0}
.para1 {
font-size: 1.9rem;
font-weight: normal;
font-family: oswald;
padding-bottom: 0.1em;
margin: 0 0 0 0;
letter-spacing: 1px;
color: #47401A;
}
.para2 {
width: 120%;
margin: 0 0 0 -9%;
font-size: .8rem;
}
.fbfollow {
color: #3B5998;
font-size:1.3rem;
font-weight:bold
}
.googlefollow {
color: #D34836;
font-size:1.3rem;
font-weight:bold
}
</style>
<script>
mdfbw="bloggerwidgetgenerators"
var _0xb6f0=["\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x66\x61\x64\x65\x49\x6E","\x23\x73\x63\x72\x6F\x6C\x6C\x77\x69\x67","\x66\x61\x64\x65\x4F\x75\x74","\x73\x63\x72\x6F\x6C\x6C"];$(document)[_0xb6f0[4]](function (){var _0x6b02x1=$(this)[_0xb6f0[0]]();if(_0x6b02x1>1500){$(_0xb6f0[2])[_0xb6f0[1]]();} else {$(_0xb6f0[2])[_0xb6f0[3]]();} ;} );
var _0x7f48=["\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x73\x6C\x69\x64\x65\x72\x62\x6F\x78\x5F\x30\x36\x27\x20\x69\x64\x3D\x27\x73\x63\x72\x6F\x6C\x6C\x77\x69\x67\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x72\x69\x67\x68\x74\x3A\x20\x30\x70\x78\x3B\x20\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x70\x78\x3B\x27\x3E","\x77\x72\x69\x74\x65","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x73\x63\x72\x6F\x6C\x6C\x5F\x63\x6F\x6E\x74\x65\x6E\x74\x27\x3E","\x3C\x64\x69\x76\x20\x69\x64\x3D\x27\x66\x6F\x6C\x6C\x6F\x77\x27\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x74\x65\x78\x74\x27\x3E","\x3C\x70\x20\x63\x6C\x61\x73\x73\x3D\x27\x70\x61\x72\x61\x31\x27\x3E\x4C\x69\x6B\x65\x20\x55\x73\x20\x4F\x6E\x3C\x2F\x70\x3E","\x3C\x70\x3E\x3C\x73\x70\x61\x6E\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x62\x66\x6F\x6C\x6C\x6F\x77\x27\x3E\x46\x61\x63\x65\x62\x6F\x6F\x6B\x3C\x2F\x73\x70\x61\x6E\x3E\x3C\x2F\x70\x3E","\x3C\x62\x72\x2F\x3E","\x3C\x21\x2D\x2D\x20\x46\x62\x20\x42\x75\x74\x74\x6F\x6E\x20\x2D\x2D\x3E","\x3C\x64\x69\x76\x20\x63\x6C\x61\x73\x73\x3D\x27\x66\x62\x27\x20\x73\x74\x79\x6C\x65\x3D\x27\x66\x6C\x6F\x61\x74\x3A\x6E\x6F\x6E\x65\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x72\x65\x6C\x61\x74\x69\x76\x65\x3B\x20\x6D\x61\x72\x67\x69\x6E\x3A\x30\x70\x78\x20\x30\x70\x78\x20\x30\x70\x78\x20\x36\x33\x70\x78\x27\x3E","\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22\x2F\x2F\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x2F\x70\x6C\x75\x67\x69\x6E\x73\x2F\x6C\x69\x6B\x65\x2E\x70\x68\x70\x3F\x68\x72\x65\x66\x3D\x68\x74\x74\x70\x73\x25\x33\x41\x25\x32\x46\x25\x32\x46\x77\x77\x77\x2E\x66\x61\x63\x65\x62\x6F\x6F\x6B\x2E\x63\x6F\x6D\x25\x32\x46","\x26\x61\x6D\x70\x3B\x77\x69\x64\x74\x68\x26\x61\x6D\x70\x3B\x6C\x61\x79\x6F\x75\x74\x3D\x62\x6F\x78\x5F\x63\x6F\x75\x6E\x74\x26\x61\x6D\x70\x3B\x61\x63\x74\x69\x6F\x6E\x3D\x6C\x69\x6B\x65\x26\x61\x6D\x70\x3B\x73\x68\x6F\x77\x5F\x66\x61\x63\x65\x73\x3D\x66\x61\x6C\x73\x65\x26\x61\x6D\x70\x3B\x73\x68\x61\x72\x65\x3D\x66\x61\x6C\x73\x65\x26\x61\x6D\x70\x3B\x68\x65\x69\x67\x68\x74\x3D\x36\x35\x26\x61\x6D\x70\x3B\x61\x70\x70\x49\x64\x3D\x35\x34\x39\x35\x31\x30\x37\x38\x38\x34\x30\x33\x32\x31\x35\x22\x20\x73\x63\x72\x6F\x6C\x6C\x69\x6E\x67\x3D\x22\x6E\x6F\x22\x20\x66\x72\x61\x6D\x65\x62\x6F\x72\x64\x65\x72\x3D\x22\x30\x22\x20\x73\x74\x79\x6C\x65\x3D\x22\x62\x6F\x72\x64\x65\x72\x3A\x6E\x6F\x6E\x65\x3B\x20\x6F\x76\x65\x72\x66\x6C\x6F\x77\x3A\x68\x69\x64\x64\x65\x6E\x3B\x20\x68\x65\x69\x67\x68\x74\x3A\x36\x35\x70\x78\x3B\x22\x20\x61\x6C\x6C\x6F\x77\x74\x72\x61\x6E\x73\x70\x61\x72\x65\x6E\x63\x79\x3D\x22\x74\x72\x75\x65\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x3C\x2F\x64\x69\x76\x3E","\x3C\x64\x69\x76\x20\x73\x74\x79\x6C\x65\x3D\x22\x66\x6C\x6F\x61\x74\x3A\x20\x72\x69\x67\x68\x74\x3B\x66\x6F\x6E\x74\x2D\x73\x69\x7A\x65\x3A\x20\x2E\x36\x35\x72\x65\x6D\x3B\x63\x6F\x6C\x6F\x72\x3A\x20\x23\x33\x32\x33\x32\x33\x32\x3B\x70\x6F\x73\x69\x74\x69\x6F\x6E\x3A\x20\x61\x62\x73\x6F\x6C\x75\x74\x65\x3B\x72\x69\x67\x68\x74\x3A\x20\x35\x70\x78\x3B","\x62\x6F\x74\x74\x6F\x6D\x3A\x20\x30\x70\x78\x3B\x22\x3E\x42\x6C\x6F\x67\x67\x65\x72\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x61\x6B\x69\x6E\x67\x64\x69\x66\x66\x65\x72\x65\x6E\x74\x2E\x63\x6F\x6D\x2F\x22\x20\x74\x61\x72\x67\x65\x74\x3D\x22\x5F\x62\x6C\x61\x6E\x6B\x22\x3E\x4D\x61\x6B\x69\x6E\x67\x20\x44\x69\x66\x66\x65\x72\x65\x6E\x74\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E"];document[_0x7f48[1]](_0x7f48[0]);document[_0x7f48[1]](_0x7f48[2]);document[_0x7f48[1]](_0x7f48[3]);document[_0x7f48[1]](_0x7f48[4]);document[_0x7f48[1]](_0x7f48[5]);document[_0x7f48[1]](_0x7f48[6]);document[_0x7f48[1]](_0x7f48[7]);document[_0x7f48[1]](_0x7f48[8]);document[_0x7f48[1]](_0x7f48[9]);document[_0x7f48[1]](_0x7f48[10]+mdfbw+_0x7f48[11]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[13]);document[_0x7f48[1]](_0x7f48[14]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);document[_0x7f48[1]](_0x7f48[12]);
</script>

Now, Replace "bloggerwidgetgenerators" with Username of your Facebook fan page.

Finally, Save your widget and you are done !

If you have any questions or query about this tutorial feel free to ask by commenting below.

0 comments:

Post a Comment