Menggabungkan Kotak Email Subscribe Dengan Permalink SEO Dibawah Postingan Blogger

Anda sudah pasti sering mendapati sebuah kotak email subscribe berlangganan artikel atau kotak Permalink SEO Blogger yang berada tepat di bawah postingan blog. Tapi pernahkah terlintas di dalam pikiran anda untuk menggabungkan kedua kotak tersebut menjadi satu? Nah, ide untuk menggabungkan keduanya saya dapatkan ketika saya mencoba membuat kotak email subscribe berlangganan artikel dan mencoba menerapakannya kedalam blog saya sendiri.

Sebelum saya lanjutkan ke cara pemasangan box email subscribe + permalink SEO blog ini, terlebih dahulu saya harus pastikan bahwa anda sudah mempunyai akun atau sudah terdapaftar pada google feedburner. Namun, apabila anda belum tahu bagaimana cara mendaftar pada google feedburner, anda bisa membacanya pada tutorial "Cara Mendaftarkan Blog / Website di Google Feedburner"

CSS Kotak Email Subscribe + Permalink SEO

Masukkan kode CSS di bawah ini tepat di atas tag ]]></b:skin>

#rss-wrapper {
background-color:#fff;
-webkit-border-radius: 0px 20px 0px 20px;
-moz-border-radius: 0px 20px 0px 20px;
border-radius: 0px 20px 0px 20px;
border:1px solid #ccc;
margin:0 0 10px;
padding:5px 10px;
font-size: 13px;
}
.lsc-rss {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZc70YnWNcSrIus_1yWZKWE56QiNSAv9S_hs8JJECjUKV7HVPIGRTkLoDtPYWEcFk5fDynNSTV1Qi8z5qipP59SR7QAQI5UCRthCtWWE-ecuQgbBZpob3bgka5GsC91UicmghXCa_w5xY/s1600/rss-feed-readers-lostsector.png) no-repeat bottom right
}
.lsc-rss a {
background:none
}
.lsc-inp {
border:1px solid #ccc;
width:180px;
height:20px;
font-size:13px;
padding:3px 4px 4px 10px
}
.lsc-sbmt {padding:2px}
.lsc-subs table {
border-collapse:inherit;
border:none
}
.clear{clear:both}

HTML

Untuk langkah selanjutnya, silahkan anda cari tag <data:post.body/> yang "KEDUA"  kemudian copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/> yang "KEDUA" tersebut.

<div id='rss-wrapper'>

<div class='lsc-rss'>

<div style='text-align: justify;'>

Masukkan Deskripsi Singkat Anda Disini

</div>

<div class='lsc-subs'>

<table border='0' cellpadding='0' cellspacing='0' width='100%'>

<tr>

<td align='left' style='padding:5px 0 0 0;' valign='top' width='65%'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=lost-sector&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='border:0px;padding:3px;text-align:center;' target='popupwindow'>

<div align='left'>

<input class='lsc-inp' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email and submit&quot;;}' onfocus='if (this.value == &quot;Enter your email and submit&quot;) {this.value = &quot;&quot;;}' type='text' value='Enter your email and submit'/>

<input name='uri' type='hidden' value='losts-ector'/>

<input name='title' type='hidden' value='lost-sector'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='lsc-sbmt' type='submit' value='Submit'/></div>

</form></td>

<td align='left' style='padding:10px 0 0 0;' valign='top' width='35%'><a href='http://feeds.feedburner.com/lost-sector' target='_blank'><img alt='lsc' height='26' src='http://feeds.feedburner.com/~fc/lost-sector?bg=00FF00&amp;fg=000000&amp;anim=1&amp;label=listeners' style='border:0' title='lost-sector feed' width='88'/></a>

</td></tr></table>

</div></div></div><div class='clear'/>

Keterangan :

• Warna Biru silahkan anda ganti dengan deskripsi singkat yang akan anda tampilkan pada kotak subscribe
• Warna Putih-Merah (lost-sector) silahkan diganti dengan username google feedburner anda 

Pada tahap ini, silahkan anda Simpan template anda kemudian buka salah satu postingan artikel anda untuk melihat hasilnya.

Need a Help ?

Jika anda mengalami masalah dalam pemasangan Box Email Subscribe + Permalink SEO Blogger/Blogspot, silahkan anda meninggalkan komentar.