Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Friday, September 13, 2013

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 :


widget subscribe minimalis

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 1:31 PM

6 comments :

  1. Pertamax di amankan yes !!
    Kunjungi Http://tati-adita.blogspot.com

    ReplyDelete
    Replies
    1. thx atas kunjungannya...
      blognya bagus mbak..

      Delete
  2. wah makasih kode widgetnya mz.. :)

    http://ceritaberkah.blogspot.com/

    ReplyDelete
    Replies
    1. sama sama sob..
      salam kenal dan terimakasi atas kunjungannya..

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog