Cara Menambah Box SUBSCRIBE to OUR NEWSLETTER Seperti Blog ARLINA DESIGN

Catatan Rhull™  - Subscribe BOX atau Kotak berlangganan adalah sebuah kotak digunakan untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan agar pengunjung dapat mengetahui update artikel melalui email mereka. seperti halnya tombol Subscribe pada situs youtube subscribe box juga memiliki cara yang sama namun disini kita perlu memasukan email lalu submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, karena sudah banyak blog yangmemasang kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yang memasangnya namun setiap kotak tampilanya berbeda-beda. yah itu juga tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, karena jika pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jika ada artikel baru dari blog anda dan otomatis juga akan menambah visitor blog. Namun sebelum memasang subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner baru bisa memasang ID tersebut ke Subscribe Box.

Nah buat tampilan Subscribe Box pada tutorial kali ini seperti gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jika anda tertarik dengan Subscribe BOX seperti gambar diatas bisa langsung ikuti cara dibawah ini.

Cara Memasang  SUBSCRIBE to OUR NEWSLETTER

1. Silakan Anda masuk ke Blog > Template > Edit HTML

2. Silakan Copy kode CSS Dibawah ini , dan letakan ( Paste ) tepat di atas kode ]]></b:skin> atau kode </style>

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#2BA6E1;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#98DEFE;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya Carilah Kode <div id='footer'> , Lalu letakan code di bawah ini.
PENTING : Jika anda kreatif kode dibawah ini bisa ditaruh dimana saja, sesuka kalian

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=AcillramdanprasetyoId' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=AcillramdanprasetyoId&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='AcillramdanprasetyoId'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>