Cara Membuat widget box subscribe Blogger Keren dan simpel

kali ini saya akan membuat sebuah tutorial bagaimana cara nya membuat widget box subscribe Blogger.

subscribe sendiri adalah tool supaya pengunjung dapat mendapatkan notifikasi artikel terbaru dari sebuat blog yang kita miliki, subscribe juga sangat sangat berpengaruh dalam kepupolaritasan blog yang dimili agar mendapat lebih banyak pengunjung. 

mungkin sudah banyak yang sudah memberikan tutorial yang sama, namun apa salahnya saya bila ingin memberikan tutorial yang sama.

Cara Membuat widget box subscribe Blogger

Pertama buka Blogger.com >> Template >> Edit HTML

Tambahkan kode dibawah tebat diatas kode ]]></b:skin> atau </style>

/* Subscribe Box */
#subscribe-box{background:#003d99;padding:20px}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 20px;padding:0}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield input{padding:12px;color:#9ba7b0;border:none;font-size:14px;margin-bottom:16px;width:100%}
#subscribe-box .emailfield input:focus{color:#7f8c8d;outline:none}
#subscribe-box .emailfield .submitbutton{background:rgba(0,0,0,0.1);color:#fff;margin:0;width:100%;letter-spacing:.5px;text-transform:uppercase;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(0,0,0,0.2);color:#fff;}

selanjutnya tambah sebuah wigdet baru

Tata Letak >> tambahkan gadget >> HTML/JavaScript

isikan kode ini di dalamnya

<div id='subscribe-box'>

<p>Subscribe below and well email you updates</p>

<div class='emailfield'>

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

<input type='text' name='email' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' pattern='[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*' value='Email Address'/>

<input name='uri' type='hidden' value='ikramlinknet'/>

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

<input class='submitbutton' type='submit' value='Submit'/>

</form>

</div>

</div>

Note :
ganti ikramlinknet dengan feed blog kalian


Simpan dan selesai