widget subscribe minimalis

Widget subscribe valid html 5 ini memiliki tampilan minimalis, cocok untuk halaman blog yang mempunyai design polos. Update artikel melalui jasa feedburner menjadi motor widget subscribe minimalis ini.Postingan kali ini terinspirasi seorang teman yang membutuhkan wiget subscribe yang polos tapi menarik, jadi saya membuat kode dan mempublishnya untuk kalayak umum manatau teman teman yang lain membutuhkannya. Oke langsung saja menuju TKP simak tutorial pemasangannya dan lihat gambar tampilannya dibawah ini :

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]></b:skin> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : widget Subscribe Minimalis
By : Rivai Silaban | Blog Design
Update : Jum'at 13 September 2013
******************************************/
#BD-submin{
border:1px;
solid #1A2638;
border-radius:10px;
padding:5px;
text-align:center;
}
#BD-submin h2{
margin-top:5px;
color:#000000;
font-family:georgia;
font-size:20px;
margin-bottom:10px;
padding:0;
text-shadow:1px 0 2px #666;
font-style: italic;
font-weight: bold;
}
#BD-submin input{
border:1px solid rgb(9, 149, 223);
border-radius:10px 10px 10px 10px;
font-size:14px;
padding:10px;
text-shadow:1px 1px 0 #FFF;
width:180px;
color:#990000;
font-family:georgia;
margin-bottom:5px;
border: 1px solid rgb(9, 149, 223);
border-radius: 6px 6px 6px 6px;
box-shadow: 2px 4px 4px rgb(192, 191, 191);
border-color: #A21009;
background-color: #fff;
}
#BD-submin .submit{background:#09f;
border: 1px solid rgb(9, 149, 223);
border-radius: border-radius:10px 10px 10px 10px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#fff;
cursor:pointer;
font-family:verdana;
font-size:10px;
padding:5px;
text-shadow:1px 1px 0 rgba(0,0,0,.4);
text-transform:uppercase;
width:auto;
height:36px;
background-color: #FF6A6A;
border-color: #FF0000;
}
#BD-submin .submit:hover{background-color: #DD0000;
color: #CCCCCC;
}
#BD-submin .submit:active{
box-shadow:0 0 4px #111 inset;
background-color: #640000;
}/*** Blog Design CSS and ***/

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Add gadget " ( Tambahkan gadget )
• Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save .

<!-- Rivai Silaban | BLOG DESIGN Subscribe KODE start -->
<div style="width:280px; background-color: #CCCCCC;">
<div id='BD-submin'><h2>Artikel berlangganan GRATIS melalui email</h2>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER ANDA&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=600,height=550&#39;);return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' type='text' value='Enter Your Email Address...'/>
<input name="submit" type='submit' class='submit' value='Subscribe'/>
<input name='uri' type='hidden' value='ID FEEDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
</form></div></div>
<!-- Rivai Silaban | BLOG DESIGN Subscribe KODE End -->

Keterangan Code

• Untuk tulisan warna HIJAU adalah text judul widget
• Tulisan kode warna MERAH ganti dengan id Feedburner anda,
• Kode tulisan warna BIRU adalah " value " atau isi text box input
• Kode tulisan huruf warna KUNING adalah lebar tampilan widget
  

Kesimpulan

Widget subscribe minimalis ini valid html 5 dan CSS 3 serta SEO Friendly. Memiliki kode yang ringan dan sistem update artikel melalui feedburner.

Buat teman teman yang mengalami kesulitan dalam memasang widget subscribe minimalis ini atau memiliki kode yang error silahkan hubungi saya atau share bersama saya melalui form komentar dibawah. Pergunakan semua fasilitas yang ada i halaman blog ini untuk mempermudah anda.

Widget Subscribe Minimalis
Jum'at 13 September 2013
By : Admin Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 1:31 PM