Membuat Tombol Share Melayang Blog

Ilmu Informatika : Membuat Tombol Share Melayang Blog.


Membuat Tombol Share Melayang Pada kesempatan kali ini saya akan membahas mengenai salah satu tips blogger.
Fungsi dari tombol share sendiri ini pasti sudah pada tau kan sobat isrul semua?
Tentu saja yang utama adalah mendatangkan pengunjung ke web kita melalui link yang telah di share di sosial media, dalam hal ini adalah facebook, twitter dan google plus.
Harus di akui jika memang sangat jarang pengunjung yang mengshare postingan ke media sosial, kebanyakan hanya yang berbau berita atau informasi. Namun sangat salah jika anda berpikir "kalau gitu mending nggak usah dikasih tombol share".
Hal tersebut sangat salah, karena google yang notabene sebagai mesin pencari (search engine) yang paling banyak digunakan oleh pengguna dan entah benar atau salah yang saya tau, google itu juga menyukai blog yang dilengkapi dengan tombol share mungkin sangat sulit untuk diterima dalam salah satu program google, yaitu google adsense (Silahkan dibuktikan bagi yang ingin mendaftar google adsense).
Kembali lagi ke tema, namun pada postingan kali ini tombol share tersebut letaknya secara melayang atau pop up. Sehingga pengunjung akan selalu melihat tombol share tersebut.
Apakah tidak mengganggu pengunjung?
Mengganggu atau tidaknya tergantung sobat meletakkan tombol tersebut dibagian mana. Jika menutupi postingan tentunya sangat mengganggu bagi pengunjung, sebaiknya di letakkan di bagian sisi atau samping web.
Berikut adalah penampakannya.

Membuat tombol share melayang di blog

Oke bagi sobat yang tertarik untuk memasang tombol share melayang bisa mengikuti langkah-langkah berikut ini.
1. Pertama-tama buka dulu blog sobat. www.blogger.com
2. Buka tata letak/ layout -> tambahkan gadget -> HTML. (Letaknya terserah karena nanti posisinya akan melayang).
Copy kode berikut:

<style>
#pageshare {
position:fixed; 
bottom:30%; 
left:6%; 
float:left; 
border: 1px solid black; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#eff3fa;
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; 
-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="Share">
<center><b>SHARE</b></center><br />
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</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 class='sbutton' id='fb'>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

</div>

3. Sesuaikan ukurandan letaknya dibagian yang diberi warna merah tebal berikut.
#pageshare {
position:fixed; 
bottom:30%; 
left:6%; 
float:left; 
border: 1px solid black; 
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#eff3fa;
padding:0 0 2px 0;
z-index:10;
}
Kemudian save :-)

Lihatlah hasilnya.

Script ini saya lupa mengadopsi darimana, ada salah satu pengunjung yang meninggalkan komentar di postingan ini dengan pertanyaan : "Oiya kalo gak salah ini templatenya punya mbak Arlina ya.. tapi saya lihat dihapus tulisan dibuat oleh beliau".
Berikut komentarnya.

 

Klarifikasi:
1. Template ini saya menggunakan template dari Mas-Sugeng bukan mbak Arlina (Kalo yang dimaksud adalah template).
2. Script tombol share melayang ini saya lupa bersumber darimana yang jelas saya telah menggunakannya cukup lama yang kemudian saya hapus widget saya, saya mendapatkannya secara gratis tanpa melanggar hak cipta.
3. Script ditulis oleh siapa?
setiap script itu sifatnya untuk share karena bersifat gratis tanpa harus mencantumkan sumbernya, berbeda dengan plugin yang bersifat gratis dan premium. Namun berbeda dengan postingan sudah melanggar hak cipta.
3. Kenapa saya tidak menampilkan komentarnya? maaf segala bentuk promosi link tidak pernah saya publish :)
Demikian artikel mengenai Membuat Tombol Share Melayang Blog. Semoga bermanfaat untuk sobat semua.
Nikmati Jasa & Layanan yang ada di www.isrul.com, diantaranya:
1. Jasa Pembuatan dan Verifikasi Akun Paypal dengan VCC (Valid 2 atau 3 Tahun)
2. Jual Akun Adsense Non Hosted Indonesia (0899-5832-699)
3. Penulis Tamu di Isrul.com

2 Responses to "Membuat Tombol Share Melayang Blog"

  1. gan saya mau tanya doong masalah tombol share, saya mau tanya ko saya tidak bisa memasang tombol share yang seperti sobat, yang ada tulisannya "please share", saya sudah cari sana sini di berbagi macam blog, tapi hasilnya malah acak2an,

    mungkin sobat bisa membantu, ditunggu jawabannya sob, ^^

    ReplyDelete
    Replies
    1. Cba di ulangi yg teliti mas. Soalnya udah hampir setahun saya gak pake widget ini. Hehe

      Delete

Jika anda bertanya, jangan lupa mencentang "Notify Me" di bagian kanan bawah, agar mendapat pemberitahuan jika pertanyaan anda telah kami jawab.
Terimakasih telah menyempatkan waktu berkomentar...