Cara Membuat Halaman Navigasi Next Prev Dengan CSS

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.

Demo   CODE

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=" " rel="nofollow" target="_blank">Demo   CODE

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="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">previous page</a></li>
      <li class="selected">1</li>
      <li><a href="#" title="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">2</a></li>
      <li><a href="#" title="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">3</a></li>
      <li><a href="#" title="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">4</a></li>
      <li><a href="#" title="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">5</a></li>
      <li class="next"><a href="#" title="Cara Membuat Halaman Navigasi Next Prev Dengan CSS ">next page</a></li>
    </ul>
  </section>
  <!--End-->

Demikian Semoga bermanfaat!