Cara Membuat Widget Subscribe Box Keren di Blog

Cara Membuat Widget Subscribe Box Keren di Blog

AdminBlog

March 15, 2017

Cara Membuat Widget Subscribe Box Keren di Blog - Selamat Pagi, Kotak langgaran artikel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yang jumlah pengunjungnya cukup tinggi. Kotak langganan ini bisa membantu sekaligus meningkatkan jumlah pembaca. Widget ini dipasang berguna untuk pengunjung yang ingin berlangganan pada blog anda, nanti jika anda menulis postingan maka akan muncul pada email yang telah berlangganan dengan blog anda tadi, jika mereka menyukai artikel anda, maka mereka tidak akan segan-segan berkunjung dan untuk tampilannya seperti dibawah ini.

Widget Subscribe ini sudah dimodifikasi agar terlihat keren, simpel, dan tentunya tidak akan memberatkan loading blog kita. Itu menjadi keuntungan tersendiri bagi kita yang ingin memasang widget subscribe dalam blog dan membuat blog tetap terlihat cepat dan dinamis.

Berikut cara untuk pemasangannya

1. Buka Blogger > Tema > klik tombol Edit HTML
2. Lalu copy kode dibawah ini sebelum kode ]]></b:skin> atau </style>

/* TipsRyand Subscribe Box */
#HTML95 h2{background:#e65b48;color:#fff}
#subscribe-box{background:#ff6550;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:#bcc4ca;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;}

Untuk merubah warna ganti kode yang saya tandai dengan kode warna Anda

3. Selanjutnya, tambahkan kode dibawah ini kedalam widget di Tata Letak > Tambahkan Gadget > lalu klik HTML/JavaScript

<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=TipsRyand&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.!#$%&amp;&#8217;*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*' value='Email Address'/>
<input name='uri' type='hidden' value='TipsRyand'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div> 

Ganti alamat FeedBurner yang saya tandai dengan alamat FeedBurner Anda, untuk mendapatkan alamat FeedBurner silahkan cari di Google dan TerimaKasih sudah berkunjung, jika ada pertanyaan silahkan tinggalkan dikolom komentar

Tutorial Blogger • March 15, 2017