Cara Membuat Widget Berlangganan Artikel ala KalongGanteng di Blogger

Author : UnknownTidak ada komentar

Cara Membuat Widget Berlangganan Artikel keren ala KalongGanteng di Blog/Blogger | Widget pada blogger sangat bermanfaat untuk mempercantik tampilan blog, menjadikan lebih SEO serta meningkatkan visitor blog. Salah satu widget blogger yang akan kita bahas kali ini adalah widget berlangganan email. Tak jarang para blogger berbagi/share widget ini yang kebanyakan sama namun kali ini saya akan share widget berlangganan via email ala KalongGanteng (blog saya).

Sebenarnya saya juga ambil css-nya dari berbagai blog yang share namu saya modifikasi sehingga menjadi lebih simple, sesuai warna blog serta enak dipandang. Untuk lebih jelasnya dapat sobat lihat pada screenshot widget berlangganan via email ala KalongGanteng berikut ini.

Widget Berlangganan Artikel ala KalongGanteng

Cara Pemasangan

1. Pastikan sobat sudah Sign in ke Blogger

2. Pilih Tata Letak

3. Tambahkan widget seperti biasa Tambahkan Gadget=>HTML/JavaScript=>Masukkan code dibawah ini kemudian Simpan.

<style>
#sidebar-subscribe-box{width:280px;border:0px solid #aaa;border-radius:3px;padding:3px 3}
.sidebar-subscribe-box-wrapper{background:none) repeat scroll 0 0 #f7f7f7;color:#fff;font-size:16px;line-height:17px;padding:0px 0px 0px;text-align:center;text-transform:uppercase} 
.sidebar-subscribe-box-form{clear:both;display:block;margin:15px 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwGsup7mg0OOiXw1pyhn9f4EewdfPgcpVIrH96azHQlz6YobT1teI4Qg9tV_m-X12ljjqPLQj2LM3391t6t7rAqSlluV6tDq41QdU9_i6Ycu0GM5BxJvkV0BxhbWsMO4V2rfwkjbGZDTQ/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 13px;padding:10px 43px;width:68%}
.sidebar-subscribe-box-email-button{background:#5da8b4;border:1px solid #4699a6;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:#4699a6} 
.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"> 
<p>Langganan Artikel via Email di (Nama Blog Anda)</p> 
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=KalongGantengBlog" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KalongGantengBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="KalongGantengBlog" /> <input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="MASUKKAN EMAIL UNTUK BERLANGGANAN"/> <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="DAFTAR SEKARANG!" />
</form>
<p align="center">
<p><a href="http://feeds.feedburner.com/KalongGantengBlog"><img src="http://feeds.feedburner.com/~fc/KalongGantengBlog?bg=4699a6&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="Subscriber KalongGanteng" /></a></p>
</p>
</div></div></div>

Kostumisasi

Ganti kode FeedCount berikut dengan milik sobat

<p align="center">

<p><a href="http://feeds.feedburner.com/KalongGantengBlog"><img src="http://feeds.feedburner.com/~fc/KalongGantengBlog?bg=4699a6&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="Subscriber KalongGanteng" /></a></p>
</p>

Ganti URL FeedBurner (diblok warna biru) dan ID FeedBurner (diblok warna kuning) milik sobat

<form action="http://feedburner.google.com/fb/a/mailverify?uri=KalongGantengBlog" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=KalongGantengBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="KalongGantengBlog" /> <input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="MASUKKAN EMAIL UNTUK BERLANGGANAN"/> <input class="sidebar-subscribe-box-email-button" title="" type="submit" value="DAFTAR SEKARANG!" /></form>

Ganti kode warna background Botton "DAFRTAR SEKARANG" sesuai warna blog sobat

.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#4699a6}

*note: Ganti warna backgound widgetnya jika anda menghendaki, karena saya jadikan none (tidak ada backgound)

.sidebar-subscribe-box-wrapper{background:none) repeat scroll 0 0 #f7f7f7;color:#fff;font-size:16px;line-height:17px;padding:0px 0px 0px;text-align:center;text-transform:uppercase}

Semoga berhasil dan dapat membantu :D.