Cara Membuat Tombol Subscribe di Sidebar/Footer Blog Begini Caranya

Cara Membuat Tombol Subscribe di Sidebar/Footer Blog Begini Caranya

Jadi begini sobat dari banyaknya teman-teman yang mengeluh tentang pengunjung saya sepi kak, terus ada yang Tanya lagi blog saya kurang keren biar ada kotak langganan / subscribe artikel di blog saya bagus, dan banyak lagi pertanyaan yang lain. Ditambah lagi bagi blogger pemula khususnya yang jumlah pengunjungnya cukup rendah. Mungkin dengan adanya Kotak langganan ini bisa sangat terbantu sekaligus meningkatkan traffic jumlah visitor dan pembaca jadi lebih bertambah.

Adapun contoh dari tombol Kotak Subscribe yang mulai akan kita pasang di blog kita kurang lebih modelnya seperti gambar berikut ada di blog saya ini :

Keran bukan sobat? Jika jabawanya iya silahkan kalian lanjut bacanya, adapun kotak / subscribe ini bentuknya selain mencolok keliatan bagus jadi seperti feedburner tapi di modofikasi sedikit, disini kalian juga bisa menambahkan di blog, jadi ada tambahan gambar gif, disitu kalian juga bisa menggantinya script akun sosmeda sobat dengan cara merubah tombol-tombol / icon seperti  RSS, Twitter dan Google Plus sehingga memudahkan pengunjung untuk berinteraksi secara langsung jika ada yang mau ditanyakan. Sehingga artikel kita sangan informative buat kita dan juga para pembacanya.

Okeh sobat kita mulai saja bagaimana cara untuk memasang script ini silahkan kalian ikutin step by step langkah demi langkah agar berhasil dan work di blog sobat.

#1 Langkah Pertama silahkan kalian Login ke akun blogger sobat,

#2 Setelah itu langkah ke2 Masuk ke halaman layout/tata letak. Yaitu > Klik Tata Letak

#3 Selanjutnya Klik Tombol Add a Gadget/Tambahkan Gadget Baik di Sidebar/Footer

#4 Kemudian Klik (+) atau Tombol HTML/JavaScript

#5 Langkah Terakhir yaitu Silahkan Copy kode script dibawah ini :

Berikut Kode Htmlnya :

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXf-7xxbvCyaZNFiDRx7roOtnQ3IZ8fVG8aOT4qtb_rsoBnBRvMWt41CrKnnalV5dE-qutCNg575tGVKKL_-vgG_TjJUXKTAbMi2XPheWsguHTX1l3g7akBUvALTKcq5jKYcHUV6VZCY8/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/AVvXsEjIVx9-VwndNW_n4Dxt9ZF3I78pCl4ll_RCiZVVdl_x0Kygq_5nwAotrnqat7ssg5stnntEndQEfx22WAy6kWGhmPIrOcprv5sMR9uRDfnAf1UProBVaLDxPN1VuJbs7BkM5Fo4UdGk4OY/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/AVvXsEgGJb6srjFkdOxblSKihn8-Gr0Nmkyd4QQgNeuqHUP3l06FJeW-CsI85N7or5Ods0RANmTGDasNI4wX5M2p4P8KKxxI7qMypNzYgZSn62Bri78c_-s0ZR9hU6gvHf7Vcxy1raYfWuOX9xE/s400/gplus-16x16.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/AVvXsEiYXDmyNlW_PGkGXbR8mhnfMvIYJdoFslPxgNSOggTD2oLF0IemkQpv5bvm420CkNRonx6edUpHL8Gr8YZT_dMCR6yg69ttsbD-pb_am0dBCe1Dze0BExNKMyIYPDRLuoh0eYf9p7L_MxFG/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="Duniamu38-blog" >

<div class="emailicon"><p>Dapatkan Update Artikel Gratis! </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=Duniamu38', '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 Email Anda Disini..." 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="Duniamu38" 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/Duniamu38" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/duniamu38"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/+duniamu38/posts target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

#6 Jangan Lupa Klik Tombol Save

CATATAN PENTING !!!

1. Perhatikan script diatas yang saya tandai warna merah. Silahkan Ganti dengan alamat/url FeedBurner sobat ya
2. Setelah itu yang sudah saya tandai  warna Kuning ganti sesuai alamat/url sosmed sobat sesuai icon itu
3. Yang terakhir tulisan tebal warna biru bisa Anda ganti Kata bijak Anda sendiri hiihi.

Jangan lupa simpan setelah tata letak diblog sobat, jadi seperti itu cara untuk memasang tombol subscribe dan juga cara membuat kotak langganan keren di blog terbaru, semoga artikel ini bermanfaat buat sobat semua dan jangan lupa kalian share sebanyak-banyaknya. salam sukses blogger terimakasih.