Share Button ini terletak pada bagian bawah artikel, ini sangat berguna untuk memudahkan pengunjung untuk membagikan artikel yang dibacanya ke Social Media. Nah, pada tutorial ini hanya terdapat 3 tombol saja, yaitu tombol untuk share ke Facebook, Twitter, dan Google Plus. Silahkan sobat kreasikan dengan keinginan sobat agar lebih cocok pada blog sobat.
Oke, kita lanjut ke langkah pemasangan
Note :
Template yang digunakan harus sudah memasang Font Awesome. Bila belum, silahkan baca artikel ini Cara Memasang Font Awesome Di Blogger
Cara Memasang Share Button :
- Seperti biasa sobat login dulu ke blog sobat
- Setelah itu masuk ke Template > Edit HTML
- Tambahkan kode di bawah ini di tempat yang sobat inginkan, untuk menambahkannya di bawah artikel bisa cari kode <data:post.body/>
- Lalu copykan kode ini tepat di bawahnya
<h4 class='post-bawah'>Bagikan Yuk!!</h4> <div class='sharepost'> <ul> <li> <a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i class='fa fa-facebook' /></a> </li> <li> <a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa fa-twitter' /></a> </li> <li> <a class='gplus' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Google Plus Share'><i class='fa fa-google-plus' /></a> </li> </ul> </div>
- Setelah itu tambahkan CSS di bawah ini tepat di atas kode ]]></b:skin>
h4.post-bawah { text-align: center; } .sharepost { padding: 20px; text-align: center; } .sharepost li a { padding: 10px; width: 20px; height: 20px; color: #fff; display: inline-block; border-radius: 50%; margin: 0 10px; transition: all 0.5s; box-shadow: 0px 1px 5px rgba(0,0,0,0.5); } .sharepost li a:hover { box-shadow: 0px 5px 10px rgba(0,0,0,0.5); } .sharepost li a.facebook { background: #3A5795; } .sharepost li a.twitter { background: #1DA1F2; } .sharepost li a.gplus { background: #DB4437; }
- Langkah terakhir Save & Lihat hasilnya
Nah, sekial artikel tentang Membuat Share Button Pada Blogger Material Design, jangan lupa tinggalkan komentar yh..
Bagi yang kesulitan bisa berkomentar di kolom komentar, Insyallah akan kami bantu..