3 Cara Memasang Widget Tombol Media Sosial Pada Blog

Zona Internetku No Comment September 19, 2018

Tutorial Untuk Memasang Widget Tombol Media Sosial Pada Sidebar Blog. Tombol media sosial pada blog biasanya berisi sebuah ikon sosial media dan juga url dari akun media sosial pemilik blog tersebut, widget ini sangat berguna sekali untuk meningkatkan julah trafik blog melalui media sosial kita, jadi semakin banyak pengikut akun media sosial kita maka semakin besar besar pula peluang untuk mendatangkan trafik dari media sosial kita ke blog kita.

3 Cara Mudah Untuk Menambahkan Widget Social Media Button Untuk Di Letakkan Di Sidebar Blog

1. Mula mula kalian harus masuk ke dalam blog kalian sendiri
2. Selanjutnya kalian pilih menu "Tata Letak"
3. Kemudian kalian klik "Tambahkan Gadget" di layout sidebar blog kalian
4. Setelah itu pilih widget "HTML/JavaScript"
5. Selanjutnya masukkan salah satu kode widget Social Media Button berikut ini

Style 1

<style type='text/css'>
/* Social Media Widget By Zona Internetku */
ul.widget_socmed{display:block;text-align:center;text-decoration:none;margin:0;padding:10px 5px}
ul.widget_socmed li.socmed_button{display:inline-block;list-style:none;margin:0;padding:0}
.socmed_button .fa{padding:10px;font-size:30px;width:30px;text-align:center;text-decoration:none;margin:5px 2px;border-radius:10%}
.socmed_button .fa:hover{opacity:0.7}
.socmed_button .fa-facebook{background:#3961b7;color:white}
.socmed_button .fa-twitter{background:#67abcb;color:white}
.socmed_button .fa-google-plus{background:#dd4b39;color:white}
.socmed_button .fa-linkedin{background:#1690c9;color:white}
.socmed_button .fa-youtube{background:#bb0000;color:white}
.socmed_button .fa-instagram{background:#885812;color:white}
.socmed_button .fa-pinterest{background:#dc4e53;color:white}
</style>
Social Media Icon
<ul class='widget_socmed'>
<li class='socmed_button'><a href="#" class="fa fa-facebook"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-google-plus"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-instagram"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-linkedin"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-youtube"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-pinterest"></a></li>
<li class='socmed_button'><a href="#" class="fa fa-twitter"></a></li>
</ul>

Style 2

<style type='text/css'>
/* Social Media Widget By Zona Internetku */
ul.my_widget_socmed{display:block;text-align:center;text-decoration:none;margin:0;padding:10px 5px}
ul.my_widget_socmed li.my_socmed_button{display:block;list-style:none;margin:0 0 5px 0;padding:0;overflow:hidden}
.my_socmed_button a{padding:5px 10px;font-size:20px;font-family:arial;text-align:left;text-decoration:none;margin:0;display:block}
.my_socmed_button a:hover{opacity:0.7}
.my_socmed_button a.facebook{background:#3961b7;color:white}
.my_socmed_button a.twitter{background:#67abcb;color:white}
.my_socmed_button a.googleplus{background:#dd4b39;color:white}
.my_socmed_button a.linkedin{background:#1690c9;color:white}
.my_socmed_button a.youtube{background:#bb0000;color:white}
.my_socmed_button a.instagram{background:#885812;color:white}
.my_socmed_button a.pinterest{background:#dc4e53;color:white}
</style>
Social Media Icon
<ul class='my_widget_socmed'>
<li class='my_socmed_button'><a class='facebook' href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li class='my_socmed_button'><a class='googleplus'href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
<li class='my_socmed_button'><a class='instagram' href="#"><i class="fa fa-instagram"></i> Instagram</a></li>
<li class='my_socmed_button'><a class='linkedin' href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li class='my_socmed_button'><a class='youtube' href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
<li class='my_socmed_button'><a class='pinterest' href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
<li class='my_socmed_button'><a class='twitter' href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>

Style 3

<style type='text/css'>
/* Social Media Widget By Zona Internetku */
ul.my_widget_sm{display:block;text-align:center;text-decoration:none;margin:0;padding:10px 5px}
ul.my_widget_sm li.smb{display:block;list-style:none;margin:0 5px 5px 0;padding:0;overflow:hidden;width:calc(50% - 12px);float:left}
.smb a{padding:5px 10px;font-size:20px;font-family:arial;text-align:left;text-decoration:none;margin:0;display:block}
.smb a:hover{opacity:0.7}
.smb a.facebook{background:#3961b7;color:white}
.smb a.twitter{background:#67abcb;color:white}
.smb a.googleplus{background:#dd4b39;color:white}
.smb a.linkedin{background:#1690c9;color:white}
.smb a.youtube{background:#bb0000;color:white}
.smb a.instagram{background:#885812;color:white}
.smb a.pinterest{background:#dc4e53;color:white}
</style>
Social Media Icon
<ul class='my_widget_sm'>
<li class='smb'><a class='facebook' href="#"><i class="fa fa-facebook"></i> Facebook</a></li>
<li class='smb'><a class='googleplus'href="#"><i class="fa fa-google-plus"></i> Google+</a></li>
<li class='smb'><a class='instagram' href="#"><i class="fa fa-instagram"></i> Instagram</a></li>
<li class='smb'><a class='linkedin' href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>
<li class='smb'><a class='youtube' href="#"><i class="fa fa-youtube"></i> Youtube</a></li>
<li class='smb'><a class='pinterest' href="#"><i class="fa fa-pinterest"></i> Pinterest</a></li>
<li class='smb'><a class='twitter' href="#"><i class="fa fa-twitter"></i> Twitter</a></li>
</ul>

6. Setelah itu kalian ganti tanda # yang ada di dalam kode tag <a> dengan url sosial media kalian
Contoh :
Ganti <a href="#" class="fa fa-facebook"></a> menjadi <a href="alamat sosial media facebook kalian" class="fa fa-facebook"></a>
7. Jika semua sudah selesai klik "Simpan" untuk selesai

Baca juga :
6 Cara Memasang Social Media Share Button Pada Blog
2 Cara Membuat Widget Subscribe Box Keren Di Blog
Trik Membuat Widget Label Blog Menjadi Keren

Untuk sampai di sini saya rasa sudah selesai dan hasilnya bisa di lihat, jika tombol widget tersebut mengalami error maka kemungkinan besar masalahnya ada di kode berikut ini.
Cari kode <head> dan letakkan kode css eksternal berikut ini di dalam kode tag <head>...</head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

Jika kode seperti di atas sudah ada maka kalian bisa abaikan saja, jangan lupa untuk klik tombol "Simpan Tema"

Itu tadi tutorial singkat tentang blog yang membahas tentang Cara Memasang Widget Tombol Media Sosial Pada Blog yang dapat saya tunjukkan kepada kalian, apabila ada problem silahkan untuk bertanya melalui komentar di bawah artikel ini.

Promo Menarik