Penulis: Moch Adnan dipublikasikan: 2 Juni 2020
Cara Membuat Sosial Button Melayang Di Kanan Blog
Tutorial ngeblog buat kali ini saya akan membagikan cara mudah tentang membuat widget sosial button melayang yang posisinya akan melekat terus di kanan layar, sehingga memberikan peluang besar untuk pengunjung blog sobat untuk bisa memfollow akun-akun media sosial sobat, seperti akun facebook, Instagram, twitter, dan lainnya.

Dalam pembuatannya ini saya hanya memasukkan empat buah akun sosial media, di luar dari itu sobat bisa menambahkannya secara manual. Yang mana nantinya akan tak coba terangkan pula cara memasukkannya secara manual. Baiklah tanpa berpanjang lebar lagi saya mulai saja pada tata cara pembuatannya.

Cara membuat Sosial Button melayang di kanan Blog


1. Masuk kedalam dasbor blog, lalu pilih 'Template' dan lanjutkan dengan memilih 'Edit html'. Dan ini jelas berarti sobat akan saya ajak untuk menambahkan beberapa kode css serta script, untuk itu ada baiknya anda melakukan back-up pada template, guna mengantisipasi kerusakan pada template blog.

2. Cari kode  ]]></b:skin>
dalam template blog. Gunakan pencarian cepat dengan menekan 'ctrl+F' jika sudah menemukannya, silahkan copy dan pastekan kode berikut ini diatasnya.

.social-buttons{position:fixed;top:166px;width:45px;z-index:9999}

.button-left{left:0}

.button-right{right:0}

.social-buttons #twitter-btn .social-icon,.social-buttons #facebook-btn .social-icon,.social-buttons #google-btn .social-icon,.social-buttons #rss-btn .social-icon,.social-buttons #pinterest-btn .social-icon,.social-buttons #youtube-btn .social-icon{background-color:#33353B;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg16dxa_GURrZ2y6tK-anVQwhUhixdT_7EdREq0vJFGKQ5NP_yA4XGcMIRvqrqC2pitx-fssqnxGoRa4XlVsSr5BYmS9njTzhTNqiqf2YchwUTcBlUuZhs2J_sh-wE4XAfI-0PZOoFqPNs/s1600/mas-icons.png)}

.button-left #facebook-btn span{background-position:right 10px}

.button-left #twitter-btn span{background-position:right -35px}

.button-left #google-btn span{background-position:right -127px}

.button-left #rss-btn span{background-position:right -80px}

.button-right #facebook-btn span{background-position:12px 10px}

.button-right #twitter-btn span{background-position:11px -35px}

.button-right #google-btn span{background-position:10px -127px}

.button-right #rss-btn span{background-position:11px -80px}

.social-buttons #facebook-btn .social-icon{background-color:#3B5998}

.social-buttons #twitter-btn .social-icon{background-color:#62BDB2}

.social-buttons #google-btn .social-icon{background-color:#DB4A39}

.social-buttons #rss-btn .social-icon{background-color:#FF8B0F}

.social-buttons #pinterest-btn .social-icon{background-color:#D43638}

.social-buttons #youtube-btn .social-icon{background-color:#C4302B}

.social-buttons:hover .social-text{display:block}

.button-left .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:left;height:43px;margin-bottom:2px;width:43px}

.button-left .social-text{display:none;float:right;font-size:1em;font-weight:700;white-space:nowrap;margin:15px 40px 11px 0}

.button-right .social-icon{-moz-transition:background-color .4s ease-in 0;-webkit-transition:background-color .4s ease-in 0;background-repeat:no-repeat;display:block;float:right;height:43px;margin-bottom:2px;width:43px}

.button-right .social-text{display:none;float:left;font-size:80%;font-weight:700;white-space:nowrap;margin:15px 0 11px 40px}

.social-buttons .social-text{color:#FFF}

.button-left #pinterest-btn span,.button-right #pinterest-btn span{background-position:11px -177px}

.button-left #youtube-btn span,.button-right #youtube-btn span{background-position:11px -223px}


Silahkan pilih 'Simpan' template.

3. Masih dalam halaman Edit html, selanjutnya cari kembali kode seperti berikut </body>  gunakan cara diatas untuk melakukan pencarian cepat. Dan jika sudah menemukannya selanjutnya copy dan pastekan kode berikut ini tepat di atas kode </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>

<a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>

<a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>

<a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>

<a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>

</div>
Keterangan: silahkan ganti masing-masing URl yang tercetak warna merah dengan URL sobat.
Pilih 'Simpan' dan selesai.

Selamat mencoba.