Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS



Cara Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS - Sahabat blogger setelah sekian lama bang dadan sudah krang posting artikel, karena ada kesibukan di alama nyata, nah baru kali ini bang dadan sempetin buat artikel lagi yaitu tentang Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS, artikel ini saya buat karena ada permintaan dari teman blogger, dan semoga bermanfaat juga buat sahabat blogger yang lain.

Dan bagi sobat yang ingin melihat DEMO nya sobat bisa lihat disamping kanan blog ini, di slide yang tulisannya Jejaring Sosial. atau seperti gambar dibawah ini.

widget Jejaring sosial


Baiklah langusung saja kita pada pembahasan, simak baik - baik ya :)

Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS

1. Masuk ke akun blogger
2. Menuju dasbor dan pilih tata Letak / Layout
3. Pilih Tambah Gadget/Add Gadget lalu pilih HTML/Javascript
4. Masukan kode dibawah ini pada HTML/Javascript


<style>#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-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;-moz-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;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style>
<ul id="iconizr"><li data-alt="Follow me on Twitter"><a rel="external" href="http://twitter.com/bangdadan" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="https://www.facebook.com/dadan.mistick" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="https://plus.google.com/104872265724531472052" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external" href="http://feeds.feedburner.com/bangdadan" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul>

Keterangan:
Ganti Tulisan yang berwarna merah dengan akun Twitter, Facebook, Google+ dan RSS Feed Sobat.

5. Klik simpan
6. Selesai

Mudah kan, semoga artikel Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS, bermanfaat buat para pengunjung setia Coretan Bang Dadan. Salam blogger dan selamat mencoba membuat tampilan blog anda lebih menarik lagi.
Labels: blogger tutorial, Widget

Thanks for reading Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS. Please share...!

30 Comments on Membuat Widget Jejaring Sosial CSS, Facebook, Twitter, G+ dan RSS

  1. Okey kawan nanti saya coba..hehehe

    blogwalking kawan !!

    ReplyDelete
  2. Ditunggu follw back nya ya Gan ??? [ EQ Blog Hijau ] www.eqhackersblog.blogspot.com

    ReplyDelete
  3. Replies
    1. Terimakasih kawan,, selamat berkreasi..!!!

      Delete
  4. mantep nih bang tutornya :D

    kapan² boleh nih share ttg blogging, hehehe

    ReplyDelete
    Replies
    1. Sama - sama kawan..
      Silahkan kita saling share aja ya, sm saya jg msh belajar.

      Delete
  5. Keren widgetnya mas, makasih udah sharing

    ReplyDelete
  6. maaf OOT, mohon bantuannya,
    saya tidak bisa mengklik tombol publish dikomentar.
    klik reply bisa tapi saat mau di publish tombol publishnya tidak bisa diklik.
    ini blog saya http://trikdaninformasi.blogspot.com

    ReplyDelete
    Replies
    1. Coba di cek ID Komentar bloggernya barangkalai habis ganti template, biasanya ID nya punya orang yg buat template itu.

      Delete
  7. band dadan widgetnya keren.....
    boleh di share ke temen" yang lain khan...

    he..he..he..he..

    di tunggu kunjungan baliknya ya....

    terima kasih

    ReplyDelete
    Replies
    1. Silahkan sob,, ilmu semakin di amalkan semakin baik.. :)
      Oke nanti ane berkunjung..

      Delete
  8. Keren widgetnya, full color, dan tidak makan tempat. :D
    Salam kenal!

    ReplyDelete
  9. Nice info pak :)
    kunjungan baliknya ya :)
    Thank gan atas informasinya. Langsung saya pajang deh di blog saya.
    Salam kenal gan. Jangan lupa kunjangan baliknya :)
    Bendera Indonesia, Polandia, Monaco lebih dulu mana menggunakan merah putih?

    Download Aplikasi Surat Surat Al Quran Beserta Terjemahannya Untuk HP Java

    ReplyDelete
  10. keren kang, udah ane praktekin :)

    jgn lupa mampir juga kang dhaniseo.blogspot.com

    ReplyDelete
  11. BANG SAYA MAU TANYA BAGAIMANA CARANYA MEMBUAT "LIST LINK" WIDGET SEPERTI PUNYA ABANG, YANG KELIHATANNYA SANGAT RAPI,,,,,MOHON DI BANTU SAYA YA?? MAKASIH....

    ReplyDelete
    Replies
    1. Silahkan lihat panduannya disini: http://bangdadan.blogspot.com/2013/01/cara-membuat-widgate-tukar-link-otomatis.html

      Delete
  12. thanks kak, udah aku coba di tulisan-kaktegar.blogspot.com

    ReplyDelete
  13. Kunjungan lagi guru, sudah lama tidak berkunjung saya nih.
    Keren Social-Media Widget nya guru. Diletakkan didalam Accordion widget jadi menghemat space ya. Ijin coba ya guru.

    Kumaha pawartosna Akang?. Kangen abdi euy...
    Hatur nuhun pisan guru.

    ReplyDelete
  14. Makasih gan untuk informasinya, sangat membantu :)
    http://grosiracemaxstasik.com/obat-herbal-hepatitis/

    ReplyDelete
  15. mantap hu, tapi g-plus kok gak ada ya

    ReplyDelete

Back To Top