sponsored ads

Home » Blogging » Cara Mudah Membuat Floating Berlangganan Email RSS Feedburner

Cara Mudah Membuat Floating Berlangganan Email RSS Feedburner

Posted By : Posted on - 2:51:00 AM with 1 comment

Cara Mudah Membuat Floating Berlangganan Email RSS Feedburner - Rss feed adalah fitur dari blogger untuk memudahkan para pembaca dan pengunjung blog untuk mendapatkan update informasi sebuah blog melalui email. Nah cara ini diyakini para pakar SEO berguna untuk mempertahankan pengunjung blog untuk selalu mengikuti update info yang kita publikasikan sehingga para pengunjung maupun blog setia mengikuti perkembangan blog.

Banyak cara yang bisa dilakukan untuk membuat hal ini tetapi tampilannya kurang menarik apalagi fitur widget bawaan asli dari blogger. Nah yang akan kita bahas kali ini adalah widget pop up yaitu widget layanan langganan email yang melayang di blog dilengkapi dengan tombol close untuk mempermudah menutup widget bagi pengunjung blog yang tidak menginginkan berlangganan email.

Semua orang tahu pentingnya RSS feed ini. Jadi lebih baik untuk memberikan pembaca pilihan untuk berlangganan feed blog Anda melalui email. Dalam widget ini pengunjung dapat berlangganan update harian blog anda via RSS FEED. Berikut adalah cara membuat widget pop up berlangganan email.

Cara menginstal widget langganan rss feddburner
Sebelum Anda mengedit setiap template lebih baik untuk memBackup nya terlebih dahulu, cara bijak untuk mencegah kemungkinan yang tidak diinginkan. Dan jika langkah anda benar maka tampilannya akan seperti dibawah ini:
Cara Mudah Membuat Floating Berlangganan Email RSS Feedburner


1 Masuk akun Dashboard Blogger >> Template >> Edit HTML
2 Cari kode </ head> dalam template Anda berikutnya untuk mempermudah pencarian ketik Ctrl + F.
3 Paste kode berikut sebelum / di atas kode </ head> yang saya sebutkan diatas

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'>
</script>
<script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'> jQuery(document)
.ready(function(){ if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;395px&quot;, height:&quot;435px&quot;, inline:true, href:&quot;#email-popup&quot;});
}});
</script>

4. Langkah selanjutnya Cari kode  ]]></ b:skin> lalu tempatkan kode dibawah ini tepat sebelum atau di atas kode yang saya sebutkan

    #subscriptionwrap {
        width: 600px;
        background: #e9e9e9;
        padding: 15px;
        margin: 14px;
        border: 1px solid #ddd;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        -moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    }

     .subscriptionbox h4 {
        font-size: 30px;
        font-family: 'Verdana', Arial;
        font-variant: small-caps;
        margin: 0 auto;
        text-align: center;
        line-height: 30px;
        color: #333;
        font-weight: 600;
        text-shadow: 1px 1px 5px #333;
        text-decoration: none !important;
    }

     .subscriptionbox p {
        font-family: georgia;
        font-style: italic;
        font-size: 26px;
        text-align: center;
        margin: 0px;
        line-height: 30px;
        margin-top: 25px;
        border-bottom: 1px solid #333;
        color: #454545;
        padding-bottom: 20px;
    }

     .emailbutton1 {
        background: #f7f8f9;
        background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
        border: 1px solid #ddd;
        -webkit-border-top-right-radius: 4px;
        -moz-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        -moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
        color: #888 !important;
        text-shadow: 0 1px 0 #fff;
        line-height: 1.5;
        top: 0px;
        margin: 10px 0 0 -15px;
        cursor: pointer;
        padding: 18px 15px 15px 15px !important;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none !important;
    }

     .emailbutton1:hover {
        background: #f1f1f1;
        background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
        text-decoration: none !important;
    }

     .emailinput1 {
           width: 490px !important;

         height: 37px;    padding-right: 30px !important;
        float: left;
        margin: 10px 0 0 0px;
        padding: 8px 40px 8px 10px;
        border: 1px solid #d2d2d2;
        background: #fff;
        font-family: georgia;
        font-style: italic;
        font-size: 16px;
        color: #949494;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        text-decoration: none!important;
    }

5. Simpan template Anda dan Anda selesai tinggal dua langkah terakhir! Kunjungi blog Anda untuk mengecek widget tersebut bekerja sempurna? jika semuanya bekerja dengan baik maka Ikuti langkah terakhir di bawah ini.
6. Sekarang cari kode berikut ini </ body>
7. Paste kode berikut sebelum tag </ body>.

     <div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to Tips & Cara to enjoy Tips Information</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=sharetipsdancara&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='sharetipsdancara'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
  </div>
  </div>

8. Sekarang Anda perlu membuat perubahan-perubahan dalam kode html.
Mengedit teks yang saya kasih warna merah untuk edit bagian atas kotak input.
Sekarang ganti sharetipsdancara dengan link Email RSS Feedburner Anda. Anda bisa mendapatkannya dengan mengunjungi akun feedburner Anda kemudian arahkan ke Publikasikan dan kemudian ke Email Berlangganan.
Ganti sharetipsdancara dengan judul feed Anda. Ini muncul di akhir link feed Anda. Dalam hal ini akun saya adalah <input name = Jenis 'uri' = 'hidden' value = 'sharetipsdancara' />

9. Simpan template Anda.

G+

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips & Cara
Artikel Terkait Dengan "Cara Mudah Membuat Floating Berlangganan Email RSS Feedburner "

1 comment:

  1. Dimas Rinaldi SDecember 9, 2015 at 1:46 AM

    Admin, mau bikin running text yg kayak di tv itu gimana yah?
    Jadi recent post kita itu yg jadi pengisi running text di blog.

    ReplyDelete

Ketentuan Berkomentar:

1. Menautkan link aktif (anchor text) pada komentar secara otomatis akan kami hapus
2. Gunakan fasilitas Name/URL untuk menempatkan link anda
3. Dilarang berkomentar diluar topik artikel (SARA, pornography, provokasi,promosi produk)
4. Dilarang komentar spam
5. Berkomentarlah dengan baik dan sopan
6. Komentar yang tidak sesuai dengan poin diatas tidak akan dipublikasikan


                                                                                  Admin Tips & Cara

Copyright © 2015 - 2022 Tips & Cara | All Right Reserved | Design by Tips N Cara
Powered by Blogger