» » Caranya Membuat Kotak Subscribe Keren Di Blog
Edit

Caranya Membuat Kotak Subscribe Keren Di Blog

Kotak langgaran Maknakel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yg jumlah pengunjungnya cukup tinggi. Kotak langganan ini dapat membantu sekaligus meningkatkan jumlah pembaca.

Bagi Anda yg belum tahu apa Maksud dengan Subscribe ada baiknya membaca dulu goresan pena ini; Mengenal dan Caranya Membuat Layanan Subscribe.

Postingan kali ini, kita bakal membahas trik pembuatan kotak langganan dengan bentuk yg keren. Sebelumnya, kita pernah juga membuat kotak langganan serupa namun bentuk yg sederhana. Jika Anda tertarik silahkan baca; Caranya Praktis Berlangganan Maknakel Via Email.

Kotak Subscribe yg bakal kita buat kali ini modelnya ibarat berikut:


Selain bentuknya lebih menonjol di blog, alasannya yaitu berwarna cerah dan punya gambar gif, kotak Subscribe ini juga sekaligus menyertakan tombol RSS, Twitter dan Google Plus. Dengan begitu pengunjung bakal lebih dimudahkan berinteraksi dengan kita melalui media sosial.

Tapi sebelum membuatnya, ada baiknya Anda mengenal dulu: Apa Itu FeedBurner dan Bagaimana Membuatnya?. Hal ini penting alasannya yaitu kotak subscribe ini bakal bertautan dengan FeedBurner.

Baiklah, untuk memasang kotak subscribe keren ini di blog Anda, ikuti langkah berikut.
  • Login ke akun blogspot Anda dan masuk ke halaman layout/tata letak. 
  • Klik Add a Gadget/Tambahkan Gadget
  • Klik HTML/JavaScript
  • Lalu copy paste script berikut dan save. 
<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:hkelewat / over{
 
        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;
        kelewat / 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;
        kelewat / 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:hkelewat / over, #other-social-bar .other-follow li.my-twitter a:hkelewat / over, #other-social-bar .other-follow li.my-gplus a:hkelewat / over{
    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="Blogoooblok-blog" >

<div class="emailicon"><p>Dapatkan Update Terbaru Maknakel 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=Blogoooblok', '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="Blogoooblok" 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="Caranya Membuat Kotak Subscribe Keren di Blog" href="http://feeds.feedburner.com/Blogoooblok" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="Caranya Membuat Kotak Subscribe Keren di Blog" rel="author" href="https://twitter.com/blogoooblok"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Caranya Membuat Kotak Subscribe Keren di Blog" rel="author" href=https://plus.google.com/u/0/+wisarahardi1/posts target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>


  • Pada script diatas, perhatikan yg ditandai warna merah. Ganti dengan alamat FeedBurner Anda.
  • Tulisan yg ditandai Kuning ubah dengan alamat Twitter dan Google Plus Anda.
  • Tulisan yg dicetak tebal dapat Anda ubah dengan kata-kata Anda sendiri.

Jika telah di simpan maka, kesannya bakal nampak ibarat gambar diatas. Praktis bukan!


0 Response to "Caranya Membuat Kotak Subscribe Keren Di Blog"

Post a Comment

Subscribe to: Post Comments (Atom)