Cara Membuat Email Subscribe di Bawah Postingan Blog Part II

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, nah pada kesempatan kali ini saya akan menshare 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.

Bagaimana, sobat tertarik memasang gadget di atas? Jika ia, berikut kode beserta bagaimana cara memasangnya pada blogspot.

• 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=FamaGulz&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='FamaGulz' />
<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/famagulz.blogspot' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb762T-vFxWQfIC1tEVzAcgvfQwhMv0tA3bE-m8-hywPzBLXKPFhElBnr46LoeOrfEwvr0lVyhvlXlp3wlbiWP4XUUtP9hs_QUsLatsj3PJ75b2OaOynTmDwAFCDyS8toHQeqaxqRZY3F4/s1600/lostsector.blogspot.com-facebook-icon.png' alt='facebook'/></a>
<a href='http://twitter.com/GulzYan' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV3P0eQi12GtwOQfEVlufpKGPeoDUqwW3CVWWLngsHnyN4IlVVaBRfnydKsquNymNoTJfqfD0OK_gF8hUCdEKPbjvtv81agXUvbZ7fD6V4opeNouxDnM0XQKCmLLzl0mB01Y-qizS3jiqb/s1600/lostsector.blogspot.com-twitter-icon.png' alt='twitter'/></a>
<a href='https://plus.google.com/u/0/106348181263090536731/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirFX1KiGsXIECDsedK6F58xUq3Eq5xbC4Ll7iF9abshAdOfBERg_kjU_GAj6ucYHCrJa2H8Yl4QsogZzzpfFDb6u2iMKkhJmbbG3UhFNOvQeN3zpYab8S8Mhd2sR7PatSbZlEW8q382219/s1600/lostsector.blogspot.com-google-icon.png' alt='gplus'/></a>
<a href='http://pinterest.com/famagulz' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGiuTdkcfl77YmpvwXAIBpgQb20PKxCaOx3nTTsga9-t66R8MSRqBULtgPZRlLEmt8zooOf0pTc_N1aZ0pS2lBNVDdosCpc98pboSduz3IImS9169qaQXG939bdOvuqJ63ojZuZyu8YOJ/s1600/lostsector.blogspot.com-pinterset-icon.PNG' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/FamaGulz' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUkrStr60qjiYXcmbngl2rUvL-GPlWsrmdecDpBKrr0G70-1f_Tee_B0sE9O9TBCGoot7cPueBq6wakiLF9wQgZzBLsHevfMsRH2eFNfiIa1cK-oTmq6AE8VtVNwRsmxP03eXNTxmt9z1w/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%2Ffamagulz.blogspot&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 FamaGulz dengan username feedburner sobat
Ganti http://www.facebook.com/famagulz.blogspot dengan url facebook fans page
Ganti http://twitter.com/lostsector dengan url twitter yang sobat miliki
Ganti https://plus.google.com/u/0/106348181263090536731/ dengan url profil google plus
Ganti http://pinterest.com/famagulz dengan url pinterest
Ganti http://feeds.feedburner.com/FamaGulz dengan url google feedburner
Ganti famagulz.blogspot dengan username facebook fans page yang sobat punya

• Terakhir, klik simpan dan lihat hasilnya.

Demikian totorial pembuatan widget email subscribe di bawah postingan part ke dua ini, semoga apa yang saya sajikan kali ini bermanfaat buat sobat. Terima kasih dan salam blogger...!!!