Blog Personal Tentang Panduan Blog & Ebook

Cara Membuat Widget Subscription Box Keren

Cara Membuat Widget Subscription Box Keren - Memasang kotak berlangganan di blog merupakan salah satu cara untuk meningkatkan jumlah pengunjung blog anda.

Kotak berlangganan merupakan fasilitas yang disediakan oleh feedburner.com, namun tampilnya biasa - biasa saja. Anda bisa mengeditnya agar lebih menarik supaya pengunjung blog anda lebih tertarik untuk berlangganan artikel blog anda.

Nah, pada kesempatan kali ini saya akan membagikan tutorial tentang bagaimana cara membuat widget subscription box keren, dengan cara sederhana. Oke, langsung saja.

Cara Membuat Widget Subscription Box Keren

1. Buka akun blogger anda
2. Klik Tata Letak kemudian klik Tambahkan Gadget
3. Selanjutnya pilih HTML/Javascript
4. Kemudian masukan kode dibawah ini :
<style>
    #begini-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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDdsnuFOtgIkFtpU8Fcy-3Qzncf37jSgm2vSiuzk73gXkUBH5e0r1yxi9iOMKhLmBt0gmjygsxHPtYBe9ezSiqDk1YN8Rf8TFqmaqMZ9Vg02Os4qmGLC5KJKj328K0S_h11lZlswFavCM/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz_N9Qnbggjny1Z_rj7Yr6dkBtpbfuUZesN-F0XoukipXhTs9DiXT1ZLvs4jbvmguajixyRr-1hGJLKYi7DJHibvEO_6t9S2tdZRl-UUzlgRx2AthAISM1Gsp8uz-CYc-Jb98h4SwGz3A/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvH2w_DTih8jO4QAcqLUAz0Md1tcAj9GydOyN2eQXnz8SOjPFZjbNjhunAPZhfBFkOIpsiUG8VfAWHZcC7gRuZtTbHvy-KM6IcOqvdBD-nUCobo8f0tbt7CT0zWBji9rdlAZ8Lawa-noE/s1600/gprofile_button-16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCf4fDxpJ-KqrUAeu2cJ1oV_JEXA9VRPTbWgnZ9GiwJWNFnQr-8T12TVRRLlFLSiXXgT4XwwrhW2cNEgUJebOL7uwzCXlYYFsLYYm34ediYMOgere3KVGL3ngwXp3AS2f2jM5pz98clop4/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="begini-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=BeginiBlog', '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="BeginiBlog" 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/BeginiBlog" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/BeginiBlog"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/115999526006586068167 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>
Keterangan :
  • Ganti yang berwarna orange dengan nama feedburner anda
  • Ganti yang berwarna aqua dengan username twitter dan Google+ anda

5. Kemudian klik Simpan dan lihat hasilnya.

Sekian, Cara membuat Widget Subscription Box Keren, semoga artikel ini bermanfaat. Terima kasih

Jangan sampai ketinggalan postingan-postingan terbaik dari Begini Blog. Berlangganan melalui email sekarang juga:

Jika ingin mendapatkan artikel terbaru melalui sosial media, silahkan like serta follow akun dibawah & jangan lupa di share.

Ikuti Blog Ini  /   Facebook  /   Google+  /   Twitter

Share :

Facebook Twitter Google+

Terima kasih telah berkunjung di Begini Blog. Silahkan berikan komentar anda dikolom komentar atau   klik disini
0 Komentar untuk "Cara Membuat Widget Subscription Box Keren"

Peraturan berkomentar :

1. Silahkan berikan komentar anda sesuai dengan topik artikel.
2. Gunakan tombol "Balas" jika ingin membalas komentar agar komunikasi lebih terstruktur.
3. Gunakan bahasa yang baik dan mudah dimengerti.
4. Dilarang keras meninggalkan link hidup atau aktif.

Terima kasih telah berkunjung.

Back To Top