Widget Email Subscription dan Akun Media Sosial Keren Nih!

Baca Juga

Widget Email Subscription yaitu "formulir" bagi user untuk membaca update blog kita lewat inbox emailnya. Istilahnya, "berlangganan posting", gratis! Akun Media Sosial "wajib" dipasang di blog biar user bisa follow, like, atau join akun sosmed kita.

Banyak keuntungan dengan memasang Email Subscription Widget ini. "Formulir" yang menarik bukan saja mempercantik blog, tapi juga bisa menarik minat dan perhatian pengunjung. Makin banyak "pelanggan", makin bagus buat blog --berpengaruh pada ranking Google.

CB menemukan Widget Email Subscription dan Akun Media  Sosial yang keren di Bloggik.  Widget ini layak Anda coba dan jika suka, pasang saja di sidebar blog Anda. Ini penampakkannya:

Cara memasangnya sangat mudah:
1. Di Blogger Dashboard > Klik Layout > Add a Gadget > pilih HTML/Javascript Box.
2. Copy + Paste kode berikut ini di kotak "HTML/Javascript" tadi.

<style>
body {
color: #434343;
font: 12px/20px Arial,Helvetica,sans-serif;
}
#sidebar .widget {
background-color: #F5F5F5;
margin: 15px 0;
padding: 4px;
position: relative;
}

#sidebar .widget .head {
text-shadow: 0 1px 0 #FFFFFF;
}
#sidebar .widget .box {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_Q30GOvZ-mqWFzS_NL7g07NeO9wZlVxWHsoKo7pZ-6bTtjOVF4fADoFv07XG1LpOTRFLctIDroV0yvgQ2bY6D1Eg-2Ud-I1bqr02Ama1kgZyY1z_v0Hy6Ql82GUH9zKFkCsVCWJi9uM/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
padding: 8px;
}
#sidebar .widget .box-out {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
padding: 1px;
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
#sidebar .widget .box {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_Q30GOvZ-mqWFzS_NL7g07NeO9wZlVxWHsoKo7pZ-6bTtjOVF4fADoFv07XG1LpOTRFLctIDroV0yvgQ2bY6D1Eg-2Ud-I1bqr02Ama1kgZyY1z_v0Hy6Ql82GUH9zKFkCsVCWJi9uM/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
padding: 8px;
}
.clearfix {
display: block;
}
.clearfix {
display: inline-block;
}
.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
line-height: 0;
visibility: hidden;
width: 0;
}
.email_rss {
border-bottom: 1px solid #E5E5E5;
margin-bottom: 5px;
position: relative;
}
.social_links, .email_rss {
padding: 5px 0 10px;
width: 100%;
}
.clearfix {
display: block;
}
.fan_box {
background-color: #F5F5F5;
margin: 15px 0;
padding: 4px;
position: relative;
}
.fan_box .full_widget {
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
}
.fan_box .full_widget .connect_top {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_Q30GOvZ-mqWFzS_NL7g07NeO9wZlVxWHsoKo7pZ-6bTtjOVF4fADoFv07XG1LpOTRFLctIDroV0yvgQ2bY6D1Eg-2Ud-I1bqr02Ama1kgZyY1z_v0Hy6Ql82GUH9zKFkCsVCWJi9uM/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
padding: 8px;
}
.fan_box .full_widget .connections {
background-color: #FFFFFF;
border-bottom: 1px solid #E5E5E5;
padding: 5px 1px 1px;
}
.fan_box .full_widget .connections_grid {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz_Q30GOvZ-mqWFzS_NL7g07NeO9wZlVxWHsoKo7pZ-6bTtjOVF4fADoFv07XG1LpOTRFLctIDroV0yvgQ2bY6D1Eg-2Ud-I1bqr02Ama1kgZyY1z_v0Hy6Ql82GUH9zKFkCsVCWJi9uM/s1600/sidebar_bg.png") repeat-x scroll left bottom transparent;
padding: 6px;
}
.fan_box .full_widget .connections .total {
margin: 4px 0 4px 8px;
}
.fan_box .profileimage {
background-color: #FFFFFF;
border: 1px solid #E5E5E5;
display: inline;
margin-right: 10px;
padding: 5px;
}
.fan_box .full_widget .connections_grid a img {
border: 1px solid #FFFFFF;
}
.fan_box .full_widget .connections_grid a img:hover {
border: 1px solid #000000;
}
.social_links, .email_rss {
padding: 5px 0 10px;
width: 100%;
}
.social_links a {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii8dLqubn3-VoGJimTk68XTgGSe9egZ5LuXuFL0H-m5xkV2JQwQubUiIv78qnS239WfqJLclkisBJeUd_YU9cUYDmeWDKBuE2TdE_knDgczupKosoZvEeABlV81y7JvUEmljKRBgqqnm0/s1600/social.png");
background-repeat: no-repeat;
color: #999999;
display: inline;
float: left;
font-size: 11px;
margin-bottom: 0;
padding-top: 45px;
text-align: center;
text-decoration: none;
width: 67px;
}
.social_links a:hover {
color: #000000;
text-decoration: underline;
}
a#side_fb {
background-position: -173px 0;
}
a#side_tw {
background-position: -81px 0;
}
a#side_rss {
background-position: 8px 0;
}
a#side_email {
background-position: -267px 0;
}
#geek {
background: url("4.bp.blogspot.com/-JJL5i3WAtEA/UDip4G3DxhI/AAAAAAAAF7A/fa1vmnxMt38/s1600/social.png") no-repeat scroll -387px -363px transparent;
bottom: -1px;
display: block;
height: 117px;
position: absolute;
right: -22px;
text-indent: -9999em;
width: 94px;
}
.email_rss {
border-bottom: 1px solid #E5E5E5;
margin-bottom: 5px;
position: relative;
}
.email_rss span {
font-size: 11px;
}
#subscribe-form {
margin-top: 5px;
}
#subscribe-form #newsletter {
border: 1px solid #CCCCCC;
padding: 5px;
width: 150px;
}
#subscribe-form #newsletter:focus {
background-color: #F5F2D3;
border: 1px solid #000000;
}
#subscribe-form .btn {
background-color: #7EB4CF;
border: 1px solid #2F6A89;
box-shadow: 3px 3px 0 #6DA5C1 inset, -3px -3px 0 #6DA5C1 inset;
color: #FFFFFF;
cursor: pointer;
display: inline;
float: right;
font-size: 12px;
font-weight: 900;
line-height: 12px;
padding: 5px 8px;
position: relative;
text-shadow: 0 1px 0 #000000;
z-index: 999;
}
#subscribe-form .btn:hover {
background-color: #4E9CC4;
}
#subscribe-form span {
background-color: #F5F5F5;
display: inline;
float: left;
margin-right: 10px;
padding: 3px;
}

h3 {
font-family: MgOpenModata;

font-weight: 400;
}
#sidebar .widget .head p {
color: #999999;
font-size: 11px;
line-height: 15px;
padding: 0;
}
</style>

<div id="counter" class="widget">
<div class="inner clearfix">
<div class="box-out">
<div class="head box">
<h3>Subscribe</h3>
<p>Subscribe to and follow bloggiks to get the latest updates.</p>
</div>
</div>
<div class="side_cont box-out clearfix">
<div class="box clearfix">
<div class="email_rss clearfix">
<span>Sign up for bloggiks news sent to your inbox</span>

<form id="subscribe-form" class="clearfix" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri='contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input id="newsletter" class="txt" type="text" name="email"/><input type="hidden" value="contohblognih" name="uri"/><input type="hidden" name="loc" value="en_US"/><input class="btn" type="submit" value="Subscribe" /></form>
</div>

<div class="social_links clearfix">
<a id="side_fb" class="png_bg dysocial" rel="nofollow" title="Join Us on Facebook" href="Facebook page URL" >Facebook</a>

<a id="side_tw" class="png_bg dysocial" rel="nofollow" title="Follow Us on Twitter" href="Twitter URL" >Twitter</a>

<a id="side_rss" class="png_bg dysocial" rel="nofollow" title="Subscribe to via RSS" href="RSS URL" >RSS</a>

<a id="side_email" class="png_bg dysocial" rel="nofollow" title="Subscribe via Email RSS" href="http://feeds.feedburner.com/contohblognih">Email</a>

</div>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:290px;">
<a style="color:#D3D3D3;" href="http://contohblognih.blogspot.com">cb widget</a></span>
</div>
</div>
</div>
</div>

3. Jangan lupa, ganti teks warna merah dengan versi Anda.

4. Save!

Jika mau yang lebih sederhana, tapi tak kalah cantik dan keren, gunakan seperti yang CB pake di sidebar. Ada di posting ini > Cara Memasang Kotak Email Subscribe.

Butuh bantuan? Just leave a comment with OpenID Blogger Comment! Jangan "nyepam" dan link hidup tidak akan muncul...!

Good Luck and Happy Blogging!