Bagaimana Cara Memasang Email Subscription di Bawah Postingan Blog

Setelah kemarin saya sempat memposting sebuah artikel tentang bagaimana cara membuat email subscribe plus fitur social bookmarking facebook, twitter, google plus di bawah postingan blog, untuk tutorial kali ini saya akan membagikan sebuah widget yang hampir sama dengan widget yang diatas tetapi yang membedakan hanya tampilannya saja. Namun widget yang satu ini bisa dikatakan lebih lengkap karena sudah ditambah dengan social bookmarking pinterset dan tombol fans page like box facebook.

Widget ini sendiri saya dapat dari salah satu blogspot luar negeri dan saya tidak tahu pasti siapa yang membuatnya, makanya widget kali ini saya tidak akan mencantumkan credit untuk authornya. Nah untuk lebih jelasnya, di bawah adalah contoh gambar widget yang saya maksudkan disertai dengan live demonya.

Cara Pemasangan !

Login ke Blogger
Template » Edit HTML » Expand Template Widget
Copy kode di bawah ini dan pastekan tepat di bawah tag <data:post.body/>

<!--Subscribe widget start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.lostsector-box {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.lostsector-subscribe {
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;
}
.lostsector-subscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.lostsector-mailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-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;
}
.lostsector-mailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-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;
}
.lostsector-submit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.lostsector-submit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.lostsector-submit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.lostsector-sharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-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;
}
.lostsector-sharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
-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='lostsector-box'>
<div class='lostsector-subscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=lostsectorblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='pengembarabiru' />
<input name='loc' type='hidden' value='en_US' />
<input class='lostsector-mailbox' 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='lostsector-submit' 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;'>
<a href='http://www.facebook.com/arieadie30' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8oSchaRw6L0a3dTdBaO0sSmHeyOVdcN5FTIWk-oQtgW5svpwCtgcKftEkfTZeZGwr2VLTQNu5zy9q0IZQGeQfacQi167QSjofjj_1TDC-tANbYtqTIcpIOHeX3nLUZgks-aR2aYvBo6g/s1600/lostsector.blogspot.com-facebook-icon.png' alt='facebook'/></a>
<a href='http://twitter.com/lindamarlina40' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqoBzRhstKa_aF-WTYldQ8A1j3FQ4OJaesY-CFzV4JW7_uoDunGzGRqWVv0eL3wZr_-fIPb7XIT-njs6Or1nCy6Yojew3JHS7rsqpQL9TvP5iqEvqPNz26lFcH8PmmCJXfcvejBmzhA_O2/s1600/lostsector.blogspot.com-twitter-icon.png' alt='twitter'/></a>
<a href='https://plus.google.com/108801075003252823592/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTyn2Nf_cYQiyz9KjbZRHCf38_o6rzDYYYJ2zPz8Wm3hCmzC6Hpc0ceGFRRqzgzGyhVK0UB530nUFwIHZ396-MRWRyzo-D6UkrNdKRAPpZpqmdJlqrzkEQIm5zRXpnKG8RL0s43dfGPtn/s1600/lostsector.blogspot.com-google-icon.png' alt='gplus'/></a>
<a href='http://pinterest.com/arieadie8' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfRxZkODU7dR4SGGy2egrfvm7vyeS5tfgruQkbYxDh6wgVUfY4f7jos-OJfxzgpQM93bxgJ2hCdoNLwpm0vT1lJgBElSPFOwW0gRRn33dmo5obG5BL0sXSbISOCQfREtlEepmKaOi5jzm5/s1600/lostsector.blogspot.com-pinterset-icon.PNG' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/pengembarabiru' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWO07Ons5e__5Q26IJSqE6LfjSd_3kMQzYm8f30xfbaMD49AsbBsMKCnxNOi8mjZfvePOPzozuTC8-wMfIgKOOhAgaBtB53c545Tjtewdigfz1bclI9WXruOG3OqvfTfb7HI1R41I3ydOO/s1600/lostsector.blogspot.com-rss-icon.png' alt='rss'/></a>
</div>
</div>
<div class='lostsector-sharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal'  data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top: 20px;'>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Flostsector.stars&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if> 
<!--Subscribe widget end-->

Keterangan :

Ganti pengembarabiru dengan username feedburner
Ganti http://www.facebook.comarieadie30 dengan url facebook fans page
Ganti http://twitter.com/lostsector dengan url twitter yang anda miliki
Ganti https://plus.google.com/108801075003252823592/ dengan url profil google plus
Ganti http://pinterest.com/arieadie8 dengan url pinterest
Ganti http://feeds.feedburner.com/pengembarabiru dengan url google feedburner
Ganti arieadie30 dengan username facebook fans page