Skip to main content
JEJAK UNIK

follow us

Memasang Widget Kotak Berlangganan Artikel (Subscriber Box) Terbaru

Memasang Widget Kotak Berlangganan Artikel (Subscriber Box) Terbaru - sebelumnya kita sudah melihat bagaimana cara memasang blackquote di blog dan pada kesempatan ini kembali saya akan berbagi sebuah widget yang sangat penting dan wajib dipasang pada blog.

Widget subscriber box ini sebenarnya sudah ada di dalam dasbor blogger kita hanya saja entah kenapa widget bawaan blogger tidak begitu disukai dan kebanyakan admin blog lebih memilih untuk memodifikasinya termasuk saya sendiri.

Fungsi utama memasang widget kotak berlangganan artikel via email ini agar pengunjung blog dapat mengetahui dan mendapatkan notifikasi lewat email ketika kita membuat postingan baru. Tentunya ini sangat bagus karena bisa menambah traffic serta pageview pada blog kita.

Memasang Widget Kotak Berlangganan Artikel (Subscriber Box) Terbaru
(Widget Subscriber Box Yang Akan Kita Buat)

Buat sobat yang tertarik memasang widget kotak berlangganan artikel (subscriber box) bisa langsung ikuti langkahnya di bawah ini.

Letakan kode css di bawah ini sebelum ]]></b:skin> atau </style>

#subscribe-box {background-color:#c0d420;color: #fff;padding-top:20px;font-size: 20px;font-weight:700}
#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}
#subscribe-box .emailfield {padding-bottom:2px;margin:10px}
#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:100%;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;}

Jika sudah save template kalian dan masuk ke TATA LETAK lihat gambar di bawah ini

Memasang Widget Kotak Berlangganan Artikel (Subscriber Box) Terbaru

Kemudian masukan kode ini

<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>

Ganti kode tulisan USERNAME dengan USERNAME Anda.

Cara di atas saya asumsikan jika kalian ingin memasang pada sidebar blog. Namun jika ingin memasang kotak berlangganan ini di bawah postingan blog kalian hanya tinggal mencari kode <data:post.body/> dan letakan kode css ke dua di atasnya.

Catatan: 

Biasanya kode <data:post.body/> ada dua atau lebih kalian coba-coba saja karena terkadang struktur template setiap blog tidak selalu sama. Jangan lupa sesuaikan kode CSS di atas jika ingin mengganti warna background kotak berlangganan tersebut.

Sekian ulasan tentang Memasang Widget Kotak Berlangganan Artikel (Subscriber Box) Terbaru, selamat mencoba dan berkreasi.

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar