Cara membuat email subcribe di blog

Pada kesempatan kali ini Diaz akan berbagi ilmu... ya mungkin sobat sudah pada tahu. Apakah sobat sudah pernah bikin widget berlangganan feedburner..??? bagi sobat yang belum pernah nie akan Diaz share Cara membuat email subcribe di blog.

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 Diaz 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.

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 ]]></b:skin>
4.     Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

Klik show untuk melihat

.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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO13vAXa9UM5c3WnMkpGSxRwfKCZ4IZSIb6FOL-TLgmTfE62vTtDuo5yCnYZ-mV83vziqI3-WNnduJrsbiDxHHuNQAU5MqwmG4Pkr6zfw9c_WkpSm6i1KFIkE1cGDTWKsmhJ4VQ1vAqac/s1600/FB-1.png "); } ul.vay-social li.vay-twitter { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe7d6Da-FTo7efOshg07y1n6ilPfI5KxftmDzXWZnDu7mYz9knpAgj4UErDRHwYHiPI91R8i7Bs0bfQ3raD-WU0hia_wSuWreEeL7h_R7YNuLj94f6WnX7n5A-c6ISmPT4jm42yaftoBc/s1600/T-1.png "); } ul.vay-social li.vay-gplouse { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEYXyiC3qw7l6pklJlzXL7YpShcQMZfl1PrZzNJquYhnmzj7vdywCdcMEMch_FP1Q7sLoxncInWC9l26P83eNDFDriZlKIn_ScFOZQkfIjQF3KA0Odd20-Rdr9SdSmii8Ywugm4csGhZU/s1600/G-1.png"); } ul.vay-social li.vay-youtube { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9GPDRzKmS-Za0GznKwM9oDflInn35rRMnodzBkwJ6h4PGM9B-sazYkEZ0nqLH19JAoKeKJuo4wQjev0pokSe5_8TUOjEXyXT3lsDEzuC3pPRNaTRcSXG2S6uFmvnKgHvc3JRsSVBLnU/s1600/Y-2.png "); } ul.vay-social li.vay-rss { background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQLJ7lChgvmcbSb-7aDQuXatFshn9lJdfbHZwJGGLE28_A-YEOLrElTEfMO7StyMLtWlOxNhZ_Wz1PCc5vawxY91YQtAZZa5xFfRItha53K2B4tGmaeedp0DGRpmfCrQaHQNRIjfMnq8Q/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAaZmuOoigka2lltlTQ85ujHexFiH4gYHiuFr7WVbNhXt75VGL2Oy7QT-wSzopQM3gOh42CVRZ9cNTrzYWMLrxU5YkqQLzgtsiiNG1V0eLzlOdB3QhMOSpK-AnYqhHd3jQdJ20ejkDZ9w/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 <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
5.     Copas Code HTML dibawah ini, paste di bawah code <data:post.body/>

Klik show untuk melihat

<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="URLYOU 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/diazbox'>
<img alt='' height='26' src='http://feeds.feedburner.com/~fc/diazbox?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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkxmVDmGN9EqTeBbBfYfh2RU_QByaMqlbQi6M7RP2lU7ize4RIlIPWmEnbf00QOXUF6KnjfVdTbujQx-_5Joi0bXijjDkzGbKa4f1RJBQ__r4T8u-NtH9NealIWG9tGQSlMrSP7f4-dYU/s1600/follow.png'/>
</a></div></div></div></div>

Keterangan Code

1.     Code tulisan warna merah ganti URL sesuai dengan tulisannya
2.     Code tulisan warna biru ganti dengan code count feedburner anda
3.     Code tulisan warna orange ganti dengan ID blog anda
4.     Code tulisan warna hijau ganti dengan tulisan yang anda sukai  

THANKS FOR YOUR VISIT... ^_^