Recent Post Merupakan salah satu Element blog yang sangat berperan penting dalam sebuah blog. yaitu untuk mempermudahkan pengunjung untuk melihat postingan yang lain. Sebenarnya setiap pengunjung tidak selalu ingin membaca artikel kita. Mereka yang menemukan artikel kita melalui browsing sangat mungkin ingin mendapatkan bacaan lengkap yang sesuai dengan kebutuhan mereka. Tapi jika yang berkunjung ke blog kita hanya sekedar blogwalking untuk meningkatkan traffic, Tentu nya mereka tidak membaca seluruh artikel kita.
Pada postingan kali ini saya share Bagaimana Membuat Sticky Bar Recent Posts. Nah bagai mana pulak itu ?? sedikit saya jelaskan ...Sticky Bar adalah menu navigasi yang berada di atas header yang biasanya menampilkan menu social Bookmark seperti Facebook, Twitter, Digs dan lain sebagainya. tapi disini kita alihkan menjadi Sebuah Recent Post yang unik dan tidak memakan ruang di blog sobat. sobat bisa melihat demo nya DISINI
Cara Buat Sticky Bar dengan Recent Posts :
- Login blog sobat
- Setelah itu, Klik Design dan klik Edit HTML
- BackUp terlebih dahulu template sobat
- Gunakan CTRL + F, cari kode ]]></b:skin> setelah ketemu tarok kode dibawah ini di atas
]]></b:skin>
#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;
- Setelah itu cari lagi code ]]></b:skin>, copikan code di bawah ini tepat di bawahnya
<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>
- Selanjut nya cari lagi Code <body> pastekan code dibawah ini tepat di bawah code <body> tersebut
<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://aieza-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&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>
- Epss jangan dulu di save, 10 ganti sesuai keinginan sobat, 100 untuk mengatur kecepatan nya,, silahkan sobat ganti sesuai kegininan sobat.. dan
http://aieza-blog.blogspot.com ganti dengan URL blog sobat
- Save Template nya
- Semoga Bermanfaat