Cara Membuat Widget Email Subscribe Di Blog Terbaru

Email Subscribe adalah widget yang sangat berguna bagi pengunjung maupun para blogger sebab setiap ada update artikel baru maka secara otomatis akan mengirim email ke pembaca tersebut yang sudah mendaftarkan atau memasukkan emailnya di kotak subscribe dan jika artikelnya disukai maka mereka tidak akan segan untuk berkunjung lagi ke blog tersebut, yang pasti bisa membuat blog menjadi lebih SEO serta mendapatkan banyak traffic dari gadget kotak berlangganan lewat email dengan tampilan yang keren ini.

Kali ini saya akan share gimana Cara Membuat Widget Email Subscribe Di Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin memasang kotak berlangganan via email pada blog.

Sebelum membuat widget email subscribe ini sobat harus mempunyai alamat feedburner, jika belum punya bisa buat dulu dengan mudah silahkan klik disini

Cara Membuat Subscribe Di Blog Yang Keren :

1. Bikin kotak subscribe seperti di atas yaitu dengan cara masuk ke menu Tata Letak lalu pada bagian sidebar klik Tambahkan Gadget

2. Kemudian klik tombol plus pada HTML/Javascript

3. Setelah itu masukkan kode berikut ke dalam isi konten, sebelumnya ganti kode berwarna merah dengan alamat feedburner blog sobat, kode berwarna biru ganti sesuai dengan keinginan dan kode berwarna hijau ganti dengan alamat twitter dan google plus sobat, jika sudah klik Simpan.. Selesai

<style>
    #dgenera-blog {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }
    #email-news-subscribe .email-box{
        padding: 0px 0px;
        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/AVvXsEgGJO45tnoqdfRoKv7DpPhaX2Ui9qdejPICiYjkv2_0A3ct2rKojI_N99874NxkGqdlyGHiCFADf17gfX5rpMBWrteP1pKS7WkXsXja60Oh5PkifETwaFN64HHG2Z5jm6bLsNpiVTU_T30/s400/rss-16x16.png') no-repeat transparent;
        line-height: 3;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:1px;}
    #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/AVvXsEgJmx7XHFot6Qn6zGO4x4xJ0s7lW6ZeTfy7lqSV2j7precCXR3SyhhjCL9J8KWeP-VWYV74h4vWazN3jnMtk58cmQVJZ9VMOSuPs5bnVbYL_0wVxya7HtviDofbV5aRRW784fANO8js32A/s400/twitter%2527.png') no-repeat transparent;
        line-height: 3;
        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/AVvXsEi2FiPBMYDHgwyqOvm44W00BjLOFWsI1iyquR2EyeVEvbDX-UiC2OUMyhiyQuTwQ1JhmHwmNg7S5mTC74h9vFLLN6S41zylIHlocYKJFONjrJqX6WRJlN-MT2QsSM5e8GSALuBg69AGiAY/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 3;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}
.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9jFX9is4j9Teq5L7liuWs7F7upLNjZruW8WJ-VucrH1ZdWNpJgl7m1CQx6xZl9oymDbwZ-KLNscd0LEzN2F7Hd1NhG-bxbe-RLTHto3hXN4m15Y9aZ3vj7kRZmI49LIcVZzPvZUBYm8Nx/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 8px 110px;
    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:60 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>
    
<div id="carazain-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=carazain', '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 == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" />
<input type="hidden" value="carazain" 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/carazain" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/cara_zain" target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/u/0/+carazain target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

Nah itulah bagaimana membuat widget email subscribe dengan mudah dan cepat.

Silahkan dicoba

Cara Membuat Widget Email Subscribe Di Blog Terbaru

Related Posts

Tags: Blog