Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Memasang Widget Keren Berlangganan Artikel Via FeedBurner

Dengan memasang widget berlangganan artikel kita dapat mempermudah pengunjung yang ingin menjadi pembaca langganan artikel-artikel Blog kita agar dapat mendaftarkan email mereka langsung di halaman Blog tanpa harus membuka halaman Feed. Tidak lupa juga saya ingatkan bahwa untuk memasang fasilitas tersebut terlebih dahulu kamu harus mendaftarkan Blog ke Google FeedBurner.

Saya telah memberikan simple widget berlangganan artikel dari feedburner agar kamu dapat memberikan fasilitas tersebut kepada pengunjung. Namun sesuai dengan namanya yang saya berikan yaitu "Simple Widget" mungkin ada yang menganggap widget ini terlalu sederhana. Nah, bagi kamu yang tidak begitu suka dengan tampilan sederhana ini, saya akan memberikan beberapa Widget Keren Berlangganan Artikel Via FeedBurner. Silakan simak baik-baik langkah memasangnya.

Widget Berlangganan Artikel Keren

Memasang Widget Keren Berlangganan Artikel Via FeedBurner

  • Login pada akun Blogger kamu.
  • Pada Blog yang akan kamu pasang widget, masuk ke bagian Tata Letak.
  • Klik Tambahkan Gadget pada posisi yang kamu inginkan.
  • Pilih Widget dengan HTML/Javascript.
  • Pilih satu dari beberapa contoh widget yang saya berikan di bawah ini kemudian salin scriptnya.
Widget Berlangganan Artikel Keren

Silakan ganti tulisan b-tutorial dengan ID FeedBurner Blog kamu.
Sedangkan untuk tulisan berwarna biru bisa kamu ubah sesuai keinginan.

<style>

.form {

border:1px solid #ccc; /* warna garis pinggir form */

background: #ffffff /* warna background form */

padding:3px; /* spasi form */

width:300px; /* panjang form */

height:auto /* tinggi form */

}

.rss {

background: url("http://2.bp.blogspot.com/-jmuQUB4DMqQ/T0c_XbrNFNI/AAAAAAAAANA/MkkIRrGu7Xg/s200/Cara+Submit+Sitemap+Blog+ke+Google+Bing+Mneggunakan+Submit+RSS+3.0.png") no-repeat top right;

}

</style>

<div class='form'>

<div class='rss'>

<div style='font-weight:bold; color:#333333; font-size:15px; padding:10px 5px 5px 10px;'><img alt='small rss b-tutorial' src='http://1.bp.blogspot.com/-FOGTDw0Cxh8/TwXY4E-RYeI/AAAAAAAAAU0/EmR05E07EHc/s1600/small+rss.png' title='RSS Feed'/> <a href='http://feeds.feedburner.com/b-tutorial' rel='nofollow' target='_blank'>LANGGANAN ARTIKEL</a></div>

<div style='font-weight:bold; padding:10px 10px;'>GET UPDATE VIA EMAIL</div>

<div style='padding-left:10px'>Berlangganan artikel via email!</div>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><div style='padding-left:10px; padding-bottom:10px; padding-top:10px'><input name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik email anda disini...&quot;;}' onfocus='if (this.value == &quot;Ketik email anda disini...&quot;) {this.value = &quot;&quot;}' style='width:160px; height:18px' type='text' value='Ketik email anda disini...'/> <input name='uri' type='hidden' value='b-tutorial'/><input name='loc' type='hidden' value='en_US'/><input class='button' type='submit' value='SUBCRIBE'/></div></form>

<div style='padding-left:10px'><p><a href='http://feeds.feedburner.com/b-tutorial' rel='nofollow'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/b-tutorial?bg=FF6600&amp;fg=FFFFFF&amp;anim=1' style='border:0' width='88'/></a></p></div>

</div></div>


Widget Berlangganan Artikel Keren

Ubah tulisan berwarna merah sesuai dengan keterangan pada script.
Ubah b-tutorial dengan ID FeedBurner Blog kamu.
Sedangkan untuk tulisan berwarna ungu bisa kamu ubah sesuai keinginan.

<style>

#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}

 .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}

 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}

 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}

 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}

 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}

 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}

 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}

a.social-icons{margin-right: 5px;height:45px;width:45px;}

a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}

</style>

<div id="sidebar-subscribe-box">

<div class="sidebar-subscribe-box-wrapper">

    <br/>

<a class="social-icons" href="URL-FACEBOOK-PAGE"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Facebook_zps68f4035b.png" /></a>

<a class="social-icons" href="URL-TWITTER"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Twitter_zps433926c5.png" /></a>

<a class="social-icons" href="URL-GOOGLE-PLUS"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Googleplus_zps8404ed17.png" /></a>

<a class="social-icons" href="URL-FEEDBURNER-BLOG"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-RSS_zpsc0214ee8.png" /></a>

<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>

<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="b-tutorial" />

<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>

<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>

</div></div></div>


Widget Berlangganan Artikel Keren

Ganti tulisan b-tutorial dengan ID FeedBurner Blog kamu.
Sedangkan untuk tulisan berwarna biru bisa kamu ubah sesuai keinginan.

<style type='text/css'>#sidebar-subscribe-box{background:url(http://1.bp.blogspot.com/-IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-tUlo5p5gP8o/UBhYciGNgwI/AAAAAAAAFTM/x22pIuNLVPw/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://1.bp.blogspot.com/-JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(http://1.bp.blogspot.com/-n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>

<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>INGIN MENDAPATKAN UPDATE ARTIKEL TERBARU KAMI? SILAKAN MASUKKAN EMAIL ANDA DIBAWAH SINI</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=b-tutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="b-tutorial" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>

<p align="center"><p><a href="http://feeds.feedburner.com/b-tutorial"><img src="http://feeds.feedburner.com/~fc/b-tutorial?bg=0099FF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p></p>

</div></div>

  • Paste script tersebut pada kolom yang disediakan.
  • Terakhir Klik Simpan.
    Pada setiap Widget Keren Berlangganan Artikel Via FeedBurner yang saya berikan, selalu saja kamu harus memasukkan ID FeedBurner Blog kamu. Jika kamu tidak tahu ID FeedBurner pada Blog kamu coba perhatikan url ini: http://feeds.feedburner.com/b-tutorial. Bagian yang bercetak merah merupakan ID FeedBurner.

    Silakan buka halaman Blog kamu dan lihat pada posisi widget dipasang. Kamu telah berhasil memasang Widget Keren Berlangganan Artikel Via FeedBurner. Selain pada posisi ini kamu juga bisa memasang kotak Berlangganan Artikel Via FeedBurner di bawah posting.

    Artikel terkait : Memasang Widget Keren Berlangganan Artikel Via FeedBurner

    Artikel B-Tutorial Lainnya :

    0 komentar:

    Post a Comment

    Copyright © 2014-2016 B-Tutorial - All Right Reserved