Memasang Widget Sosial Media di Blog

Memasang widget sosial media di blog memang tidak menjadi kewajiban pemilik blog namun dengan memasangnya di blog Anda akan menjadikan suatu promosi kepada pengunjung blog dan juga sebagai data diri sosial media blog maupun pemiliknya. Karena misalnya twitter atau fanspage blog mempunyai banyak pengikut/suka maka akan menjadi hal yang menguntungkan bagi blog, selain banyak yang berinteraksi sudah pasti banyak juga yang mengunjungi dan membaca di blog.

Nah pada kesempatan kali ini saya akan membagikan sebuah widget sosial media yang dibuat oleh saya sendiri, dengan hover yang menarik untuk dimainkan dan dengan warna warni yang diberikan tentu ini akan menghiasi tampilan blog Anda.

Widget sosial media yang saya bagikan ini terdiri dari sosial media facebook, google plus, instagram dan twitter serta tambahan tombol ikut (follow) untuk blog. dengan keempat sosial media tersebut tentu menjadi perwakilan blog Anda di era dunia maya ini karena untuk sekarang selain bersosialisasi di dunia nyata Anda juga perlu untuk bersosialisasi di dunia maya apalagi untuk sebuah blog yang memang mempunyai target pengunjung dunia maya.

Cara Mudah Memasang Widget Sosial Media di Blog

Pada artikel ini saya akan memberikan cara termudahnya untuk memasang widget sosial media di blog yaitu dengan hanya menambahkan gadget pada tata letak blog baik itu dipasang pada sidebar ataupun footer bagaimana keinginan Anda. Langsung simak cara memasangnya berikut ini.

Widget sosial media yang saya buat menggunakan icon dari Font Awesome maka dari itu membutuhkan stylesheet untuk memasangnya dan harus menggunakan versi yang paling baru saat ini yaitu 4.7.0 maka dari itu Anda harus memasang kode berikut pada HTML blog diatas kode </head>.

1. Masuk ke Blogger > Tema > Edit HTML.
2. Cari kode </head> dan masukan kode berikut tepat diatasnya.



<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Klik Simpan Tema untuk menyimpannya.

Baca juga "Cara Membuat Tombol Share Ringan dan Responsive di Blog"

Memasang Widget

1. Masuk ke Blogger.
2. Pada dasboard, klik Tata Letak yang terdapat pada bilah sisi kiri.
3. Lalu klik Tambahkan Gadget pada widget baik itu pada sidebar atau footer (disarankan sidebar).
4. Pilih HTML/JavaScript, berikan Judul (title) dan masukan kode berikut pada Konten.



<style type="text/css">
<!--
.cont-sosmed{background:transparent;height:100px;margin:0 auto;max-width:300px;padding:0;position:relative;width:100%;}
.cont-sosmed ul{font-family:"trebuchet ms",sans-serif;font-size:16px;font-weight:400;line-height:normal;list-style:none !important;;margin:0 10px;padding:0;text-align:center;}
.cont-sosmed ul li{display:inline-block;float:left;margin:0;padding:0;position:absolute;transition:all 1s ease 0s;width:50%;}
.cont-sosmed ul li:hover{width:100%;}
.cont-sosmed ul li a{color:#fff !important;display:block;padding:5px 0;text-decoration:none;}
.cont-sosmed ul li a:hover{background:rgba(0, 0, 0, 0.15);}
li.sosial-fb{background:#3b5998 !important;left:0;top:0;z-index:10;}
li.sosial-gp{background:#db4437 !important;right:0;top:0;}
li.sosial-ig{background:#885a4d !important;left:0;top:30px;z-index:10;}
li.sosial-tw{background:#55acee !important;right:0;top:30px;}
li.sosial-fl{background:#fe6602 !important;left:0;top:60px;width:100% !important;}
li.sosial-gp:hover,li.sosial-tw:hover{z-index:10;}
-->
</style>

<div class="cont-sosmed" itemprop="mainEntity" itemscope="itemscope" itemtype="http://schema.org/Person">
  <link href="http://www.bloggars.com/" itemprop="url" />
  <ul>
    <li class="sosial-fb"><a href="https://www.facebook.com/Bloggarsdotcom/" itemprop="sameAs" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
    <li class="sosial-gp"><a href="https://plus.google.com/+AsepRamdanSJ" itemprop="sameAs" rel="nofollow" target="_blank" title="Google Plus"><i class="fa fa-google-plus-square" aria-hidden="true"></i> Google+</a></li>
    <li class="sosial-ig"><a href="https://www.instagram.com/a.ramdan_sj/" itemprop="sameAs" rel="nofollow" target="_blank" title="Instagram"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</a></li>
    <li class="sosial-tw"><a href="https://twitter.com/BloggAR_s" itemprop="sameAs" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
    <li class="sosial-fl"><a href="https://www.blogger.com/follow.g?view=FOLLOW&blogID=5021104838047035608" itemprop="sameAs" rel="nofollow" target="_blank" title="Follow Blog"><i class="fa fa-plus-square" aria-hidden="true"></i> Follow</a></li>
  </ul>
</div>

5. Ada beberapa URL dan id blog yang harus Anda ganti yaitu yang sudah ditandai dengan warna putih dan background biru, ganti dan sesuaikan dengan sosial media blog Anda. Sementara untuk ID blog apabila Anda belum mengetahuinya cukup simple, lihat URL pada dasboard blogger Anda atau lihat gambar berikut.





6. ID blog Anda sesuai yang tercantum pada url dashboard blogger. Gantikan kode ID dengan ID tersebut sesuai pada point 5.
7. Klik Simpan untuk menyimpan widget sosial media.

Result

Begitulah cara mudah memasang widget sosial media di blog, apabila mengalami kesulitan ada terdapat kesalahan pada pemasangan di blog jangan sungkan untuk bertanya di kolom komentar atau di Contact Form.