Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Cara Membuat Social Widget Keren

Cara Membuat Social Widget Keren-Banyak cara untuk mempercantik tampilan blog, mulai dari pemasangan template blog yang tepat sampai dengan memasang pernak-pernik widget. Tentunya pemilihan template maupun widget harus sesuai dengan kebutuhan agar tidak menjadi beban pada blog.

Dengan tampilan blog lebih menarik akan memberikan penilaian postitif dari pengunjung dan betah berlama-lama berada di blog kita. Selain memberikan tampilan yang menarik kita juga harus mempromosikan postingan yang kita buat dengan banyak cara dan salah satu cara yang paling popular adalah dengan membagikan tautan ke social media.

Yang menjadi permasalahan adalah sulitnya merujuk orang untuk bergabung ke ke fans page facebook, twitter dll. Tanpa adanya penggemar atau follower akan sulit mendatangkan pengunjung dari social media. Oleh sebab itu kita kembali lagi ke blog dengan memberikan rekomendasi pengunjung untuk mengikuti social media agar mereka dapat mengetahui update artikel terbaru dari blog kita.

Cara yang sering dilakukan para blogger adalah memasang widget like box, widget follower dll. Sebelumnya saya juga pernah membahas Membuat Like Box Facebook Melayang/Popup dengan Timer dan Cara Membuat dan Pasang Widget Twitter Pada Blogger. Ke 2 cara tersebut cukup efektif dan bisa dijadikan alternative untuk meningkatkan jumlah follower maupun like.

Sedangkan untuk pebahasan kali ini tidak kalah keren dan tidak kalah efektife dengan cara diatas, seperti pada judul diatas saya ingin memberikan tutorial Cara Membuat Social Widget Keren, kelebihan widget ini Anda dapat mempromosikan 7 akun social media Anda dengan tampilan lebih menarik, efek hover dan desain yang elegan, penataan logo social media tertata rapih, selain itu Tidak ada JavaScript, No Jquery, murni dengan CSS.

widget social media
Cara Membuat Social Widget Keren

Cara Membuat Social Widget Keren

  • Silahkan lakukan login ke akun blogger Anda
  • Pada dashboar pilih “Tata Letak” ⇒ “Tambahkan Gadget” ⇒ “HTML/JavaScript
  • Selanjutnya copy dan paste kode dibawah ini pada kolom “HTML/JavaScript
<div class=’metro-social’>
<li><a class=”fb” href=http://www.facebook.com/kudil.kadil rel=”nofollow”></a></li>
<li><a class=”tw” href=http://twitter.com/kudil_kadil></a></li>
<li><a class=”gp” href=”https://plus.google.com/u/5/+DiditRiadi07“></a></li>
<li><a class=”pi” href=http://pinterest.com/kudilkadil rel=”nofollow”></a></li>
<li><a class=”in” href=https://www.linkedin.com/in/kudilkadil rel=”nofollow”></a></li>
<li><a class=”yt” href=http://www.youtube.com/kudilkadil></a></li>
<li><a class=”fd” href=http://feeds.feedburner.com/Giribig rel=”nofollow”></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Keterangan: Ganti url berikut dengan url media social Anda.

  • http://www.facebook.com/kudil.kadil
  • http://twitter.com/kudil_kadil
  • https://plus.google.com/u/5/+DiditRiadi07
  • http://pinterest.com/kudilkadil
  • https://www.linkedin.com/in/kudilkadil
  • http://www.youtube.com/kudilkadil
  • http://feeds.feedburner.com/Giribig

  • Terakhir jangan lupa klik “Simpan
  • Bagaimana cukup mudah bukan membuatnya? Sekarang lihat hasilnya, dengan memasang widget social media ini kesempatan menambah like atau follower akan makin terbuka dengan memanfaatkan pengunjung blog Anda. Karna kita ketahui semakin banyak yang mengikuti social media kita makan ketika kita membagikan artikel terbaru akan makin banya mendatangkan pengunjung/pembaca.

    Baca Juga Cara Membuat toko online dengan mudah | CARA DAN KUMPULAN KERAJINAN UNIK DAN KEREN

    Add a Comment

    Your email address will not be published. Required fields are marked *

    Read previous post:
    Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah Posting Blog

    Cara Membuat Kotak Komentar Facebook dan Blogger Berdampingan di bawah...

    Close