Email subscription ini nyambung sama feed blog kita di feedburner gan. Dengan adanya email subscription box ini juga ngemudahin pengunjung blog dapetin update postingan terbaru dari blog kita langsung di inbox emailnya gan.
Loe ada niat pengen pasang email subscription box di bawah postingan gan? Berarti loe ada di tempat yang bener karena gw bakal share cara buatnya. Langsung gw kasi 2 model gan yang satu buat bloger cewek yang satunya lagi buat bloger cowok biar adil. Langsung aja disimak gan.
Email Subscription Box Keren Di Bawah Postingan
- Pertama masuk ke Blogger terus pilih Template lalu klik Edit HTML dan centang Expand Widget Templates gan. Terus copy kode css di bawah ini lalu pastein di atas kode ]]></b:skin> gan.
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.SCstyle{
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.SC-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4tTcJxajMuZx_GN6W5A5zQ8nnYA183lc7lN0F4jq8FTo_cwDuxSol0Xxphp3TG9AldDi-j0cqG-2Xl49XtI2bp5UHXwlHP58CYAWHZxjocQdg6IH1VjIP0Ue7EJLEj7unoXDpANCO1jmX/s1600/Contact-icon.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.2em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.SCsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #468AC9;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 5px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:auto;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
- Kalo udah jangan di save dulu, sekarang loe cari kode <data:post.body/> terus copy dan paste kode di bawah ini di bawahnya gan.
» Buat Bloger Cewek
<b:if cond='data:blog.pageType == "item"'> <center> <div id='emailwidget-outer'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Mau Dapat Updates Gan!</p> <div class='SC-email'>Langganan via Email <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEOCiyus', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='SEOCiyus'/> <input name='loc' type='hidden' value='en_US'/> <input class='SCstyle' name='email' onblur='if (this.value == "") {this.value = "Ketik email disini...";}' onfocus='if (this.value == "Ketik email disini...") {this.value = ""}' type='text' value='Ketik email disini...'/> <input alt='' class='SCsubmit' title='' type='submit' value='Kirim'/> </form></div> </td> <td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Ikuti SEO Ciyus</p> <a href='http://feeds.feedburner.com/SEOCiyus' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFhuhdGkn3P36iiAbXAB8AgFQjlpJowek_6NE2kQhvE8TWTXqE8yKY1dgqPRxabU2qfsLD6uFuQEzrxYkRqQ9vfDbddJbW1DO1rTR9S4v0LRLSr1ywZtDSddCAd0FCPguUMwbgi7Nc4YRx/s1600/Active-RSS-icon.png'/></a> <a href='https://twitter.com/SEOCiyus' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKtlITbdPNUWE1-u8ptAngbcv14ZMvUOyF-5v1PoAsJ7LMc98OUhZ8OkkSnjtU2hn5OPlB4ZeEfR0M2_JWzyn7nUxd_nAp7dN8L3VWVwZ-rOYUrm2gavh0IYYtJyyL3fWtGzSlaiBJjzSY/s1600/Active-Twitter-2-icon.png'/></a> <a href='http://www.facebook.com/450856758314498' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaDGFR0_3AOmmTIEjeBTIsAYMbooA5DwAJ0DXUnvGZAUckzWrHSbFKtH71YcRRgXHPNznsZPM_ct4NTsR4oiZfIl2TXTVP8aIIH3ukS0nFVZzpFcdy17mPALIKA0512LNr2AVNdTg75Umm/s1600/Active-Facebook-icon.png'/></a> <a href='https://plus.google.com/103761628986843100763/posts' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp-JgZZgr0_FHG2ktO3rmkITuevlETFTIZ0FDcutBBED2-edYWkGkSiyEcApGgmDawmSG-Mlvghd4afmK_10Z8vOo40uMH4yYvg_FwCZPM0nJqazRIFO8TEzCl7svVLz_xFITVCjvgxaQm/s1600/Active-Google-Plus-icon.png'/></a> </td> </tr> </tbody></table> <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://seociyus.blogspot.com' style='text-decoration: none;' target='_blank'><font color='#848484' decoration='none'>[Get this widget]</font></a></span></div> </div></div> </center><p/> </b:if>
» Buat Bloger Cowok
<b:if cond='data:blog.pageType == "item"'> <center> <div id='emailwidget-outer'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Mau Dapat Updates Gan!</p> <div class='SC-email'>Langganan via Email <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=SEOCiyus', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='SEOCiyus'/> <input name='loc' type='hidden' value='en_US'/> <input class='SCstyle' name='email' onblur='if (this.value == "") {this.value = "Ketik email disini...";}' onfocus='if (this.value == "Ketik email disini...") {this.value = ""}' type='text' value='Ketik email disini...'/> <input alt='' class='SCsubmit' title='' type='submit' value='Kirim'/> </form></div> </td> <td style='border:none; margin: 40px 0px 0px 0px; padding: 40px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Ikuti SEO Ciyus</p> <a href='http://feeds.feedburner.com/SEOCiyus' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='ttp:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7WlgQgpx7y5m3OJY0iaobIwBNXwi9ZrutOO1kYRnkpDS6J7tlKSezfSJ1E-Gl-j0P3kX35J1hxeoyNkgIgH0yFj9WPkq8AMk4SjTuqcr2HaA_xyg5zp55GXxPeumWE4vMMSIsILT5kfxE/s1600/rss-feed-icon.png'/></a> <a href='https://twitter.com/SEOCiyus' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzb21WwLb6n4K_w6TsY5CKYnTuL9sXOQB1OiGsZ9BsfZolot9iKHbng3ZIr-aXO6a4wfWNxDiPXrnxdfs7BVrxYYz9q4g5605cf6ZsdWgBqdCbechudoLRDJNXqYFKGp3Ob1J3p6xFdEZP/s1600/twitter-icon.png'/></a> <a href='http://www.facebook.com/450856758314498' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMaWq5aoqzmQZoyb909EEKdwEDJTXHxioqMqMrtHgcanGDjT4WTRCOmpGalSfJ0kr_11biViV4HzB9v882OMxxintn3zJ0nbvH-1PCXpdcPFb1KjEamyL-8L4Jly6lf1xQypb04Eg_8-AE/s1600/facebook-icon.png'/></a> <a href='https://plus.google.com/103761628986843100763/posts' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJEgJ4ovm1g67Lw43kksvd-kHvwsvknk9l3TjriNfLlLaX0eMv9MnsF4vgBR4xzuhP3BzqJbNkQfigxGOWKc7_0y2E92YbQj2OxXoAa2lNrmDbdkqdgvU-GQ64OhpwDR6uDD_rkLbW9bvZ/s1600/google-icon.png'/></a> </td> </tr> </tbody></table> <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://seociyus.blogspot.com' style='text-decoration: none;' target='_blank'><font color='#848484' decoration='none'>[Get this widget]</font></a></span></div> </div></div> </center><p/> </b:if>
- Sekarang tinggal di ganti tulisan yang gw highlight, buat SEOciyus ganti sama alamat feed blog loe, dan yang laen tinggal diganti sama ID akun loe gan. Lalu ganti kata-kata yang ada di boxnya sesuai selera loe gan.
- Terus buat yang email subscription box cowok ganti background : url di css sama url ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhwA0LI00W8WWnjV_ggLtE27biROoNmNjqtAf1TAjCv3-CiWwUtrc9W-rsCOR7J9XQ3qFBa20nEYcfbUzMjGD748Rib8Y4GGY0difLZnPEiKYpmvqHupve3UFkTMnYrZt_f-UAiINpx8vH/s1600/mail-icon.png gan. Kalo semua udah beres tinggal di preview lalu Save tempalte gan. Sekarang blog loe udah ada email subsription box di bawah postingannya gan.
Sekian dulu yang bisa gw share tentang email subscription box semoga bermanfaat. Kalo ada masalah silahkan ditanyain dan jangan lupa buat ninggalin komentar gan.
.gif)
