Membuat Email Subscribe Widget Flat Ui

Salah satu widget yang aku anggap penting untuk disimpan di blog yaitu email subscribe widget atau widget berlangganan via email.

Widget ini berfungsi untuk menjaring pembaca setia blog. Dengan ini akan secara otomatis akan mengirimkan update-an terbaru blog ke inbox email pelanggan. Namun di sini aku sarankan untuk lalu memakai ringkasan feed email guna mengatasi auto blog sehabis memasang widget scbscribe.

Baca juga: Cara Membuat Jump Break Otomatis Untuk Feed Blog 

Untuk live demo menciptakan Email Subscribe Widget Flat Ui ini silahkan klik link berikut DI SINI Silahkan lihat subscribe widget pada sidebar-nya.

Jika Anda tertarik untuk mencoba menggunakannya silahkan copy kode-kode di bawah ini.

Kode CSS

Silahkan simpan arahan CSS ini di edit HTML di atas arahan ]]></b:skin> atau </style>

 #subscribe-box {width: 300px;height: auto;border-radius: 2px;background-color: #95a5a6;box-shadow: 0px 3px 0px 0px #7f8c8d;padding-bottom:10px}
 #subscribe-box .title {padding: 10px 25px;line-height: 30px;font: 26px Oswald;color: #555;text-align: center;background: #ecf0f1;text-transform:uppercase;border-radius:2px 2px 0 0;}
 #subscribe-box p {font-family: 'Droid Serif';font-size: 13px;color:#555;line-height: 20px;padding: 10px 20px 0 20px;margin: 0;}
 #subscribe-box .emailfield {padding: 0px 20px 10px;}
 #subscribe-box .emailfield input {color: #777;padding: 10px;margin-top: 10px;font-size: 15px;font-family: 'Droid Serif';width: 92%;border:0;border-radius: 2px;box-shadow: 0px 3px 0px 0px #bbb;}
 #subscribe-box .emailfield input:focus {outline: none;}
 #subscribe-box .emailfield .submitbutton {background: #F4836A;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;box-shadow: 0px 3px 0px 0px #e23b16;}
 #subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;box-shadow: 0px 1px 0px 0px #3293ba;}
 #subscribe-box .emailfield .submitbutton:hover{background: #DD7761;}
 

Kode HTML

Silahkan simpan arahan HTML di bawah ini pada gadget sidebar HTML/JavaScript di Tata Letak.

 <div id='subscribe-box'>
               <div class='title'>
                Subscribe Here
               </div>
                  <p>Sign up here with your email address to receive updates from this blog in your inbox.</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=KompiAjaib&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
                <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
                <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
 <input name='uri' type='hidden' value='KompiAjaib'/>
 <input name='loc' type='hidden' value='en_US'/>
                 <input class='submitbutton' type='submit' value='Subscribe Now!'/>
 
               </form>
              </div>
 </div>

Silahkan ganti arahan KompiAjaib dengan feed blog Anda di FeedBurner. Ada 2 buah arahan KompiAjaib pada arahan di atas, silahkan ganti dua-duanya.

Sumber https://www.kompiajaib.com/

Share this post