Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Optimasi Blog / Widget

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 mengakibatkan suatu promosi kepada pengunjung blog dan juga sebagai data diri sosial media blog maupun pemiliknya. Karena contohnya twitter atau fanspage blog memiliki banyak pengikut/suka maka akan menjadi hal yang menguntungkan bagi blog, selain banyak yang berinteraksi sudah niscaya banyak juga yang mengunjungi dan membaca di blog.

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

memang tidak menjadi kewajiban pemilik blog namun dengan memasangnya di blog Anda akan me Memasang Widget Sosial Media di Blog
Widget sosial media yang aku bagikan ini terdiri dari sosial media facebook, google plus, instagram dan twitter serta embel-embel tombol ikut (follow) untuk blog. dengan keempat sosial media tersebut tentu menjadi perwakilan blog Anda di kurun dunia maya ini alasannya untuk kini selain bersosialisasi di dunia faktual Anda juga perlu untuk bersosialisasi di dunia maya apalagi untuk sebuah blog yang memang memiliki sasaran pengunjung dunia maya.

Cara Praktis Memasang Widget Sosial Media di Blog

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

Widget sosial media yang aku buat memakai icon dari Font Awesome maka dari itu membutuhkan stylesheet untuk memasangnya dan harus memakai versi yang paling gres dikala ini adalah 4.7.0 maka dari itu Anda harus memasang arahan berikut pada HTML blog diatas arahan </head>.

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

    3.  <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 arahan berikut pada Konten.

    5.  <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="https://harga-motor-dan-mobil.blogspot.com" itemprop="url" />   <ul>     <li class="sosial-fb"><a href="https://www.facebook.com/Bloggarsdotcom/" itemprop="sameAs" rel="nofollow" target="_blank" title="Memasang Widget Sosial Media di Blog"><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="Memasang Widget Sosial Media di Blog"><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="Memasang Widget Sosial Media di Blog"><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="Memasang Widget Sosial Media di Blog"><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="Memasang Widget Sosial Media di 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 adalah 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. memang tidak menjadi kewajiban pemilik blog namun dengan memasangnya di blog Anda akan me Memasang Widget Sosial Media di Blog

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

Begitulah cara gampang 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.
Sumber http://www.bloggars.com/