Cara Memasang Navigasi Blogspot

Share on :

Tweet

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi masalah cara memasang navigasi blogspot,untuk pengunjung setia blog ini. Navigasi halaman ini dibuat dengan menggunakan kode css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.Berikut ini penampakannya:


Oke langsung saja kita bahas cara pembuatannya.

1. Login Blogger.
2. Pilih Rancangan, dan masuk ke EDIT HTML.
3. Jangan lupa Expand Template Widget.
4. Cari kode berikut (]]></b:skin>) dan letakkan kode CSS dibawah ini di atas kode tadi

.showpageArea{padding:10px;background:#fff} <br /> <br />.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none} <br /> <br />.showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;} <br /> <br />.showpageNum a:hover{color:#fff;background: #ca1717; <br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); <br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); <br />background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;} <br /> <br />.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717; <br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); <br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); <br />background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} <br /> <br />.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;} <br /> <br />.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717; <br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); <br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); <br />background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px} <br /> <br />.showpage a:hover{background: #ca1717; <br />filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717'); <br />background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717)); <br />background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px} <br />#showlastpage a{font-weight:bold}

Setelah itu tambahkan script berikut DI ATAS tag </body>
<b:if cond='data:blog.pageType != "item"'> <br /><script type='text/javascript'> <br />var pageCount=5; <br />var displayPageNum=5; <br />var upPageWord ='◄'; <br />var downPageWord ='►'; <br /></script> <br /><script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/> <br /></b:if>

Dan terakhir pertinjau template sobat jika tidak ada masalah save template dan lihat hasilnya. Bagaimana, mudah kan?.

Artikel Terkait: