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/AVvXsEhgACZZAwjmX-wHjyOnCXlJOGcnoRy-3vKlWLaAkzAdFMJ1HjWqcW20e9HQ9Mbmmt2ilXe6M1HmrgLmrJxX57Me6DbSfLLmKKBy7sgDT-0CKZQ57xBbSudt-IsO0zYmujqkoFEM_wWI74Ab/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/AVvXsEhx7915Ee_lEAw44XElsVP3y9DEa2iQX5tj_jyNpaodF64lq_hIJ1ZmJLjktI8xZSc4BTP4POnohyphenhyphenC-IRu3VbzmoOLunwcoedg-peRKXh-vhL5vx48xFm3hXYjX-m9bxVy2dhaSCSD1ICbX/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/AVvXsEg4yoDaVezONiAKGrDRXxJeqPXeNvUZUPjzkD6xFTQRX6P7KVHKzjpghGwsZsBBT_QvjBHY9RcjXQkVRQA0DqybFrH61BYkTrL-rLsrQH3OuSXG1dA0q34VUBD9mIvZWJgsvFXP3VnDpsxM/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/AVvXsEgKgl3oSsU2cjhQGOesRd2pP1BLcFikmHTD2bbInMnr25gXUWvHCqjVwynjOo7WgjAEuTpoh1wSzrwEju4EQZ4eKOiWFvra6Y24HF9jIj1wcjXzRqrJZFWlSd2tCi78JHYkqIbDTL8atB53/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/AVvXsEgY8HJ_vO7lmWeZQTXpsqi9sO7-O-KE11DVmveQCpYyYV6r-jiCz3E28l5Vwjs4bPvPa2nYZvmWaKM5HE1CkzeBc_ycYfDq2V2Q3g5egxXqFqAOrsSpBrQVwwMNwXi7eaBOPbsi9_B30Mbt/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/AVvXsEiqalARJgIXWGwFHKNNrj9-WN5zr5z3Ng9sqfSiUxu9equL8KDCuRRkUDnrZMaIMSPtfYijzd6Lm8u1gzwFdupoW8syNN6kyAlgKUwgv0S6RpYASD6OmMsuwdKDreOMe8zQvJriU4K8KPIA/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 "Membuat Share Botton melayang "