widgets

Sabtu, 29 Maret 2014

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/AVvXsEi7sR5WtQXdUS5FkzuSdhbZOTqt_jXWYOBllkGlHLUtltK6VYQ_N4FvOEDbysQii1XlLqMRNj8rZXlXjKJrst8Spu82rsplppc6R1p-yQ78vSdMRIu8uz3s4M8PmLYkln7WhbIZlTwx4T9l/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/AVvXsEhjt60MgZ-I9Fq_ZgYDFZzgUD9v2lsSBNrnkv4kzTwuvB_Aa9rIRANYYciIov1cPfN5cIQCVA9mcsyOzlV1j24sdAQMb4wCcMi5xF4l3win94InJNJz0UUDYnwqK2mOl7nZylugf33sPMzg/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/AVvXsEjBH2GRVMgZh1dLQ7SWsD7cBP7YNbeIvl7bdnffr0_jKokTtHt8SuP5zhrLTX2No5o9MgIqwzkUzyg9djl-4pNKverq09OhjaFPDVYGsyQUVO6DIwtFugXQ44A9wafEu-dM2yuJR-U97lAj/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/AVvXsEi-8ZN1RlnRsx1HBAQvKuOIqsClLLCAHnIiR6-AHGBQnGgvY7WFSs5tyUedCkKU0GvoFxVVA6LfNy4NzK97x9WQM2FxdXm8T238S1QTRxEijZeDPbu6TI3p0GEd86sLaJufLSMCfd-nnJnu/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/AVvXsEgKSagyB0KNMD4ORHyAGQ-V60Qgc5jH96wkMo2bQLmHbBwbYzBXX0BfoGpLuF9hkz3eANNAiRFxfxcQSVPv-2I4xqMZVYk6Xm5i33TVF_1D8YYKFGvOGJVaB2Yh1dEWzbH5VCkJeUppY7Nc/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/AVvXsEhn3s1S5LhhbgZeFJSNX4MV3hG5s5wGDTRkS1ZiNuURjyVhDNDoAxcW4WWaqzB5eZ1pOcnbJ3VHm3O_hWaabTj0uVqAlTNJmfnZ2iuwFHvBxOc9Ad33n3rMfxzRsPsg_kHR6f_xQzvk5LI1/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/AVvXsEihc1IXc5kFuNbpHV262GePb0nqI6svtCLrW3PrY5zY1Bo3Kjo9gS5rHq2UiIGiJwNBgDyeb-QnShhRTJFEK40Ic4jLR9u7H0LYvr4YuJUwhGQB6zEQkGDClQr2z6jmes4WJjwShReDfO32/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/AVvXsEiyT2-Sc5ZoKdmVB201PfMjnE3CeFqdd-Avp3grt6LK1vIQH4wBILJADPxP27h5CUsqTpDgpcaunfuK6itzf8Z-O7XDRBcP12JDt4_5qgyPVeWHhsaidZAqtrZthzPd2li1LfErAP11KWYz/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/AVvXsEjoEqzIZsCWQWiK_5mJ3hChTqe1UWqzBINf9Bpq3lfqfxQ88C61f1NRguyd7EYFAqiyS77TSZCS_jHl_ddEUo0d1C8iNhL7vjGg-Xpp0CxeUl7G00ADAnCu__WYY_Wvpu1IpJoAqo8T2aZ7/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.. 

Tidak ada komentar:

Posting Komentar