Pada
postingan kali ini saya akan membagikan trik membuat sebuah widget keren yaitu Form
Berlangganan Via Email di bawah posting blog dengan tombol Share : Feedburner, Twitter, Facebook dan
Google+. Widget ini juga bisa di taruh di dimana saja sesuai keinginan kita
asalkan kita tahu saja scriptnya bagaimana dan menurut saya tampilan
(interface) cukup menarik si pembaca agar bisa berlangganan artikel kita.
Berikut ini bentuk tampilannya :
Berikut Cara
Membuat Form Berlangganan via Email di bawah posting blog :
1. Pada
Dashboard klik more options, pilih opsi Template > Edit HTML > Proceed
2. Jangan
lupa 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.
<!--
Ikuti Via -->
<b:if
cond='data:blog.pageType == "item"'>
<style>
form.feedburner{
margin:20px
0 0;
display:block;
clear:both;
}
.BDstyle{
background:url(http://i1152.photobucket.com/albums/p493/herningsih/email_icon_zps675849dc.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='#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:
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('http://feedburner.google.com/fb/a/mailverify?uri=BangVandawablog',
'popupwindow',
'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input
name='uri' type='hidden' value='Bang Vandawablog/>
<input
name='loc' type='hidden' value='en_US'/>
<input
class='BDstyle' 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='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=BangVandawablog'
rel='nofollow' target='_blank' title='Gabung di RSS Feed'><img src=' http://i1152.photobucket.com/albums/p493/herningsih/rssBV_zpsf3b32a45.png'/></a>
<a href='http://twitter.com/@Marwan_X5' rel='nofollow'
target='_blank' title='Gabung di Twitter'><img src=' http://i1152.photobucket.com/albums/p493/herningsih/twitterBV_zps2252776f.png'/></a>
<a href='https://www.facebook.com/pages/Blog-Bang-Vandawablog/..............'
rel='nofollow' target='_blank' title=' Gabung di Facebook'><img src=' http://i1152.photobucket.com/albums/p493/herningsih/facebookBV_zpse6d96b21.png'/></a>
<a href='https://plus.google.com/u/0/.................'
rel='nofollow' target='_blank' title='Gabung di Google+'><img src=' http://i1152.photobucket.com/albums/p493/herningsih/googleplusBV_zps7bff2143.png'/></a>
</td>
</tr>
</tbody></table>
</div></div>
</center>
</b:if>
<!--
Ikuti Via -->
Keterangan :
=> Ubah
http://feedburner.google.com/fb/a/mailverify?uri=BangVandawablog dengan url Feedburner anda.
=> Ubah http://twitter.com/@Marwan_X5 dengan url
Twitter anda.
=> Ubah https://www.facebook.com/pages/Blog-Bang-Vandawablog/..............
dengan url facebook anda.
=> Dan
yang terakhir ubah https://plus.google.com/u/0/.............
dengan url Google plus anda.
=> Save Template!
Sekian post saya mengenai Cara Membuat Form Berlangganan Artikel Via Email Dibawah Posting Blog Keren. Semoga
bermanfaat ya........
Artikel 
Tidak ada komentar:
Posting Komentar