Buat feedburner widget

Ada yang bertanya bagaimana membuat widget feedburner seperti di blog utama penulis.Caranya tidaklah susah kerana sesiapa saje yang telah mendaftar di feedburner (sekarang google feedburner) boleh menampilkan widget feednya dengan hanya copy dan pastekan kod htmlnya diblog.Yang kelihatan seperti rajah disebelah adalah kerana penulis telah memodifikasi kod htmlnya.Jika nak mempelajarinya, sila ikuti tutorialnya dibawah.

Lakukan 3 perkara ini dulu :

1) Daftar feedburner

2) Dapatkan no id feedburner anda.Lihat cth dibawah

http://feeds.feedburner.com/~e?ffid=2454852

3) Dapatkan gambar icon feedburner diinternet atau layari sini, atau ini.Download icon tersebut dan upload ke tempat biasa yg selalu anda simpan gambar.Kemudian dapatkan Url gambar icon tersebut.Cara yg paling mudah, dapatkan diphotobucket.

http://i193.photobucket.com/albums/z242/Chuztamant/600px-Feed_Icon_Bl-Or.png

Jika anda sudah daftar,dapatkan ID feedburner serta alamat Feed Icon, langkah selanjutnya anda boleh terus ke tutorialnya dibawah ini:

1. Login ke blog anda, kemudian pilih Layout-->edit html.

2. kemudian copy kod dibawah ini dan pastekan diatas kod ]]></b:skin>

#kotak {
background: #fff;
width: 200px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 10px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #ddd;
border-left: 1px solid #666666;
border-bottom: 1px solid #ddd;
display: inline;
}
#tombol {
background: #2B74B4;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#email{
background: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
#submit {
background: #2B74B4;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border: 1px solid #234B69;
}

3. Save template anda.

4. Kemudian pergi semula ke menu Layout-->add a gadget.Klik tanda plus ( + ) untuk HTML/JavaScript.

5. Lalu copy kod dibawah ini dan pastekan di dalam ruangan HTML/JavaScript.

<div
style="background:url(http://dino.hpa.googlepages.com/Newspaper_Feed_128x128_thumb1.png) no-repeat top right;padding:0px 0px">

<p><a href="http://feeds2.feedburner.com/BlogInfoTips" rel="alternate" type="application/rss+xml"><img alt="" style="vertical-align:middle;border:0" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png"/></a>&nbsp;<a href="http://feeds2.feedburner.com/BlogInfoTips" rel="alternate" type="application/rss+xml">15 orang telah berlanggan..anda bila lagi?</a></p>

<p><blink><bold>Dapatkan update terkini dari</bold></blink></p>

Blog Info Tips langsung ke Email anda!

<p><form id="subscribe" action="http://www.feedburner.com/fb/a/emailverify" target="popupwindow" method="post" onsubmit="window.open('http://www.feedburner.com', 'popupwindow', 'scrollbars=yes,width=500,height=520');return true"><input id="kotak" onfocus="if (this.value == 'Masukan alamat Email anda...') {this.value = '';}" value="Masukan alamat Email anda..." name="email" onblur="if (this.value == '') {this.value = 'Masukan alamat Email anda...';}" type="text"/><input value="http://feeds.feedburner.com/~e?ffid=2454852" name="url" type="hidden"/><input value="daftar kolom tutorial" name="title" type="hidden"/><input id="tombol" value="klik disini" type="submit"/></form></p>
</div >

6. Gantilah alamat gambar, ID feedburner serta kata-kata yang saya tulis dengan kepunyaan anda sendiri.Kemudian klik save/simpan.

7. Lihat blog anda.Menjadi...klu tak ikut tutorial dari awal semula.Selesai.

Menampilkan kod/script diposting

Menampilkan kod css/html/script diposting ada caranya tersendiri.Terpulang pada empunya blog bagaimana cara yang paling mudah dan unik..ataupun menarik.Ada yang menampilkan seperti biasa,ada juga dalam kotak (kurungan)dan ada yang highlight kodnya,seperti tutorial ini.Anda boleh lihat contoh dibawah agar lebih jelas lagi apa yang penulis ingin sampaikan.

Bagaimana caranya anda ingin menampilkan kod ini diposting?Sebelum itu anda haruslah encode dulu kodnya.

contoh 1,cara biasa
<div class="codeview">Taruh kode HTML, css, Javascript code</div>
atau
<p class="alert">Taruh kode HTML, css, Javascript code</p>

contoh 2,dalam kotak

<div class="codeview">Taruh kode HTML, css, Javascript code</div>
atau
<p class="alert">Taruh kode HTML, css, Javascript code</p>

contoh 3,Highlight kod

<div class="codeview">Taruh kode HTML, css, Javascript code</div>
atau
<p class="alert">Taruh kode HTML, css, Javascript code</p>

Sudah jelas.Jika sudah, langsung kita ke tutorial 'tampilkan kod diposting cara ke-4'.Cara ini hanya menggunakan command css(coret sana sini),tanpa perlu encode kodnya.

1.login ke blog anda.Pilih Layout-->Edit html.

2.Setelah itu,copy kod dibawah ini dan pastekan dibawah kod ]]</b:skin>

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/cv-1.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

3.Kemudian klik preview dulu, jika tiada sebarabg error yg muncul baru save hasil kerja anda.

4.Untuk menampilkan kod tersebut diposting,anda haruslah menulis didalam mode Edit Html dan juga mengguna kod dibawah ini.

<div class="codeview">

Tulis kode HTML, css, Javascript code dan sebagainya disini....

</div>

Contoh hasil menampilkan kod diposting dengan code view.