Cara Mudah Membuat Tombol Share Keren Dibawah Postingan - Tombol share merupakan salah satu hal penting yang harus ada di dalam sebuah website/blog. Kenapa harus ada? Ya, karena tombol share ini berfungsi mempermudah para pengunjung untuk menyukai ataupun membagikan artikel yang sedang dibacanya, dan tentu saja hal ini merupakan sebuah keuntungan bagi si empunya blog. Tanpa membuang waktu lagi, berikut cara mudah membuat tombol share keren dibawah postingan. Silahkan disimak langkah-langkah dibawah ini.
1. Pertama, anda login dulu ke Blogger
2. Pilih Template » Edit HTML
3. Cari Kode ]]></b:skin>
4. Pasangkan kode dibawah ini diatas kode ]]></b:skin>. Disini Kang AP memberikan dua pilihan gambar yang bisa anda pasang, silahkan pilih mana yang menurut anda cocok.
Kode Gambar 1
.share-button-box {height:67px;background: url(https://lh3.googleusercontent.com/-AOWysCwFacc/VxyVulKA08I/AAAAAAAACoA/0za4kAZMDqwnJPBxct4e0kzNCCQGAVW-ACLcB/s1600/copasange-gokil.gif) no-repeat 300px 5px;margin:5px 0 15px;overflow:hidden;}.share-buttons{margin:0 0;height:67px;float:left}.share-buttons .share{float:left;margin-right:10px;display:inline-block}
Kode Gambar 2
.share-buttons-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgknr4sx2uwbYiKNEYPDWYQABsRkLUpIjKqnAMl18NOEbkxGSIzF3DvD5M8wtRzwtveyJ7RHLN7adf2n6mL_jZKtvFgVvFxztkoaH2JBjW5OM9XkplIfh9Ckp1nHMT7_7OAKscXuo_rEY8/s1600/copasange+share+hell.png) no-repeat 300px 5px;margin:5px 0 15px;overflow:hidden;}.share-buttons{margin:0 0height:67px;float:left}.share-buttons .share{float:left;margin-right:10px;display:inline-block}
Karena setiap lebar template berbeda, silahkan ganti kode yang berwarna biru sesuaikan dengan lebar template anda.
5. Sekarang cari kode <data:post.body/>
6. Letakkan kode di bawah ini dibawah kode <data:post.body/>
<div class='share-buttons-box'><div calss='share-buttons'><div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div><div class='share like'><div class='fb-like' data-action='like' data-layout=box_count' data-share='false' data-show-face='false' expr:data-href='data:post.url'/></div><div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div><div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div></div></div><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script','twitter-wjs');<script><div style=clear: both;'/>
Baca juga :
Pada langkah ini orang banyak melakukan kesalahan. Jika pada template anda terdapat dua kode <data:post.body/>, tempatkan kode diatas dibawah kode <data:post.body/> yang kedua.
7. Simpan dan lihat hasilnya
Demikian cara mudah membuat tombol share keren dibawah postingan, semoga bermanfaat. Terima kasih sudah mampir di blog yang sederhana ini, semoga berhasil.
kiplispot.site
ReplyDelete