cara membuat subscribe with advertise

Tampilan widget subscribe ini ditambah dengan space advertise cocok untuk blog anda. Cara membuat subscribe with advertise ini tergolong tidak rumit sehingga para newbie blog mania pun dapat memasangnya di halaman blog kesayangannya. Widget email subscribe with advertise ini memiliki kode valid html 5 dan CSS 3 serta penulisan sistem img dan link SEO Friendly. Kode yang saya pake pada widget ini ringan dan memiliki tampilan yang menarik, silahkan lihat gambar screennya dibawah ini. Untuk mengetahui bagaimana cara pemasangannya di halaman blog kesayangan anda !, silahkan simak penjelasan dibawah ini.

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 atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name :Widget Email subscribe with Advertise
By : Rivai Silaban | Blog Design
Update : Rabu, 18 September 2013
******************************************/
#bdrs-subscribe {
width:590px; /* LEBAR WIDGET */
min-height:60px;
border-radius: 5px;
box-shadow: 0px 0px 5px #BBB;
background: none repeat scroll 0 0 transparent;
border: 1px solid #c4c4c4;
padding: 8px;
margin:10px 0;
}
#bdrs-subscribe td{
padding:3px 0;
}
ul.vay-social {
margin:0px 0 5px -20px;
display:inline-block;
list-style-type: disc;
margin-top: -20px;
}
ul.vay-social li { display:inline; float:left; }
ul.vay-social li a { display:block; height:48px; margin-right:10px; position:relative; text-decoration:none; }
#bdrs-subscribe #vay-skin:hover li { opacity:0.1; }
#bdrs-subscribe #vay-skin li:hover { opacity:1; }
#bdrs-subscribe #vay-skin li:hover a strong { opacity:1; top:-5px; }
#bdrs-subscribe .bdrs-sub{
width:270px;
padding:10px 0 0 15px;
float:left;
font-family: &quot;Trebuchet MS&quot;,sans-serif;
font-size:1.2em;
font-weight:bold;
margin:0 0 0px 0;
color:#111;
}
#bdrs-subscribe .bdrs-form {
padding:7px 15px 7px 5px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
border-radius: 4px;
box-shadow: 0 0 2px #CCC inset;
background-color: #E6FFFF;
}
#bdrs-subscribe .bdrs-submit {
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #c4c4c4;
cursor: pointer;
border-radius: 4px;
background-color: #00FFFF;
}/* CSS code End */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Cari code
  <div class='post-footer-line post-footer-line-2'/>
  atau Kode
  <div class='post-footer-line post-footer-line-3'/>
• Copy kode dibawah ini ( kode yang ada didalam spoiler " CODE HTML " ) pastekan tepat dibawah code diatas.
  Bila anda pastekan dibawah code <div class='post-footer-line post-footer-line-2'/> tidak berhasil silahkann ganti dengan code <div class='post-footer-line post-footer-line-3'/>
• Cari code <data:post.body/> ( tekan Ctrl+F untuk mempercepat )
• Copy Code HTML dibawah ini, paste di bawah code
  <data:post.body/>, Perhatikan dengan baik code <data:post.body/> biasanya code tersebut minimal 2 yang satu untuk Halaman depan dan satu lagi untuk isi postingn artkel, Jadi anda hanya meletakkannya untuk isi artikel postingan halaman blog anda atau seperti related post diatas sosial share yang ada dibawah postingan ini.
• Save template anda dan lihat hasilnya, selamat berkreative.
  

<!-- Rivai Silaban | BLOG DESIGN CODE SUBSCRIBE start -->
<div id='bdrs-subscribe'>
<table width='100%' >
<tbody>
<tr>
<td height='100' style="float:left; margin-top:1px" width='340'>
<p style='color:#111; font-size: 11px;font-family: &quot;Trebuchet MS&quot;,sans-serif; margin:0px 0px 5px 0px; '>
Judul :<span style="color:#990000"> <a expr:href='data:post.url'>
<data:post.title/>
</a> </span> </p>
<div class='bdrs-sub'>
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 FEDDBURNER ANDA &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='ID FEDDBURNER ANDA'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bdrs-form' 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='bdrs-submit' title='' type='submit' value='KIRIM'/>
</form>
</div> </td>
<td ><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></td>
<td><img alt="advertiser" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyDI21XZyveQt7jOgtfsedBGca83HGhRGI35iqWRGuY3E7CDiyq-wPkP_Vbe2lV4D67e0YWSSEAK_A3Z-bvnMI4yu1eRXfs_zwSGgw1-QrVkzEYsgB-T8bGpCStmjiHGoqBoaQpvvYQyk/s1600/advertiser.gif" title="advertiser"/></td>
</tr>
</tbody>
</table>
<div align='left'>
<ul class="vay-social" id="vay-skin">
<li>
<a href="LINK FACEBOOK " target="_blank" ><img alt='facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgMw8LJHFtGK44ii1MxW-04jklQPWIIyuKS4nec_6aNtLwxcZk7iU7n5DaUYZBi7PaJvdCF7ki70TerO13_GHvKK0UlbQKhSqpJhdK9ueQBQR-4kjys2qHFe1tcbJ8PGvsAVtlyy8U4uw/s1600/fbk.png" width="100" height="28" title='Like Facebook'/></a>
</li>
<li>
<a href="LINK GPLUS " rel="nofollow" target="_blank" ><img alt='gplus' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYM5-Kv1Kxa8SF1jEnsVvVXZnw6Vy1uXCizH1QYTcZgmg877HdxJ6rcuIdoHG5YNdZfc0NXGuX8-YAuuiDJ0hkSkO_MICYltVRA1RoG3hmy5BHSJ7K3EhZt7DG0cSESZb1r4k0B30VBqg/s1600/GP.png" width="100" height="28" title='invite google plus'/></a>
</li>
<li>
<a href="LINK TWITTER " rel="nofollow" target="_blank" ><img alt='twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyUytRVn3pnTJejQE7F7MiHv6fSmSeH2KAlM8oN1IS3aFG8yDRAiheIwEv9hPlAVkvCkXvF0WJYnh9k1Vq-l7h_FN5mXvCor6qnrABud66uIrZQIJr7vpTeEsS7yWpYmYYlTmskceuZtI/s1600/twk.png" width="100" height="28" title='Follow twitter'/></a>
</li></ul> <div style=" margin-top:-25px;">Terimakasih atas kunjungannya , salam bloger buat para teman teman bloger mania semoga artikel yang ada pada postingan halaman blog ini dapat bermanfaat buat teman teman bloger.</div>
</div>
</div>
<!-- Rivai Silaban | BLOG DESIGN CODE SUBSCRIBE end -->

Keterangan Code

• Tulisan kode warna MERAH silahkan ganti dengan link anda sesuai tutorial yang diatas.
• Tulisan warna BIRU ganti dengan link advertise anda dengan ukuran 120px X 120px.
• Tulisan kode warna HIJAU merupakan text ucapan salam buat para pengunjung blog
• Bila anda ingin lebih berkreasi silahkan anda edit CSSnya untuk menyesuaikan tampilan widget ini dengan thems template anda.

Kesimpulan

Widget email susbscribe with sdvertise ini cocok untuk keperluan bloging, dan memiliki kode valid html 5, CSS 3, SEO Frienly serta kode yang ringan.

Bila teman teman mengalami masalah dalam pemasangannya silahkan hubungi saya atau share bersama saya melalui form komentar dibawah. Pergunakan segala vasilitas halaman blog ini untuk mempermudah anda.

Widget email subscribe with space advertice
Rabu, 18 September 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 10:53 AM