Tooltip FeedBurner BuzzBoost

Friday, December 21, 2012


FeedBurner BuzzBoost digunakan untuk menampikan artikel terbaru dari suatu situs.
Dengan tambahan CSS, kamu bisa membuat Tooltip pada FeedBurner BuzzBoost tersebut
Jadi ketika cursor mouse disorot ke arah judul, maka secara otomatis akan muncul cuplikan artikel dari judul tersebut. Contohnya bisa lihat di sidebar blog aku ini atau pada halaman Juru Kunci News Aggregator

untuk mebuat Tooltip FeedBurner BuzzBoost
Masuk ke Feedburner -> Pilih akun feed yg udh kamu buat (kalau belum buat,ya buat dulu) -> Publicize -> BuzzBoost -> Atur Sesuai Keinginan atau langsung klik activate aja deh biar gk ribet


setelah klik activate kamu akan melihat kode seperti berikut ini

<script src="http://feeds.feedburner.com/IDFeedBurnerKamu?format=sigpro" type="text/javascript" ></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/Haidarax"></a><br/>Powered by FeedBurner</p> </noscript>

cukup ambil kode yg telah aku kasih warna merah saja
kalau kamu belum mengatur FeedBurner BuuzBoost nya, tambahkan kode dibawah ini setelah tulisan sigpro

&nItems=10&format=openLinks=new &displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below

 jadinya nanti akan seperi ini
<script src="http://feeds.feedburner.com/IDFeedBurnerKamu?format=sigpro&nItems=10&format=openLinks=new
&displayDate=true&displayExcerpts=true&displayTitle=false&excerptLength=50&dateLocation=below" type="text/javascript" ></script>

ganti angka 10 sesuai jumlah judul yg ingin ditampilkan
ganti angka 50 sesuai jumlah kata yg ingin di tampilkan pada Tooltip
masukan kodenya ke HTML/JAVASCRIPT atau kemana aja sesuka kamu deh
simpan

setelah itu tinggal tambahkan CSS untuk membuat Tooltipnya
Template > Edit HTML > Cari kode ]]></b:skin>
Salin kode CSS dibawah ini dan tempel di atas/sebelum kode ]]></b:skin>

.feedburnerFeedBlock div, .date, .feedItemAuthor, .feedTitle, .fbsubscribelink, .creditfooter{display:none; padding:2px 3px; margin-left:126px;margin-bottom:12px; width:253px;} .feedburnerFeedBlock li:hover div{border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px; font-size:12px; font-family:Trebuchet MS,Arial,Tahoma; display:block; position:absolute; border:1px solid #d6d6d6;background:#ffffff; color:#333; padding:21px 10px 10px 10px; }

simpan dan lihat hasilnya :D

26 komentar:

  1. tadi baru aja saya kesana :)

    tapi bingun itu buat apa ehhh ternyata buat ini toh :D

    ReplyDelete
  2. Nice Share Sob, Keep Blogging...
    ditunggu kunjungan baliknya di www.njajalae.com

    #Blog Walking

    ReplyDelete
  3. Replies
    1. gk ush bingung, taruh dimana aja bisa :P
      ya sesuai selera aja mas :D

      Delete
  4. wah udah ganti template ya gan..:D
    lebih enteng nih..:)

    ReplyDelete
    Replies
    1. masih tahap renovasi gan
      mungkin nanti akan berat lagi :D
      hahaha

      Delete
  5. Memang agak jarang kita lihat difungsikan tooltip feedburner ini.Saya aja baru tahu caranya disini.

    ReplyDelete