Cara Membuat Tombol Share Melayang

11 Oktober

Memiliki blog dengan tampilan menarik dan menawan tentunya sangat membanggakan. Kalau kita melihat tampilan template-template bawaan blogspot tentu semuanya hanya memiliki tampilan standar, kita perlu sedikit kreatif mengotak-atik html template agar terlihat lebih indah.

Pada artikel terdahulu kita sudah mencoba membuat judul title yang bergerak pada title browser. Tutorial kali ini akan membahas bagaimana caranya membuat tombol sharemelayang untuk sosial media seperti facebook, twitter, google dan Rss Feed. Tombol share yang akan kita buat akan lebih variatif dan cantik dengan menggunakan CSS dan sedikit script sederhana. Tombol share sangat penting loh untuk mempopulerkan website kita, jadi sebisa mungkin usahakan blog kita memiliki tombol share yang memancing para pengunjung mau mencoba tombol share yang ada di website kita.

Nah berikut lihat tampilan gambar tombol share yang sudah di modifikasi.

Contoh Gambar Tombol Share Melayang

Insert gambar


Bagaimana cara membuat tombol share seperti gambar diatas, ikuti langkah-langkah di bawah ini :

1. Masuk ke dashboard akun blogger kamu
2. Lalu tentukan blog mana yang akan kamu rubah
3. langsung menuju ke pilihan Tata letak di sisi sidebar
4. Pilih Tambahkan widget
5. Kemudian tambahkan HTML/JavaScript
6. Setelah terbuka halaman menambahkan html atau javascript masukkan kode dibawah ini kedalam kotak yang berjudul konten. "Ingat untuk judul biarkan kosong"

Yang harus kamu perhatikan sebelum melakukan copy paste pada kode dibawah, coba kamu lihat kode dibagian paling akhir. Nah silahkan ganti informasi pada url dan title dengan url blogspot kamu dan title blogspot kamu. Untuk bagian RSS cukup ganti dengan nama blog kamu.

Kekurangan dari kode ini adalah tidak bisa melakukan share berdasarkan title posting, tombol share hanya melakukan share pada URL dan Title blogspot secara umum. Insya Allah jika nanti saya temukan kode untuk share berdasarkan postingan, akan saya posting lanjutan artikel membuat tombol share dengan kode sederhana.

Kode yang harus mau dimasukkan:

<style>  
 ul#navigation {  
 position: fixed;  
 margin: 0px;  
 padding: 0px;  
 top: 0px;  
 right: 0px;  
 list-style: none;  
 z-index:999999;  
 width:721px;  
 }  
 ul#navigation li {  
 width: 103px;  
 display:inline;  
 float:left;  
 border:0;  
 }  
 ul#navigation li a {  
 display: block;  
 float:left;  
 margin-top: -2px;  
 width: 100px;  
 height: 25px;  
 background-color:#eeeeee;  
 background-repeat:no-repeat;  
 background-position:50% 10px;  
 border:1px solid #BDDCEF;  
 -moz-border-radius:0px 0px 10px 10px;  
 -webkit-border-bottom-right-radius: 10px;  
 -webkit-border-bottom-left-radius: 10px;  
 -khtml-border-bottom-right-radius: 10px;  
 -khtml-border-bottom-left-radius: 10px;  
 text-decoration:none;  
 text-align:center;  
 padding-top:80px;  
 opacity: 0.96;  
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
 }  
 ul#navigation li a:hover{  
 background-color:#CAE3F2;  
 }  
 ul#navigation li a span{  
 letter-spacing:2px;  
 font-size:11px;  
 color:#60ACD8;  
 font-family:trebuchet-ms, arial, tahoma, Sans-Serif;  
 font-weight:bold;  
 text-shadow: 0 -1px 1px #fff;  
 }  
 ul#navigation .rss a{  
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVaUAejsyAfrp0hFpirPg4IHuYNY7XMw1OkJEv6iSixxMSyRAZGrPhyU9KixqjRiDSNZn9TFnophQajcpZLNA5H29mPg-SMtjfLMPDmIhBCgvgK-RnLPpe5t0psRAqLrn-J9Tis3e35o/s1600/64x64.png);  
 }  
 ul#navigation .facebook a {  
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXFX2b2STHzXhoT_zdnoHlEnzBI1wJSa9SDhOsdJrgQEjMekGrwVHGqhrxX1IY6cU4bdnqMEgXlaEeSqVw9XZjbjUbOXxFL6BkZYAiboABxwEdJHkMTTaUK8ivuB3fABMTueIBsFYeDA4/s1600/64x64.png);  
 }  
 ul#navigation .twitter a {  
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyZkgt8pFoLeM6wM6aOhRaT72qseGMRNZ-WRxsyiFyLA5q1CiIlGTdfNaKZ92LJfJWizlhcVQwZnECU1CcElbdY5kxAsbCWxNv7WI-dTMfDIRqqFnWybi6cpyqq3zX0KZ25yWbMIMtT1t_/h120/twitter.png);  
 }  
 ul#navigation .googlebookmarks a {  
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOENO0q7hrsou300p058-1bLpS67thTRSRG0u7aBHs1eZHLtHLpynFWzR6nugef2ERUnKbAhIgE_C36cJfq_oP7GDgt7Kdq-LtoXpPNnqcZmURL2XOaFOv-A39UNMjlKGWzTYFgjvLfwk/s1600/64x64.png);  
 }  
 ul#navigation .e-mail a {  
 background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6LTpNiI69Ch60KZLWUOGdh_ephjp7C4JSNSGVbHzVlTRRcoBmwUtDehlKABBqCsG26Cdn8R37XKBEbzoJcYDFCEB0gclvihPqE6G1Re90W7ekgQOURwwLVbbJkaNGDOdHPdsolRYF0vE3/s400/yahoo_64x64.png);  
 }  
 </style>  
 <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
 $(function() {  
 var d=300;  
 $('#navigation a').each(function(){  
 $(this).stop().animate({  
 'marginTop':'-80px'  
 },d+=150);  
 });  
 $('#navigation > li').hover(  
 function () {  
 $('a',$(this)).stop().animate({  
 'marginTop':'-2px'  
 },200);  
 },  
 function () {  
 $('a',$(this)).stop().animate({  
 'marginTop':'-80px'  
 },200);  
 }  
 );  
 });  
 </script>  
 <ul id="navigation">  
 <li class="rss"><a href="http://BLOG-KAMU.blogspot.com/atom.xml">RSS Feed</a></li>  
 <li class="facebook"><a href="http://www.facebook.com/share.php?u=[URL]&title=[TITLE]">Facebook</a></li>  
 <li class="twitter"><a href="http://twitter.com/home?status=[TITLE]+[URL]">Twitter</a></li>  
 <li class="googlebookmarks"><a href="https://plus.google.com/share?url=[URL]">Google</a></li>  
 <li class="e-mail">Yahoo!</li>  
 </ul> 

Selanjutnya kamu tinggal menyesuaikan tombol share hendak diletakkan dimana, berexplorasilah dengan blog kamu, agar mendapatkan hasil yang maksimal. Selamat mencoba!