Membuat Form Berlangganan Artikel Via Email Dibawah Postingan dengan Style Unik

Hmm..  Sudah lama juga tidak update Blog ini, terakhir update 11 Juli lalu pada postingan Cara memasang widget alexa di blog dan memverifikasi id alexa. Berarti sudah 1 bulan tidak update :|. Bukan tanpa alasan saya tidak update blog ini karena memang sedang sibuk di dunia nyata, hehe. 2 Agustus yang lalu Google update pagerank ya? Alhamdulillah dapat hadiah dari Mas Google walaupun cuma PageRank 1. Saya rasa cukup basa basinya.. heheh, ya sudah langsung saja. Pada postingan kali ini saya akan membagikan sebuah widget yaitu Form berlangganan Via Email di bawah postingan blog dengan tombol Share: Feedburner, Twitter, Facebook dan Google+. Dulu saya pernah juga memposting Cara membuat form berlangganan via email di Feedburner, widget ini juga bisa di taruh di bawah postingan tapi menurut saya tampilan (interface) kurang menarik si pembaca agar bisa berlangganan artikel kita.

VIEW DEMO

Berikut Cara Membuat Form Berlangganan via Email di bawah postingan:

1. Pada Dashboard klik more options, pilih opsi Template > Edit HTML > Proceed

2. Beri checklist pada Expand Widget Templates

3. Cari kode <data:post.body/>

4. Copy kode di bawah ini dan paste-kan di bawah kode tag <data:post.body/>, jika sudah menggunakan Read More otomatis letakkan kodenya di bawah tag kedua atau tag terakhir.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style>

form.feedburner{

margin:20px 0 0;

display:block;

clear:both;

}

.BDstyle{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbGhGRBXdePyrT85DHO42nNDtSEGFEPnM4tYulISIldSjH3DnDEx81RK_Tfdhl7PtPcVjCoEzQCa4A198quZFMUtqeC-sKIvU1AfY1y4nw5CjWVP_SN41ZEgobg42lM-AkEx7IqKf6huLf/s400/email_icon.png) no-repeat scroll 4px center transparent;

padding:7px 15px 7px 35px;

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;

}

.BDsubmit{

color:#666;

font-weight:bold;

text-decoration:none;

padding:6px 15px;

border:1px solid #D3D3D3;

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%);

}

#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: 10px;

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:480px;

}

#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;

}

</style>

<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; '>Get free daily email updates!</p>

<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=BlogDollar98&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='Blog Dollar'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='BDstyle' 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='BDsubmit' title='' type='submit' value='Submit'/>

</form>

</td>

<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>

<a href='http://feedburner.google.com/fb/a/mailverify?uri=BlogDollar98' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieXntYaIVQimYnRn9dHZwsYZLgZ-uBl9lksINO8vxgNSu53jHhRpbyxJ3WGOTugjxH6Gau1Y7i2SRoVrhFgapX0BMHj6HXfbIPVmnH0olQQkpZ4Py6j1N4PczrS9b-ShtmvtG_sgxAitA/s1600/rss-30×43.png'/></a>

<a href='http://twitter.com/BlogDollar98' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjUXbakSv13Bod_cpw0sL-4-lQdKQXb-iShrxFj5cMV6FtsJL9hjLlDoNYmkO7Fta4LvePKlmnjpsdsaJ4rv3miD-i06QacxTP9-S86Jd944CjZ1kjNpVa70IHHKeiJZAi6Nx4LgtsxQ8/s1600/twitter-30×43.png'/></a>

<a href='https://www.facebook.com/pages/Blog-Bintaro/444970308870610' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Qo_2eObSHUYcrmCK-GI_4n5LE7y3xL2Ue-jc2T5w20X_W1f4B31XvkOfkIvoBQhEazfbnnp6wGSMrtA__pyb0QBlIhdfeSkkLkidlsm5s5-ZzW-ZQp5-RjEGGXv3rAFWTWhzDs4WONg/s1600/facebook-30×43.png'/></a>

<a href='https://plus.google.com/u/0/117430266445096279185' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWA2v-rVKM08m9Du1mKdmFIueTezOZtSqSS8KW9eqefT-t8KznP3j_Y9_qGQGcEBWdLh-t-LVKUFKYC9hdwjHgyeuDF-8Xj7GWn7ESOXL1yxxfhGiw60RWTMXWlf-_iD6QW_OeRkt-WaA/s1600/googleplus-30×43.png'/></a>

</td>

</tr>

</tbody></table>

</div></div>

</center>

</b:if>

Keterangan: 

• Ubah  http://feedburner.google.com/fb/a/mailverify?uri=BlogDollar98 dengan url Feedburner anda.
• Ubah http://twitter.com/BlogDollar98 dengan url Twitter anda.
• Ubah https://www.facebook.com/pages/Blog-Bintaro/444970308870610 dengan url facebook anda.
• Dan yang terakhir ubah https://plus.google.com/u/0/117430266445096279185 dengan url Google plus anda.
• Save Template!

Thanks to Durodola Ridwan for this code

Rating: 5.0

Anda sedang membaca artikel tentang Membuat Form Berlangganan Artikel Via Email Dibawah Postingan dengan Style Unik, Anda boleh menyebar luaskan atau mengcopy - paste artikel di atas jika memang sangat bermanfaat bagi anda. Dengan syarat anda harus meletakkan link di bawah ini sebagai sumbernya. Saya akan berlakukan DMCA Complaint, atas copy-paste yang tidak benar!
<a href="http://blog-dollar98.blogspot.com/2012/08/membuat-form-berlangganan-di-bawah-postingan.html">Membuat Form Berlangganan Artikel Via Email Dibawah Postingan dengan Style Unik</a>

Jika terdapat Problem / Masalah seperti Broken link atau Tutorial yang sudah tidak bekerja, harap beri tahu saya melalui kotak komentar yang sudah tersedia. Thanks!

Nur Wahid - Saturday, August 11, 2012

Enjoyed This Post? Share It! : Tweet