widget subscribe bubble blue

Widget subscribe sangat dibutuhkan para bloger, cara membuat widget subscribe bubble blue ini pada halaman blog anda merupakan suatu solusi tepat untuk meningkatkan trafik halaman blog kesayangan anda, selain dari pada meningkatkan trafik pengunjung, widget subscribe bubble blue ini memiliki tampilan design yang menarik. Saya harap kegunaan widget subscribe bubble blue ini anda sudah lebih memahaminya dari pada saya, oke langsung saja menuju TKP, lihat screenshot tampilan widget subscribe bubble blue ini dan simak penjelasan tutorial dibawah :

Referensi Artikel

• Widget subscribe minimalis
• Flying navigasi with subscribe
• cara membuat widget subscribe blog
• cara membuat widget animasi di blog
• Widget subscribe V5
• cara membuat widget subscribe v4
• cara membuat widget subscribe v3
• cara membuat widget subscribe v2
• cara membuat widget subscribe v1

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 kemudian save, saatnya anda beralih ke "TATA LETAK " pada dashboard anda untuk memasang kode htmlnya.

/*****************************************
Name : Subscribe Box Bubble blue
By : Rivai Silaban | Blog Design
Update : 03 Oktober 2013
******************************************/
.BD-sub{
border:1px;
solid #1A2638;
border-radius:10px;
margin-bottom:0px;
padding:10px;
text-align:center;
}
.BD-sub input{
border-radius:10px 10px 10px 10px;
font-size:14px;
padding:10px;
text-shadow:1px 1px 0 #FFF;
width:190px;
color:#0000CC;
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: #0066FF;
background:-moz-linear-gradient(top, #D6FCFE, #fff);
background:-moz-linear-gradient(top, #D6FCFE, #fff);
}
.BD-sub .kirim{
border: 2px solid rgb(9, 149, 223);
border-radius:5px;
box-shadow: 2px 4px 4px rgb(113, 112, 112);
color:#000000;
cursor:pointer;
font-family:verdana;
font-size:12px;
padding:0px;
text-transform:uppercase;
width:auto;
height:36px;
border-color: #006A9D;
background: -o-linear-gradient(top, #00FFFF, #00A4A4);
text-shadow: none;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
}
.BD-sub .kirim:hover{
color: #666666;
box-shadow:0 0 4px 2px #666 inset;
border-color: #333333;
background-color: #00CCCC;
}
.bdbal-sub {
position:relative;
padding:10px;
margin:-10px 5px 5px 5px;
color:#000000;
border-radius:10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
border: solid #999999 1px;
background-color: #00FFFF;
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
background:-moz-linear-gradient(top, #00FFFF, #0076AE);
background:-o-linear-gradient(top, #00FFFF, #00A4A4);
box-shadow: 2px 2px 2px 2px #bbb;
}
.bdbal-sub:after {
content:"";
display:block;
position:absolute;
top:-30px;
left:50px;
width:0;
height:0;
border:15px solid transparent;
border-bottom-color:#00FFFF;
}

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 box start -->
<div style="width:300px; border:dashed #0000CC 2px; padding:5px; background-color:#FFFFFF; ">
<div class='BD-sub'>
<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 &#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="kirim" type='submit' class='kirim' value='Subcribe'/>
<input name='uri' type='hidden' value='ID FEEDBURNER'/>
<input name='loc' type='hidden' value='en_US'/>
</form></div>
<div class="bdbal-sub" >
<em>Artikel berlangganan GRATIS melalui email</em><br/>
Daftarkan email anda untuk mendapatkan Update artikel terbaru dari blog ini..
</div></div>
<!-- Rivai Silaban | BLOG DESIGN Subscribe box End -->

Keterangan Code

• Untuk tulisan warna HIJAU adalah text widget
• Tulisan kode warna MERAH ganti dengan link feedburner anda
• Kode tulisan warna BIRU adalah ukuran lebar widget.
  

Kesimpulan

Widget subscribe bubble blue memiliki tampilan yang menarik, widget subscribe bubble blue ini valid HTML 5 dan CSS 3 serta kode yang ringan.

Bila anda mengalami kesulitan dalam pemasangan widget ini atau barangkali ada kode yang error silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget subscribe bubble blue
Kamis, 03 Oktober 2013
Rivai Silaban | 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 : 4:57 PM