Ad 468 X 60

Sabtu, Juni 01, 2013

Membuat Widget Social Media Melayang di Kanan Blog

Contohnya seperti disamping ini, Jika ingin melihat hasilnya yang telah saya buat bisa klik DISINI . wdget ini belum begitu sempurna dan memberi daya tarik yang memukau, namun bagi anak IT seperti saya tidak ada salahnya bila sedikit mencoba dan membuat penelitian..hihihi

Langsung aja, Masuk Blogger - Pilih Template - Jika sudah Klik Edit HTML, yah tujuannya emang harus Menambah CSS dulu di HTML baru meluncut ke Tambah Gadget dibagian Tata Letak..
Oke di Kotak HTML klik Ctrl+F dan cari kode dibawah ini :

]]></b:skin>
dan Copy Paste Code dibawah ini tepat diatas Code diatas ]]></b:skin>.
/* Widget ---- Social Azhariian.blogspot.com------------ */
.sosmed-kananblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEjaMA2D9EksQtzSC77_6eJAWIekqgVf3W7O7DYCb8EwBJ4GvSthjA2hhoRQKXYgN50f16byGQk0t-RbCChlph4qQO-H6RaJYrnw1AJUXcjQ7ebe3SLJz_LuWsunnwzJDPZl9IUqaEdDcK/s1600/FB.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:160px; z-index:1000;}
.sosmed-kananbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5jsw6WNd7EGwKsvuGZ-YGqmq0pIG_Q7EJMyCXf2XFJQK4zkR35UXGxZDafidHD4nL4Y0gpu9esSIb84nDvZa8zV9jm0aD9KtkJaHAwXB4Fl055a3hyvHCIxJ_7LGRGeL71SS-hvW0vj0x/s1600/FB-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:160px; z-index:1100;}
.sosmed-isiblogger{margin:0px 0 0 43px}
.sosmed-kanantwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ucf8HM2EMFCHX-YSyV7yGgbq8bsaEAiyQemMs6esDopKAXi3_Zwl7Z6ibDh0e6Hv0YzAUfx6Vqfano0cghDR1jTVmA4FDNiMVL8gGFIugjAmAyf_e88nxN5lIWK6gVB3r8-CBpZR5kk1/s1600/TW.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:205px;z-index:1000;}
.sosmed-kanantwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSjvEhOzypurYr7iw_U-ikkgo8V7jdm-uh6q9dczw07vj3Zp71bP2MQ7F3n5va1qFyKQfT9xipWfoRw6RlQV_0jf9BvyYTlWQE67ttkWRIyz1H0bl4rsKAwMSfmzqTQT7Nxw4CjUhdE1d1/s1600/TW-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:205px; z-index:1100;}
.sosmed-isitwitter{margin:0px 0 0 43px}
.sosmed-kananfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu8HaoOcvSKbuX80Bah_JAWevFDNPBq8prVdz2HQ_2UrnMv1XoYOZi11wBWpJUs0xoqkX8T4_kVyD3t_hf3mkoEzgomtZOgHMHdvMO2G3M-0ri00oI78A0YZzS6EPRphdxuVWEB0oWUupj/s1600/G+.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:250px; z-index:1000;}
.sosmed-kananfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOsZqXQi1qq1Y3jVfi8o_-E1jCEcDf4Aak_ZjvBbfungBxFlsk7HEi3SRolg4ujHNXmL4Nkmv-tXNyNRZ9TDPaPkHRXaxCAuPl79cYaMw2kg3VN_TvNuSrBiZHN9oNWZC4k2q4fIQO4b62/s1600/G+-open.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:250px; z-index:1100;}
.sosmed-isifacebook{margin:0px 0 0 43px}
.sosmed-kananrss{background:url('http://2.bp.blogspot.com/-A2gUy4WF8l8/UUa2igFbIZI/AAAAAAAAAiM/2ck6-Wot2yM/s1600/rss.png');background-repeat:no-repeat;width:43px;height:43px;position:fixed;right:0px;top:295px; z-index:1000;}
.sosmed-kananrssc{background:url('http://1.bp.blogspot.com/-RZyN5DznuUY/UUa9Uc04tFI/AAAAAAAAAi8/okz_LnBFNS4/s1600/RSSjoss.png');background-repeat:no-repeat;width:150px;height:43px;position:fixed;right:0px;top:295px; z-index:1100;}
.sosmed-isirss{margin:0px 0 0 43px} 
/* End Widget ---- Social Azhariian.blogspot.com------------ */
 bagi yang udah biasa menambahkan CSS, silahkan letakan cssnya dimana dan tambahkan :
<style type="text/javascript> Bagian CSS </style>
Simpan template, Sekarang kita akan Menambah Widgetnya.
Masuk Pilih Tata Letak - Tambah Widget - dan Pilih Opsi HTML/Javascript.
dan Masukan Code HTML dibawah ini didalamnya, Untuk Bagian Judul Lebih baik untuk dikosongkan :
 <div class="sosmed-kananblogger" onmouseout="this.className='sosmed-kananblogger'" onmouseover="this.className='sosmed-kananbloggerc'"><div class="sosmed-isiblogger"><a href="URL FB SOBAT" target="_blank"><img alt="Like us on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMqDs8GSuESSuqQG4LpzJaXFm5L2NyG7yxkzxHkNktqfDTbA7IU9fjqCZv6YMTW1YwP2rKnJ5OXkafEii1q083GmZxE6ZezQqyB9lqmPDqqwSzzpni39uKdASprEaJaUsXnJbOkNt4kKkP/s1600/FB-open-new.png" title="Like us on Facebook"></a><br>
</div></div><div class="sosmed-kanantwitter" onmouseout="this.className='sosmed-kanantwitter'" onmouseover="this.className='sosmed-kanantwitterc'"><div class="sosmed-isitwitter"><a href="URL Twitter SOBAT" target="_blank"><img alt="Follow us on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_HNRgMaDpofs-gbN4FGBPn_q_mqZxcTrG4epvsKriBjvM2irEKDGaVXA_1U2MWSI_igpeCE7Q797c1MRKkGa6lmV1z16nVkTrPlwcajcZIQkufVsm9QIBPMHYeZ4eHb946RVp4AwVKMP/s1600/TW-open-new.png" title="Follow us on Twitter"></a><br>
</div></div><div class="sosmed-kananfacebook" onmouseout="this.className='sosmed-kananfacebook'" onmouseover="this.className='sosmed-kananfacebookc'"><div class="sosmed-isifacebook"><a href="https://plus.google.com/IDGOOGLE+" target="_blank"><img alt="Recommend us on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4yVtPSLKUip88Oz7lXivtmaVw0KSivRNoBR9q42oDr5kd3jh2LhoumXS4pxXUdtwP2JkGbBQE9gcwBEE3U0ovMnAJn1r6QWg_FcTkkq5uifeWdVqc-C7UqCsvjAz5-a6lg2Mq8woQ1Oh/s1600/G+-open-new.png" title="Recommend us on Google Plus"></a><br>
</div></div><div class="sosmed-kananrss" onmouseout="this.className='sosmed-kananrss'" onmouseover="this.className='sosmed-kananrssc'"><div class="sosmed-isirss"><a href="http://feeds.feedburner.com/IDFEED" target="_blank"><img alt="Subscribe me on RSS" src="http://3.bp.blogspot.com/-MDAVOH3vOYU/UUa9UYMZCJI/AAAAAAAAAjA/YicU-mlZMrY/s1600/RSSjosspendek.png" title="Subscribe me"></a><br>
</div></div>

Catatan :
  1. Ganti URL FB SOBAT dengan URL atau Alamat Yang Akan Menuju ke Profile FB sobat.
  2. Ganti  URL Twitter SOBAT dengan URL twit artis ajah,,
  3. Ganti  IDGOOGLE+ dengan ID google+ sobat
  4. Ganti  IDFEED ganti dengan Feed burner sobat, atau Subcibe reader Feed
Finish..
Jangan Lewatkan nih Sobat  Membuat Tombol Join Site Blog dan Like Facebook Melayang.

Get Free Email Updates Daily!

8 komentar:

  1. apa gak kebanyakan gambar tuh sob, kenapa gak di pakein css sprite aja ke gambarnya, biar joss :P

    BalasHapus
    Balasan
    1. ia yah,, baru nyadar saya heehehe,, maklum lah kan dari nyuri,, klo ga ada sumbernya berarti abis ngambil dari widget tetangga,, thanks sobat,, ntar gue perbaiki deh..

      Hapus
  2. Background-nya banyak banget kak, pengarus di loading blog gak nih ?

    Soalnya blog aku udah berat, tapi kepingin aku tambahin widget ini bisa gak ya, tolong di cek n mohon bantuannya ya kak ?


    Admin : sagitasoft.com

    BalasHapus
    Balasan
    1. kalo pengaruh loading kayaknya ga ngaruh deh,,
      tapi perintahnya masih belum sempurna,, kalo background itu emang banyak 1 buat tampilan 1 buat hover dan 1 lagi buat link aktif, total 3x4=12 background..
      nanti saya usahain bikin yang pake warena Transisi biar enteng,, thanks yah sarannya

      Hapus
  3. Mantap gan makasih http://fajar-network.blogspot.com

    BalasHapus
  4. Anonim06.37.00

    oke mantap kunbal gan http://10-halunik.blogspot.com

    BalasHapus
  5. nggak ngerti :( gagal paham deh ..

    BalasHapus
    Balasan
    1. widget buat link sosial media,,
      posisi dikanan trus ngikutin kursor jadi gitu deh aku jga ga ngerti perasaan kamu.. tapi aku suka kamu :3

      Hapus