Cara Membuat Kotak Subscribe Flat UI

Kotak Subscribe "Flat UI"

Selamat datang agan atau aganwati, kali ini Saya akan berbagi cara membuat kotak subscribe keren dan responsive , saya membagi kan artikel ini karena kebutuhan posting sekaligus menjawab OOT baiklah, untuk membuatnya Anda harus mengikuti beberapa langkah berikut ini; 

FEATURE:

• Design Flat UI Elegant
• Efek nya Keren dan banyak dicintai 
• Tidak mencolok untuk dilihat oleh mata
• Cocok/Pas sekali digunakan di side bar Blog

CARA PENGGUNAAN:

1. Buka Dashbor Agan/aganwati terlebih Dahulu www.blogger.com

2. Setelah itu pilih template => Kemudian Edit HTML

3. Lalu Klik Tombol Ctrl+F Setelah itu Cari kode ]]></b:skin> / </style>

4. Lalu Copy CSS Di Bawah Ini Di atas Kode Tersebut :

  #subscribe-box {width: 100%;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: #fff;text-align: center;background: #2a3542;text-transform:uppercase;border-radius:2px 2px 0 0;} #subscribe-box p {font-family: 'Droid Serif';font-size: 16px;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: 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;}

#art-wrapper { position : relative; background : #fff; margin-top : 16px; width : 100%; height : 100%; } #art-wrapper img { width : 100%; height : 100%; }  

5. Setelah itu simpan setelan 

6. Pilih menu Tata letak => Tambah kan Gadget => Pilih HTML/Java Script 

7. Copy Lagi Kode HTML di bawah ini :

 <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='https://feedburner.google.com/fb/a/mailverify?uri=BlogTsanyAziz' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=BlogTsanyAziz&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>

 Catatan: Ganti Blok yang berwarna kuning dengan URL feed Blog agan/aganwati

8.  Simpan Dan Coba Lihat Hasilnya

Cukup sekian semoga bermaanfat terima kasih, Selamat Mencoba ! 

Published By: Tsani Aziz | Jika Ingin Copas Tolong Sertakan Sumber Di Bawah ini

Terimah Kasih telah membaca artikel Cara Membuat Kotak Subscribe Flat UI . Yang ditulis oleh Tsani Aziz .Pada hariSabtu, 13 Desember 2014. Jika anda ingin sebarluaskan artikel ini, mohon sertakan sumber link asli. Kritik dan saran dapat anda sampaikan melalui kotak komentar Dan Jika Anda Memberi Like/Share Saya Sangat Berterima Kasih. Sekian Trimakasih ^_^

<a href="http://juragandawet69.blogspot.com/2014/12/cara-membuat-kotak-subscribe-flat-ui_13.html" target="_blank">Cara Membuat Kotak Subscribe Flat UI </a>