Selasa, 21 Mei 2013

Cara Membuat Subscribe Email Keren Di Blog (Tips Blogger SEO)

Cara Membuat Subscribe Email Keren Di Blog (Tips Blogger SEO) - Dalam sebuah blog terkadang kita menyepeelekan hal yang kecil tetapi dampaknya besar, kali ini saya akan share bagaimana cara membuat subscribe email di blog, dengan subscribe email ini kita bisa berlangganan artikel terbaru dari blog yang shobat subscribe malalui email. berikut contoh gambar yang akan saya share ke shobat semua.


Berikut Cara Membuat atau Memasangnya :

  • Login ke blogger shobat
  • Masuk ke Template/Tataletak ==>> Add gadget ==>> Pilih HTML/Java Script
  • Copy kode di bawah ini :

<style>
#dgenera-blog {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
#email-news-subscribe .email-box{
padding: 5px 5px;
font-family: "Arial","Helvetica",sans-serif;
height:38px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-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: -moz-linear-gradient(center top,#666 0,#333 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));

font-family: "Arial","Helvetica",sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:white;

padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{

background-image:-moz-linear-gradient(top,#333,#666);
background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999

-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #333;
color:#FFFFFF;
}
#other-social-bar {
padding: 0px;
overflow: hidden;
height:37px;
margin-top:-8px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
overflow: hidden;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow li {
display:inline;
border:0;
}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#666;
font-weight: bold; font-family:arial;
display:inline;
}
#other-social-bar .other-follow li.my-rss {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfixFo63SrImdfYR95fCs70hFP0j8RrdevCzr7aKy-Te9irsiYojR1qixTuAcR5FsWQrO_j5mTcz4k2-fM9p-8QM1f_7guhjbHzALnhyphenhyphenlWZqXa5KCWaV7VhI-hJAU-yCVLS9eTYR4-m-mT/h120/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-twitter 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-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-twitter {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZLxvDVTfkaTqBOV0OTLfUhf-3Ubc1ZEJfj2ztIbVjeMMuJMQfJVNGaA1SwAlIVfybJlILihomHz0ZSuOqeIYEZyaAKFDngtNUk_zZocR2ai2q9RrlAGT8XS-23dATA6rmhA2cE1XzFBb/h120/twitter'.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/AVvXsEhdsfpq8sJdZ_AJicPe-R8u6EpT-HtpeAgn-SzZv-e9kVDWtIA_ITRXcirby1ul8L7mCBwKYPy2zmzlYXqiOUKXJ-IkF1h4_zbtNteq8jVxnCisjcjsNw-NNptTj9E70_zl2ekWOt6_TFYM/h120/gplus-16x16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}
.emailicon {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QocT4f3jdyF3uIW-piOOIMBOYP_sPR3eMBO2p2OAYXgsL_d9UeyYm4JzF47eMCIIUEU6DwViHbeHgIREko0zuum11Lp5r6b-Xywbmz_CCz9PQ-6f4WIzNI06WtyugP2kyIZ_W44txZch/h120/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
padding: 0px 20px 0px 95px;
min-height:100px;
margin: 0px;
width: 183px;
line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: rgb(51, 51, 51);
}
.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family: impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
background: #333;
}
</style>
<![endif]-->
<div id="dgenera-blog" >
<div class="emailicon"><p>Berlangganan Artikel Gratis Melalui Email! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=friendly blog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />
<input type="hidden" value="friendly blog" 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">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/friendly blog" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/riefz_vhaleand" target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/102801670451518379712 target="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

Keterangan :
Script yang bercetak Hijau, ubah dengan user name feed blog shobat
Script yang bercetak merah, ubah dengan user name akun twitter shobat
Script yang bercetak Orange, Ubah dengan ID google + shobat

Untuk mengetahui Username blog  langsung aja shobat kunjungi Disini

  • Langkah terakhir Save dan lihat hasilnya shob.
Demikian saya share tentang Cara Membuat Subscribe Email Keren Di Blog (Tips Blogger SEO), semoga bermanfaat.

Catatan "Pengunjung yang baik tidak hanya membaca atau pun mendownload tapi lebih baik komentar dan beri masukan"

Tidak ada komentar:

Posting Komentar