Monday, February 11, 2013
Cara Membuat Widget Subscription Box Menarik Untuk Blogger
Memiliki jumlah visitor yang tinggi adalah impian tiap Blogger sehingga membuat mereka berusaha sekuat tenaga untuk itu. Banyak cara sebenarnya untuk meningkatkan pelanggan blog Anda misalnya aktif di jejaring sosial, memasang widget facebook fan box, memasang tombol follow twitter, dan juga memasang kotak berlangganan untuk pengunjung. Nah, pada kesempatan kali ini saya akan berbagi tutorial tentang bagaimana cara membuat kotak Subscription yang menarik sehingga akan mengingatkan pengunjung Anda untuk berlangganan artikel Anda. Dengan hanya memasukkan script sederhana di bawah ini maka subscription box yang menarik akan tampil di blog Anda. Baiklah langsung saja kita kerjakan!
Memasang Subscription Box di Blogger
- Login ke akun Blogger Anda dan masuk ke Layout
- Klik Add a Gadget
- Pilih HTML/JavaScript
- Masukkan kode di bawah ini
<style>
#dgenera-blog {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe .email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow li {
display:inline;
border:0;
}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold; font-family:arial;
display:inline;
}
#other-social-bar .other-follow li.my-rss {
background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
.emailicon {
background: url("http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px 95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);
}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #333;
}
</style>
<![endif]-->
<div id="dgenera-blog" >
<div class="emailicon"><p>Subscribe to our Free Email Updates! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=Dgenera', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />
<input type="hidden" value="Dgenera" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/Dgenera" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/DGeneraBlog" target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/104725840255403357961 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>
- Ganti DGenera dengan nama Feedburner Anda
- Ganti yang berwarna orange dengan username twitter dan Google + Anda
- Anda dapat mengganti kode yang bercetak tebal dengan kalimat sesuka Anda
- Simpan widget Anda dan lihat perubahannya
Setelah semua selesai maka akan terlihat seperti gambar ini:
Segitu saja tutorial kali ini, untuk tutorial yang lainnya tunggu di postingan selanjutnya. Salam Blogger..:)
Labels:
Widgets and Plugins

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang. Follow @IshaMcSmile
Artikel Terkait:
Widgets and Plugins
Subscribe to:
Post Comments (Atom)
Gan,saya udah coba pasang. tp kok hasilnya gk sama yah? tombol subscribe'nya kelebaran gan, mohon bantuannya.
ReplyDeletehttp://shabri.cyber4rt.com/
Mungkin lebarnya saja yang harus disesuaikan kawan,,
DeleteScript di atas sudah bekerja kok krn sudah sy cek juga menggunakan http://tinkerbin.com/. Jadi hasilnya seperti yg ada di sidebar saya itu jadinya. Perlu sedikit penyesuaian lebar saja mungkin sob.
keren gan widgetnya jadi lebih rapih giribig.com
DeleteUdah bisa gan, saya pindahkan widgetnya ke footer. thanks
ReplyDeleteSip kawan.. ^^
DeleteGan, thanks ya udah share soal ini..!!!
ReplyDeleteane sekalian mau izin COPAS gan buat nambah" refrensi di blog ane
Fredisahred.blogspot.com
Fredi@ silahkan sob..
ReplyDeleteThanks Ya Gan
ReplyDeleteTapi Gan tampilannya Beda Sama Yang Di Tampilkan Agan
Tapi gak papa deh
Dan Izin Copas Ya ga
Mungkin bisa krn sidebar terlalu sempit kawan....
DeleteSilahkan ^^
nice info
ReplyDeletedi tnggu kunjungan bliknya
http://cybernatar.blogspot.com/
Thx kawan...
DeleteTerima kasih, infonya sangat bermanfaat. Bisa diterapkan di blog saya juga. Sukses selalu, salam blogger Indonesia
ReplyDeleteAmin, terimakasih kunjungannya kawan..
Deleteini kelebaran klo dipake di blog ane gan,
ReplyDeletegmna cara resize nya gan?
ksih tau ane mana yg hrus diubah, soalnya sidebar ane cuman 250px,
mohon pencerahannya gan...
Ukurannya memang segitu kawan,,
DeleteKalau diperkecil nanti tidak proporsional tampilannya. jd tidak menarik.
ok sipp , thanks gan.
ReplyDeleteoiya buat comment'an author itu berbeda seperti punya ente gimana tuh ??
tertarik saya :D
Wah kalau yang ini scriptnya sy sudah agak lupa..
DeleteJika ada waktu nanti bisa sy buatkan artikelnya....
ditunggu gan..
ReplyDeletetrimakasih sebelumnya :)
Oke sob sama2. . .
Deletesebenernya sih widgetnya keren tpi masalahnya gak valid html5
ReplyDeleteBagaimana solusinya sob,,
DeleteKalo mau bagi2 ilmunya..
ketika dicek di w3c ada sekitar 6 atau 7 error kalo gx salah, udah ane benerin sisa 2 error. nah yg 2 error ini letaknya dibagian form masukkan email anda disini. kodenya memang tidak valid mo diganti pake apa gk tau, mungkin kalo diganti pake form lainnya bisa. kalo kode errornya dihapus jadi valid tapi form masukkan email jadi hilang.
ReplyDeletekarena gx valid html5, terpaksa ane copot gan widgetnya.
sebelumnya trimkasih udah bagi2 ilmunya sob. . ,
Trimakasih banyak sob korensinya,,
DeleteJika sudah sempat nanti saya betulkan, mudah2an bisa....
keren gan, mohon izin ya,,,
ReplyDeleteSilahkan kawan.....
Deletetenkyu.. sob dr kemaren ane nyari gadget ini .. walau harus sedikt berexperimen tp berhasil juga lihat hasilnya di blog ane ea sob.. lam kenal dari blogger nubietol
ReplyDeleteSalam kenal juga sob,,thanks sudah berkunjung
Deletethx gan infonya, kbantu bgt buat ane yg masih helajar blog ni,
ReplyDeleteThanks broo
ReplyDeleteTerimakasih ilmunya kakak....sudah bisa dicoba dan dipasang...
ReplyDeletemas mau tanya kalo kita pasang widget di atas,
ReplyDelete1. apa berarti kita harus buat twitter dan google plus khusus yang isinya tentang blog kita?? (kalo pake twiter dan google plus pribadi bisa ndak?
2. gimana supaya posting kita di blog bisa masukkan otomatis di twitter dan google plus kita?
tolong bantuannya ya mas dan thx.
kalau saya pake twitter pribadi, semua pribadi.. gak bawa nama blog :D
DeleteTerima Kasih.,, tampilan subscribe nya keren
ReplyDeleteijin sedot gan buat blog ane
ReplyDeletemakasih infonya gan,
ReplyDeleteterima kasih
ReplyDeletemakasih banyak mas atas artikelnya, ijin copas kodenya ya mas :) oh iya, saya mau nanya.. kok RSS Feed, Google +, dan Twitternya gak ada ya ? coba deh liat di blog saya mas vongola-f.blogspot.com
ReplyDeleteSempurna Gan Widgetnya keren banget thanks ya tutorialnya...
ReplyDeletekeren gan
ReplyDeleteMantab gan... langsung ane praktekkan tara.... langsung mentereng... makasih ya gan sudah sharing ilmunya... sangat bermanfaat bagi pemula seperti saya...
ReplyDeleteKunjungi balik ya gan.. :http://www.masterptcsite.com/
siip gan ni yang aku cari2 yang udah di edit jadi gak default dari feedburner dan udah berhasil saya pasang di blog saya tanks banyak
ReplyDeleteSip Gan keren bgt Widget Subscribenya, saya suka tutorial agan thanks ya Gan
ReplyDeleteOke gan saya dah nambah , tapi kok punya saya ada 8 y munculnya
ReplyDeletenih buktinya http://rizky-teknologi.blogspot.com/
Mohon pencerahannya gan
kok punya saya tidak muncul tombol twitter dan googleplusnya ya?
ReplyDeleteheroesman.blogspot.com
Ijin Contek Brother... Nice Posting... Thanks
ReplyDeletemantap dah tutornya kawan
ReplyDeletehttp://acemaxs31.com/obat-diare-alami/
htt://i-bikeco.com
http://mas-galih.com/
mantaap gan informasinya :)
ReplyDeleteIjin share http://apotekherbalkita.com/pengobatan-alami-bejolan-di-payudara/
http://grosiracemaxstasik.com/
terimakasih atas informasinya sangat bermanfaat :)
ReplyDeletehttp://kedaijellygamatgoldg.com
Terimakasih infonya Gan (y)
ReplyDeleteIni yang sedang saya cari-cari
http://grosirobatjellygmat.com/
thanks infonya bro
ReplyDeletehttp://obattradisionalacemaxs.net/obat-tradisional-migren/
Makasih informasinya sob :)
ReplyDeletehttp://goo.gl/oGevlE
Keren sob artikelnya, ditunggu artikel yang lainnya
ReplyDeletehttp://goo.gl/HmEbth
mantab boss (Y)
ReplyDeletethank you for the info success continues
ReplyDeletehttp://infonyakesehatan98.blogspot.com/
izin pasang gan, yang ini lebih joss kayaknya dibanding yang ane pasang,haha
ReplyDeleteditunggu juga kunbalnya gan : http://bacainfomu.blogspot.com
Thanks sob informasinya :)
ReplyDeletehttp://goo.gl/yAD923
Thanks sob untuk informasinya :)
ReplyDeletehttp://goo.gl/sDr4ga
Manteep sob informasinya, sangat membantu :)
ReplyDeletehttp://goo.gl/9UzkHw
makasih sob,..sangat bermanfaat udah saya pasang di blog sy..http://pakazi.blogspot.com
ReplyDeleteterimakasaih...sangat berguna.ijin pakai gan
ReplyDeletemantapp gan, jngn lupa kunjungi balik ya https://dunia-kita123.blogspot.com/
ReplyDeletemantapp gan, jngn lupa kunjungi balik ya https://dunia-kita123.blogspot.com/
ReplyDeletebermanfaat gan, coba yang inii menthorkita.blogspot.co.id
ReplyDeleteIjin Nyimak Gan - umpanpancingessen.com
ReplyDeleteMantap infonya gan, thank u.
ReplyDeleteObat Tradisional Amebiasis
Obat Tradisional Kanker Hati
Obat Tradisional Strabismus
Obat Tradisional Kanker Esofagus
Obat Tradisional Abses Otak
Obat Tradisional ADHD Paling Ampuh
Obat Tradisional Anemia Pada Anak Paling Ampuh
thanks infonya gan..
ReplyDeleteterimakasih gan, tutornya bermanfaat, berkunjung balik ke situs saya di https://remote99.blogspot.com
ReplyDelete