Friday, March 23, 2012

Membuat Sticky Bar yang Menampilkan Recent Posts

Sobat blogger pernah dengar dengan dengan kata Sticky Bar? Kalau tidak pernah, saya jelaskan sedikit tentang Sticky Bar . Sticky Bar adalah menu navigasi yang berada di atas header yang biasanya menampilkan menu social Bookmark seperti Facebook, Twitter, Dig dan lain sebagainya. Sticky Bar yang Rinjani Lovers share kali ini sangat berbeda dengan Sticky Bar pada umumnya. Sticky Bar ini berbeda karena menampilkan Recent Post. Aneh kan? Biasanya yang namanya recent post itu tampil di sidebar, tapi untuk yang satu ini, recent post tampil di Sticky Bar yang kita buat. Satu lagi kelebihan dari Sticky Bar ini, Recent post yang di tampilkan seperti Running Text (teks berjalan). Bagimana, Keren kan? Mungkin sobat blogger tidak bisa membayangkan apa yang sudah saya gambarkan tadi, Jadi untuk lebih jelasnya perhatikan saja Image di bawah ini!

sticky bar,sticky bar dengan recent post,cara buat sticky bar dengan recent post

Cara Buat Sticky Bar dengan Recent Posts :
  • Login dulu di http://www.blogger.com
  • Setelah itu, Klik Design dan klik Edit HTML
  • Back Up template sobat blogger terlebih dahulu
  • Gunakan CTRL + F, cari kode ]]></b:skin>
  • Kalau sudah ketemu kode ]]></b:skin>, ganti dengan kode berikut :
#latesthack-stickybar{background:#000000 url('http://1.bp.blogspot.com/-vVMsayzZX_M/T090HEfvMbI/AAAAAAAAASc/gRz_q3K2Spo/s1600/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;top:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}
#latesthack-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}
#latesthack-stickybar a:hover{text-decoration:underline;}
#latesthack-stickybar p{margin:0;list-style:none;}
#latesthack-stickybar img{vertical-align:middle;margin-right:6px;}
#latesthackclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}
]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src="http://latesthack.googlecode.com/svn/branches/stylishstickybar/stickybar.js"></script>
<script src="http://latesthack.googlecode.com/svn/branches/stylishstickybar/latesthackstickybar1.js"></script>
  • Selanjutnya cari kode <body>
  • Setelah kode <body>, letakkan kode berikut :
<div id='latesthack-stickybar'>
<script>
var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 100;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";
</script>
<script src="http://rinjanilovers.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " >
</script>
<a href="#" id="latesthackclose"  onclick="return false;">
<img src="http://4.bp.blogspot.com/-r2L8wiEO5YI/T093iVHY3MI/AAAAAAAAASk/fJKxxkIiPkE/s1600/cancel.png"/>
</a>
</div>
  • Simpan template sobat blogger atau Preview terlebih dahulu.

Tambahan :
  1. Ganti http://rinjanilovers.blogspot.com/ dengan URL blog sobat.
  2. var nMaxPosts = 10 adalah jumlah post yang akan ditampilkan
  3. nScrollDelay = 100 adalah kecepatan jalannya Recent post
  4. Kalau sobat blogger ingin mengganti arah dari Recent Post yang jalan tinggal ganti left menjadi right.
Kalau sobat blogger masih mengalami kesulitan untuk membuat Sticky Bar, gunakan kolom komentar yang tersedia untuk bertanya.

Dapatkan Artikel terbaru Rinjani Lovers secara gratis! Untuk itu, masukkan Email anda pada kolom di bawah ini. Setiap artikel yang kami publikasikan, akan langsung kami kirim ke Email anda

Delivered by FeedBurner

Baca Artikel menarik lainnya di bawah ini...



10 comments:

  1. CHECK YA MAS BRO BLOG SAYA 'BANYAK TIPS2 YNG PERLU ANDA KETAHUI TERIMA KASIH ..
    CHECK TKP http://putrapatiwara.blogspot.com/

    ReplyDelete
  2. info yang menarik untuk pengunjung blog

    ReplyDelete
  3. Terimakasih infonya saya akan coba pak..ini baru baca...sebelumnya minta maaf seaharusnya baca dulu baru koment..hehee.....

    ReplyDelete
    Replies
    1. Tidak apa-apa
      Malah bagus itu.
      yang penting komentarnya sob...

      Delete
  4. perlu dicoba nih.. makasih mas bro

    ReplyDelete
  5. mantap mas bri, akan langsung praktek ni

    ReplyDelete
  6. Makasih infonya, mas..saya bookmark dulu sambil mikir dimana kira2 yang bagus nempatin stickynya.

    Salam kenal dari Direktori Penerjemah Indonesia.

    ReplyDelete
  7. Wah keren juga nih,, mantep perlu di kayaknya..

    ReplyDelete
  8. Infonya bagus gan..

    mampir kemari agan" diatas http://www.jiper4ever.com
    jngan lupa difollow ya
    thank's

    ReplyDelete

home

Copyright © 2012 Tutorial Blogspot | Design by X-Template