22 August, 2013

Add Elegant Style Social Media Follow Buttons

Add Elegant Style Social Media Follow Buttons

Social media plays an important role in according to SEO and SERP roles. Adding elegant stylish social media follow us buttons plays very impressive role to make your blog stylish and looking cool. Adding simple and beautiful widgets makes your blogger more attractive. Every beginner and professional blogger user wants to have something better and something different than others. Today I decided to tell you about an simple and effective follow us social media buttons that is used by all PR5 and PR6 websites. This beautiful widget can makes your site attractive without adding too much load on your site.

Just remember if you want to increase your social media followers or reader then it is required to add cool and attractive social media follow us button in your blogger. This widget includes all popular and mostly used social media buttons such as RSS Feed, Twitter, Facebook, YouTube and Google Plus. I assured you that this widget will increase your social media follows if you have something readable on your blogger. This widget allows you to customize it with your own desires and place anywhere in the blogger screen area. This widget depends on both CSS and HTML coding tags. It has no JavaScript included so you can say that there is no more load increased after adding this CSS3 and HTML widget.

How to Add Elegant Style Social Media Follow Buttons ?



Step 1. Log in to Blogger Dashboard, and select Template
Step 2. Click on Edit HTML
Step 3. Press CTRL+F from keyboard and paste </b:skin> in find box and then press enter
Step 4. Now add this CSS code before </b:skin> tag

.StarsBlogging-Social span{float:left;display:inline;margin-right:8px}
.StarsBlogging-Social span a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.StarsBlogging-Social span a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuI44kRnlnzBp85NkctQTg197-uIANSdwAr_XRBBZSrDEAzBXLzaZxUgIZbH9eUeURSCr-UAjlBp7AJmUuMzChrIPXN3PQW5Nf3OKFjWkkVA-gKBgNWzZguumlFYqDwv4cOQqEwyAvw6k/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}

After that click on Save Template.

Step 5. Now Click on Layout and Select Add a Gadget
Step 6. Choose Add a new HTML/JavaScript Gadget
Step 7. Type 'Follow Us' in Title (or what you want)
Step 8. Paste the following code in the empty HTML box:

<div class="StarsBlogging-Social">
<span><a title="RSS Feed" href="http://feeds.feedburner.com/StarsBlogging" target="_blank" id="iconRSS"></a></span>
<span><a title="Twitter" href="http://twitter.com/StarsBlogging" target="_blank" id="iconTwitter"></a></span>
<span><a title="Facebook Page" href="http://www.facebook.com/pages/Starsblogging/324532194302709" target="_blank" id="iconFacebook"></a></span>
<span><a title="Google Plus" href="https://plus.google.com/110363707893612306708/posts" target="_blank" id="iconGooglePlus"></a></span>
<span><a title="YouTube Channel" href="https://www.youtube.com/user/xxxx" target="_blank" id="iconYouTube"></a></span>
</div>
Now Click Save button exists at the bottom of the pop widget screen. After adding just move your Follow us widget to anywhere you want to display to your readers. I recommend you to add this at the top right or left of your sidebar. It impacts an special role to increase your blogger rankings. It will also increase your social media followers such as RSS Feed readers, Twitter Followers, Facebook page likes, Google Plus 1+'s and YouTube subscribers. After moving this widget to top right of blogger sidebar just click on Save Arrangement to save your settings.

Customization of Elegant Style Social Media Follow Buttons


  • http://feeds.feedburner.com/RSS Feed URL
  • http://twitter.com/TWITTER URL
  • http://www.facebook.com/FACEBOOK PAGE URL
  • https://plus.google.com/GOOGLE + PAGE URL/posts
  • https://www.youtube.com/user/YOUTUBE CHANNEL

You must do some changes in this stylish widget to make it your own. Just simple replace all the BOLD text with your own page or profile links and then save it own your desires. This will increase your profile or site followers. Every link will opens in new tab without closing your website.

Just complete all the 8 simple steps to add this simple and stylish widget in your blogger or site. Social widget have some special effects when you move your mouse cursor or hover on social media pictures. these all will move from top to bottom. This will clears the opacity of these social media pictures and visitor will force automatically to click on it and follow your site as your permanent reader.

Enjoy this cool widget. Keep visiting and Keep comments.

0 comments:

Post a Comment