Memasang Kotak Berlangganan Simple plus Media Sosial di Sidebar Blog

Baca Juga

Cara Memasang Kotak Berlangganan Simple plus Media Sosial di Sidebar Blog

WIDGET Kotak Belangganan (Subscription Box) plus Media Sosial berikut ini mirip dengan kotak berlangganan plus sosmed yang sudah dishare sebelumnya.

Tampilannnya sedikit berbeda, namun sama-sama efisien dan simple. Widget kotak berlangganan posting blog plus media sosial ini menghemat ruang di sidebar blog. Ini penampakannya:

Lihat DEMO

Selain kotak berlangganan yang pengirimannya dilakukan otomatis oleh Google Feedburner, tampak ada ikon dan link akun media sosial Facebook, Twitter, Google Plus, Linkedin, dan RSS Feeburner sekaligus di bawahnya.

Sebelum memasang kotak berlangganan ini, pastikan Anda sudah punya Feedburner ID. Jika belum punya, silakan dapatkan dan daftarkan blog Anda ke Feedburner.

Demikian pula akun media sosial lainnya. Anda harus punya dulu, termasuk Linkedin yang merupakan akun media sosial para profesional.

Cara Pasang Kotak Berlangganan Simple plus Media Sosial

1. Klik "Layout" (Tata Letak) > Add a Gadget
2. Judul widget boleh diisi, boleh juga kosongkan.
3. Copas kode berikut ini di kolom Content:

<style>
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css">
<div class="tbisubscribe">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Get Free Updates in your Inbox</div>
<div style="color: #666666; font-weight: bold; font: 11px Oswald, cursive; margin: 0px 0px 10px 15px;">
Receive Quality Posts Straight in your Inbox   by submitting your Email ID below</div>
<div style="margin: 10px 0 0 6px;">
<!--Subscription Box-->
<br>
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="contohblognih">
<input name="loc" type="hidden" value="en_US">
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email...">
<input alt="" class="tbisubmit" title="" type="submit" value="Subscribe">
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us on:</div>
<div style="margin: -32px 0 0 120px;">

<!--Facebook URL-->
<a href="http://www.facebook.com/cbblogger" target="_blank" title="Join us on Facebook"><img alt="facebook" src="http://3.bp.blogspot.com/-ChHaXU5VfIE/UJkIg5tptTI/AAAAAAAABEg/kzXjQ2QxEPo/s1600/facebook.png"></a>

<!--Twitter URL-->

<a href="http://www.twitter.com/username" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="http://3.bp.blogspot.com/-aG-POFOiBHc/UJkIkayVTGI/AAAAAAAABE4/hhun4Hjaudw/s1600/twitter.png"></a>

<!--Google+ URL-->

<a href="https://plus.google.com/106869251529186655236" rel="author" target="_blank" title="Follow us on Google+"><img alt="gplus" src="http://2.bp.blogspot.com/-gxpckVUYzWI/UJkIh5kHQ5I/AAAAAAAABEo/IlR9Bt-FVBE/s1600/googleplus.png"></a>

<!--LinkedIn URL-->
<a href="http://www.linkedin.com/in/cbblogger" rel="nofollow" target="_blank" title="Follow us on LinkedIn"><img alt="linkedin" src="http://1.bp.blogspot.com/-c7m7fLXHewI/UJPaWsVTZ6I/AAAAAAAAA-M/uvdMMglb8fE/s1600/linkedin-circle-2.png"></a>

<!--RSS URL-->
<a href="http://feeds.feedburner.com/contohblognih" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="http://4.bp.blogspot.com/-aN0dAN4mIno/UJkIje-dmSI/AAAAAAAABEw/gyK0zwpvjdE/s1600/rss.png"></a>
</div>
</div>
<!-- End -->

4. Ganti tulisan merah dengan kepunyaan Anda.
5. Save!

Kini Kotak Berlangganan Simple plus Media Sosial sudah terpasang di Sidebar Blog Anda. Good Luck! (http://www.contohblog.com).*

Sumber