• Breaking News

    Thursday, January 5, 2017

    Cara Membuat Kotak Subscribe Keren di Blog

    Cara Membuat Kotak Subscribe Keren di Blog

    Kotak langgaran artikel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yang jumlah pengunjungnya cukup tinggi. Kotak langganan ini bisa membantu sekaligus meningkatkan jumlah pembaca.

    Postingan kali ini, kita akan membahas cara pembuatan kotak langganan dengan bentuk yang keren. Sebelumnya, kita pernah juga membuat kotak langganan serupa namun bentuk yang sederhana.

    Kotak Subscribe yang akan kita buat kali ini modelnya seperti berikut:

    Kotak Subscribe Keren di Blog


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


    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
    Kotak Subscribe Keren di Blog
    • 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: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('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: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('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="my-seven7ash" >

    <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=my-seven7ash', '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="my-seven7ash" 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/my-seven7ash" target="_blank">RSS Feed</a> </li>
    <li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/HikmahtullahA"  target="_blank">Twitter</a> </li>
    <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=

    https://plus.google.com/103818916210255691138/posts target="_blank">Google Plus</a> </li>
    </ul>
    </div>
    </div>
               
    • Pada script diatas, perhatikan yang ditandai warna merah. Ganti dengan alamat FeedBurner Anda.
    • Tulisan yang ditandai Hijau ganti dengan alamat Twitter dan Google Plus Anda.

    Jika telah di simpan maka, hasilnya akan nampak seperti gambar diatas. 




    Terima Kasih Telah Membaca Artikel : Cara Membuat Kotak Subscribe Keren di Blog
    Add a Comment. Read Comment Policy ▼
    Please Note
    - No live link
    - Pergunakan bahasa baku dan tanpa singkatan serta sesuai dengan topik pembahasan
    - Komentar yang relevan akan saya balas dan kunjung balik secara otomatis (tanpa meminta)
    - Tekan "subscribe by email" untuk mengetahui balasan dari saya
    - Untuk mendapatkan BACKLINK, gunakan OpenID. Baca --> Cara mengaktifkan OpenID

    No comments:

    Post a Comment

    + Follow
    Join on this site

    with Google Friend Connect

    COPYRIGHT

    Seluruh artikel atau konten yang ada di blog MY-SEVEN7ASH ini sifatnya adalah Open Source.

    Artinya, Anda boleh mengcopy sebagian artikel yang ada di blog ini, tapi kami mohon untuk tidak melakukan copy paste melalui feeds (xml) karena itu bisa menghancurkan blog ini.

    Mencantumkan sumber atau tidak itu merupakan hak Anda.
    back to top