Cara Membuat Widget Langganan Artikel Flat

Cara Membuat Widget Langganan Artikel Flat - Seringkali pengunjung jarang menggunakan bahkan browsing di website, maka dari itu feed burner berkerja sama dengan blogger melalui data rss feednya. Kali ini saya akan membuat tutorial bagaimana cara membuat kotak berlangganan ala flat, dengan design cukup rapi dan ramping. Cara Membuat Widget Langganan Artikel Flat Kotak Langganan Artikel Ala Insatunesia Widget kotak berlangganan ini sudah include dengan rss feed tinggal anda merubah beberapa koding menyesuaikan dengan blog anda. Anda dapat mengatur tata letak widget ini sesuai dengan keinginan anda, untuk meciptakan validasi yang sama dan sesuai di antar kedua browser yang hebat firefox dan chrome, Saya sudah atur sedemikian rupa agar menjadi valid dan tidak ada bagian error dari widget kotak berlangganan ini. Cara Membuat Widget Langganan Artikel Desain Flat : Pastikan anda sudah masuk dan login di blogger.com, kemudian pastekan html ini di gadget tata letak anda.

Daftarkan email kamu, dapatkan berita menarik terkini

Berlangganan Feed Blogger ?

Keterangan : Untuk koding yang berwarna merah anda dapat menggantinya dengan feed anda. Untuk koding yang berwarna orange anda dapat menggantinya blog id anda. Untuk tulisan yang berwarna biru anda dapat menggantinya sesuai dengan keinginan anda. Kemudian tambahkan css ini di b:skin blogger atau tambahkan di atas koding html tersebut. /* Kotak Berlangganan www.insatunesia.com */ .newslatter{margin-bottom:20px;float:left;padding:20px;width:260px;height:165px;background-color:#11B0B0;background-image:url(https://lh5.googleusercontent.com/-Lz8ZtG9obns/VEFBd1q8yAI/AAAAAAAACNw/2f66CdIXYvU/w78-h71-no/latter.png);background-repeat:no-repeat;background-position:20px 40px;position:relative} .newslatter a{color:#fff} .newslatter a:hover{color:#ffd000} .newslatter span{height:auto;width:175px;color:#FFF;position:absolute;margin-left:85px;margin-top:25px;font-size:17px} .newslatter input{position:absolute;border:0;outline:0;padding:5px 10px;border-radius:5px 0 0 5px;margin-top:95px;left:20px} .subscribe-btn{font-weight:700;margin-left:148px;background-color:#FFBF00;border-radius:0 5px 5px 0!important} .subscribe-btn:hover{background-color:#ffd000} Semua css dan html dapat anda atur tapi mohon untuk tidak menghapus credit, saya sangat menghargainya jika anda mau atau berkenan memasang credit widget kotak langganan artikel ini. Jika ada yang perlu dipertanyakan silakan berikan komentar anda. Terima Kasih.

Seringkali pengunjung jarang menggunakan bahkan browsing di website, maka dari itu feed burner berkerja sama dengan blogger melalui data rss feednya. Kali ini saya akan membuat tutorial bagaimana cara membuat kotak berlangganan ala flat, dengan design cukup rapi dan ramping.

Kotak Langganan Artikel Ala Insatunesia

Widget kotak berlangganan ini sudah include dengan rss feed tinggal anda merubah beberapa koding menyesuaikan dengan blog anda. Anda dapat mengatur tata letak widget ini sesuai dengan keinginan anda, untuk meciptakan validasi yang sama dan sesuai di antar kedua browser yang hebat firefox dan chrome, Saya sudah atur sedemikian rupa agar menjadi valid dan tidak ada bagian error dari widget kotak berlangganan ini.

Cara Membuat Widget Langganan Artikel Desain Flat :

Pastikan anda sudah masuk dan login di blogger.com, kemudian pastekan html ini di gadget tata letak anda.

<div class="newslatter">
<span> Daftarkan email kamu, dapatkan berita menarik terkini </span>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=Insatunesia&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true" target="popupwindow">
<input name="uri" type="hidden" value="Insatunesia">
<input name="loc" type="hidden" value="en_US">
<input type="text" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email Anda&quot;;}" onfocus="if (this.value == &quot;Email Anda&quot;) {this.value = &quot;&quot;;}" value="Email Anda"><input class="subscribe-btn" type="submit" value="Subscribe"><a style="margin-top:130px;float:left;" href="http://www.blogger.com/follow-blog.g?blogID=4922750901610850123" target="_blank">Berlangganan Feed Blogger <a href="http://www.insatunesia.com">?</a></a></form>
</div>

Keterangan :
Untuk koding yang berwarna merah anda dapat menggantinya dengan feed anda.
Untuk koding yang berwarna orange anda dapat menggantinya blog id anda.
Untuk tulisan yang berwarna biru anda dapat menggantinya sesuai dengan keinginan anda.

Kemudian tambahkan css ini di b:skin blogger atau tambahkan di atas koding html tersebut.

/* Kotak Berlangganan www.insatunesia.com */
.newslatter{margin-bottom:20px;float:left;padding:20px;width:260px;height:165px;background-color:#11B0B0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEpKeWHoQfPDgQjnKkdzMXYirb8l0Z2pC_jK3iosjGjDOJAFpyXDgj0avSD2ncM3N-_3pRcSjy3gkcXeWRMuMlzsPTdvbxFZfgsckU-tEGlWy1AihaxaNXa-jPDjAWfQXHvVBdleBEHc/w78-h71-no/latter.png);background-repeat:no-repeat;background-position:20px 40px;position:relative}
.newslatter a{color:#fff}
.newslatter a:hover{color:#ffd000}
.newslatter span{height:auto;width:175px;color:#FFF;position:absolute;margin-left:85px;margin-top:25px;font-size:17px}
.newslatter input{position:absolute;border:0;outline:0;padding:5px 10px;border-radius:5px 0 0 5px;margin-top:95px;left:20px}
.subscribe-btn{font-weight:700;margin-left:148px;background-color:#FFBF00;border-radius:0 5px 5px 0!important}
.subscribe-btn:hover{background-color:#ffd000}

Semua css dan html dapat anda atur tapi mohon untuk tidak menghapus credit, saya sangat menghargainya jika anda mau atau berkenan memasang credit widget kotak langganan artikel ini. 

Jika ada yang perlu dipertanyakan silakan berikan komentar anda. Terima Kasih.