Siapa sih yang nggak punya akun jejaring sosial. Saya yakin hampir setiap orang memiliki akun sosial pribadinya. Facebook dan twitter misalnya. Kedua situs tersebut sudah sangat populer sekali. Bahkan anak seusia SD pun sudah lihai bermain facebook, walaupun lebih sering digunakan untuk bermain game ketimbang bersosialisasi dengan teman nya. Selain kedua situs tersebut ada juga jejaring sosial yang juga populer yakni Google+. Menurut saya Google+ ini lebih sering digunakan para blogger untuk berbagi konten blognya atau merekomendasikan blog mereka.

Lalu apa peran jejaring sosial untuk para blogger?
Peran sosial media/jejaring sosial sangat penting dan juga menguntungkan bagi blog. Karena kita bisa membagikan konten/artikel kita ke situs-situs tersebut sehingga akan dibaca orang lain terutama teman-teman anda atau followers anda. Sedangkan untuk twitter kalian bisa memperoleh followers lebih mudah dengan memasang widget twitter di blog.

Setelah faham apa manfaat sosial media bagi blog, sekarang mari kita coba membuat widget follow us sosial media yang keren. Untuk hasil yang akan kita buat nanti sama persis seperti gambar screenshot diatas. Atau biar lebih nyata lagi demonya bisa anda lihat pada sidebar blog ini. Dalam widget ini akan ada 5 icon sosial media yang meliputi facebook, twitter,Google+, Pinterest, dan RSS. Jadi fungsi dari widget ini adalah untuk memudahkan para pengunjung mengikuti akun sosial media kalian. Sangat menguntungkan bukan?

"Buruan gans lama amat dari tadi kultum mulu"
Iya-iya gans, sabar dikit dong sekalian sambil nunggu service motor gue kelar.

Oke, mari kita buat.
1. Pertama silahkan login kedalam akun blogger kalian masing-masing.
2. Masuk ke tata letak > tambah widget > pilih html/java script.
3. Sekarang tambahkan kode ini didalamnya.
<style>

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#tbisose .icon{overflow:hidden; color:#fafafa;}
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#tbisose li:hover .icon,
.touch #tbisose li .icon{width:210px;}
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="tbisose">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li>
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li>
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li>
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://mohammadrobih.blogspot.com/2013/12/cara-membuat-widget-follow-us-keren-di.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti kode yang di sorot warna merah dengan URL akun kalian. Jangan lupa sesuaiin URL yang akan dimasukkan sesuai dengan letaknya, jangan sampai bagian milik facebook diisi dengan URL akun twitter, begitu juga sebaliknya. Tapi kalau hatiku boleh kok diisi sama kamu. *mulai ngaco*

Kalau boleh, silahkan follow twitter saya atau like fanspage kami . Dan terimakasih sudah mau nemenin saya nunggu service motor, hehehe. Oh ya gans hampir lupa, kalau agans suka dengan blog ini agans boleh langganan artikel gratis di blog ini. Caranya mudah gans tinggal isikan alamat email agans pada kotak yang sudah disediakan kemudian klik subscribe. Setiap ada artikel baru agans akan di beri tahu jadi gak bakal ketinggalan artikel berikutnya. Udah dulu ya gans, daah.
OBI (Author)
About The Author:

OBI, Author di blog absurd: www.biobii.com. Ikuti:

23 komentar:

  1. Keren juga ya mas, jadi terasa seperti situs profesional :-)

    BalasHapus
  2. Bikin saya mau dan pengen

    Bagus :)

    BalasHapus
  3. kode nya lumayan panjang apa gak bikin berat blog gan ?

    BalasHapus
  4. Gak mas. dulu tak pakai aman-aman aja (o)

    BalasHapus
  5. keren juga yah mas jadi kelihatan rapi dan profesional, makasih buat tutorialnya mas :)

    BalasHapus
  6. Balasan
    1. Insyallah gak mbak. kemarin saya pakai aman-aman aja haha :)

      Hapus
  7. wah bagus juga ya tombbol follow nya :)
    bisa dicoba nih tutorial nya :)

    BalasHapus
  8. Ini nambahin brat loding blog gak mas soalnya blog saya udah brat lodingnya ..

    BalasHapus
  9. Persaan udan titp komen di sini
    Nyangkut kali ya :)

    BalasHapus
  10. sepertinya bagus juga widgetnya, kalau loadingnya tidak berat ntar coba pasang, thx tutornya

    BalasHapus
  11. kebetulan neh di blog saya belum terpasang widget diatas, kayak bisa semakin keren neh kalau sudah terpasang..

    lagsung dipraktekin

    BalasHapus
  12. bagus juga ya sob,.. tp apa ga ngeberatin loading blog tuh.. coz banyak bgt script'a :d

    BalasHapus
  13. bagus juga ya sob,.. tp apa ga ngeberatin loading blog tuh.. coz banyak bgt script'a :d

    BalasHapus
  14. wah kodenya panjang banget yah mas, tapi bagus juga widget follow us nya, keren banget :)

    BalasHapus
  15. wah kebetulan blog saya belum ada sob

    BalasHapus
  16. kayaknya keren nih klo di pasang diblog saya :D

    BalasHapus
  17. wah keren mas langsung kepincut saya nie, ta' cobain dulu ah...
    makasi ya udah share artikel tentang cara membuat widget follow us keren di blog :)

    BalasHapus
  18. (h) bagus mas, sepertinya kapan kapan harus di coba nih.

    BalasHapus
  19. kl share untuk instagram gmn....

    BalasHapus

Tulis komentar anda.
1. Berkomentarlah sesuai tema artikel diatas.
2. Dilarang spam, jualan atau promosi.
3. Gunakan bahasa yang sopan.
4. Tolong untuk tidak menyematkan link aktif.
5. Centang "Beri tahu saya" agar anda tahu balasan dari kami.

Terimakasih sudah berkunjung :>) :p

 
Top