» » » » Membuat Widget Subscription Box Menarik di Blog

Membuat Widget Subscription Box Menarik di Blog

Add Comment
Thursday, 27 June 2013
Membuat Widget Subscription Box Menarik di Blog


subscription box example

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 Widget Subscription Box Menarik di Blog 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
 Membuat Widget Subscription Box Menarik di Blog
  • Pilih HTML/JavaScript
subscription box
 Membuat Widget Subscription Box Menarik di Blog2
  • 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLxsAkN990q58KsLMdXd15XNbIB0rk6vWA8az57wKT8tKFJV0nQku-FU8KMo-fow9oWPeFcS_87si-l3MCVin6C_40lFTEoOgG_JNOExhr6ZLufQZjLn7L-8KU1k6ykpFohH4ZfN-g9c0/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/AVvXsEif9HApXE-ElYpV9eMoPWkuhlaEDmA3UMO16ccHP9y2ruMCIdAZiAhjs-pjkpAi11EavAriVaE5hny1ELM0fZqDQIfK6TFnIpvf628L6cHt8Z9DNCorIyBe8O_boADBHljM5hGCa_6kwwA/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/AVvXsEg9eNRf2un6D6h2cjkfezoi5s3mJ6aiKnK3a256a8FVKMBGzSR9QmTSAsJhC26Zh7qJkvdIUlSTha4Ho963JJXDW4yJ6t4dno_W7EPeetByXOeAH7eVLeOWvOQcbYa9yGcQ7ACafE_BBFI/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/AVvXsEhxby45rKhqjN1EKX7jHIvCbMzE7shqEa2RD5shyvP3XrxaYVIpewM9E5PgOTn8GWIgEhNsvGMnSA3Ld0AbDp50HFJ0vZ68hWQm12do-WGuQL69uZ5AbdH6_c59eDZ9IqAiE6RWJ9nSS7LQ/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=TKJ', '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="TKJ" 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/TKJ" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/TKJ"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/108320839324412478019 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

  • Ganti TKJ 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
 Membuat Widget Subscription Box Menarik di Blog3

Segitu saja tutorial kali ini tentang  Membuat Widget Subscription Box Menarik di Blog, untuk tutorial yang lainnya tunggu di postingan selanjutnya. Salam Teknik Komputer dan Jaringan (TKJ)

Sumber : http://d-genera.blogspot.com
Share this article :
+
Next
« Prev Post
Previous
Next Post »
0 Komentar untuk " Membuat Widget Subscription Box Menarik di Blog"
Post a Comment
Related Posts Plugin for WordPress, Blogger...