Squirrel & Peanut · CSS Pagination

Tabel Konten
  1. HTML 
  2. CSS 
Squirrel & Peanut - CSS pagination

Desain elemen halaman berupa navigasi angka yang terispirasi dari tokoh kartun Flying Squirrel. Bentuk setiap item navigasi menggambarkan bahwa mereka adalah kacang-kacang pohon yang sangat disukai oleh tupai terbang ini. Memang tidak mirip, tapi cukup mewakili:

HTML 

<div id="blog-pager">
    <a class="prev" href="#">«</a>
    <a class="num" href="#">1</a>
    <a class="num active" href="#">2</a>
    <a class="num" href="#">3</a>
    <a class="num" href="#">4</a>
    <a class="next" href="#">»</a>
</div>

CSS 

#blog-pager {
  text-align:center;
  line-height:36px;
}

#blog-pager a {
  font:bold 16px Georgia,Serif;
  color:#711F05;
  text-decoration:none;
  margin:0px auto 10px;
  background-color:white;
  padding:10px 15px;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  box-shadow:0px 1px 2px rgba(0,0,0,0.2);
  -webkit-border-radius:40% 0% 40% 40%;
  -moz-border-radius:40% 0% 40% 40%;
  border-radius:40% 0% 40% 40%;
  position:relative;
  -webkit-transition:all 0.26s ease-in-out;
  -moz-transition:all 0.26s ease-in-out;
  -ms-transition:all 0.26s ease-in-out;
  -o-transition:all 0.26s ease-in-out;
  transition:all 0.26s ease-in-out;
}

#blog-pager a:before,
#blog-pager a.active:after {
  content:"";
  width:0px;
  height:0px;
  border:10px solid transparent;
  border-color:#B62B00 #B62B00 transparent transparent;
  position:absolute;
  top:0px;
  right:0px;
}

#blog-pager a.active:before,
#blog-pager a.active:after {
  border-width:6px;
  top:4px;
  right:4px;
}

#blog-pager a.active:after {
  top:auto;
  right:auto;
  bottom:4px;
  left:4px;
  border-color:transparent transparent #B62B00 #B62B00;
}

#blog-pager a:hover,
#blog-pager a.active {
  color:white;
  background-color:#711F05;
}

#blog-pager a.active {
  -webkit-border-radius:40% 0% 40% 0%;
  -moz-border-radius:40% 0% 40% 0%;
  border-radius:40% 0% 40% 0%;
}

#blog-pager a:active {
  background-color:#333;
}

Lihat Demo

6 Komentar

  • Bayu Handono

    pertamax :D

  • abang ichal

    woww.. bagus nihh..
    dulu sy pernah nyoba giniann.. tapi ga pke yg segitiga merah ituu

  • Ijal Fauzi

    Nah, yang saya mau tanya bagaimana nerapin ke blogger mas, dari sekian banyak tutorial yang bertebaran tentang numbered page beberapa pernah coba tapi gagal, dan ada yang kurang memuaskan, menurut saya loh :-bd

    Ayo ditunggu lanjutannya mas taufik

  • Taufik Nurrohman

    @Ijal Fauzi Hehe. Saya tidak punya kelanjutan mengenai kode ini :p Ini hanya sebagai inspirasi desain saja dan sama sekali tidak ada niatan untuk mengembangkannya. Mengingat ini hanya kode CSS, untuk menerapkan ke Blogger Saya rasa tidak begitu sulit. Cukup ganti selektor-selektor CSS di atas menjadi selektor-selektor paginator standar blogspot.
    Ini kerangka selektor navigasi halaman berangka umum blogspot yang Saya temukan:

    .showpageNum a {}
    .showpageOf {}
    .showpageNum a:hover {}
    .showpagePoint {}
    .showpageNum a setara dengan #blog-pager a
    .showpageNum a:hover setara dengan #blog-pager a:hover
    .showpagePoint setara dengan #blog-pager a.active
  • Unknown

    wahhh... tutorialnya lengkap gan... terimakasih!

  • tes

    succes gan :D

Komentar telah ditutup.