Cara Memasang widget icon social media di sidebar blog

Bani Cyber – Hallo blogger, di artikel ini saya akan membahas dan memberikan informasi secara lengkap untuk membuat widget sosial media di sidebar blog anda. Sebelum itu, Widget Sosial media ataupun Media Sosial dalam bahasa indonesianya sangat dibutuhkan dalam perannya untuk membantu pengguna nya mencari teman ataupun followers. Disamping itu pula ada juga yang menggunakan media sosial sebagai alat atau modal untuk mencari korban kejahatan mereka. Seperti penipuan, penjualan anak bayi, dll.

Udah sampai penipuan pula ceritanya, balik lagi ke social media/media sosial. Widget ini terdapat banyak jenis social media seperti Facebook, twitter, instagram, rss, usercloud, youtube, pinterest, linkedin dan lainnya. Facebook adalah media sosial yang mendapat peringkat nomor 1 karena media sosial ini yang paling sering digunakan untuk mencari kenalan, teman, sahabat ataupun pasangan. Pasti anda juga punya akun Facebook, kalau belum punya silahkan daftar disini.

Baca Lengkap : Cara membuat dan memasang author box di bawah artikel blog – part 2

Baca Lengkap : Cara memasang anti klik kanan di blog

Baca Lengkap : Cara membuat text area beserta “copy all” di blog

Widget ini sebenarnya adalah widget yang telah terpasang di template yang saya pakai ini, saya melepasnya supaya blog saya tampil lebih elegan di ponsel atau smartphone. Tapi tenang saja widget medsos ini tidak memberatkan blog anda, dijamin jika anda menggunakan widget ini blog anda tetap fast seperti biasanya. Apakah widget ini seo? Mungkin. Karena saya belum yakin, tapi jangan khawatir widget ini tidak akan menggeser peringkat blog anda di google.

Baca Dulu : Cara agar blog berada di peringkat nomor 1 halaman pertama google.

Penggunaan widget medsos adalah salah satu syarat seo loh, supaya google mengetahui kita berada di media sosial lain. Dan ini akan berdampak baik pada nilai seo blog kita, maka dari itu saya sarankan kepada anda untuk memasang widget ini di blog anda dengan cara nya yang akan dibahas dibawah nanti. Ada 3 dari 10 blogger yang tidak menggunakan widget ini, tapi ya ada juga yang menjadi no.1 di mesin pencari google karena artikel berkualitas dan juga template nya yang seo serta responsive ketika di akses dimanapun, misal smartphone dan ipad.

Baca Juga : 10 Free Template Berkualitas Premium, Fast, Seo Responsive Dan Mobile Friendly

Setelah membahas tentang widget media sosial diatas, sekarang kita masuk ke cara memasang widget social media di sidebar blog , langsung saja baca tutorial nya sebagai berikut:

1.Buka blogger.com dan login.

2.Buka Template, Lalu Edit HTML

3.Find (CTRL+F) kode berikut : <div class=’sidebar-inner’>

4.Letakkan Kode Script berikut dibawah kode tadi

<div class=’gvusion-socials-icons mom-socials-widget’>

    <ul>

       <li class=’facebook’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Facebook’><i class=’fa fa-facebook’/></a></li>

        <li class=’twitter’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Twitter’><i class=’fa fa-twitter’/></a></li>

        <li class=’googleplus’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Google+’><i class=’fa fa-google-plus’/></a></li>

        <li class=’rss’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on RSS’><i class=’fa fa-rss ‘/></a></li>

        <li class=’youtube’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Youtube’><i class=’fa fa-youtube ‘/></a></li>

        <li class=’dribbble’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Dribble’><i class=’fa fa-dribbble ‘/></a></li>

        <li class=’deviantart’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on DeviantArt’><i class=’fa fa-deviantart’/></a></li>

        <li class=’pinterest’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Pinterest’><i class=’fa fa-pinterest ‘/></a></li>

        <li class=’instgram’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Instagram’><i class=’fa fa-instagram ‘/></a></li>

        <li class=’tumblr’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Tumblr’><i class=’fa fa-tumblr ‘/></a></li>

        <li class=’linkedin’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on LinkedIn’><i class=’fa fa-linkedin ‘/></a></li>

        <li class=’soundcloud’><a href=’#’ rel=’nofollow’ target=’_blank’ title=’Follow us on Soundcloud’><i class=’fa fa-soundcloud ‘/></a></li>

    </ul>

5.Sekarang Find (CTRL+F) lagi kode berikut : </style> atau ]]></b:skin>

6.Masukkan Kode css berikut diatasnya.

/* CSS Social Network */

.gvusion-socials-icons{margin:0 0 20px 0}

.gvusion-socials-icons ul{margin:0;padding:0;list-style:none;margin-bottom:-5px;margin-right:-5px;overflow:hidden}

.gvusion-socials-icons ul li:before{display:none}

.gvusion-socials-icons ul li{margin:0;padding:0;list-style:none;float:left;width:45px;height:45px;line-height:45px;text-align:center;background:#00baff;font-size:21px;margin-right:5px;margin-bottom:5px;opacity:.9;border-radius:3px;}

.gvusion-socials-icons ul li:hover{opacity:1;}

.secondary-sidebar .gvusion-socials-icons ul li{width:36px;height:36px}

.secondary-sidebar .gvusion-socials-icons ul li a{line-height:45px}

.secondary-sidebar .gvusion-socials-icons ul li a i{font-size:20px}

.gvusion-socials-icons ul li a{line-height:45px;display:block;color:#fff}

.gvusion-socials-icons ul li a:hover{color:#fff}

.gvusion-socials-icons ul li.home{background:#83868a}

.gvusion-socials-icons ul li.facebook{background:#516ca4}

.gvusion-socials-icons ul li.googleplus{background:#f20000}

.gvusion-socials-icons ul li.rss{background:#f29400}

.gvusion-socials-icons ul li.youtube{background:#f20000}

.gvusion-socials-icons ul li.dribbble{background:#dc71a6}

.gvusion-socials-icons ul li.deviantart{background:#4c5e51}

.gvusion-socials-icons ul li.pinterest{background:#f20000}

.gvusion-socials-icons ul li.instgram{background:#406f94}

.gvusion-socials-icons ul li.tumblr{background:#395875}

.gvusion-socials-icons ul li.linkedin{background:#1985bc}

.gvusion-socials-icons ul li.soundcloud{background:#f60}

7.Preview template, jika berhasil langsung Save Template.

Settings Script Code :

!Kode Pagar (#) bisa anda ganti dengan dengan url akun medsos anda.

Maka hasilnya menjadi sebagai berikut:

Bagaimana keren gak? Gak bisa bilang “Tidak”. Ya iyalah, widget ini di design oleh sang pendesign handal yaitu Arlina Design ( http://arlinadesign.com ). Saya? saya cuma share saja ke anda supaya blog anda juga terlihat keren dan ganteng. Jangan lupa tinggalkan komentar sebelum pergi dari artikel Cara Memasang widget social media full di sidebar blog. Wassalamualaikum blogger J.