Membuat Kotak Langganan Artikel+Buton Share

Coretan Bang Dadan on

Saturday, January 5, 2013

Cara Membuat Kotak Langganan Artikel+Buton Share - Sahabat blogger pada postingan terdahulu bang dadan pernah membuat artikel tentang Cara Membuat Kotak Pencarian/Search Box di blog, nah pada artikel kali ini bang dadan akan share Cara Membuat Kotak Langganan Artikel+Buton Share dibawah postingan blog.

Oke tidak usah panjang lebar lagi, bila sobat ingin melihat DEMO nya silahkan sobat lihat saja pada bagian bawah postingan di blog ini. atau screen shootnya seperti berikut:

Bagi sobat yang ingin menerapkan tutorial ini di blognya silahkan ikuti panduan nya berikut:

Cara Membuat Kotak Langganan Artikel+Buton Share

---

1. Login ke akun blogger
2. Menuju dasbor/rancangan
3. Pilih Template dan Klik Edit HTML
4. Cari kode <data:post.body/> dan copy kode berikut ini tepat dibawahnya

Berikut kodenya:

<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.dcstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUBys4JM2rIy3AZnYjv-4VCeqHuIISmsQ3-ttpMWsw8aMAZfF7DhSDzDKve0J1Fs-AQURKnEHNJaer8BqEtjXIrCDDLISUl3kPUmUUL6dReV0Z0cL_eEnHvwsFrDfjEFUmFAQMYP_w_AJe/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;
}
.dcsubmit{
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: 18px; margin:0px 0px 5px 0px; '>Berlangganan artikel via email!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&#39;http://feedburner.google.com/fb/a/mailverify?uri=bangdadan&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='bangdadan'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='dcstyle' 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='dcsubmit' 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://feeds.feedburner.com/CopastMaster' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXagpVzAxXW2v-ui5Hz3SL327wgFBfFjx-ia1Otpnmru95q9Hvd7rj-f0iP9PQWEkcpSgrT-3lQymFlyWzHcl9iWyLjaK1seu97yQQkl9mTak0Qzx4wyCxoLQtIgCZJar7ZqCyqmW7N-w/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/bangdadan' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgecAVSgAnEDHSAUlg7-wKXzV1nzzjwm1Um-ykxaaSzenKB1GSAtZl5CK8sWXOYSwW8uSEvHdv1OzM_J0o7rJriLXPv_jP4gibgBzHMcBwVLFQBDYb4W5x1jvfnuhYogmv36m5gTf_nAnc/s1600/twitter-30×43.png'/></a>
<a href='https://www.facebook.com/dadan.mistick' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfOrTJSs9LfDbMTcslp84kb8bVyw8hUJn1g84Gr74iHr6MczlbE7wYNoH6AWe2ynidxnWVge0-qy_0mRgyjFuJv84bMffYy08TyGOA21hQzExqUOo67Wn8dcVeC7r3j_SGWfvaoLDRKX8/s1600/facebook-30×43.png'/></a>
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #f3f3f3;'><a href='http://bangdadan.blogspot.com/2013/01/kotak-langganan-artikel-buton-share.html' style='text-decoration: none;' target='_blank'><font color='#f4f4f4' decoration='none'>[Get this widget]</font></a></span></div>
</div></div></center>

Keterangan:

Silahkan sobat ganti tulisan yang berwana orange dengan akun twitter, facebook dsb punya sobat sendiri, tapi kalau tidak mau diganti juga tidak apa - apa.. hehehe..!!

Mungkin cukup sekian dulu pembahasan kita kali ini tentang Cara Membuat Kotak Langganan Artikel + Button Share. Semoga artikel ini bermanfaat buat anda semua. :)

Akhirul kalam bang dadan ucapkan selamat mencoba dan jangan lupa Follow blog ini. hehe..!!!

Billahitaufiq Walhidayah

Wassalamu'alaikum Wr. Wb

Labels: blogger tutorial, Widget

Thanks for reading Membuat Kotak Langganan Artikel+Buton Share. Please share...!