How to Add 9GAG Style Social Media Buttons for Blog

Today i am going to add some interesting CSS style code which you may have seen on 9GAG funny site header, the slogan and social love button. Some of you blog owners may be waiting to add this cause you may have a lot of gadgets on your blog or site sidebar cause the like box takes a lot of space in the sidebar and adding all the social link in one line on the top make it easy for people to follow and like your blog or site which even make it look clean.

I have added only three social link on my blog you can add as you wish. This was originally created by +Frinton R.Madtha (me) using CSS and HTML code you can too add this on your blog.

Adding Social Love on Blogger

Note:- Backup your blogger template before adding any code.

1. Go to your Blogger Templates

2. Click on the "Edit HTML"

3. Search for ]]></b:skin> tag

4. Find it add the below code above it or you can use the <style> tag for adding it

#socialwrap-fm {
float: left;
width: 100%;
height: 35px;
border-top: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
}
.social-tnb {
width: 970px;
margin: auto;
}
.slogan {
float: left;
margin-top: 9px;
margin-bottom: 9px;
font-family: open sans;
font-style: italic;
}
.social-love {
float: left;
margin-top: 8px;
}
.social-love ul {
margin: 0px;
padding: 0px;
}
.social-love li {
display: block;
float: left;
margin-left: 20px;
}

5. After adding this code you can go to Layout > Add HTML/Javascript and add the below code or you can add the code below the <body> of you blog template. I have added this below the <body> tag in my blog.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='socialwrap-fm'>
<div class='socialtnb'>
<p class='slogan'><b>The Next Blogs</b> is the best source for knowing blogs tutorials.</p>
<div class='social-love'>
<ul>
<li><span class='facebook-like badge_facebook_render'><fb:like action='like' colorscheme='light' height='40' href='https://facebook.com/#' layout='button_count' show_faces='false' width='240'/></span></li>
<li><span class='twitter-follow'><a class='twitter-follow-button' data-show-count='false' data-show-screen-name='false' href='https://twitter.com/#'>Follow @funsgag</a></span></li>
<li><span class='google-plus-follow'><div class='g-follow' data-annotation='none' data-height='20' data-href=' http://plus.google.com/#' data-rel='publisher'/></span></li>
</ul>
</div>
</div>
</div>
</b:if>

6. Change the blod color links with you page links i have added hashtag so you can simply add your page name even change the slogan too.

Now save you template and your done. Just visit your blog to see the social love button appear on the header.

Pages

Monday, August 25, 2014

How to Add 9GAG Style Social Media Buttons for Blog

3 comments: