Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Monday, February 11, 2013

Cara Membuat Widget Subscription Box Menarik Untuk Blogger

subscription box 2
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
subscription box 1
  • Pilih HTML/JavaScript
subscription box
  • 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 == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" 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:

subscription box example

Segitu saja tutorial kali ini, untuk tutorial yang lainnya tunggu di postingan selanjutnya. Salam Blogger..:)
Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.

63 comments:

  1. Gan,saya udah coba pasang. tp kok hasilnya gk sama yah? tombol subscribe'nya kelebaran gan, mohon bantuannya.
    http://shabri.cyber4rt.com/

    ReplyDelete
    Replies
    1. Mungkin lebarnya saja yang harus disesuaikan kawan,,
      Script 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.

      Delete
    2. keren gan widgetnya jadi lebih rapih giribig.com

      Delete
  2. Udah bisa gan, saya pindahkan widgetnya ke footer. thanks

    ReplyDelete
  3. Gan, thanks ya udah share soal ini..!!!
    ane sekalian mau izin COPAS gan buat nambah" refrensi di blog ane
    Fredisahred.blogspot.com

    ReplyDelete
  4. Thanks Ya Gan
    Tapi Gan tampilannya Beda Sama Yang Di Tampilkan Agan
    Tapi gak papa deh
    Dan Izin Copas Ya ga

    ReplyDelete
    Replies
    1. Mungkin bisa krn sidebar terlalu sempit kawan....

      Silahkan ^^

      Delete
  5. nice info
    di tnggu kunjungan bliknya
    http://cybernatar.blogspot.com/

    ReplyDelete
  6. Terima kasih, infonya sangat bermanfaat. Bisa diterapkan di blog saya juga. Sukses selalu, salam blogger Indonesia

    ReplyDelete
  7. ini kelebaran klo dipake di blog ane gan,
    gmna cara resize nya gan?
    ksih tau ane mana yg hrus diubah, soalnya sidebar ane cuman 250px,
    mohon pencerahannya gan...

    ReplyDelete
    Replies
    1. Ukurannya memang segitu kawan,,
      Kalau diperkecil nanti tidak proporsional tampilannya. jd tidak menarik.

      Delete
  8. ok sipp , thanks gan.
    oiya buat comment'an author itu berbeda seperti punya ente gimana tuh ??
    tertarik saya :D

    ReplyDelete
    Replies
    1. Wah kalau yang ini scriptnya sy sudah agak lupa..
      Jika ada waktu nanti bisa sy buatkan artikelnya....

      Delete
  9. ditunggu gan..
    trimakasih sebelumnya :)

    ReplyDelete
  10. sebenernya sih widgetnya keren tpi masalahnya gak valid html5

    ReplyDelete
    Replies
    1. Bagaimana solusinya sob,,
      Kalo mau bagi2 ilmunya..

      Delete
  11. 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.

    karena gx valid html5, terpaksa ane copot gan widgetnya.
    sebelumnya trimkasih udah bagi2 ilmunya sob. . ,

    ReplyDelete
    Replies
    1. Trimakasih banyak sob korensinya,,
      Jika sudah sempat nanti saya betulkan, mudah2an bisa....

      Delete
  12. tenkyu.. 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

    ReplyDelete
    Replies
    1. Salam kenal juga sob,,thanks sudah berkunjung

      Delete
  13. thx gan infonya, kbantu bgt buat ane yg masih helajar blog ni,

    ReplyDelete
  14. Terimakasih ilmunya kakak....sudah bisa dicoba dan dipasang...

    ReplyDelete
  15. mas mau tanya kalo kita pasang widget di atas,
    1. 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.

    ReplyDelete
    Replies
    1. kalau saya pake twitter pribadi, semua pribadi.. gak bawa nama blog :D

      Delete
  16. Terima Kasih.,, tampilan subscribe nya keren

    ReplyDelete
  17. makasih 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

    ReplyDelete
  18. Sempurna Gan Widgetnya keren banget thanks ya tutorialnya...

    ReplyDelete
  19. Mantab gan... langsung ane praktekkan tara.... langsung mentereng... makasih ya gan sudah sharing ilmunya... sangat bermanfaat bagi pemula seperti saya...

    Kunjungi balik ya gan.. :http://www.masterptcsite.com/

    ReplyDelete
  20. 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

    ReplyDelete
  21. Sip Gan keren bgt Widget Subscribenya, saya suka tutorial agan thanks ya Gan

    ReplyDelete
  22. Oke gan saya dah nambah , tapi kok punya saya ada 8 y munculnya
    nih buktinya http://rizky-teknologi.blogspot.com/
    Mohon pencerahannya gan

    ReplyDelete
  23. kok punya saya tidak muncul tombol twitter dan googleplusnya ya?
    heroesman.blogspot.com

    ReplyDelete
  24. Ijin Contek Brother... Nice Posting... Thanks

    ReplyDelete
  25. mantap dah tutornya kawan
    http://acemaxs31.com/obat-diare-alami/
    htt://i-bikeco.com
    http://mas-galih.com/

    ReplyDelete
  26. mantaap gan informasinya :)
    Ijin share http://apotekherbalkita.com/pengobatan-alami-bejolan-di-payudara/
    http://grosiracemaxstasik.com/

    ReplyDelete
  27. terimakasih atas informasinya sangat bermanfaat :)
    http://kedaijellygamatgoldg.com

    ReplyDelete
  28. Terimakasih infonya Gan (y)
    Ini yang sedang saya cari-cari
    http://grosirobatjellygmat.com/

    ReplyDelete
  29. thanks infonya bro
    http://obattradisionalacemaxs.net/obat-tradisional-migren/

    ReplyDelete
  30. Makasih informasinya sob :)
    http://goo.gl/oGevlE

    ReplyDelete
  31. Keren sob artikelnya, ditunggu artikel yang lainnya
    http://goo.gl/HmEbth

    ReplyDelete
  32. thank you for the info success continues

    http://infonyakesehatan98.blogspot.com/

    ReplyDelete
  33. izin pasang gan, yang ini lebih joss kayaknya dibanding yang ane pasang,haha

    ditunggu juga kunbalnya gan : http://bacainfomu.blogspot.com

    ReplyDelete
  34. Thanks sob informasinya :)
    http://goo.gl/yAD923

    ReplyDelete
  35. Thanks sob untuk informasinya :)
    http://goo.gl/sDr4ga

    ReplyDelete
  36. Manteep sob informasinya, sangat membantu :)
    http://goo.gl/9UzkHw

    ReplyDelete
  37. makasih sob,..sangat bermanfaat udah saya pasang di blog sy..http://pakazi.blogspot.com

    ReplyDelete
  38. terimakasaih...sangat berguna.ijin pakai gan

    ReplyDelete
  39. mantapp gan, jngn lupa kunjungi balik ya https://dunia-kita123.blogspot.com/

    ReplyDelete
  40. mantapp gan, jngn lupa kunjungi balik ya https://dunia-kita123.blogspot.com/

    ReplyDelete
  41. bermanfaat gan, coba yang inii menthorkita.blogspot.co.id

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.