May 26, 2016

Memasang Kotak Berlangganan Simple plus Media Sosial di Sidebar Blog

May 26, 2016

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:

Kotak Berlangganan Simple plus Media Sosial

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

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

No comments on Memasang Kotak Berlangganan Simple plus Media Sosial di Sidebar Blog

Post a Comment

Contact Form

Name

Email *

Message *