Memanbah tampilan menjadi menarik seputaran blog, Nah, homan.. dapat anda lihat di sebelah kanan ada share botton yang tidak bergerak walau kita scroll, bagaimana cara membuatnya..?
Oke, langsung saja langkah-langkahnya bisa di coba.
Cara Membuat Share Button di Blogger anda
1. pastikan punya akun blogger dan Login ke Akun Blogger anda.
2. Masuk ke menu Tema / Template dan klik Edit HTML.
3. Copy kode dibawah ini dan pastekan diatas </head> (bagian style atau css nya)
<style type="text/css">
/*Share Button*/
.crist-wrapper-share{right:0;position: fixed;background-color: white;border: 2px solid green;bottom:30%;overflow:auto;margin: 0px;font-size: 15px;color: black;text-align: center;padding:5px;z-index:100;}
.crist-wrapper-share li {list-style: none;margin: 5px 0px 0px 0px;}
.crist-wrapper-share li:first-child{border-bottom:1px solid black;margin-top:0px;}
@media only screen and (max-width:640px){
body{margin-bottom: 42px;}
.crist-wrapper-share {width: 99%;height: 36px; bottom: 0;margin:0px auto;padding:0px;}
.crist-wrapper-share li{display: inline;margin: 0px 0px 0px 5px;border:none;padding:0px;}
.crist-wrapper-share li:first-child{border:none;}
}
</style>
4. Setelah itu, copy juga kode dibawah ini, terus pastekan diatas </body> (bagian html atau formnya).
<div class='crist-wrapper-share'>
<li><b>Bagikan</b></li>
<li><a expr:href='"whatsapp://send?text=" + data:blog.pageName + "%20%2D%20" + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Whatsapp'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDdBUyVJ85iSo7An2J5cfYA7Fhs345p_Vt18W5y-AKxCUVXUXHYUxLkI7r6aQ2ZZqEuQ1dyLTGiJqf-igzsAUXm3TKtgcoleZ_p0TsTpfwokFdotzkBZDr6D-Hzto2gwtFKn99qSyfRzLl/s30/AW_Wa_icon.png' width='35'/></a></li>
<li><a expr:data-text='data:blog.pageName' expr:data-url='data:blog.url' expr:href='"https://twitter.com/share?url=" + data:blog.url + "&text=" + data:blog.pageName + " (by: @AKTIVITAS WEB) "' rel='nofollow' target='_blank' title='Bagikan ke Twitter'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyErI1oYTX_BorLsOSYP6t7cu3LEDygTd1IpwRH2hGj3To6Xn5OYFwOXVhFaPfMmP8mC3YzHiCUjhmUWMM3_nQkEMB3YOA0PTJRJZ0mKRLbFCF_BH4SasaeFqpQBep9nFvP7zF_BTKcTfB/s30/AW_Tw_icon.png' width='35'/></a></li>
<li><a expr:href='"mailto:?subject=" + data:blog.pageName + "&body=" + data:blog.url' rel='nofollow' title='Kirim ke Email'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB_SSXGAlydcQDqScsnd8vt6FhDcCaFYwBA1-6Z5CoA98lhpgr63cPDMKdoypjv1twHvX__E1xCuZIkSf0UdU2SUykvnxudsqTLPM2OyxLRtFyosAnYIo-go19-QEYkhDUYjVBR_X7Drvo/s30/AW_Email_icon.png' width='35'/></a></li>
<li><a expr:href='"tg://msg?text=" + data:blog.pageName + " - " + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Telegram'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMeeiRT4gBbVA_ZlIwtFK3P6GqgmRJzyzfrUqA2YNhuvzTpwEyRLwIoJINMDeJaPDbxUv81dJ4UYi5qEyoBBapED7bEBRs1ze27rWldJh9yybEFUHX1q7mAwWQXqQBRaM06RQjzWzqIbx3/s30/AW_Tg_icon.png' width='35'/></a></li>
<li><a expr:href='"https://timeline.line.me/social-plugin/share?url=" + data:blog.url' rel='nofollow' target='_blank' title='Bagikan ke Line'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWdkQSD5PE1ZlCRU0lm8G7Z7ddR1xHtCTyVJbJ2329XT4IiaT0vn9nMMxuC90FpQLZBZZedQQbrXrBfhk2XA4HCp1S6gJaP5BZRr5dz7W_cvQO0fRHmS3ocw0Jw7nMPWeyMTe8wdMUr9fx/s30/AW_Ln_icon.png' width='35'/></a></li>
<li><a expr:href='"http://pinterest.com/pin/create/button/?url=" + data:blog.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:blog.pageName"' rel='nofollow' target='_blank' title='Bagikan ke Pinterest'><img height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-2PaGnrMB5jwG5L74VPuxVGGMRny_Qqj4DWfbxvSTXkp92PG1HVMCphrBsU5zy57n_unq26xhyphenhyphenKYOE9tKgH6MI9dOd-Xrz_IhJxsBgpb_h736tpkV2wJyqZ1zr8d3VetNi1AjOy2iOnY7/s30/AW_Pn_icon.png' width='35'/></a></li>
</div>
5. langkah terakhir tinggal klik Simpan Tema.
Selamat Mencoba.... pastikan di coba dengan urut ya...
Tag :
TUTORIAL
0 Komentar untuk "Cara Membuat Share Button unik Melayang"