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

Coretan Bang Dadan on

Friday, March 15, 2013

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.

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...!