Cara Membuat Form Langganan Email di bawah Postingan Dengan Widget Sosial Media di Blogger

Cara Membuat Form Langganan Email di bawah Postingan Dengan Widget Sosial Media di Blogger

00.39
Selamat datang di OLXAJ.


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+. Bagi pelanggan OLXAJ, widget ini juga bisa di taruh di bawah postingan tapi menurut saya tampilan (interface) kurang menarik si pembaca agar bisa berlangganan artikel kita.
Membuat Form Berlangganan Via Email Dibawah Postingan dengan Style Unik

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/AVvXsEj4ZGqxZ_JuiRF4OCb9Sw4QLG20FL-EbJyB0WeSg8QsbAD3N1xsAxYp16496nualVdXxexGgLY4b2iG2pJ5Z1oa2bxRthkaWFhyMvPfAm3qYzR-mlA7BpWr0AzqX6L9fqrDk9J9n7qiTIUa/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=Bloganda&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=Bloganda' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXtysEpZ59LN_jupiP1s2vREiYLB-W8p-Dwo9byGgmqf4fzW-XUy7FOSKOAAuc7JrpfxTybPbdshkbC9gzceJzRpN1dy9xGND00pIA2_EGepG6D3UPznxa3ACXayt5onIDhdRGYp9BTo/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/AVvXsEg4-zEP4x_GnIsuG2DPypSz3gPp7OE8RDxyLpjHNJNSebIL_I1F_WgSw0EK_jcI_Pg_5eyjZHfDUJ-ta_aXi-aveSXHuBScVi6evX4KCce7RuWHu7PIy9gi8X25LdT7ZM8e1SB_7Jgbnvs/s1600/twitter-30×43.png'/></a>
<a href='https://www.facebook.com/pages/Blog-anda/444970308870610' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMRZHwl58119a4Evkqk-Eb40iIm9E_cAAy-NDhF1s6FBbSJThCmo5s0QsHNU9r3tGY5prHqlnwfw7fboU-75iJ_g7MHbqs9NJTp52NhTIYsFDeDbaJT0pHb45mENGQ9luDQhSb65Dwnic/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/AVvXsEggVvMXJiA-5PNwCiyXYToaCC_MId7azQow-9zHB3nl_VPJgP9UHa3nMLc6PwTY-rlVYFLUU376TpmZuD-wMYIfPrxJNC-YcPaJLa-79USGdRCSB5RYy3xWUN7HRxJ4ijEx82HlpY8eHu4/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=Bloganda url Feedburner anda.
  • Ubah http://twitter.com/anda dengan url Twitter anda.
  • Ubah https://www.facebook.com/pages/anda/444970308870610 dengan url facebook anda.
  • Danyangterakhir ubah https://plus.google.com/u/0/117430266445096279185dengan url Google plus anda.
  • Save Template!
Semoga bermanfaat.

About

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Next
« Prev Post
Oldest
Langganan: Posting Komentar (Atom)