Menambahkan widget kotak berlangganan style premium wordpress di blog

Pada umumnya kita menggunakan widget e-mail kotak berlangganan untuk mendapatkan lebih banyak pelanggan atau pembaca dan jika pengunjung menemukan kotak berlangganan di blog anda hal ini bisa membantunya untuk mendapatkan upadate harian artikel yang anda tulis. 

Jadi, jika anda membuat widget ini lebih atraktif, maka para visitor akan tertarik dengan widget ini sehingga mau mendapatkan artikel terbaru anda. Dengan penambahan warna gradient pada widget, sehingga terkesan widget ini lebih profesional.

View Demo

LANGKAH-LANGKAHNYA:

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih ->Tata letak->Tambahkan gadget -> HTML/Javascript

 

• Kemudian kopi dan pastekan kode berikut didalamnya:

<style> #bssubscription {width:240px;Height:240px;margin:0px;padding:10px;background: #000000; background: -moz-linear-gradient(top, #000000, #A10048);background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#A10048));height: auto!important;color: white !important;padding: 20px 15px !important; text-align: center !important;font-family: Georgia, Times, "Trebuchet MS", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;} #bssubscription p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;} #bssubscription input.name { background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCmhweli4VNXZp3AqmHI1Q9r_kvAd9MFTKNtOWM0lXSHktLKp0950Sc6hD_KBe7fVU45TqXk_KY6nfbDGR533-lCGxwMV_7ENsnGy23rYGb-Qp3eXfiAx6sOUEEl3rkGmuiu5ai0o2Ab1y/s320/bssubscribe-name.png) no-repeat center right;} #bssubscription input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #bssubscription input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUGd2SvQp43mggLl1CDLetgA0C2Bjs-YTMYzV1GwbvyRXP2iq1ap_WToq-KQfu_HxNqyYOuYDHlQurpR2_hf0bW-07yJq5XLQeEq1qwiT-au-8KBds50Hz2jjZNB21gu_8jUOqnULmNMTH/s320/bssubscribe-email.png) no-repeat center right;} #bssubscription input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;} #bssubscription h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important; font-weight: bold !important;line-height:26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;} #bssubscription input[type="submit"] {background: #960E17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi28Trx6VzaraDVQFp0LQFAQ_Yj0pa1fUvzClbs8vrd5r2JMMWAV19PJ1elLCeHWE5r4JSquvVTK7gggnTw_1RzAX76RbXeNm2Kvw27e_DeYhZVuLyAoBZ1Tnsy6LyG0rutnD58VGqJTDxb/s320/BS-Subscription.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #bssubscription input[type="submit"]:hover {color: #FFA5A5;}</style> <center> <div align="center" id="bssubscription-wrapper"> <div id="bssubscription" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 290px;"> <h3 id="Wid-title-text" style="color: white; font-size: 20px;"> DAPATKAN UPDATE ARTIKEL GRATIS..</h3> <div id="BloggerSpice-txt" style="color: white; font-size: 14px;"> Gabung bersama kami untuk mendapatkan artikel lewat email anda.</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=jalu-pangna', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="BloggerSpice-name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Masukan nama Anda" /><br /> <input class="email" id="BloggerSpice-email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Masukan alamat email" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="BloggerSpice" /><input name="loc" type="hidden" value="en_US" /> <input id="BloggerSpice-Text" style="height: auto; padding: 5px 0;" type="submit" value="Dapatkan Akses Hari ini!" /></form> </div> </div> </center>

KUSTOMISASI

Silahakan ganti jalu-pangna dengan ID feedburner anda

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 21.34