Skip to content Skip to sidebar Skip to footer

Cara Memasang Tombol 'Subscribe Now' keren

Assalamu'alaikum Wr. Wb. sobat Fakhrie.

Selamat malam Indonesia. Kali ini saya akan memberikan tutorial memasang widget 'Subscribe Now' dengan tampilan keren. Sesuai namanya, widget ini berfungsi agar para pengunjung dapat berlangganan artikel di blog sobat melalui e-mail.

Penampakannya seperti ini :

Oke, langsung saja ke Tutorialnya.

Langkah Pertama : Masuk Tab Tata Letak > tambah gadget *untuk lebih lengkap, silahkan baca artikel Cara Menambahkan Widget HTML/JavaScript pada Blogger*
Langkah Kedua : Copy kode dibawah ini :
<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBYJ1yOVFbsJfG99db-pyGN-tziIcvU6_vh2qNZZ8AmYJfIE4lANK2xeHODltQ0Wx33h_TNOqfyAjupeknl8_r1RAa8SdoyY05Wk6RajSu8k6ezAem81Jz3bKqLZn_oj2SxCJ3DlEvvpFE/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs61YpdqspzzJXJCRDhbq0UU3XGvuviQtBQHpAzwGu9I_WUBZoLiED4O7N9uPeVcaRkulfT6y4DRARGSvkNMnyoZiVqikFzsnsZSUC6TrJSvJyWkieT1BDoBR8s2gLTwI9l7qrSE6_OEik/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 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/AVvXsEjRLsdobkKR7TPyw16CMLnLY-9AbrexWY132b51R_zKT_IK56qAWcuEN-WJGg5VEQNTtDEWCupVAb8XFe66bmsecPa3zlr-G65H4i4yqvj9kZ87U1TCR4SpBpMsTmShajYIRd6HCwKutyS7/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;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:#1ca4ff}.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{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYakJlEOXgKSlX1StI6qEK4XYEa7w54MAcCHj3ziAoYKtuyRH8NgETU0y12obfE4npI6DSmqGLt_67-86DcYYy5zwb754-gg1t1dNG1mYE-ZdtvmIkfhnA2AMkW1rRlGaGjq-H-ygW2U7d/s0/bg-pattern.png) repeat top left;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%}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Ingin mendapatkan update artikel terbaru dari kami? Silahkan masukkan email anda dibawah sini</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=BlogKangFakhrie" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogKangFakhrie', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="BlogKangFakhrie" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
<p align="center"><p><a href="http://feeds.feedburner.com/BlogKangFakhrie"><img src="http://feeds.feedburner.com/~fc/BlogKangFakhrie?bg=0099FF&amp;fg=444444&amp;anim=0" height="26" width="88" style="border:0" alt="" /></a></p></p>
</div></div>
Note : - Yang Berwarna Biru merupakan pesannya, silahkan di ubah sesuai keinginan sobat. 
           - Yang berwarna Merah merupakan ID feedburner, silahkan di ganti dengan ID feedburner sobat.

Langkah Ketiga : Letakkan kode tersebut di kolom HTMLnya
Langkah Keempat : Klik 'Simpan'

Mungkin itu saja artikel kali ini, kurang lebihnya mohon maaf, wassalamu'alaikum Wr. Wb.
Muhammad Nur Wahid Fakhrudin
Muhammad Nur Wahid Fakhrudin Seseorang yang ingin berbagi tulisan tentang blog, desain, dan geologi.