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 Tips Gratis 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!
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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPbRupvTDxIv5d0znXXvfQx49slyV-4wyvKBbo6FCmTCG-b1yAiTLbHkNUmgpEaO9BB-SfdLcfLLh9mN4haVSsr6hryqK3Dzn8acWWPXnYONyXyDJl7esNp6w3CXxqZqUMXUiMKmXf_Qc/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://tip-gratis.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10 " >
</script>
<a href="#" id="latesthackclose" onclick="return false;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfqyXqNXl_Wohvqa8FELcjxzy4HB73__hqG-yktUvVju_n_q8qlAwTJhnpp4uJtdB6Ge8MbMT-ctJ5IAGhR80PloD3IdLTGzt8V2ulOJ6G52WE92KBVrnKN7Bd2dPOdiJyEZfBcsFkpgo/s1600/cancel.png"/>
</a>
</div>
- Simpan template sobat blogger atau Preview terlebih dahulu.
Tambahan :
- Ganti http://tip-gratis.blogspot.com/ dengan URL blog sobat.
- var nMaxPosts = 10 adalah jumlah post yang akan ditampilkan
- nScrollDelay = 100 adalah kecepatan jalannya Recent post
- Kalau sobat blogger ingin mengganti arah dari Recent Post yang jalan tinggal ganti left menjadi right.
Semoga artikel Membuat Sticky Bar yang Menampilkan Recent Posts bermanfaat bagi Anda.
Post a Comment