Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

tombol share yang akan coba kita buat sekarang adalah melayang di sebelah kiri blog, terdapat banyak tombol share sosial, seperti like facebook, twitter, google plus, dll

Langsung saja untuk dapat membuatnya ikuti langkah-langkahnya di bawah ini:

1. Masuk ke dasbor --> Template --> Edit HTML

Pertama copy kode diatas persis dibawah <head>
kemudian simpan, setelah itu anda masuk ke menu dasbor--> tata letak --> add gadget, kemudian copy pilihan kode di bawah ini !

Code Tema Silver:

<style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear,
 left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, 
#aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px 
solid #808080;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Merah:

<style>
#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #F54F4F), color-stop(1, 
#C12424));background:-moz-linear-gradient(top, #F54F4F, 
#C12424);border:1px solid #B31919;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Biru:

<style>
#floatingbuttons{background:#295698;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #3980E6), color-stop(1, 
#295698));background:-moz-linear-gradient(top, #3980E6, 
#295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Hitam:

<style>
#floatingbuttons{background:#333;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #656565), color-stop(1, 
#333));background:-moz-linear-gradient(top, #656565, #333);border:1px 
solid #222;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Hijau:

<style>
#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #A1D423), color-stop(1, 
#80A81C));background:-moz-linear-gradient(top, #A1D423, 
#80A81C);border:1px solid #739619;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Orange :

<style>
#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #F58D4F), color-stop(1, 
#C15F24));background:-moz-linear-gradient(top, #F58D4F, 
#C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#fff;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code Tema Kuning

<style>
#floatingbuttons{background:#FFF19D;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, 
#FFF19D));background:-moz-linear-gradient(top, #FFF8CA, 
#FFF19D);border:1px solid #F1E7AC;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#000;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#fff;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Code untuk Tema Putih :

<style>
#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, 
left top, left bottom, color-stop(0, #fff), color-stop(1, 
#F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px
 solid #ccc;float:left;padding:0 0 3px 
0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 
0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons 
.floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} 
.addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a
 span.getfloat, .addbuttons a 
span.sharebuttons{color:#000;background:none;font-family:arial, 
sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;}
 .addbuttons a:hover 
span{color:#000;background:none;text-decoration:underline;}</style>
<div
 id='floatingbuttons' title="Share this post!">
<script 
src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script
 type="text/javascript"> (function() { var s = 
document.createElement('SCRIPT'), s1 = 
document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; 
s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; 
s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' 
type="text/javascript"></script><div class='floatbutton' 
id='facebook'>
<fb:like layout="box_count" show_faces="false" 
font=""></fb:like></div>
<div class='floatbutton' id='google+1'>
<g:plusone size="tall"></g:plusone></div>
<div class='floatbutton' id='twitter'>
<a href="http://twitter.com/share" class="twitter-share-button" 
data-count="vertical" >Tweet</a></div>
<div class='floatbutton' id='linkedin'>
<script type="text/javascript" 
src="http://platform.linkedin.com/in.js"></script><script 
type="in/share" data-counter="top"></script></div>
<div class="addbuttons">
<a 
href="http://www.mbahtrik.blogspot.com/2012/08/cara-membuat-tombol-share-melayang-di.html"
 title="Add floating social media share buttons to your 
blog!"><span class="getfloat">Get floating</span><div 
style="clear:both">
</div>
<span class="sharebuttons">share buttons</span></a> 
</div>
</div>

Demikian Cara Membuat Tombol Share Melayang Di Blog. Selamat mencoba ye Kawan Blogers

Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Temukan saya di

Recent Posts

Labels

Labels

Contact Form

visitor