RSS Follow us on Google+ Follow us on Twitter! Follow us on Facebook! Follow us on Linkedin!

Attention

Permohonan maaf

Mohon maaf yang sedalam-dalamnya kepada seluruh pengunjung Blog AsalNy@mbung dikarenakan Blog masih dalam modifikasi jadi seluruh konten atau artikel belum tertata secara benar, baik tampilan maupun designnya, sekali lagi admin AsalNy@mbung Mohon maaf. dan terimaksih banyak sudah berkunjung, salam sukses selalu untuk sahabat blogger semuanya.

Home » » Transparent Floating Social Share

Transparent Floating Social Share

Written By Asal Nyambung on Friday, April 5, 2013 | 10:30 PM

As it appears that google emphasizes people's choice to rank pages at SERP, the importance of social media buttons for blog pages or posts have drastically changed.  Day after day people have experimented with their social media buttons position, to get the highest possible shares and +1s or any other bookmarks. Following that, floating share buttons or floating social media buttons have became quite effective. Later on, mashable introduces a floating share button widget which is said to be transparent, and people loved that. So, here I have came up with fully transparent floating social share buttons widget. And in this tutorial, I will show you, How To Add Transparent floating Social Media Buttons to Blogger.

 Process:
  • Log in to your Blogger account. 
  • Go to Design >> Page elements. 
  • Click on Add A Gadget; select HTML/Javascript.
  • Paste the following code in the HTML gadget and click on Save.
<!-- floating page sharers Start --><style type="text/css">#pageshare {
  position:fixed;
  bottom:15%;
  margin-left:-71px;
  float:left;
  background:transparent;
  padding:0 0 2px 0;
  z-index:10;
}

#pageshare .sbutton {
  float:left;
  clear:both;
  margin:5px 5px 0 5px;
}

.fb_share_count_top {
  width:48px !important;
}

.fb_share_count_top,
.fb_share_count_inner {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
}

.FBConnectButton_Small,
.FBConnectButton_RTL_Small {
  width:49px !important;
  -moz-border-radius:3px;
  /*bs-fsmsb*/

-webkit-border-radius:3px;
}

.FBConnectButton_Small .FBConnectButton_Text {
  padding:2px 2px 3px !important;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  font-size:8px;
}

</style>

<div id='pageshare' title="Get this from s-tofus.blogspot.com"><div class='sbutton' id='fb'><a title="Post to Google Buzz" class="google-buzz-button" href="http://www.google.com/buzz/post" data-button-style="normal-count"></a><script type="text/javascript" src="http://www.google.com/buzz/api/button.js"></script></div><div class='sbutton' id='rt'><script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script></div><div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class='sbutton' id='digg' style='margin-left:3px;
  width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div><div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div align='center'><a href='http://s-tofus.blogspot.com/2011/10/how-to-add-transparent-floating-social.html'>Get This</a></div>
<!-- floating page sharers End --></div> 

You are all done. But, what if you want to add other buttons? After the 1st buzz button, you are free to add any buttons you want. Just simply put the button's script code into a dive code and paste it after any </div> code in the HTML of the widget. And then what?! Enjoy... :)
If you face any kind of problems with adding transparent floating social media buttons to blogger blog, just leave a comment.




Share this article :

0 comments:

Post a Comment

Terimakasih atas kunjungannya
Demi Perubahan Blog Ini Ke Arah Lebih Baik Saran Agan-Agan Sangat Bermanfaat, Terimakasih......!!!

 
Support : Kolom Tutorial™ | MPI. Al-Munfardiyyah
Copyright © 2013. Asal Ny@mbung - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger