Add Love Social Widgets to Blogspot Site (Only for Blogspot Users)

After a long time, I’m going to share a Blogspot trick. Today, I’ll show you, how to add social widgets in a Blogspot site. Several times, we add social widgets on our Blogspot site. Social widgets mean, the link of official social pages of a site. Your favourite site, The Mental Club also has own social sharing page.

Social Widgets for Blogspot Sites

Facebook Page: https://www.facebook.com/thementalclub

Twitter Page: https://twitter.com/mental_club

Google Plus Page: https://plus.google.com/u/0/113452749299066849570

Linked In: https://in.linkedin.com/in/thementalclub

Feed URL: http://thementalclub.com/feed

More on in the screenshot below.

Now, you can add all these social icons to your favourite blog for branding. Follow the steps bellow to add.

#1 First, go to “Template” menu, then click on the “Edit HTML” option.

#2 Now, search for “]]></b:skin>” – after searching add the following code before “]]></b:skin>” and save it like below. Note: Press CTRL+F to get the find window on Windows.

/*Alltemplate.info */
 
.bubblewrap{ list-style-type:none; margin:0; padding:0; }
 
.bubblewrap li{ display:inline; width: 60px; height:60px; }
 
.bubblewrap li img{ width: 50px; /* width of each image.*/ height: 50px; /* height of each image.*/ border:0; margin-right: 4px; /*spacing between each image*/ -webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */ -o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */ }
 
.bubblewrap li img:hover{ -moz-transform:scale(1.8); /*scale up image 1.8x*/ -webkit-transform:scale(1.8); -o-transform:scale(1.8); }

#3 Now, go to “Layout” menu and add  an “HTML/JavaScript” widget, where you want to keep the buttons and paste the following code.

</pre>
<pre><span class="data-post"><ul class="bubblewrap">
 
<li><a href="https://plus.google.com/u/0/?tab=jX"><img src="http://1.bp.blogspot.com/-Cm1SCRfCP5Y/UOBbe23Gg5I/AAAAAAAAGHw/JvNHudR2BdY/s1600/bloggertrix-google.png" title="Add to Facebook" /></a></li>
 
<li><a href="https://www.facebook.com/thementalclub/"><img src="http://1.bp.blogspot.com/-asy5h6XZSrs/UOBbdo39hbI/AAAAAAAAGHo/N--Q6RfzDKQ/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>
 
<li><a href="https://instagram.com/thementalclub"><img src="http://1.bp.blogspot.com/-VhSP-qIlv-A/UOBbhd_rv4I/AAAAAAAAGIA/3xZ6fJzM8TE/s1600/bloggertrix-stumble.png" title="Add to Digg" /></a></li>
 
<li><a href="https://twitter.com/the_mental_club"><img src="http://1.bp.blogspot.com/-p-oHMGv9ho0/UOBbigs-PTI/AAAAAAAAGII/fgHGfbpfC1A/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>
 
<li><a href="http://thementalclub.com/feed"><img src="http://4.bp.blogspot.com/-CQ81aoxn92g/UOBbgK8L3zI/AAAAAAAAGH4/dmW8VBAIYlw/s1600/bloggertrix-rss.png" title="Add RSS Feed" /></a></li>
</ul>

Note: Don’t forget to change the hyper reference (href) urls to yours.

Now click on “Save” button.

Now click on “Save Arrangement” Button.

Thank you…