Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting Blog

Cara membuat, memasang, memunculkan, atau menampilkan kotak berlangganan (RSS Subscription Box) plus akun Media Sosial Facebook, Twitter, dll. di bawah setiap posting blog sangat mudah.

Fungsi Kotak Subscription plus Media Sosial ini bisa meningkatkan follower jaringan sosial yang pada giliranya bisa membantu meningkatkan trafik pengunjung blog.

 Kotak Subscription plus Media Sosial


Cara Memasang Subscription Box di bawah Postingan Blog:
  1. Login ke dashboard blogger.
  2. Klik menu "Template" > klik "Edit HTML"
  3. Cari (Ctrl+F) kode <div class='post-footer-line post-footer-line-1'>
  4. Copas kode berikut ini di bawah kode tersebut. Ganti huruf yang berwarna merah dengan kepunyaan Anda.
<style>
.wc-subboxv2{
float:left;
width:500px;
padding:10px;
border:1px solid #ccc;
color:#444444;
background-color:#fff; 
margin:25px auto;
font-family:Droid Sans;
-webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
-moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
}
ul.wc-subboxsoc{
list-style:none;
margin-top:30px;
overflow:hidden;
}
.wc-subboxsoc img
{
margin-left:-20px;
height:50px;
margin-top:6px;
}
.wc-subboxsoc li{
float:right;
background:none !important;
padding:0 !important;
margin:0 8px;
}
.wc-subboxbutton{
background:#f8f8f8;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.wc-subboxbutton:hover{
background:#f0f0f0;
text-decoration:none !important;
}
.wc-subboxemail{
clear:both;
width:250px;
margin:10px 0;
float:left;
}
.wc-subboxemail h4
{
font:16px georgia, arial, verdana;
}
.wc-subboxemailform{
position:relative;
width:250px;
margin:0 auto;
}
.wc-subboxinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;border:1px solid #ddd;
-webkit-border-radius:4px;-moz-border-radius:4px;
border-radius:4px;font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.wc-subboxbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;
border-top-left-radius:0px;border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.wc-subboxbutton{
padding:8px !important;
}
.wc-subboxemailform, .wc-subboxinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div class='wc-subboxv2'>
<div class='wc-subboxemail'>
<h4 style='text-align:center;'>Get Free Updates in your Inbox</h4>
<form action='http://feedburner.google.com/fb/a/mailverify' class='wc-subboxemailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=contohblognih&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='contohblognih'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='wc-subboxinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
 <input class='wc-subboxbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
<ul class='wc-subboxsoc'>
<li>
<a href='http://feeds.feedburner.com/contohblognih'><img src='http://2.bp.blogspot.com/-IXJ5WpaZllc/UiIRkBdgE0I/AAAAAAAACUQ/H41RlpEwkSU/s1600/rss.png' title='Subscribe us'/></a>
</li><li>
<a href='https://twitter.com/contohblog'><img src='http://1.bp.blogspot.com/-TD3jCs_IZcg/UiIRjnuFRyI/AAAAAAAACUA/9ZYp0awI3Ss/s1600/twitter.png' title='Follow us'/></a>
</li><li>
<a href='https://www.facebook.com/cbblogger'><img src='http://1.bp.blogspot.com/-XtMSvGt9QbM/UiIRj_Z-xkI/AAAAAAAACUE/lxKPo9uepx4/s1600/facebook.png' title='Like us'/></a>
</li><li>
<a href='https://plus.google.com/106869251529186655236/posts'><img src='https://lh4.googleusercontent.com/-l6tB4HfZcfY/UjdItwk9-7I/AAAAAAAACW4/iHklkLWO_Fs/h120/google.png' title='Circle us'/></a>
</li>
</ul>
</div>
</b:if>


5. Save Template!

Selamat! Blog Anda sudah Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting yang bisa meningkakan like, follower, dan subscriber serta jumlah pengunjung.

Jika Anda ingin menampilkan kotak berlangganan di sidebar, seperti punya CB ini, maka simak panduannya di posting cara membuat kotak berlangganan di sidebar blog.

Sumber

Labels: Desain Blog
2 Komentar untuk "Menampilkan Kotak Subscription plus Media Sosial di Bawah Posting Blog"

terima kasih mas..bagi toturial ini..

Ok bro, thanks infonya. bisa dicoba ini nanti, . .

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *