Cara Membuat Widget Kotak Berlangganan / Feedburner Keren di Blog

Haloo sobat Joa! Kali ini Joa akan share tentang salah satu tips ngeblog. Kamu bisa menampilkan kolomkomentar yang keren, atau berbeda dari biasanya. Adapun dari bawaan bloger, namun Joa rasa kolom berlangganan tersebut lumayan menyita loading blog. Berputar-putar terlebih dahulu, barulah akan tampil. Itu juga hanya bertampilan simpel, tidak sekeren yang akan joa bagiin ini. hehe. Jika penasaran, beginilah tampilannya sob.

Screenshot

Cukup keren kan sob ? Hehe. Langsung aja ke tutorialnya.

1. Masuk dulu ke akun blogger sobat.

2. silahkan masuk ke Tata Letak > Tambah Gatget. Letaknya dimana saja bisa, tergantung sobat mau memasangnya dimana.

3. Kemudian copy dan pastekan kode dibawah ini.

<div class='widget enews-widget' id='enews-ext-2'>
<div class='widget-wrap'>
<div class='enews'>
<h4 class='widget-title widgettitle'>BERLANGGANAN LEWAT EMAIL</h4>
<form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=JoeAzkha', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>Gunakan Email sobat untuk lebih mudah menerima informasi tentang Postingan terbaru dari Blog ini.</p>
<input type='text' name='email' placeholder='Tulis Email Sobat di Sini...'/>
<input type='hidden' value='Blog-Plazzasoft' name='uri'/>
<input type='hidden' name='loc' value='en_US'/>
<input type='submit' value='Subscribe'/>
</form>
</div>
</div>
</div>

<style type='text/css'>
.enews-widget {background-color:#252525;color:#FFF;padding:20px !important;margin-top:10px}
.enews-widget h4 {font:17px/18px 'Oswald',Arial;margin:0 0 20px 0}
.enews .screenread {height:1px;left:-1000em;overflow:hidden;position:absolute;top:-1000em;width:1px}
.enews-widget input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#FFF;border:2px solid #FFF;color:#333;padding:9px 11px;width:100%}
.enews-widget input[type="submit"] {font:16px/20px "Oswald",Arial;background-color:#01AEFF;color:#FFF;margin:0;width:100%;border:none;cursor:pointer}
.enews-widget input[type="submit"]:hover {background-color:#0173B2}
</style>

Note : Ganti JoeAzkha dengan akun / username feedburner kamu sob.

4. Simpan, dan lihat hasilnya.

Share :

Tweet

More

Related Post