Subscribe Box yang Comel^^

Sudah dua post yang aku tulis tentang tutorial saja. Bukan bermaksud aku nak jadikan blog ini blog tutorial, tp atas permintaan rakan blogger juga..hehe..Ok, kali ni tentang membuat subcribe box seperti yang saya buat pada sidebar itu. Idea subscribe box ini aku ambil dari dcblog, tetapi langkahnya jauh berbeza.Anda mesti tahu photoshop dan sedikit css saja.

Ok langkah pertama.buat background menggunakan photoshop.ikut keluasan yang anda mahu.Saiz yang aku guna untuk blog ini ialah 227px X 358px.tetapi ia bergantung juga pada luas sidebar anda. lihat gambar dibawah, aku menggunakan Pen tool untuk membuat kotak bujur itu, kemudian aku menambah element seperti cartoon dan tulisan.Setelah selesai Upload Background yang anda buat td ke dalam mana-mana hosting seperti imageshack.


Langkah kedua memasukkan kod kedalam layout. Pergi ke layout>edit html dan jgn lupa expand template. Cari kod ini #sidebar-wrapper, kemudian, letakkan kod di bawah selepas #sidebar-wrapper {.......}(ingat yang merah itu harus di ubah mengikut saiz background yang anda buat ketika dalam photoshop td)

#Subscribe2 {
width: 227px;
height: 358px;
background:url(ALAMATBACKGROUNDYANGSUDAHDIUPLOAD) no-repeat;
padding:0;
margin: auto;
}

#content2 {
text-align:center;
padding-top:168px;
width: 180px;
height: 102px;
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
color: #4F3314;
font-size:11px;
margin: auto;
}

Langkah ketiga cari kod ini <div id='sidebar-wrapper'> , letakkan kod dibawah selepasnya:

<div id='Subscribe2'>

<div id='content2'>

<form action='http://www.feedburner.com/fb/a/emailverify' method='post' onsubmit='window.open(&apos;http://www.feedburner.com/fb/a/emailverifySubmit?feedId=YOURFEEDBURNERID0&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<div style='margin: 5px 0 5px 0px;'>Or Subscribe by E-mail:</div>

<input name='email' style='width:120px; margin: 0 0 5px 0px;' type='text'/>
<input name='url' type='hidden' value='http://feeds.feedburner.com/~e?ffid=YOURFEEDBURNERID'/>
<input name='title' type='hidden' value='The Blog of The Boonto'/>
<input name='loc' type='hidden' value='en_US'/>

<input style='margin: 3px 0 0 0px;' type='submit' value='Subscribe'/><br/>
</form>

<div style='margin: 5px 9px'>Delivered by <a href='http://www.feedburner.com' target='_blank'>FeedBurner</a></div>

</div>
</div>

Dan anda Sudah selesai membuat kotak subscribe yang comel :p . Jika Ada masalah boleh komen di bawah, Dan ingat, anda hanya perlu ubah pading-top nya sahaja jika hendak ubah kedudukan feedburner widget itu. Saya membuat widget ini dua malam baru dapat, jadi tiada yang mudah, anda hanya perlu mencuba.ok;) pastikan anda priview sebelum save layout anda. happy blogging