Farhan Share, Membuat Form Email Subscribe dan Social Media | Membuat Email Subscription Feedburner dengan Social Media Ala Mashable.com - Sobat farhan pastinya sudah mengenal situs yang satu ini bukan, salah satu situs yang berisikan tentang Informasi Internet, yang menjadi salah satu situs website terbesar di dunia dalam kategori technology dan internet, yakni mashable.com, pastinya kalau sobat farhan semuanya penggemar dan pelanggan setia situs mashable.com ini, ketika melihat-lihat dan menjelajah kontenya, pastinya sobat farhan sebagai blogger tertarik dengan box email subscribernya yang simple dan friendly, untuk sobat yang belum pernah melihat box email subscribe dengan social media situs mashable.com, contoh widgetnya bisa sobat lihat pada gambar di bawah ini. Baik, sobat farhan di bawah ini farhan sudah persiapkan kode script dan langkah-langkah Cara Membuat Form Email Subscribe dengan Social Media Ala Mashable.com.
1. Login ke Blogger.
2. Masuk ke Dashboard.
3. Pilih Tata Letak.
4. Klik "Add Gadget".
5. Pilih "HTML/JavaScript".
6. Sobat letakkan kode di bawah ini ke dalam box "konten" (HTML/JavaScript Gadget).
<style>
/* Social Widget */
#B-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
border-bottom:0;
}
.googleplus {
background: #fff;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: "Arial","Helvetica",sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 80px;}
.g-plusone { float: left;}
.twitter {
background: #fff;
padding: 5px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: "Arial","Helvetica",sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: #ff9b00;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:5px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
backfround: #ff9b00;
-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: "Arial","Helvetica",sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 260px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHDSHMaXieoq493d5BBE1LDf0xGDZ2IVUxjMYqU1cgns6bCOjOhW-PWCUh_bJ6B6jYMeDgXU6mwZjCl59SuP6m76IgrRzA38Te5eefdA-8rxnO-7KnNYy8l4wjkKvroY8vbiZDZs0faQ/s400/rss-16x16.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh77EuhMWTNKDnlN9ROUTMwlsvTykzJI4SgWiBPMrjRr3sAstthMBLUnRYz-INgRhbacyyWZ23_sgEPwLWGz9b8V7ixP-ohNTtqFHaRDTRbP3AREzXIBJM68DyT-pe63NlmanePlgJR66I/s400/facebook.png') no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5KwA3lr_4NN-xt0nEbGJ0O-g79WFJgpAT8hyD0D7KBF_IZ1uzXPvlRxAHcbtSRWWcbdC04CtGJOvRzCWu8GcPTGj5pp6xjQOjASv6QRCD1Ampfx6WE1-RnrGSkBsG57S-hwsOKRduikI/s400/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>
<![endif]-->
<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ffarhanshare&width=280&height=258&colorscheme=light&show_faces=true&border_color=white&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:258px;" allowtransparency="true"></iframe></div>
<div class="twitter">
<a href="https://twitter.com/farhanshare" class="twitter-follow-button" data-show-count="false" data-lang="id">@farhanshare</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=farhanshare', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if (this.value==')this.value=this.defaultValue;" />
<input type="hidden" value="farhanshare" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="subscribe" name="commit" type="submit" value="Subscribe" />
</form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/farhanshare" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/farhanshare" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/107316055823938290681" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://farhanhshare.blogspot.com" target="_blank" >Dapatkan Widget ini Sekarang!</a></span></div></div>
<!-- End Widget --> </div>
Keterangan :
- Ganti kode yang berwarna biru tua dengan nama Facebook Fan Page sobat.
- Ganti kode yang berwarna biru muda dengan Username Twitter sobat.
- Ganti kode yang berwarna merah dengan ID Feedburner sobat.
- Ganti kode yang berwarna hijau dengan ID Google+ sobat.
7. Klik "Save" dan Selesai.
Demikian sobat farhan tutorial blog tentang cara Membuat Form Email subscribe dengan Social Media Ala Mashable.com, Semoga bermanfaat, dan selamat mencoba, bila sobat mempunyai pertanyaan seputar tutorial ini, sobat bisa tinggalkan komentar di bawah.