Posted by Aak
Aak-share.com Updated at: 2:04:00 PM

Cara Membuat Halaman Navigasi Next Prev Dengan CSS

No comments:
Cara Membuat Halaman Navigasi Next Prev Dengan CSS ~ Hallo Sobat..., sebelumnya saya telah mengulas membuat halaman Grid dengan CSS, kali ini saya akan berbagi Tpis dan trik cara membuat Halaman Navigasi Next Prev Dengan CSS. Tentunya Sobat sering melihat  Navigasi Next Prev biasanya pada homepage, namun navigasi Next Prev bukanlah di homepage tetapi pada halaman postingan.


Navigasi Next Prev merupakan navigasi halaman yang di ciptakan dengan properti CSS, apabila apabila Artikel yang Sobat buat sangat panjang maka akan terkesan tidak rapih. Solusinya Sobat bisa membuat halaman Navigasi Next Prev dengan demikian Artikel tersebut bisa Sobat buat beberapa halaman. Bagaimana Apakah Sobat berminat untuk memasangnya, baiklah berikut ini langkah-langkahnya :

 Halaman Navigasi Next Prev Dengan CSS  Mode I


Buka Editor Template, selanjutnya Sobat cari kode ]]></b:skin>, kemudian salin kode dibawah ini dan terapkan diatasnya

.pagination,
.pagination li a {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.pagination li { background-color: lightseagreen; }
.pagination a {
  font-weight: 300;
  padding-top: 1px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.25);
  border-left-width: 0;
  min-width:44px;
  min-height:44px;
  color: rgba(255,255,255,.85);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,.35);
}
.pagination li:not([class*="current"]) a:hover {
  background-color: rgba(255,255,255,.2);
  border-top-color: rgba(0,0,0,.35);
  border-bottom-color: rgba(0,0,0,.5);
}
.pagination li:not([class*="current"]) a:focus,
.pagination li:not([class*="current"]) a:active {;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
  border-left-width:1px;
}
.pagination li:first-of-type a {
  border-left-width: 1px;
}
.pagination li:first-of-type span,
.pagination li:last-of-type span,
.pagination li:nth-of-type(2) span,
.pagination li:nth-last-of-type(2) span {
  /* screen readers only */
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.pagination li:first-child a::before,
.pagination li:last-child a::after,
.pagination li:nth-of-type(2) a::before,
.pagination li:nth-last-of-type(2) a::after {
  display: inline-block;
  font-family: Fontawesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
          transform: translate(0, 0);
}
.pagination li:first-child a::before,
.pagination li:last-child a::after { content: "\f100"; }
.pagination li:nth-of-type(2) a::before,
.pagination li:nth-last-of-type(2) a::after { content: "\f104"; }
.pagination li:last-child a::after,
.pagination li:nth-last-of-type(2) a::after { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
.pagination li.current a {
  padding-top:.25em;
  color: rgba(255,255,255,1);
  background-color: rgba(255,255,255,.15);
  box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,.25);
  cursor: default;
  pointer-events: none;
}
@media only screen and ( max-width: 64.063em ) {
  .pagination li:first-child,
  .pagination li:last-child {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
}
@media only screen and ( max-width: 40.063em ) {
  .pagination li {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .pagination li.current,
  .pagination li:first-of-type,
  .pagination li:last-of-type,
  .pagination li:nth-of-type(2),
  .pagination li:nth-last-of-type(2){
    position: initial;
    top: initial;
    left: initial;
  }
  .pagination li:nth-of-type(2) a { border-left-width: 0; }
}
@media only screen and ( max-width: 30.063em ) {
  h1 { font-size: 1.35em !important; }
  .pagination li:first-child,
  .pagination li:last-child {
    /* screen readers only */
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .pagination li:nth-of-type(2) a { border-left-width: 1px; }
}
@media only screen and ( max-width: 15.063em ) {  /* For watches? */

  .pagination li { width: 50%;}

  .pagination li.current {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
    border-left-width: 1px;
  }
}


Selanjutnya pemasangan HTML, silahkan Sobat menuju Entri baru atau pada artikel yang sebelumnya sudah Sobat buat, lalu copy kode dibawah ini dan pastekan pada Mode HTML dibawah postingan Sobat

<ul aria-label="Pagination" class="pagination" role="menubar">
<li><a href="http://www.aak-share.com/"><span>First</span></a></li>
<li><a href="http://www.aak-share.com/"><span>Previous</span></a></li>
<li><a href="http://www.aak-share.com/">1</a></li>
<li><a href="http://www.aak-share.com/">2</a></li>
<li><a href="http://www.aak-share.com/">3</a></li>
<li ><a href="http://www.aak-share.com/">4</a></li>
<li><a href="http://www.aak-share.com/">5</a></li>
<li><a href="http://www.aak-share.com/">6</a></li>
<li><a href="http://www.aak-share.com/">7</a></li>
<li><a href="http://www.aak-share.com/">8</a></li>
<li><a href="http://www.aak-share.com/">9</a></li>
<li><a href="http://www.aak-share.com/">10</a></li>
<li><a href="http://www.aak-share.com/"><span>Next</span></a></li>
<li><a href="http://www.aak-share.com/"><span>Last</span></a></li>
</ul>


Halaman Navigasi Next Prev Dengan CSS  Mode II



Buka Editor Template, selanjutnya Sobat cari kode ]]></b:skin>, kemudian salin kode dibawah ini dan terapkan diatasnya

.archive-pages li a:hover{
  color:#000;
}
.archive-pages li.selected{
  color:white;
}
.archive-pages a,
.archive-pages a:visited{
  color:#555;
}
.archive-pages li.selected{
  color:white;
  padding:5px;
  width:18px;
  line-height:20px;
  background: rgb(53,121,214);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)), color-stop(91%,rgba(53,121,214,1)), color-stop(100%,rgba(27,85,157,1)));
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: radial-gradient(ellipse at center,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3579d6', endColorstr='#1b559d',GradientType=1 );
}
.archive-pages li.selected:hover{
  cursor:default;
  background: rgb(53,121,214);
  background: -moz-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%, rgba(53,121,214,1) 91%, rgba(27,85,157,1) 100%);
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(53,121,214,1)), color-stop(91%,rgba(53,121,214,1)), color-stop(100%,rgba(27,85,157,1)));
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: -o-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: -ms-radial-gradient(center, ellipse cover,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  background: radial-gradient(ellipse at center,  rgba(53,121,214,1) 0%,rgba(53,121,214,1) 91%,rgba(27,85,157,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3579d6', endColorstr='#1b559d',GradientType=1 );
}
.archive-pages li:hover{
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(196,196,196,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(196,196,196,1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(196,196,196,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#c4c4c4',GradientType=0 );
}
.archive-pages li a{
  cursor:pointer;
  line-height:20px;
  display:block;
  padding:5px;
  float:left;
  width:18px;
  text-aling:center;
}
.archive-pages{
  diaply:block;
  background-color:#f4f4f4;
  float:left;
  padding:0px;
  margin:0px;
  font-size:.8em;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  border:1px solid silver;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.archive-pages ul{
  float:left;
  margin:0px;
  padding:10px;
  list-style:none;
}
.archive-pages li{
  border:1px solid silver;
  float:left;
  font-weight:700;
  margin:0 2px;
  text-align:center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(214,214,214,1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(214,214,214,1)));
  background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
  background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
  background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
  background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(214,214,214,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#d6d6d6',GradientType=0 );
}
.archive-pages .first a,
.archive-pages .previous a,
.archive-pages .next a,
.archive-pages .last a{
  overflow:hidden;
  white-space:nowrap;
  -webkit-transition-duration: 300ms;
  -webkit-transition-property: width,text-indent,letter-spacing;
  -webkit-transition-timing-function: ease;
  -moz-transition-duration: 300ms;
  -moz-transition-property: width,text-indent,letter-spacing;
  -moz-transition-timing-function: ease;
  -o-transition-duration: 300ms;
  -o-transition-property: width,text-indent,letter-spacing;
  -o-transition-timing-function: ease;
}
.archive-pages a{
  text-decoration:none;
}
.archive-pages .next a:after,
.archive-pages .last a:after{
  content:" »";
}
.archive-pages .first a:before,
.archive-pages .previous a:before{
  content:'« '
}
.archive-pages .first a:hover,
.archive-pages .previous a:hover,
.archive-pages .next a:hover,
.archive-pages .last a:hover{
  width: 100px;
  text-indent:0;
  letter-spacing:0px;
}
.archive-pages .first a{
  text-indent:+6px;
  letter-spacing:10px;
}
.archive-pages .previous a{
  text-indent:+7px;
  letter-spacing:10px;
}
.archive-pages .next a{
  text-indent:-159px;
  letter-spacing:10px;
}
.archive-pages .last a{
    text-indent:-154px;
  letter-spacing:10px;
}


Selanjutnya pemasangan HTML, silahkan Sobat menuju Entri baru atau pada artikel yang sebelumnya sudah Sobat buat, lalu copy kode dibawah ini dan pastekan pada Mode HTML dibawah postingan Sobat
<!--Pagination Start-->
  <section class="archive-pages">
    <ul>
      <li class="previous"><a href="#" title="previous page">previous page</a></li>
      <li class="selected">1</li>
      <li><a href="#" title="Nav 2">2</a></li>
      <li><a href="#" title="Nav 3">3</a></li>
      <li><a href="#" title="Nav 4">4</a></li>
      <li><a href="#" title="Nav 5">5</a></li>
      <li class="next"><a href="#" title="next page">next page</a></li>
    </ul>
  </section>
  <!--End-->

Demikian Semoga bermanfaat!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments