Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Thursday, August 22, 2013

cara membuat widget subscribe di blog

Cara membuat widget subscribe di halaman blog lengkap dengan sosial media dan feedcount membuat halaman blog anda semakin lebih interaktif dan lebih ramah terhadap pengunjung sebab anda memudahkan pengunjung anda untuk mendapatkan free Update artikel dari blog anda. Tampilan widget ini lumayan menarik baik itu sistem warnanya sangat berfariasi. Widget ini menganut penulisan tag SEO Friendly , bila berbicara dengan HTML 5 masih memiliki error yaitu feedcount pada tutorial ini belum valid karena masih memiliki kode feedcount lama, bila anda memakai kode feedcount valid html 5 maka semua kode widget ini valid html 5. Oke langsung saja menuju TKP dan lihat gambar tampilannya dibawah ini :

cara membuat widget subscribe di blog

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 : Subscribe Box
By : Rivai Silaban | Blog Design
Update : 22/08/2013
******************************************/
#bdrs-scribe{
width:290px;
color:#000000;
padding:20px;
font-size:14px;
margin-bottom:5px;
border-radius:5px;
border: dashed #999999 1px;
background-color: #ECECDD;
height: 125px;
}
#bdrs-scribe .bbrs-title1 { margin-bottom:10px;margin-top:-10px; }
.bbrs-title1{
margin-left: 8px;
font-size:25px;
font-weight:bold;
border-radius:5px;
padding:1px 8px 2px 8px;
text-align:center;
color:#FF0000;
text-shadow: 0 1px 1px #000;
font-family: Georgia, "Times New Roman", Times, serif;
}
.bbrs-title {
font-family:Georgia, "Times New Roman", Times, serif;
color: #666666;
font-size: 12px;
font-style: italic;
text-align: center;
margin-bottom:7px;
margin-top:-5px;
}

#bdrs-button {
width:100px;
left:140px;
margin-top:-30px;
}
.bdrsbox-email{
color:#999999;
font-size:14px;
border: solid 1px;
border-radius:5px;
outline:none;
padding:0px 15px;
height:30px;
background-color: #DDF5F7;
box-shadow: 0 0 3px #333 inset;
border-color: #990000;
width: auto;
}
.bdrs-sosial{
margin-top:15px;
text-decoration: none;
width: 200px;
}
.bdrs-button {
margin-left:40px;
margin-bottom:0px;
border: none;
color: #fff;
text-transform: uppercase;
font-size: 13px;
padding: 5px 18px;
border-radius: 3px;
cursor: pointer;
background-color: #0099FF;
float: right;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
border:solid #333333 1px;
}
.bdrs-button:hover {
color: #CCCCCC;
background-color: #0066FF;
box-shadow:0 1px 2px #333;
border:solid #333333 1px;
}/*** Blog Design CSS and ***/


Install Program Tag HTML


  • Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  • Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di widget sidebar halaman blog.
  • Silahkan pilih " Tata Letak " pada dasbor blog anda.
  • klik "Add gadget " ( Tambahkan gadget )
  • Setelah muncul halaman gadget silahkan pilih " HTML/JavaScript ".
  • Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
  • Edit script dan save .

<div id="bdrs-scribe">
<div class="bbrs-title1">
Get Email Updates
</div>
<div class="bbrs-title">
Dapatkan update artikel terbaru dari kami, silahkan daftarkan email anda disini !!
</div>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onSubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><div>
<input class="bdrsbox-email" name="EMAIL" onBlur="if(this.value=='')this.value=this.defaultValue;" onFocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Your email address" />
<input name="submit" type="submit" class="bdrs-button" id="bdrs-button" value="Subscribe" title="submit" />
<input name="uri" type="hidden" value="ID FEEDBURNER" />
<input name="loc" type="hidden" value="en_US" /></div>
<div class='bdrs-sosial'>
<a href="LINK TWITTER " target="_blank" title="Twitter">
<img alt="twitter" src="http://1.bp.blogspot.com/-EW7f1OIu9Oc/UhXRHwPkxHI/AAAAAAAABto/zPKD-cDAIF0/s1600/T.png" style="height: 25px; width: 25px; padding-right: 5px;" /></a>
<a href="LINK RSS " target="_blank" title="Subscribe Via RSS">
<img alt="rss" src="http://3.bp.blogspot.com/-ddS1YEDPFso/UhXRFxjrP9I/AAAAAAAABtc/nb6B-dI9j0I/s1600/RS.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK FACEBOOK " target="_blank" title="facebook">
<img alt="facebook" src="http://1.bp.blogspot.com/-0rMWFPHL8q4/UhXRFJD5b3I/AAAAAAAABtQ/WbrBFh-EH_4/s1600/F.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK GLUS " target="_blank" title="gplus">
<img alt="gplus" src="http://2.bp.blogspot.com/-IpBq0lFuypU/UhXRFRb-uOI/AAAAAAAABtU/dUWGeSL47bs/s1600/G.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a>
<a href="LINK YOUTUBE " target="_blank" title="youtube">
<img alt="youtube" src="http://4.bp.blogspot.com/-DKYHy5Tw-PM/UhXRIYI8LzI/AAAAAAAABtw/XjSOhw_br94/s1600/Y.png" style="height: 25px; width: 25px;padding-right: 5px;" /></a></div>
<div style="float:right; margin-top: -30px;"><a href='http://feeds.feedburner.com/RivaiSilaban'> <img alt='feedcount' height='26' src='http://feeds.feedburner.com/~fc/RivaiSilaban?bg=660000&amp;fg=99FF00&amp;anim=1' style='border:0' width='88' title="reads"/> </a></div>
<div class="clr"></div></form></div><br />
<!-- Rivai Silaban | BLOG DESIGN Subscribe box End -->

Keterangan Code
  • Untuk kode CSSnya warna hijau [ 290px ] sesuaikan dengan lebar tampilan sidebar halaman blog anda silahkan anda edit CSSnya sesuai dengan thems template anda.
  • Untuk tulisan warna HIJAU adalah text judul widget
  • Tulisan kode warna MERAH ganti dengan URL blog anda, sesuai dengan tutorial
  • Kode tulisan warna BIRU ganti dengan link feedcount anda

Kesimpulan

Buat para bloger mania widget seperti ini sudah menjadi kebutuhan bila ingin bloging, Membuat widget widget yang bermanfaat untuk peningkatan trafik sudah menjadi pilihan para bloger, apalagi widget tersebut sudah dipadu dengan berbagai widget lainnya untuk keperluan bloging pastinya lebih simpel dan tidak memakan tempat pada halaman blog.

Untuk membuat widget ini valid HTML 5 anda harus memiliki kode feedcount anda sendiri yang valid HTML 5 sebab pada tutorial ini saya masih memakai kode feedburner bawaan yang lama ( belum valid HTML5 )

Widget Subscribe with Social media and feedcount
22 Agustus 2013

By : Admin 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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 4:29 PM

7 comments :

  1. Akhirnya bisa juga skrip ini dipasang diblogku, walau dg perjuangan berat. tks bang Rivai Silaban, Salam untuk keluarga.

    ReplyDelete
    Replies
    1. sama sama bang salam saya juga buat keluarga abang..

      oya btw kenapa sampe berjuang berat bang pdhl saya sudah buat rinciannya lebih detail bang.
      Thx atas kunjungannya..

      Delete
  2. mas kalo ingin tampilannya kayak yang di with seo gimana mas ..?

    ReplyDelete
    Replies
    1. tampilan widget yg mana sob apa tampilan templatenya maksudnya

      Delete
  3. yang tampila widget subscribe seperti di with seo gito lho mas ...

    ReplyDelete
    Replies
    1. silahkan kunjungi link dibawah ini untuk melihat tutorialnya.

      http://rivai-silaban.blogspot.com/2013/08/cara-membuat-widget-contact-di-blog.html

      Delete
  4. Thanks infonya sob, ane berhasil pasang di blog saya.

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog