Cara Membuat Widget Email Subscribe Flat Ui

Cara Membuat Widget Email Subscribe Flat Ui

Salah satu komponen widget yang penting di pasang pada blog adalah Email Subscribe atau biasa disebut dengan berlangganan via email, widget ini berguna untuk para visitor yang sering mampir ke blog kita untuk melihat updatean baru, sehingga dengan berlangganan dengan memasukkan emailnya, visitor yang sudah mendaftar untuk artikel terbaru kita melalui widget tersebut tidak harus lagi keluar masuk blog kita untuk melihat updatean artikel terbaru, karena di saat si penulis artikel mempublish artikel terbarunya maka otomatis si pelanggan akan mendapat notifikasi melalui email.

Tetapi sebelum saya lanjut untuk cara memasang widget nya, sebaiknya saya anjurkan menggunakan ringkasan email feed untuk mencegah dari orang yang mengcloning artikel blog anda menggunakan auto blog.
Baca => Mengatasi Auto Content Blog Dengan Feed Jump Break Otomatis 

Cara Membuat Widget Email Subscribe Flat Ui

Untuk demonya bisa anda lihat pada widget sebelah kanan dan untuk cara penerapanya, dibawah telah saya sediakan tutorialnya dan simak langkahnya :

1. Masuk ke akun blogger anda
2. Pilih menu Template dan pilih Edit HTML
3. Masukkan CSS berikut tepat diatas kode ]]></b:skin> atau </style>
#subscribe-box .title {padding: 10px 25px;font: 26px Oswald;color: #FFF;text-align: center;background: none repeat scroll 0% 0% #293D4F;
text-transform: uppercase;border-radius: 2px 2px 0px 0px;border-bottom: 1px solid #EEE;}
#subscribe-box {width: 300px;height: auto;background-color: #293D4F;padding-bottom:10px;margin:0 auto}
#subscribe-box p {font-size: 14px;color:#fff;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: 14px;width: 92%;border:0;border-radius: 2px;}
#subscribe-box .emailfield input:focus {outline: none;}
#subscribe-box .emailfield .submitbutton {background: #E06949;color: #fff!important;border:none;outline: none;width: 100%;cursor:pointer;border-radius: 2px;}
#subscribe-box .emailfield .submitbutton:active {padding-top: 11px;padding-bottom: 9px;}
#subscribe-box .emailfield .submitbutton:hover{background: rgba(225, 60, 15, 1);}
4. Save template anda, dan selanjutnya masukkan kode dibawah ini pada Tata Letak => add Gadget/HTML.
<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=kabar-langit&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='kabar-langit'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>

              </form>
             </div>
</div>
NOTE : 
  • Ganti 2 alamat Feed Kabar-langit ke feed anda sendiri.
Demikianlah artikel saya kali ini mengenai Cara Membuat Widget Email Subscribe Flat Ui semoga bermanfaat!

Saya merupakan anak ke 8 dari 8 bersaudara, berwatak keras kepala dan sangat mencintai dunia blogging serta desain.
"Love My Mom"

Previous
Next Post »