Subcribes Via Feed di Bawah Posting

Pada umumnya pasang subcribes via feed dibawah posting ini sama dengan membuat widget subcribes via feed yang kita simpan di sidebar blog. Tapi ada sedikit perbedaan yakni kalo kita pasang dibawah posting, kita harus parse kodenya terlebih dahulu. Sebelumnya anda harus ingat terlebih dahulu. Widget ini sebaiknya dipasang diblog yang sudah memakai Read More. Karena kalo tidak maka widget ini akan tampil dihalaman depan. Otomatis tidak indah kalo dilihat.

Berikut tutorial membuatnya.

Langkah I

Login Blogger anda kemudian masuk Template -> Edit HTML -> Expand Widget Template Anda. cari kode ]]></b:skin>  kemudian copy paste kode berikut ini persis diatas 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;
}

Langkah II

Cari kode berikut ini. Ingat kode ini hanya blog yang sudah memakai Read More. Kira-kira kodenya seperti ini :

<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>Read More...</strong></a></p>

</b:if>

Hapus kode diatas kemudian anda ganti dengan kode dibawah ini.

<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>

&lt;form id=&quot;subscribe&quot; action=&quot;http://www.feedburner.com/fb/a/emailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://www.feedburner.com&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;kotak&quot; onfocus=&quot;if (this.value == &#39;Masukan alamat Email anda...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Masukan alamat Email anda...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Masukan alamat Email anda...&#39;;}&quot; type=&quot;text&quot;/&gt;&lt;input value=&quot;http://feeds.feedburner.com/ID&quot; name=&quot;url&quot; type=&quot;hidden&quot;/&gt;&lt;input value=&quot;daftar kolom tutorial&quot; name=&quot;title&quot; type=&quot;hidden&quot;/&gt;&lt;input id=&quot;tombol&quot; value=&quot;Subcribes&quot; type=&quot;submit&quot;/&gt;&lt;/form&gt;  
</div>

</p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>

• Ganti teks ini sesuai dengan teks yang anda buat  "Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan".
• Ganti teks ini sesuai dengan teks yang anda buat "Masukan alamat Email".
• Ganti kode http://feeds.feedburner.com/ID dengan ID feedburner anda. 

Jangan lupa simpan template dan lihat hasilnya.

OK Happy Blogging

Posted by: Andi Setyoko

Berita Harian, Updated at: 1:53 AM