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

Thursday, October 3, 2013

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 :

widget subscribe bubble blue

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

Me

Admin Rivai Silaban

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

6 comments :

  1. Replies
    1. thx atas pendapatnya ..
      salam bloger sob..

      Delete
  2. tata letak di blog saya lagi bermasalah mas, jadi belum bisa edit-edit leat tata letak

    ReplyDelete
    Replies
    1. tata letak blog saya tidak mau menyimpan HTML/JavaScript yang saya masukkan mas

      Delete
    2. Bukannya tidak mau itu sob, memang terkadang dasbord blogspot berat loadingnya, sabar aja nanti juga bisa ..

      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