MEMBUAT NAVIGASI NOMOR HALAMAN VARIASI-2

MUSIK DIGITAL pada bagian yang terdahulu telah disuguhkan cara membuat navigasi nomor halaman variasi-1, kali ini MUSIK DIGITAL akan menyuguhkan cara membuat navigasi nomor halaman variasi-2 yang agak lebih bagus tampilannya serta terkesan lebih profesional dan yang jelas lebih mempercantik penampilan blog yang kita miliki. Seperti gambar di bawah ini tampilannya.

Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai tampilan template anda.

Ya udah langsung aja nih tutorialnya..

Tambahkan  kode css berikut DI ATAS ]]></b:skin>

.showpageArea{padding:10px;background:#fff} .showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;<span class="IL_AD" id="IL_AD2">text-decoration</span>:none}<br /> .showpageNum a{font-weight:<span class="IL_AD" id="IL_AD9">bold</span>;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px <span class="IL_AD" id="IL_AD5">solid</span> #fff;background:#fff;}<br /> .showpageNum a:hover{color:#fff;background: #ca1717;<br /> filter: progid:DXImageTransform.<span class="IL_AD" id="IL_AD8">Microsoft</span>.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 /> .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 /> .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 /> .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 /> .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}</div> <div class="separator" style="clear: both; text-align: center;"> </div>

Lalu tambahkan  script berikut DI ATAS tag </body>

<b:if <span class="IL_AD" id="IL_AD7">cond</span>='data:blog.pageType != &quot;item&quot;'><br /> <<span class="IL_AD" id="IL_AD10">script type</span>='text/<span class="IL_AD" id="IL_AD12">javascript</span>'><br /> var pageCount=5;<br /> var displayPageNum=5;<br /> var upPageWord =&#39;&#9668;&#39;;<br /> var downPageWord =&#39;&#9658;&#39;;<br /> </script><br /> <script src='http://wildankafi.googlecode.com/files/pagenav.js' type='text/javascript'/><br /> </b:if><b> </b></div>

Simpan template anda dan lihat hasilnya.

Sumber inspirasi : http://mafiakafi.blogspot.com/2012/03/cara-membuat-navigasi-halaman-blog.html

Tweet