Cara membuat widget suscribe

Hai gan ketemu dengan om wavker lagi, yok kita membuat widget suscribe pada blog kita, disini kita membuat dengan sederhana dan mungkin gam...

Hai gan ketemu dengan om wavker lagi, yok kita membuat widget suscribe pada blog kita, disini kita membuat dengan sederhana dan mungkin gampang buat agan terapkan.

Nah kalo fungsinya buat apa ? secara judul nya tentang suscribe yaa jelas berati ketika ada penggunjung menaruhkan email di kotak widget suscribe kita dengan begitu pengunjung bisa mendapatkan hal hal yang baru dari agan melalui email, jadi gak harus pengunjung bolak balik mencari blog kita lagi, Pasti dong paham maksudnya.
cara mebuat wiget suscribe pada blog

Caranya cukup sederhana dengan membuka dashboard bloger agan > Template > Edit HTML > Lalu kita cari kode </style>
Cara agar agan lebih mudah lagi dengan mencari kode </style> agan cuma melakukan pencarian CTRL + F lalu masukan kode </style> Nah setelah itu kita masukan Kode CSS berikut diatas </style>
#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}
#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}
#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}
#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}
.creadit a{color: #A7A6A6; float: right; font-size: 8px
Kalo agan mau menganti warna nya biar cocok dengan kategori blog agan perhatikan tanda "#" dan "angka" nya disana agan bisa menyesuaikan jenis warna apa yang agan inginkan dengan merubah nya, saya juga ada rekomendasi warna dan kode nya silahkan agan baca di artikel saya di sini : "Rekomendasi Warna yang baik"

Oke selajutnya melalui tahap dua dengan kita memasukan kode melalui menu layout Caranya adalah dengan agan masuk ke dashboard bloger > Layout > Add Gadget > Html/Javascript, Nah setelah itu kita msukan kode ke dalam nya, Berikut kode yang akan kita masukan :
<div id="subscribe-box">
<center>
Subscribe for our all latest news and updates</center>
<div class="emailfield">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />
<input name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}" onfocus="if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Email" />
<input name="uri" type="hidden" value="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>
</div>
</div>
<div class="creadit">
<a href="http://www.wavker.xyz/" rel="dofollow" target="_blank"> Get This Widget</a></div>
Keterangan : USER-NAME ganti dengan feedburner milik agan, atau misalnya agan belum tau feed burner caranya mencarinya pun gampang agan cuma melakukan Klik kanan pada tampilan blog agan > lalu kita klik kanan dan klik View Page Info > feed.
Atau agan bisa membuat feedburner nya dengan mudah : https://feedburner.google.com
Nah berikut sedikit tips dari saya widget suscribe untuk blog, bagi agan yang masih binggung silahkan bertanya dan komentar di bawah, terima kasih

Postingan Terkait

0 komentar