Header

Email Subscription Box Keren Di Bawah Postingan

Posted by : Admin On 08 January 2013 10 comments

Ingetin pengunjung buat selalu mengikuti blog kita melalui email gan. Caranya dengan pasang email subscription box di bawah postingan gan. Semakin banyak yang ngikutin blog kita melalui email maka rangking blog kita juga semakin tinggi gan.


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.

Cek ini gan >>> Edit Template Blogger Versi Baru


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/AVvXsEjnMYnBX0h7I_nH8l7orKIkaTdXiGA0jzQQ3clQkBYaQYiBbre7WUs5nxyG1iCk-jhPGRHfcWBpiPeDGK9q9ZOM39b0CY2jLgb_LAiTAE48Av5u3TWo0R-GfJS5H8zd8eaeNq8FNslpJNRo/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 == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SEOCiyus&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='SEOCiyus'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='SCstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik email disini...&quot;;}' onfocus='if (this.value == &quot;Ketik email disini...&quot;) {this.value = &quot;&quot;}' 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/AVvXsEjJLjc-VgepZ3I_k__oV2W0Xuai-7NSBUipmVOWWU5Rp3FOdAmGilT1XQhhhdPm5ewE_dTGzJ2TLSX6intV_rYY548fS-QAEzi-1kk2Gml1O1B_rEKWKoToZ1AyJddVvGOTmkONhUSBkjdB/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/AVvXsEjFo8emKayLGnHjdfPH438c2aQ5Scmy1hAoE7ryGPI8QX3hn28gcCvEBnJYNq3hqxjZ_MBT9JZV6BeiBlr-GSPhui18Jdbnq5mOsdKiAHig7He0Xire1ZJN1e5rWdTBFhF6iwaevAkgvkF7/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/AVvXsEjBewRKe7x33crro_qXgw8MjQ0OF1b6esRzQz7ISBRODt9dml6Q4C4c3x-TUYi-ARi7RHdThA9UfOFgYJk-sETb-oBBj06kVngixTQ-fTZRvcvNIuHHeakwLEe5resOuw8nCLBZgSTl0Lo_/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/AVvXsEjJ3eYJfR7k6r-E-VxnooZVBJ0XOqH6f_2E_s6Sg99o9_2D-ZH8WYzS4S5ys3X4SBXpzruMvWtSstEtlJAdTkBRii-sy5asMglK0334lg6RDmLftNZNJiVVVYQX-_guDLD1HXTPZAYQBnbu/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 == &quot;item&quot;'>
<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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SEOCiyus&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='SEOCiyus'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='SCstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ketik email disini...&quot;;}' onfocus='if (this.value == &quot;Ketik email disini...&quot;) {this.value = &quot;&quot;}' 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/AVvXsEhU16-YqKbgJ6x99pvmuSSHlilH9d6JaqkX4y57AEX_yl1P_Ol1iy7jjH0T3BtMuJxYkqW6ljUQq683YkCR0KPSarCu-4xf82IpzFaOY3oToTnwkFm6pSKgbwjmQn4QOPgpPz8VqNTXBsQF/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/AVvXsEjY9o_W2X4lWZls_vFuAMq4ULKZGmxVtC4Mg_oSWd01X7uZgByWNVVKh0N_qjZtGxQ_RfWy2MsxQApdS8ST7YeK2ZvJHeVh88uS14F1Y1mHRkwc2jteZSGWHug9LbEC-jblmoyjvaXi9V36/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/AVvXsEiMKTOHHnSSn9lqcWtdZdv7k9n_kSk7iVlnOjQljQUo0Tj_V-H9_KnBYI_I6ieOD3V1VY7JAOR8rbdN1YSBzO_ZBe2VmeLo3HHNsmvJVaJISdnlYWaKFfpvJj5xDWugJSSO7YMwk6-UsvDd/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/AVvXsEiZtPqq3pJvQfefTWkIgw7ejlnTcLesnZmZWUWO7bkyeLi3z1DKUSw_dgKdlijk38thwWSvEuDNiZDij9J0mMjyX_naM0wla41lk-fDch_B_ODmGCxL38l8_yZyX8Dcdd4VPZ1W0mZmEh6j/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/AVvXsEirnF4iYgBBxPcGgvNlXOthshsUXw_LfNWFHTEeTx-OJzXm-UVlZvCdfTKwXt_5mxNb6BeS6u4EmBuK6cbBRKmmYfu2b3VewwRzwJIgrqNoC8Px0NYc_uUN2mpw8Xk_Mbp4coFvGub2SMI0/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.

» Loe suka postingan ini? Silahkan di link back dengan mengcopy kode dibawah gan.

URL :

HTML link kode :

» Luangin waktu 5 detik donk gan buat share postingan ini.

Mau Dapet Updates Gan!

Ikuti SEO Ciyus

10 comments:

  1. Makasih gan. udah sy pasang di blog saya http://shabri.cyber4rt.com

    ReplyDelete
    Replies
    1. Sama2 gan, btw blognya gak bisa di buka gan :v

      Delete
  2. thanks infonya, bermanfaat banget, agan bisa kunjungi juga blog saya http://dhezdhezkawaii.blogspot.com/ :)

    ReplyDelete
  3. kok punya ane gak bisa ya gan??

    ReplyDelete
  4. wah makasih gan, tapi pusingnya itu pas pasang kode yang terakhir cz kode nya ada 3 wkwkwkkw :g

    ReplyDelete
  5. KEREN beud gan :D ijin pasang

    undangan :) http://adansubuh9.blogspot.com

    ReplyDelete
  6. . gan makasih atas infonya tapi kode blog saya banyak ,. itu kura kira di bawah kode yang nomer berapa yah ..
    . salam kenal gan dari http://downloadgamesfor-pc.blogspot.com/

    ReplyDelete
  7. Keren sekali SeoCiyus :j terimakasih banyak :) mohon kunjungannya ya http//:enggakpunya.blogspot.com

    ReplyDelete
  8. Terimakasih gan tolong kunjungannya ya http://enggakpunya.blogspot.com

    ReplyDelete

Yang komen spam dan komen asal ga punya otak bego

Terima Kasih

Admin SEO Ciyus

Berikutnya Sebelumnya