2016 Responsive Social Sharing Button for Blogger Blogs

Beautiful and simple Social media share buttons help us to get our well-written content shared on different social media platforms e...

Beautiful and simple Social media share buttons help us to get our well-written content shared on different social media platforms easily. When a piece of content get shared more and more times on different social media platforms, it helps our content to get more links, free traffic and social signals which increase the value of our content in search engines and ultimately it ranks well too.

I have used four different social media share buttons which are as follow:

  • Twitter
  • Facebook
  • Google Plus
  • Stumble Upon

I have used only four buttons because the space is limited, but you can add more if you like or remove the one you do not want and add yours. All you need to have is fair knowledge of HTML and CSS. You can grab the code of any social media share button from the respected social media platform's website.

You can see the live demo of this social media share buttons bar in the post image, and if you liked it, let us begin the installation process.

Adding Social Media Share Buttons to Blogger - Below the Post Title

Step 1) Go to Blogger → Template → Edit HTML

Step 2) Click inside the Template code box  → Press Ctrl+A and copy your template code to a notepad file and have a Backup of it in case you did something wrong, you can revert it back to original.

Step 3) Ok, so now you have the backup so again click inside the template code box, Press Ctrl+A or Cmd+A (for mac) and find out this closing tag </head>

Step 4) Now just before this </head> tag, paste the whole CSS code given below as it is.




<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>/*----Social Share Buttons Bar By naijaexploits.blogspot.com----*/#twistBloggerSocialbar {  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 Scriptwindow.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>




Did you complete the above steps? Let's move on to next step which is adding HTML part of social media share buttons below the post title.

Step 5) Now Search for this code line <div class='post-header-line-1'/>  and paste the HTML code just below it.

Note: You may find this code line appearing more than once (usually twice) so you have to paste the HTML code after its second appearance in your template code.





<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='twistBloggerSocialbar'><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='Ngospelmedia' 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>



Important: Change the highlighted text Ngospelmedia with your Twitter username. It will be added to your tweets in the end and you'll be able to trace your tweets easily about who shared them.

Ok so now we are done with it. Save your template code and visit any 1 of your blog posts to see the cute social media share buttons appearing just below the post title. :)

So did it work for you? It should work if you haven't skipped any one of the steps I mentioned above. I am always free to help you BDW :) so you can ask me in the comment box if you need my help.

Making Social Media Share Buttons Responsive - Optional
So you want to make these social media share buttons screen responsive? Well, it depends on your template code and your @media screen queries you have used in your template code (in case you're using a responsive template) so I can not make these buttons responsive according to My template code for You but I can give you an example so that you can work around to make them responsive according to your template.

I have made these buttons responsive for my blog and this code may not work for you perfectly the way you want, but It will give you a head start to make them work for you. Below is the responsive code I have made for my template where I disabled StumbleUpon Button, Share Title Text and Decreased the margin and padding of buttons accordingly.





@media only screen and (max-width: 979px) and (min-width: 768px) {  .shareBox {    margin-right: 1px; }   /*---- Decreased the margin to 1px from 10px  ----*/}@media only screen and (max-width: 767px) and (min-width: 480px) { .titleBox {display: none;  /*---- Disabled The Share Text From Displaying ----*/  }  .shareBox {    margin-right: 8px; /*---- Decreased the margin to 8px from 10px   ----*/  }}@media only screen and (max-width: 479px) {  .titleBox {    display: none;   /*---- Disabled The Share Text From Displaying ----*/  }  .shareBox {    margin-right: 1px; /*---- Decreased the margin to 1px from 10px  ----*/  }  .stumblupon {    display: none;   /*---- Disabled Stumble Upon Button ----*/  }  .twitterBox {    padding: 4px 8px;  /*---- Decreased the padding  ----*/  }  .googlePlusBox {    padding: 4px 5px; /*---- Decreased the padding  ----*/  }}



Note: You have to add the responsive CSS code with the CSS code given above.

Did you get it? Have some questions? Feel free to ask for help and I'll do my job. I hope you liked these social media share buttons for blogger and added successfully to your blogger blog.


Did you like this post? Please do share and show me that you care. :) Stay blessed, peace upon all.

COMMENTS

BLOGGER
Name

Acronyms,1,Ads Ready,1,Adsense,1,Adserver,1,airtel,2,android,22,Apps,4,Auto Loader,19,backup,1,Bank,1,BB10,1,better,1,bios,1,blackberry,24,Blogger,11,blogger jquery,12,Blogger Template,3,blogger tips,12,Blogger Widget/Gadget,13,Bluetooth,1,BOIS Update,1,browser,2,Bug,1,business,3,CAD,1,capability,1,Career Development,2,Celebrate,1,chat,1,cloud computing,1,code,1,comment,2,computer,13,crack,17,crash,1,css,3,cure,1,CV,18,data,2,delete,1,Diamond Bank,2,download,32,email,6,ESPN,1,etisalat,2,Facebook,2,Feedburner,1,Firmware,3,Flash File,27,Flash Games,3,Flashing,3,For Seniors,2,free-up space,1,Freebies and Giveaways,2,FTP,1,Galaxy,2,games,5,glo,2,good,1,Google,8,Google Affiliate,1,Google Drive,1,Google Photos,1,Google Play Store,3,Google+.,1,great,1,GTA,4,guide,3,hacks,7,handle,1,Hard drive,2,HDD,1,how to,10,HTC,2,html,1,Huawei,1,ict,4,India,1,INEC,1,Infinity Best,1,Innovation,1,Intel,1,internet,6,internet explorer,1,iOS,2,ipad,4,iphone,7,Itel,1,java script,6,Jetpack,1,keyboard,8,know,3,Label,3,Laptop,1,Learning,12,LG,2,Lollipop,2,Mac,2,Management,1,Marriage,1,Mediafire,1,meeting,1,message,12,Microsoft,5,Microsoft excel,2,mobile,7,Mobile Phones Specifications,1,mobility,2,money,1,Motorola,1,Movie,1,Mozilla Firerfox,1,MS Word,1,MTK,2,mtn,4,music,1,need,1,Networking,1,NOBLE NOKIA INFO,9,Nokia,4,notebook,1,passwords,1,PayDirect,1,PayPal,1,PC,7,PC Games,45,PC mgazine,6,PC Tricks,3,pc-crash,1,PDF,1,Personal Productivity,4,Phone,3,photo shop,1,Play Station,9,Plugin,1,post,2,Premium Blogger Template,1,protect,3,ProtectTool,1,Racing Game,2,reasons,1,Responsive,1,Root,2,sagem,1,samsung,11,save,1,secrets,1,secure,4,security,9,security Enhancements,5,Server,1,shell-coding,1,shortcut,21,Simple Server,1,SmartsmsSolutions,2,SMS,6,social community,3,Sony,2,Spreadtrum,1,SSD,1,steps,1,Stock Rom,2,Symbian,1,Sync,2,Tablet PC,3,Talent,1,TECH_WORLD,2,Techniques,3,technology,3,technology tips,26,Tecno,7,template hacks,1,Theme,1,tips,19,transmissions,1,Tutorial,3,tutorials,28,types,1,USB Driver,1,users,1,Video,1,Virus,1,Visa Card,1,Volcano Box,8,Vote,1,WAP WORLD,8,Whatsapp,1,windows,11,Windows 10,2,Windows 7,1,Windows 8,1,windows mobile,1,Windows Phone,2,Windows Phone Store,2,windows xp,5,word of life,11,Wordpress,3,work place skills,7,WPTouch Mobile Plugin,1,Xbox,2,zain,1,Zenith Bank,1,
ltr
item
NOBLE ICT EXPLOITS ZONE™: 2016 Responsive Social Sharing Button for Blogger Blogs
2016 Responsive Social Sharing Button for Blogger Blogs
https://2.bp.blogspot.com/-LlYYlkTlkAU/Vr-lJjfMXII/AAAAAAAAJ0g/52eE8GRwXsg/s1600/social.PNG
https://2.bp.blogspot.com/-LlYYlkTlkAU/Vr-lJjfMXII/AAAAAAAAJ0g/52eE8GRwXsg/s72-c/social.PNG
NOBLE ICT EXPLOITS ZONE™
https://naijaexploits.blogspot.com/2016/02/2016-responsive-social-sharing-button.html
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/
https://naijaexploits.blogspot.com/2016/02/2016-responsive-social-sharing-button.html
true
4058378300189517969
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy