Cara Membuat Widget Rss, email, twitter, fb

Gambar disamping mungkin salah satu contoh widget yang paling sering kita temui disemua blog bahkan hal ini menjadi wajib untuk setipa blog memilikinya. kali ini ane akan menshare Cara Membuat Widget Rss, email, twitter, fb yang lebih simpel dan mudah.. semoga bermanfaat buat agan agan yang baru belajar ngeblog dan untuk para guru master mohon bimbingannya.. :)

langkah awal yang agan agan harus lakukan ialah masuk ke dasbor bloger :D (ya emang iya :D) lanjut..!!
1. pilih tempalet >> klik edit html >> pastikan template excande template sudah tercentang..
2. cari kode berikut : ]]></b:skin> gunakan Ctrl+f untuk mempermudah
3. setelah ditemukan copy dan pastekan kode brikut tepat sebelum kode diatas

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20"); .w2bOldSocial ul { font-family: 'Oswald', sans-serif; margin: 15px 0; overflow: hidden; } .w2bOldSocial ul li { float: left; width: 90px; padding: 0 0 0 55px !important; margin: 0 0 0 5px !important; line-height: 48px !important; } .w2bOldSocial ul li a { font-size: 20px !important; text-decoration:none; padding:0 !important; margin:0 !important; text-decoration:none; } .w2bOldSocial ul li a:hover { text-decoration:underline; } .w2bOldSocial ul li.w2brss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTgRPJN8Zugvy6u47U05bzbpgF4n6JoC3gHeegHPt-mMk9_3YnZ6hCBd2xdPj3eZaTMxIW_56PmnjTFi6tXqFOAyrjfiBjWX5N4CFTqUYg2PWyPUV7rMb98E1UJVz459jonJDxyDLzBcKg/s48/RSS.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2bmail { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGiGQ3wvJ00T1u5FUUY0U0aMyLcpyBC7w-nUUD7fgXXL5Q9nQGuRScyBr9A1uvH5uuXqSCtaZYaxCZjrOwb6iy7OVpSDg4x1qN2MqwSKyED8RMra2xQeZGVIba5Na8fI9EBbHqcZE-l64Q/s48/Mail.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2btwitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmA3-486GXjoLCJIqLIpTkYB_qqTqK03W86Qvw4A6Wbt_E8kqTMJYnl2yropKwNkRMSaWIFaFT0LuUE-cFmHkzigyKgdP1FUTGRrHzphZrd0vwHqLFkmqOtbka4vb0gs7DEFwhFTc5OPV/s48/Twitter2.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2bfacebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2bPg7EeBEYyYpdKOKQ7O2mCWOEC9MLCRXe46TJvpnhfrjut-oKu2hil_C5b8P7PU24MaVqjflmzN0h0hFvS17cwi8SfrUpbVcPHU874gOSfpPIgTTe7wTH6hpL2ZnFfDCUbizaXMzuElL/s48/Facebook.png") no-repeat scroll left center transparent !important; } #w2bEmailsub { display: block; clear: both; margin: 10px 0; } form.w2bEmailform { margin: 20px 0 0; display: block; clear: both; } .emailText { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie26gPcR7amnRSHw5LSdMvAeo1G1budWFqC1L3ux_dCzHQ5xOA7yw0QaPtsGOVAA_aHoOTjMecLyC8XSMYqQixeu9YGNA7tHCDfA4qNP5Zrv82dix94OZtchxEY2I1rPDWd2Hd-AD1HlnZ/s28/w2b-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .emailButton { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); }
4. setelah itu simpan tempalte dan tutup.. jika ada pesan untuk menghapus widget maka pilih jangan dihapus/pertahankan.

setelah memasukan kode diatas sekarang tinggal menambahkan widget melalui menu tata letak
1. pilih tataletak/layout klik add widget/ tambah widget
2.pilih Html/Javascript gadget dan pastekan kode diabwah ini :
<div class="w2bOldSocial"> <ul> <li class="w2brss"><a href="http://feeds.feedburner.com/celotehgano">RSS</a></li> <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=celotehgano" >Email</a></li> <li class="w2btwitter"><a href="http://twitter.com/gano___">Twitter</a></li> <li class="w2bfacebook"><a href="http://facebook.com/phuyu">Facebook</a></li> </ul> </div> <div id="w2bEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=celotehgano', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform"> <input type="hidden" value="celotehgano" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Masukan Email Kamu...";}" onfocus="if (this.value == "Masukan Email Kamu...") {this.value = ""}" value="Masukan Email Kamu..." name="email" class="emailText" /> <input type="submit" class="emailButton" value="SignUp" title='' /> </form> </div>
Keterangan :
# | http://feeds.feedburner.com/ratnogani  | ganti dengan url feedburner anda
# | http://feedburner.google.com/fb/a/mailverify?uri=blogspot/eHINT | ganti dengan id feedburner anda
# | http://twitter.com/gano___ | ganti dengan url twitter anda
# | http://facebook.com/phuyu | ganti dengan url facebook anda
# Selesai.. simpan dan lihatlah hasilnya...
Semoga tulisan ini bermanfaat bagi agan agan semua.. :)

Penulis: Unknown Bandung, Indonesia

Artikel Cara Membuat Widget Rss, email, twitter, fb, diterbitkan oleh Unknown . Semoga artikel ini dapat menambah wawasan Anda. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Widget Rss, email, twitter, fb dapat Anda sampaikan melalui kotak komentar dibawah ini. Semoga pula blog ini dapat memberi manfaat pada siapapun yang membacanya, minimal jadi bahan renungan kala tersentuh, atau sekedar penghibur bila dianggap lucu..

Tweet