Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, June 6, 2013

Cara membuat email subscribe di blog

Email Subcribe

Email subcribe dapat dikatakan suatu aplikasi dalam halaman situs untuk mendaftarkan email pengunjung agar mendapatkan kiriman artikel secara otomatis dari situs tersebut ke email pengunjung, agar halaman suatu situs itu lebih interaktiv.

script subcribe

fungsi

 

Email Subcribe sangat berguna buat halaman situs kita khususnya untuk halaman blogspot agar lebih aktiv hubungan antara pengunjung dan owner situs tersebut. Pada dasarnya email subcribe ini digunakan untuk menjaring para pengunjung situs kita agar selalu mendapat Update artikel terbaru dan secara otomatis pengunjung yang sudah menjadi member melihat kiriman itu dan like url tersebut, dan sebagai keuntungannya pada owner situs, dengan banyaknya yang membuka situs kita semakin bagus juga rankingnya di mata mesin pencari. Sehingga pembuatan email subcribe pada halaman blog kita sangat bagus disamping memperindah halaman blog kita.
Dalam tutorial kali ini saya sengaja membuat code tag HTML subcribe dalam postingan blog ini, agar para teman bloger yang ingin blognya lebih aktiv dan ramah terhadap pengunjung lebih memahami pemasangan dan kegunaan serta dapat memperindah halaman blognya. Semoga pada tutorial 'Cara membuat email subcribe di blogspot' ini dapat membantu para sobat bloger saya untuk mendesign blognya agar lebih ramah pengunjung. Gambar dibawah ini adalah gambar demo email subcribe yang akan kita buat. 

demo subcribe

    Fitur 

     

  • Form email subcribe
  • Counter feedburner
  • Tombol Join to Blog
  • tombol sosial
  • Judul artikel
  • Text

Install Program CSS 

 

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
.Rivai {padding:10px 20px 0 0;
margin:0;
font-size:12px;
float:left;
width:300px;
text-align:center;
}
.Rivai img {border:2px solid #888;
background-color: #FFFFFF;
padding:2px;
margin:0px 5px 0px 5px;
opacity: 1;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(9deg);
-o-transform: rotate(9deg);
-webkit-transform: rotate(9deg);
-ms-transform: rotate(9deg);
transform: rotate(9deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.Rivai:hover img {border:2px solid #ccc;
cursor:pointer;
opacity: 1;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
ul.vay-social {margin:15px auto;
display:inline-block;
list-style-type: disc;
margin-top: -20px;
}
ul.vay-social li { display:inline; float:left; background-repeat:no-repeat; }
ul.vay-social li a { display:block; width:48px; height:48px; padding-right:10px; position:relative; text-decoration:none; }
ul.vay-social li a strong {
font-weight:normal;
position:absolute;
left:50px;
color:#000000;
padding:3px;
z-index:2000;
background-color:#FF0000;
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
bottom: 50px;
}
ul.vay-social li.vay-facebook { background-image:url("http://4.bp.blogspot.com/-E91PS1bAsZw/UYvYd9vZsGI/AAAAAAAABFc/AI4TkWQXgd8/s1600/FB-1.png "); }
ul.vay-social li.vay-twitter { background-image:url("http://3.bp.blogspot.com/-qxb6-Q0TNw8/UYvYlGs4W9I/AAAAAAAABGI/xyiD1yhDfxY/s1600/T-1.png "); }
ul.vay-social li.vay-gplouse { background-image:url("http://4.bp.blogspot.com/-LJXvGstrucY/UYvYeUNXT8I/AAAAAAAABFg/r7HPBE22y5U/s1600/G-1.png"); }
ul.vay-social li.vay-youtube { background-image:url("http://4.bp.blogspot.com/-9EwbelK6J2w/UYvYn4dxH3I/AAAAAAAABGc/NQS4GvLn1fc/s1600/Y-2.png "); }
ul.vay-social li.vay-rss { background-image:url("http://4.bp.blogspot.com/-A9roDjDVabQ/UYvYhnoNfOI/AAAAAAAABF0/kZlPN6rfP2o/s1600/RSS-1.png "); }
#vay-skin:hover li { opacity:0.1; }
#vay-skin li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#vay-skin li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#vay-skin li:hover { opacity:1; }
#vay-skin li:hover a strong { opacity:1; top:-5px; }
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.BD_STYLE{
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;
}
.BD_EMAIL{
background:url(http://1.bp.blogspot.com/-4g7ZugQ0Oy0/UYNzzVAZ6mI/AAAAAAAAA9Y/w90In-93dQY/s1600/emain-icon.png) no-repeat 0px 13px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 0px 0;
color:#111;
}
.BD_SUBMIT{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
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=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#BD_EMAILWIDGET {
-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;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
min-height:60px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
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:600px;
margin:10px 0;
}
#BD_EMAILWIDGET td{
padding:3px 0;
}

 

Install Program Tag HTML 

 

  • Login ke dashboard anda
  • Masuk ke "Template"
  • lalu klik "Edit HTML"
  • Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
  • Copas Code HTML dibawah ini, paste di bawah code <data:post.body/>
<div id='BD_EMAILWIDGET'>
<div>
<table width='100%' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<!--DWLayoutTable-->
<tbody>
<tr style='border:none; margin: 0px 0px -30px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' height='100' style='border:none;' valign='top' width='364'>
<p style='color:#111; font-size: 11px;font-family: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>
Judul Artikel : <a expr:href='data:post.url'>
<data:post.title/>
</a> </p>
<div class='BD_EMAIL'>
Subscribe this Artikel
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner &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='ID feedburner'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='BD_STYLE' 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='BD_SUBMIT' title='' type='submit' value='KIRIM'/>
</form>
</div> </td>
<td align='right' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' valign='top' width='206'> Terimakasih atas kunjungannya.! bila anda suka dengan artikel ini silahkan berlangganan artikel terbaru via Email dengan geratis dari blog ini..!! <br />
NAMA BLOG ANDA</td>
</tr>
</tbody>
</table>
<div align='left'>
<ul class="vay-social" id="vay-skin">
<li class="vay-facebook">
<a href="URL FACEBOOK ANDA " target="_blank" ><strong>Facebook</strong></a>
</li>
<li class="vay-twitter">
<a href="URL TWITTER ANDA " rel="nofollow" target="_blank" ><strong>Twitter</strong></a>
</li>
<li class="vay-gplouse">
<a href="URL GOOGLE PLUS ANDA " rel="nofollow" target="_blank" ><strong>Google+</strong></a>
</li>
<li class="vay-youtube">
<a href="URL YOU TUBE ANDA " rel="nofollow" target="_blank"><strong>YoutubeChanel</strong></a>
</li>
<li class="vay-rss">
<a href="URL RSS ANDA/FEEDBURNER " rel="nofollow" target="_blank" ><strong>RSS</strong></a>
</li></ul> <div align="right" style="margin-top:-60px; margin-bottom: 3px;"> <a href='http://feeds.feedburner.com/RivaiSilaban'>
<img alt='' height='26' src='http://feeds.feedburner.com/~fc/RivaiSilaban?bg=660000&amp;fg=99FF00&amp;anim=1' style='border:0' width='88'/> </a>
<a href='http://www.blogger.com/follow-blog.g?blogID=ID BLOGSPOT ANDA ' rel='nofollow' target='_blank' title='Join to Blog'>
<img src='http://1.bp.blogspot.com/--55I87MAgVU/UX9oHwjUE9I/AAAAAAAAA4k/O_3rtuLpveY/s1600/follow.png'/>
</a></div></div></div></div>

 

Keterangan Code

 

  • Code tulisan warna merah ganti URL sesuai dengan tulisannya
  • Code tulisan warna biru ganti dengan code count feedburner anda
  • Code tulisan warna orange ganti dengan ID blog anda
  • Code tulisan warna hijau ganti dengan tulisan yang anda sukai

Artikel referensi 

 

  • http://rivai-silaban.blogspot.com/2013/06/cara-mendaftar-di-feedburner.html
  • http://rivai-silaban.blogspot.com/2013/06/cara-mendaftar-di-you-tube.html
  • http://rivai-silaban.blogspot.com/2013/06/cara-mengetahui-blog-id-dan-post-id.html

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 8:20 PM

14 comments :

  1. artikel yang sangat bermanfaat mas , semoga blog ini maju terus

    ReplyDelete
  2. @Ahmad manarul...
    Makasih gan... sama sama

    ReplyDelete
  3. Halo lae, ini script nya khusus untuk blogger ya? Kalau untuk blog Wordpress self hosted bisa juga ga?

    ReplyDelete
  4. @Max monroe..
    bisa juga lae, tapi terkadang template wordpress mau memiliki hanya murni pemakaian php saja, pernah kawan coba banyak yang bisa lae...
    makasih atas kunjungannya..

    ReplyDelete
  5. Thanks untuk tutorial nya, sangat membantu untuk membuat email subscribe.

    ReplyDelete
  6. Thanks gan artikelnya, tapi kalo di wordpress gimana ya?

    ReplyDelete
  7. @Griya kuliner...
    sama2 bang..!! salam kenal..thx atas kunjungannya

    ReplyDelete
  8. @lilih prilian Ari pronowo..
    subcribe yang diatas memakai fasilitas feedburner itu bang, hanya saja diganti tag HTMLnya dan menambahkan fitur lagi. Feedcountnya aja dah ada bang...
    Lihat code tag html from postnya bang

    ### form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID feedburner ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'###

    ReplyDelete
  9. @Hadi..
    sebenarnya hal ini sudah pernah dibahas teman teman yg lain tapi menurut pengalaman ada template wordpress yang memang bisa menerima file script dan ada yang memang murni script PHP saja, tapi coba dulu bang mana tau templatenya menerima ?

    ReplyDelete
  10. banyak banget bang, kalo bikin tulisan yang ada cap sama tanga tangan gmn bang?

    ReplyDelete
    Replies
    1. thx atas kunjungannya sob..

      Soal pembuatan logo stempel dan TTd itu saya edit melalui Photoshop dan corel, tapi bila sobat belum memahami pembuatannya , bagusnya di sken saja tanda tangannya kemudian cap stempelnya edit di photoshop bersama dengan TTd yang di sken. Untuk pemasangannya di halaman blogsematkan saja code img scr nya di bawah kode post-body.

      Delete
  11. Works perfectly,...
    Makasih Bang Rivai ^^

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog