Cara membuat email subscribe di blog

Email Subscribe
Email subscribe 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 interaktif.

Fungsi



Email Subscribe sangat berguna buat halaman situs kita khususnya untuk halaman blogspot agar lebih aktiv hubungan antara pengunjung dan owner situs tersebut. Pada dasarnya email subscribe 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 subscribe pada halaman blog kita sangat bagus disamping memperindah halaman blog kita.

Dalam tutorial kali ini saya sengaja membuat code tag HTML subscribe 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 subscribe di blogspot' ini dapat membantu para sobat blogger saya untuk mendesign blognya agar lebih ramah pengunjung. Gambar dibawah ini adalah gambar demo email subscribe yang akan kita buat.



Fitur

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

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code ]]> 
4. Copy Code script CSS dibawah ini, pastekan diatas code ]]> tadi

Spoiler

Code:

.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: "Trebuchet MS",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='#FBFBFB', endColorstr='#F4F4F4',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

1. Login ke dashboard anda
2. Masuk ke "Template"
3. lalu klik "Edit HTML"
4. Cari code ( tekan Ctrl+F untuk mempercepat )
5. Copas Code HTML dibawah ini, paste di bawah code

Spoiler

Code:

<div id='BD_EMAILWIDGET'>
<div>
<table width='100%' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>

<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: "Trebuchet MS",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 == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' 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&fg=99FF00&anim=1' style='border:0' width='88'/> </a><a href='http://www.blogger.com/follow-blog.g?blogID=<strong>ID BLOGSPOT ANDA</strong> ' 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

sumber :Cara membuat email subcribe di blog

 

oh ya demo nya jangan lupa

oh ya demo nya jangan lupa dicantumin mas .... keren dahh
sbnernya saya jarang subscribe"

 

Banyak versinya nih Email

Banyak versinya nih Email Subscribe, tapi saya engga pernah pasang

 

cakep dah tutorialnya. tapi

cakep dah tutorialnya. tapi bukannya, untuk blogspot sendiri udah ada defaultnya ya? atau pake feedburner.

 

makasih sob #cayun

Demonya hanya gambar aja sob, soalnya saya lihat fasilitas di blon mendukung, saya kemarin sudah coba, sebenarnya enak juga untuk subcribe suatu blog biar lebih gampang untuk kembali lihat blog tersebut apa bila memang artikelnya cocok untuk kita.

 

makasih sob #samuel

memang sih saran saya pilih yang sesuai seleranya sob, dan ringan untuk loding halaman blog kita. tapi saya lihat webnya bang samuel bagus dan saya rasa perlu juga dipasang apa lagi untuk web domain pribadi, untuk meningkatkan pageranking di mesin pencari, soalnya bila kita update artikel baru pastinya di subcribe secara otomatis ke member kan nambah review halaman situs kita.. heheh

 

Benar sob @sakaji

Sebenarnya sob 'Tutorial email subcribe ' yang ini juga memakai jasa geratisan feedburner bang, hanya jasa saya modifikasi, dan memasukkan beberapa fitur dalam email subcribe ini biar lebih bagus dan para pengunjung blog kita dapat menggunakan fasilitas lainnya pada email subcribe ini. Bahkan saya menambahkan fitur feedcount dari feedburner bang..!!

 

Bagus mas tutorialnya. keep

Bagus mas tutorialnya. keep posting di forum ini ya..

 

sering gak kebaca, malah

sering gak kebaca, malah numpuk diemail

 

makasih bang #ayahnyanadia

Makasih bang, selagi masih tetap sehat kita tetap akan selalu tukarilmu bang...

 

yup betul juga bang...!!

Memang ada juga yang tidak terlalu sering buka email, tapi kalo emang kita lagi login keblog, sekalian aja bang buka email mana tau ada artikel yang bermanfaat kan jadi simpel langsung baca dan tau alamatnya artikel itu dengan cepat daripada bloging makan waktu ...heheeh salam kenal bang #shofighter

 

Info abang yang satu ini mantap

Info abang yang satu ini mantap..

 

makasih.. bang @royger

makasih.. bang @royger

 

terimakasih...

terimakasih atas pendapatnya...

 

Bingung....

beli apa ya, saya kurang memahami pertanyaannya bos,...

 

Emm...

simpen dulu kodenya mas,

 

KBlogger wrote:

silahkan silahkan...

 

antoz wrote:

thx