Thursday, April 12, 2012

Menambah Bar Notifikasi Untuk Blogger Dengan Tombol "Like" Facebook

11:13 AM Hzndi 8 comments

Notification Bar With Facebook Like Button
(source : mybloggertricks.com)
 
Jika tadi widget yang saya bagikan tidak menampilkan tombol like facebook, di widget yang sau ini akan ada tombol like facebooknya. Fungsinya sih hampir sama seperti widget sticky bar namun dengan adanya tombol like, bisa menambah fans kamu di halaman fans FB. Lihat tutorialnya di bawah ini:

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Cari kode ]]></b:skin> Kemudian kamu salin kode CSS di bawah ini dan letakan di atas kode ]]></b:skin>.

#mbt-stickybar{
background:#FF0000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJGQ2RQ7OnZu6M1xRt-59phar0mW5Gev4MGbGIlFddLt3gzMTDukfNaPS5bWqEiyYCz3LTXonBOGr2sR6IgNIZ40Vm8aokmhrkMxzMax8CEPW3p4blZgnh4Z2OQxlFrG0Ly-lqQY_a6Qc/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#mbt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#mbt-stickybar a:hover{
text-decoration:underline;
}
#mbt-stickybar p {margin:0; list-style:none;}
#mbt-stickybar img {vertical-align: middle;
      margin-right: 6px;}

3. Kamu cari lagi kode <body> atau </body>, kamu salin lagi kode di bawah ini dan letakan di bawah kode <body> (Jika kamu ingin menempatkannnya di bawah header) atau letakkan di </body> (Jika kamu ingin menempatkannya di bawah footer).

<div id='mbt-stickybar1'>
<div style='float:left; width:400px;'>
<a href='#'>Receive Free Updates Via Email. Subscribe Now!</a>
</div>
<div style='float:right; width:300px;'>
<table style='margin:0; padding:0;'>
<tr>
<td>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='alamat fan page Facebook kamu' layout='button_count' send='false' show_faces='false' width='80'/>
</td>
</tr>
</table>
</div>
</div>

NOTE :

- Ganti kode # dengan alamat feedburner kamu.
- Ganti kode yang berwarna biru dengan alamat url fan page facebook kamu.

5. Simpan template, Kode di atas di dapatkan dari mybloggertricks.com. Kunjungi juga situs-nya yah :)

Postingan Terkait:

Blogger
Social Sharing

Posted in: ,,,,

8 comments:

  1. RopinkApril 12, 2012 at 2:10 PM

    ada yang baru lagi nich, semangat sob

    ReplyDelete
  2. Area Dangdut KoploApril 12, 2012 at 2:11 PM

    mari bersenang-senang bersama :D

    ReplyDelete
  3. dhlondhenkApril 13, 2012 at 8:36 PM

    dua jempol untuk agan dah, selalu memberikan hal2 yang baru dan bermanfaat bagi pembaca,terutama pemula kyk saya,hehehe..lanjut gan,ane support n tunggu share ilmu berikutnya.

    ReplyDelete
    Replies
    1. HzndiApril 15, 2012 at 12:21 AM

      hahah si agan mah bisa saja :) ane juga pemula bang hehe

      Delete
  4. ada blogApril 14, 2012 at 7:42 PM

    langsung tak praktekin deh gan

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More