Membuat Subscription Box Dengan Social Media Buttons Dibawah Postingan Blogger

Dalam Posting ini membahas Cara Membuat Subscription Box Keren Dengan Social Media Buttons Dibawah Postingan Untuk Blogger. Mungkin kalian sudah banyak menjumpai beragam script untuk membuat Subscription Box. Buat kalian yang mengunjungi postingan ini kalian bisa menggunakan script dibawah untuk Blog kesayangan kalian.

Pertama tama Kalian harus menggunakan layanan Google Feedburner untuk Feed Blog kalian, Jika kalian sudah menggunakan Google Feedburner lanjutkan untuk mengaktifkan email subscription pada menu Publicize atau bisa lihat gambar dibawah

Salah satu Keuntungan Jika kalian mempunyai banyak Subscriber, kalian bisa mendapatkan banyak traffic untuk blog anda.Ok langsung saja Masuk ke Blogger- Template- Edit HTML.

lalu cari kode berikut (ctrl+f) <data:post.body/>

bisa diperhatikan kalian pasti akan banyak menjumpai code diatas pasang dibawah kode pertama
tergantung template blog yang kalian pakai.

<!--Feedburner Subscribtion Box-->
<style>
@import url(http://fonts.googleapis.com/css?family=Electrolize);
#cc-subs-box {
width: auto;
color: #333;
padding: 15px;
overflow:hidden;
clear:both;
background: #f7f7f7 url('http://1.bp.blogspot.com/-2PX6swbrRKk/VIarN8qIZXI/AAAAAAAAJx4/EWR6HO5hQAg/s1600/rss-feed-submission.gif') no-repeat left top;
background-size: 50px;
border: 1px solid #dddddd;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
}
h2#cch2 {
font-family: Electrolize , Arial, sans-serif;
color: #333;
text-align:center;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-o-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
-moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
margin:0;
font-size:24px;
}
.social-left {
width: 40%;
float: left;
margin-top: 20px;
}
.social-left img {
width: 32px;
position: relative;
top: 1px;
margin:0;
}
.social-left img:hover {
top: -1px;
position:relative;
}
.subscribe-right {
float:right;
width: 60%;
margin-top: 20px;
}
#thebutton {
background:#DF6001;
border:1px solid #B63C00;
color:#FFF;
cursor:pointer;
font-size:15px;
font-weight:700;
margin-top:0;
width:auto;
padding:5px 2px;
font-family: Electrolize , Arial, sans-serif;
}
#thebutton:hover {
background:none repeat scroll 0 0 #B63C00;
}
#thebox {
padding:6px 24px;
background: #fff url('http://2.bp.blogspot.com/-v5h4oiQZCYM/VIXBUFCbDEI/AAAAAAAAJxY/_wNsrurCw70/s1600/email_go.png') no-repeat right center;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
border: 1px solid #ddd;
font-family: Electrolize , Arial, sans-serif;
font-size:14px;
}
#thebox:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
border: 1px solid rgba(81, 203, 238, 1);
}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<div id='cc-subs-box'>
<h2 id='cch2'>Subscribe For Free Email Updates!</h2>
<div class='social-left'>

<a href='http://feeds.feedburner.com/imadenews' rel='nofollow' target='_blank' title='RSS feed'><img src='http://4.bp.blogspot.com/-isD36AwLWVs/VIW73aE7tTI/AAAAAAAAJw4/1VSW29j5LzY/s1600/Rss.png'/></a>
<a href='http://www.facebook.com/imadenews' rel='nofollow' target='_blank' title='Find Us On Facebook'><img src='http://3.bp.blogspot.com/--fxsEdbxN8Y/VIW72mQ8-qI/AAAAAAAAJwo/XP-GZFgaxPk/s1600/Facebook.png'/></a>
<a href='http://twitter.com/suryadewa' rel='nofollow' target='_blank' title='Follow me on Twitter'><img src='http://3.bp.blogspot.com/-OKlvuXPMKWg/VIW74RqM4dI/AAAAAAAAJxA/bbh-zaRaJmI/s1600/Twitter.png'/></a>
<a href='https://www.youtube.com/user/TheSuryadewa' rel='nofollow' target='_blank' title='Subscribe To Our YouTube Channed'><img src='http://4.bp.blogspot.com/-IQqLu-vlCQk/VIW75H8_YOI/AAAAAAAAJxE/3WjZe56lct8/s1600/Youtube.png'/></a>
<a href='http://plus.google.com/+Imadenews' rel='nofollow' target='_blank' title='Find Me On G+'><img src='http://2.bp.blogspot.com/-G4DwVSvFBv8/VIW72ysVp3I/AAAAAAAAJws/rgyErnsOheg/s1600/GooglePlus.png'/></a>
</div><!--Social Left-->
<div class='subscribe-right'>
<!--The Subscribtion Box-->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=imadenews" , "popupwindow", &quot;scrollbars=yes,width=550,height=520&quot;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='imadenews'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput' id='thebox' 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 id='thebutton' type='submit' value='Subscribe'/>
</form>
</div><!--Subscribe Right-->
</div><!--cc-subs-box-->
</center>
<!--End Of All-->
</b:if>

Ingat Pastikan kamu mengganti code diatas dengan medsos kamu masing masing dan ganti feedburner punya kamu.

http://feeds.feedburner.com/imadenews
http://www.facebook.com/imadenews
http://twitter.com/suryadewa
https://www.youtube.com/user/TheSuryadewa
http://plus.google.com/+imadenews
http://feedburner.google.com/fb/a/mailverify?uri=imadenews
dan juga value imadenews

Note: Post Body Template kalian harus 580px keatas jika dibawah itu tidak akan tampil maksimal seperti di screnshot 🙂