Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Cara Membuat Tombol Share Melayang Di Blog ini banyak memberikan manfa'at, antara lain bisa meningkatkan pengunjung, bisa menambah daya tarik blog anda, membuat blog anda tampil Profesional, dan menarik minat pengunjung untuk membagikan artikel anda di berbagai jejaring sosial, cara membuatnya pun sangat mudah.

Ini dia screen shotnya:

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

15 komentar:

Unknown5 November 2012 pukul 02.19
saya suka blog ini.. trimakasih atas informasinya gan
http://www.informasiunik.com/
BalasHapus
Balasan
Unknown27 November 2012 pukul 07.30
Mantap infonya bro, thank'ya venusblogmovie.blogspot.com
BalasHapus
Balasan
Anonim6 Januari 2013 pukul 02.50
bermanfaat sekali,, aq terapkan di blog aku, silahkan berkunjung mbah, masih perlu berguru sebanyak-banyaknya :-D

http://www.hobby-makan.blogspot.com/
BalasHapus
Balasan
Dion Khaeruddin17 Januari 2013 pukul 18.04
Matap Gan...!

Boleh numpang kenal2 gan...!
Buat sobat2 kalo mau lihat
Kalimat Bergambar yang Lucu, Lebai, dan Gokil klik link ini

#www.khae7.blogspot.com#

dijamin senyum
BalasHapus
Balasan
bunda27 Januari 2013 pukul 02.25
sip terima kasih infonya..
ijin bookmark dulu..
:)
BalasHapus
Balasan
lili1 Agustus 2013 pukul 10.14
thank you sahabat
BalasHapus
Balasan
Gigih Wahyu K21 November 2013 pukul 16.12
terima kasih infonya mas.. sangat membantu :)
BalasHapus
Balasan
Unknown7 Februari 2014 pukul 19.42
Nha ini yang saya cari.
Makasih sob.
Kunjungan baliknya ya sob di jawigo.blogspot.com
BalasHapus
Balasan
adhiebkl@gmail.com27 November 2014 pukul 05.51
terimakasih gan, sangat membantu tutorialnya...
kujung balek ya gan ke tempan ane...
http://lembaranhatii.blogspot.com/
BalasHapus
Balasan
Anonim20 September 2015 pukul 22.19
kalau blog wordpress gimana buatnya
BalasHapus
Balasan
Meliodas18 Desember 2015 pukul 14.47
perfect :D
BalasHapus
Balasan
Unknown13 Februari 2016 pukul 22.06
👍
BalasHapus
Balasan
berkah berbagi2 November 2016 pukul 22.53
wah lumayan bnyak pilihannya gan
keren

mmpir gan di gubuk ane http://www.berkahberbagi.info
BalasHapus
Balasan
Anonim27 Desember 2016 pukul 18.32
Terimakasih sudah berbagi info gan.

Cara efektif daftar Google Adsense agar diterima
BalasHapus
Balasan
Unknown4 Maret 2017 pukul 12.34
Makasih gan,, Alhamdulillah Berhasil...
http://pengenketemuallah.blogspot.co.id/
BalasHapus
Balasan

Tambahkan komentar

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Bagaimana Pendapat Sobat Semua Tentang Artikel Di Atas???

Untuk menambahkan yahoo emotion pada komentar sobat adalah dengan cara menyertakan kode yahoo emotion diatas pada komentar yang sedang ditulis contohnya kode seperti ini :) yang terdapat di atas kotak komentar ini

Panduan Memberi Komentar
1.Masukan komentar anda
2.Lalu pada kata 'beri komentar sebagai' , pilih account yang anda punya, bagi yang belum mempunyai account pilih Name/url, isi nama anda dan Kosongkan URL atau isi dengan alamat facebook anda(untuk mengetahui alamat facebook anda silahkan login ke facebook dan pilih profile anda, anda dapat melihat alamat Facebook anda di atas, contoh alamat Facebook punya saya http://www.facebook.com/profile.php?id=1823916177
3.dan kemudian Publikasikan
4.Selesai dan anda tinggal menunggu komentar anda muncul
Semoga bermanfa'at.

Cara Membuat Tombol Share Melayang Di Sebelah Kiri Blog

Ditulis Oleh : Unknown ~ Turitorial Blog

15 komentar:

Entri Populer

Arsip Blog

Members