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>.
bagi yang udah biasa menambahkan CSS, silahkan letakan cssnya dimana dan tambahkan :/* 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------------ */
<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 :
- Ganti URL FB SOBAT dengan URL atau Alamat Yang Akan Menuju ke Profile FB sobat.
- Ganti URL Twitter SOBAT dengan URL twit artis ajah,,
- Ganti IDGOOGLE+ dengan ID google+ sobat
- Ganti IDFEED ganti dengan Feed burner sobat, atau Subcibe reader Feed
Jangan Lewatkan nih Sobat Membuat Tombol Join Site Blog dan Like Facebook Melayang.
Langganan:
Posting Komentar (Atom)
apa gak kebanyakan gambar tuh sob, kenapa gak di pakein css sprite aja ke gambarnya, biar joss :P
BalasHapusia 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..
HapusBackground-nya banyak banget kak, pengarus di loading blog gak nih ?
BalasHapusSoalnya blog aku udah berat, tapi kepingin aku tambahin widget ini bisa gak ya, tolong di cek n mohon bantuannya ya kak ?
Admin : sagitasoft.com
kalo pengaruh loading kayaknya ga ngaruh deh,,
Hapustapi 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
Mantap gan makasih http://fajar-network.blogspot.com
BalasHapusoke mantap kunbal gan http://10-halunik.blogspot.com
BalasHapusnggak ngerti :( gagal paham deh ..
BalasHapuswidget buat link sosial media,,
Hapusposisi dikanan trus ngikutin kursor jadi gitu deh aku jga ga ngerti perasaan kamu.. tapi aku suka kamu :3