Cara Membuat Halaman Navigasi Next Prev Dengan CSS Hallo Sobat..., sebelumnya aku telah mengulas menciptakan halaman Grid dengan CSS, kali ini aku akan menyebarkan 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 dapat menciptakan halaman Navigasi Next Prev dengan demikian Artikel tersebut dapat Sobat buat beberapa halaman. Bagaimana Apakah Sobat berminat untuk memasangnya, oke berikut ini langkah-langkahnya :
Halaman Navigasi Next Prev Dengan CSS Mode I
Buka Editor Template, selanjutnya Sobat cari kode ]]></b:skin>, kemudian salin isyarat dibawah ini dan terapkan diatasnya
Selanjutnya pemasangan HTML, silahkan Sobat menuju Entri gres atau pada artikel yang sebelumnya sudah Sobat buat, kemudian copy isyarat dibawah ini dan pastekan pada Mode HTML dibawah postingan Sobat
Halaman Navigasi Next Prev Dengan CSS Mode II
Buka Editor Template, selanjutnya Sobat cari kode ]]></b:skin>, kemudian salin isyarat dibawah ini dan terapkan diatasnya
Selanjutnya pemasangan HTML, silahkan Sobat menuju Entri gres atau pada artikel yang sebelumnya sudah Sobat buat, kemudian copy isyarat dibawah ini dan pastekan pada Mode HTML dibawah postingan Sobat
Demikian Semoga bermanfaat!
Sumber http://www.websiteedukasi.com/
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 dapat menciptakan halaman Navigasi Next Prev dengan demikian Artikel tersebut dapat Sobat buat beberapa halaman. Bagaimana Apakah Sobat berminat untuk memasangnya, oke berikut ini langkah-langkahnya :
Halaman Navigasi Next Prev Dengan CSS Mode I
Buka Editor Template, selanjutnya Sobat cari kode ]]></b:skin>, kemudian salin isyarat 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 gres atau pada artikel yang sebelumnya sudah Sobat buat, kemudian copy isyarat 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 isyarat 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 gres atau pada artikel yang sebelumnya sudah Sobat buat, kemudian copy isyarat 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!
Sumber http://www.websiteedukasi.com/
