Pada postingan sebelumnya saya share tentang cara memasang Pagenumber/Navigasi Halaman.
Jika kalian merasa kurang puas dengan style/tampilan Page numbernya. Maka kali ini saya akan berbagi tentang cara merubah tampilannya tersebut.
Untuk caranya adalah sebagai berikut :
Sumber : Abu farhan
1. Ikuti langkah pada postingan CARA MEMASANG NAVIGASI HALAMAN/PAGE NUMBER
2. Ganti kode pada langkah ke-2 dengan kode dibawah ini :
Untuk style 1: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_20BQHr8UNy0vP6jtcC98od265ofOXD8ZjS8D_VAQ8ztJzv28iZW09jh4pcnACeTaviUTgYtqb9OOctDJzZ-BO3RbXleWyM08VHMQSD_2_w9TyILuvE92q2T_q1JH6mb5lckZqBcN3Po/s1600/wp1.jpg) 0 0 repeat-x;
text-decoration: none;
}
]]></b:skin>
Untuk style 2: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #919106;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #aeae0a;
background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #919106;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztDS04OjLd_TwQ845gradYD2E4nTqe8dUK9FDcZiaREuZerknNg3-78YHi1nYsdtvYUx0NYAPxFKoTrNaVZgALjXCPKJ-PkcNw7-5awjkYrIhbrpnYAXQlVWKxKZ0bxxkf2BMXZGLxu0/s1600/wp2.jpg) 0 0 repeat-x;
text-decoration: none;
}
]]></b:skin>
Untuk style 3: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #363636 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 -25px repeat-x;
}
.showpageNum a:hover {
background: #044697 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #e30000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_PgkhXy_uDMrdiM_a0laMGHqFNihODTyf6wcqkX9zMP4_-aqT5J-Hp9-cZpWns7FoTL7fPYs7ZbnF3x5zezMoTuudHCCQI49aZ_PRCsmnvsaeySDxcvXtwxdKnOB46q63zI5pZbQUA8/s1600/wp3.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>
Untuk style 4: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 4px;
margin:0 4px;
text-decoration: none;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 -25px repeat-x;
}
.showpageNum a:hover {
border-top:2px solid #999;
border-left:1px solid #999;
border-right:1px solid #999;
border-bottom:1px solid #999;
background: #999 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 -50px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
border-top:2px solid #000;
border-left:1px solid #000;
border-right:1px solid #000;
border-bottom:1px solid #000;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBZJlm00qWoE7P2ohHxPPlWtNWyM7qRFFR8-PqY5_odJ2OM-YUY07XFcwSjKkrWEflU8JbMB0ndqNnIygCFqZczOI-HAprO4B5fTHjdFLJMfCAeXpY_Blk_ApxfYIzbDHwYcjf4xXq_rE/s1600/wp4.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>
Untuk style 5: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 -25px repeat-x;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #06a2b9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJcDDiNGkP_j17I0q922ijSQkWjkhk8MvOq2YjKAXwEWbf2d41c3DY_cyOVLDK9GzInvzGmeDwZpf_2eKri4N8mtFm104ecqxPaz9k5ND7YSO62bkJsUwajYwl9HnUcfy0nDdKDbfMKA/s1600/wp5.jpg) 0 0 repeat-x;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>
Untuk style 6: Demo
.showpageArea {
font-family:verdana,arial,helvetica;
color: #fff;
font-size:11px;
margin:10px;
padding:8px 20px;
background: #333;
}
.showpageArea a {
color: #fff;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
background: #666;
}
.showpageNum a:hover {
background: #888;
}
.showpagePoint {
color:#fff;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
background: #da6100;
text-decoration: none;
}
.showpageOf{
margin:0 8px 0 0;
}
]]></b:skin>
3. Klik Save Template
4. Selesai
Keterangan:
- Untuk mempermudah mencari kode gunakan ctrl+f
- Jika kode ada yang ga bisa ditemukan coba kilik Expand Template widget.
Semoga bermanfaat and happy bloging
blogwalking, salam kenal
BalasHapus