Pada posting sebelumnya kang Rohman telah mengulas tentang bagaimana cara membuat widget Get Update Via Email, ternyata muncul pertanyaan lain seputar widget ini yaitu bagaimana cara memasang widget Get Update Via Email di bawah posting? hmmmm… boleh juga nih di jadikan bahan untuk di bahas.
Untuk membuat widget Get Update Via Email di bawah posting pada prinsipnya sama saja seperti membuat widget Get Update Via Email yang di simpan di sidebar, namun perbedaannya yaitu yang di bawah posting harus melalui Edit HTML dan tidak bisa melalui Elemen Halaman serta kodenya perlu di parse terlebih dahulu.
Catatan pertama yang perlu di ingat adalah Widget ini sebaiknya di pasang pada blog yang telah memakai fugsi read more seperti trik yang telah kang Rohman posting pada artikel Trik Mudah Membuat Read more karena jika tidak, maka semua widget Get Update Via Email akan terlihat langsung di halaman depan sehingga tidak sedap di pandang mata.
Tanpa banyak basa basi, berikut langkah-langkahnya :
- Silahkan login ke blogger dengan ID anda.
- Klik Tata Letak
- Klik tab Edit HTML.
- Silahkan klik tulisan Download Template Lengkap.
- Silahkan backup dulu template anda (penting)
- Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.
-
Cari kode seperti ini ]]></b:skin> , copy lalu paste kode berikut persis di atas kode ]]></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;
}
- Scroll ke bagian bawah dan temukan kode berikut ( ingat bahwa template anda sudah memakai sitem read more seperti yang kang rohman terangkan )
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>
- Hapus kode di atas, lalu ganti dengan kode di bawah ini ( silahkan ganti ID feedburner sesuai dengan milik anda ) :
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/>
<div style='padding:10px;margin:10px 0px 10px 0px;background:#eee;text-align:left;border:1px solid #ddd'>
<p>Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.</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=550,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=892815" name="url" type="hidden"/><input value="daftar kolom tutorial" name="title" type="hidden"/><input id="tombol" value="Langganan" type="submit"/></form>
</div>
</p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a>
</b:if>
- Klik tombol SIMPAN TEMPLATE
- Selesai.
Bagi yang sudah mengikuti tutorial kang Rohman pada artikel Membuat Widget Get Update Via Email, anda tidak perlu lagi memasang kode pada langkah ke 7 karena sama dengan yang kemarin.
Selamat mencoba!
