Cara Pasang Tombol Share Media Sosial Blog Menarik

Hallo semuanya ! Pada kesempatan kali ini saya akan memberikan sebuah tips tentang bagaimana cara membuat dan memasang tombol share media sosial sederhana dan fast loading pada bagian bawah artikel blog. Tombol share media sosial seperti facebook. Google Plus, Twitter dan Juga Whatsapp sangat bisa membantu sebuah blog agar bisa mencapai popularitas yang tinggi dan bisa mendatangkan pengunjung baru melalui media sosial. Seperti yang kita ketahui, pengguna media sosial di Indonesia ini sangatlah banyak dan hampir para anak muda memiliki minimal 1 Media sosial.

Oleh sebab itu menambahkan tombol share ke berbagai media sosial pada blog sangatlah penting. Sebenarnya kalian bisa menemukan dengan mudah di Internte berbagai macam tombol share facebook yang di khususkan untuk blog maupun website. Akan tetapi kebanyakan akan menambah berat blog ketika dibuka. Terlebih lagi cara memasangnya yang sulit ? AKan tetapi saya akan memberikan sebuah tombol share ke 4 medis sosial khusus untuk blog kalian sobat. Dan yang menariknya, tombol sosial media ini tidak memerlukan javascript. 

1). Masuk ke dasboard blogger > Tema > Edit Tema

2). Pastekan kode script dibawah ini di atas kode ]]></b:skin> atau </style

#share-button {margin:0 0 8px;padding:0;overflow:hidden} #share-button p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#fafafa;display:block;padding:5px 8px!important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;font-weight: 700;} #share-button a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff} #share-button a:hover{top:1px;left:1px;box-shadow:0 0 3px rgba(1,1,1,.1)} .wa-button{color:#fff;margin:0 auto;padding:0;font-size:14px;font-weight:700} .wa-button a{color:#222;margin:0 auto;padding:10px 8px;background:#222} .wa-button i{font-weight:400;margin:0 10px 0 0}

3). Cari kode <data:post.body/> dan pastekan kode HTML berikut ini di bawahnya. Atau bisa juga dipastekan tepat di atas <div class='post-footer'>

<div id='share-button' style='margin-top:8px;'> <p> Share: </p> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a><a expr:href='"https://plus.google.com/share?url=" + data:blog.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a><a expr:href='"https://twitter.com/intent/tweet?url=" + data:blog.url + "&text=" + data:post.title + "&lang=id"' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a> <a data-action='share/whatsapp/share' style='background:#43d854' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/> WhatsApp</a> </div>

4). Tepat di atas </head> Pastekan kode berikut ini

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

5). Terakhir Simpane Tema blog dan lihat hasilnya. Untuk tampilanya sendiri sangatlah mirip dengan tampilan share media sosial seperti yang ada di blog ini. Semoga berhasil !

Bagikan

Related Posts