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.

Comments

Post a Comment

Popular posts from this blog

5 Cara Mengubah Bahasa Keyboard ke Arab, Jepang, dll di Semua Keyboard Android

Image
Tumeskecil - Pada keyboard qwerty, huruf yang digunakan hanya terbatas pada huruf latin yang hanya bisa digunakan di beberapa bahasa seperti bahasa Indonesia dan Inggris. Namun, bagaimana dengan bahasa lainnya yang tidak menggunakan huruf latin? Seperti contohnya bahasa Arab. Tentunya kamu pasti mengakalinya dengan menulis bahasa tersebut dengan bahasa latin seperti اسلم عليكم menjadi Assalamualaikum. Begitupun dengan bahasa lainnya. Penulisan seperti itu sepertinya dirasa agak kurang keren. Sebenarnya, mudah mengganti keyboard qwerty menjadi berhuruf lainnya. Selain itu, ada juga kelompok orang yang memahami bahasa tertentu, seperti orang yang ahli dalam bahasa Jepang juga ingin chattingan menggunakan bahasa yang mereka kuasai. Nah, kali ini Tumeskecil akan membagikan cara mengubah papan ketikke bahasa arab, jepang dan sebagainya. Tutorial cara mengubah bahasa keyboard android berikut kami paparkan dengan berbagai jenis keyboard virtual smartphone yang populer. A. Gboa...
Read more

cara mudah mengganti domain blogspot (custom domain)

Image
HERI2911- cara mudah mengganti domain blogspot (custom domain) kali ini saya akan menjelaskan bagaimana cara mudah mengganti domain blogspot (custome domain) ke domain kita sendiri yang sudah kita beli dari layanan penyedia domain misal tadi nya blog kita domainnya heriyanto221193.blogspot.com akan kita rubah menjadi herinda.com. bagai mana caranya..? berikut ini akan menjelaskan cara mudah menggati domain blogspot (custome domain) , namun sebelum menggati domain pada blogspot kalian,alangkah baiknya membaca artikel sebelumnya yang pernah saya tulis mengenai resiko menggati domain pada  blog  >>>> BACA DISINI langsung saja langkah cara mudah mengganti domain blogspot (custom domain) . pertama:  beli domain di web penyedia layanan domain,baik  dari penyedia layanan dengan harga murah hingga harga termahal tinggal menyesuakan budget saja,ada banyak penyedia layanan yang bisa kita pilih seperti rumahweb , exabytes dan bahkan kita bisa beli langsung dari b...
Read more

Cara Mengatasi Penolakan AdSense "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten"

Image
COPAD | Cara Mengatasi Penolakan AdSense "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten" - Halo sobat COPAD, selamat datang kembali bagi pengunjung lama, eh.. Setia maksudnya, hehe.. :v Dan selamat datang juga bagi pengunjung baru di blog ini. Pada kesempatan kali ini, mimin akan membagikan solusi kepada sobat yang sering atau pernah ditolak AdSense. Apa alasan penolakannya, dan bagaimana cara mengatasinya? Yuk, langsung ke TKP. Check it out! Ada yang sering atau pernah mengalami email penolakan dari Google AdSense dengan alasan "Situs Tidak Aktif" atau "Inventaris Berharga: Tidak Ada Konten" setelah penggantian domain ke TLD? Padahal blog dapat diakses dan konten juga sudah banyak. Kode iklan AdSense juga sudah terpasang pada HTML blog. Maksud dari "Situs Tidak Aktif" itu sebenarnya bukan untuk menekankan kita untuk terus aktif ngeblog sepanjang masa pengajuan (review) AdSense, namun blog kita memang tidak dapat d...
Read more