Wednesday, July 26, 2017


By this useful article I guide you that How to add Customize Social Media Icons to Blogger Blog and drive traffic. Social Media Icons are useful for better SEO. The main act is that after adding of  Social Media Icons to blogger blog you will facilitate readers and visitors to make links well-known social media sites like Facebook, Twitter, Google, Yahoo, Delicious Facebook, MySpace, Digg, Stumble Upon, Reddit, Furl etc and other popular sites.


When you will add Social Media Icons to blogger blog personally in your blogger blog  these buttons enables readers and visitors to share links with others and also  supporting you to boost traffic towards your blogger. Now I suggest you following tips and tricks.  


  1. About Customization Social Media Icons
  2. How Add Social Media Icons in Head Section
  3. Add Social Media Icons Below of Blogger Post
  4. How to Change Some Things in HTML Code

Add Customization Social Media Icons to blogger

1.   About Customization Social Media Icons

Customization Social Media Icons support us to get our quality content share on social media sites. When our content share more and more on lot of Social Media Sites and we get traffic from that sites. It get our share icons gives us best result on different search engines and our rank going to high. Customization shared buttons are very popular. Social Media Icons  will be clicked  by visitors and  readers on your blogger blog and you can get traffic easily.  There is no problem this is a choice of visitors and readers which social sites clicked by them for example Delicious, Yahoo, Google, Facebook, Twitter, MySpace, Stumble Upon, these Social Media Sites are given prefer to your blogger blog on line service. Once readers put forward your blogger blog to a social media and you can get more profit. Now I guide you that how to add complete code of customization share buttons, read the following with carefully.


2.   How Add Social Media Icons in Head Section

Now add following CSS code under the blogger head section go to theme of the blogger in HTML Section and find </head> section of the blogger and add the following code above of </head> and save your template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#BloggerSocialbar {
  float: left;
  width: 100%;
  padding-bottom: 7px;
  margin-top: 15px;
  padding: 5px 0px 5px 0px;
  border-bottom: 1px solid #F2F2F2;
  border-top: 1px solid #F2F2F2;
  margin-bottom: 15px;
  height: 28px;
  background: #FFF9F9;
  position: relative;
  z-index: 9999;
  overflow: hidden!Important;
}
.shareBox {
  float: left;
  padding: 0px;
  margin-right: 10px;
  height: 20px;
}
.titleBox {
  background: #5F5F5F;
  border: 1px solid #000000;
  height: 100%;
  text-transform: uppercase;
  padding: 3px 10px;
  margin-right: 5px;
  font-size: 15px;
  font-family: sans-serif;
  line-height: 1.4em;
  font-weight: bold;
  color: #EFF9FD;
  border-radius: 0px 2px 2px 0px;
}
.titleBox:before, .titleBox:after {
  left: 74px;
  top: 50%;
  border: solid transparent;
  content: &quot; &quot;;
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.titleBox:before {
  border-color: rgba(245,0,0,0);
  border-left-color: #000000;
  border-width: 6px;
  margin-top: -5px;
}
.titleBox:after {
  border-color: rgba(245,0,0,0);
  border-left-color: #5F5F5F;
  border-width: 5px;
  margin-top: -4px;
}
.twitterBox {
  width: 77px;
  background: #00A8E8;
  height: 100%;
  padding: 4px 10px;
  border: 0;
}
.googlePlusBox {
  width: 57px;
  background: #E06352;
  height: 100%;
  padding: 4px 10px;
  border: 0;
}
.stumblupon {
  width: 75px;
  background: #5F5F5F;
  height: 100%;
  padding: 5px 10px 3px 10px;
  border: 0;
}
</style>
<script type='text/javascript'>
//Stumble Upon Script
(function (){var a=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();
// Twitter Script
window.twttr=(function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);t._e=[];t.ready=function(f){t._e.push(f);};return t;}(document,"script","twitter-wjs"));
</script>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
</b:if>

Once again if you are new and you did not understand about this where and which place of </head> section in HTML area of your blogger template for more guidance see the picture has given below. After that save your template.


3.   Add Social Media Icons Below of Blogger Post

Now you have added above CSS Code above of </head> section in HTML area of your Blogger Template and now add the following HTML Code below of <div class='post-header-line-1'/> line and after that save your template:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='BloggerSocialbar'>
<div class='shareBox'><div class='titleBox'>SHARE</div></div>
  <div class='shareBox'> <div class='twitterBox'><a class='twitter-share-button' expr:data-text='data:post.title' data-via='Blogger' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div></div>
<div class='shareBox'>
   <div class='fb-like' data-action='like' data-layout='button_count' data-share='false' data-show-faces='false' style='background: #4965B4; width:80px; height: 100%; padding: 4px 10px; border: 0;'/>
  </div>
<div class='shareBox'>
   <div class='googlePlusBox'><div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/></div>
  </div>
 <div class='shareBox'>
   <div class='stumblupon'>
<su:badge expr:location='data:post.url' layout='1'/>
  </div>
  </div>
 </div>
</b:if>

Now you have added above code, if you have confusion of the place which place you have added the code for more guidance see the picture has given below: 

4.   How to Change Some Things in HTML Code

Now copy the above HTML code and paste is below Post footer and change your (Your Twitter User Name) in the above code and save your blogger template. Once thing note that if the above code not work under the blogger post and should be find following line in HTML of your blogger template for more guidance see the picture has given below:


Finally I advice that Addthis is providing free service and you can get Social Media Icons, and place it anywhere you want. I hope you like this article like other tutorials and leave your comments.


Contact Form

Name

Email *

Message *

Home     About Us     Contact Us     Privacy Policy     Disclaimer     Sitemap    

                                  Copyright ©2014-2017. Media Music Mania - All Rights Reserved.