Recent Posts

banner image

Cara Membuat Navigasi Halaman Blog

Oke kawan jumpa lagi di postingan tetang tutorial blog.Khususnya blogger.Kali saya akan share tetang Cara Membuat Navigasi Halaman Blog . apakah ada yang belum tahu tetang navigasu blog????sini ane sedikit jelaskan apa itu navigasi halaman blog ialah nomer halaman yang ada pada bawah blog biasanya...Navigasi halaman ini sudah di padukan dengan padukan dengan sedikit sentuhan css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template..
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;text-decoration:none}
.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;}
.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}
.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}
.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;}
.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
 Lalu tambahkan  script berikut DI ATAS tag </body>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://wildankafi.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>
 Gimana mudahkan Cara Membuat Navigasi Halaman Blog..sudah cukup dulu materi blogging yang saya share di sini...Jika merasa kesulitan silahkan tanyakan melalui koment di bawah ini..atau bisa add fb ane dengan nama Wildan mukafi.
Cara Membuat Navigasi Halaman Blog Cara Membuat Navigasi Halaman Blog Reviewed by siuwild on 15.40 Rating: 5

11 komentar:

  1. wah bisa tuh di contoh...???
    makasih infonya...!!!

    BalasHapus
  2. @firmanistiksama" gan ane cuman share ilmu yang ane ketahui...

    BalasHapus
  3. Navigasi nomor halaman yang cantik, saya telah terapkan tips ini, thanks for sharing, happy blogging

    BalasHapus
  4. makasih infonya berhasil nqambah cantik blog ane ..
    salam kenal yaw gan ,

    jangan lupa kunjungi juga blog ane
    http://nuyatha94.blogspot.com

    BalasHapus
  5. @DUNIA BISNISsama-sama sob,terimakasih telah berkunjung..

    BalasHapus
  6. share nya bagus sob..ane pasang ya

    BalasHapus
  7. bagus informasinya kunjungi balik ya http://www.gelimaonline.tk

    BalasHapus
  8. Saya coba terpakan gan, trims ya...di tunggu kunjungan baliknya.

    BalasHapus
  9. mantap gan, terima kasih banyak ya atas ilmunya.. :

    BalasHapus

Diberdayakan oleh Blogger.