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/AVvXsEigEcmvNfJ0GZYqUbM9_soUleD7OwawrWhwg2ESrUGJoZ7sH731T_AXBUVB7LpiH0COaovRQQAhfgLFjmAjvBB_2MQ6Yua1my0anH5TT4DQ1j5DBTFCvp65fDK7oeJacm0kjmaxdJTrW8EY/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/AVvXsEg8ZLdByCdjPiTlYSckPbK33waX1e25EEcHeDHykWAl7bTeZDlIuD-0bo23EViD3tMmDamggiQLTMj0c-xVW60LcBEcOEZ7zEN6t33jUeaqHZys5qB-TjAyEqRfiZP-9_Gy3CM2nJkykGsI/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/AVvXsEgpGSqgi2fJAGeYHKpBYLB9B6W_rx1SNi4b5KhLz5EgL5ASpJH-PZhxmflDa1p0EVvTrmyqcfI1RNTbr9ukd-4tglPEvC7n_HVnHZUn6fDR33mzG4bGQbpLUvXgb1M1uSi5JpnzNZgRMFZO/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/AVvXsEhpFI2m024GcUdQZho3FJ9PUq7D1Jxf9mqJIVe6wYu-j1JdCsApz1FvxvoFqyONd4ozPM6xjXXocJ5P4DUu1GvnlWKMJvBJ0v51fEcWfZdyFZZkRQFTAhNn2P61dlvviypExCfntx6sAOyc/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/AVvXsEgKsr99X4QRR5iQZF6eYrRCPwn22L9jq61GZRZGRdIBodG8niYuQlou9d8nBOvm2q1kw1BrvyyPm-FVXii_u8Bix987DCBk_sZLGeuXY0Wm0KuWTZzbFo0UukIaZlTloBf0IMsU7W8CSt4i/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/AVvXsEg7t0yNeTc3MgSmw5Ga71VjjF-k-sP1lo-2hGBypcmbzlyg6BUnIFH1mJvVohApMcPsYnHW-QU_3z_7w-8vY-gWSRcpDRbdCqwTQox1wGdU-EEd1V6a50AHF0avKz-2c0GyuYWrZroRW5Zx/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/AVvXsEg1WkDtdgX47QY6zKPHbcwUglMUfjPtFIZoRkokIw6H-XYYYyMTr2bBEefcE0iN-JG8FEg_p87QjDeBBYrifOynwgqM-KKQksRdm4WAQbLXVj4KIDXXW36Al1H15jj2w0JDx_ZP9Fqxkwvb/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/AVvXsEiZ6-1M8AlMRAJmEtthiaz4QTxbx163ikQKtQEJbkKvoIdH-_NUGd_UZ5pjItGzcv6EjzhFAUFoDjKr1iLC2upvYqk5jGmPN_pi_uVcgfoHjri7tiqtiWQlcp-9JhYAKyKG7TDAfvjDO5pm/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/AVvXsEhTsvZo2dUZNzXabQJ2WTmP0BqQ0Z7dy7cpfBLhqNpinpMqQ3nG3MZ5L3Da9derl7EhXNJ2R-QRrk-rhd1A9UiuAqv-gQzfT18XgXGdU26aas-zNX5nu-pdFHG-QpE9gHc_klNAkUnunKOg/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.

0 Komentar