Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Monday, September 25, 2017

Tutorial Membuat Numbered Page Navigation Pada Blog

Numbered Page Navigation
Screenshot Numbered Page Navigation

Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<style type="text/css">
.blog-pager,#blog-pager{
font-family:arial, serif;
font-weight:bold;
font-size:12px;
width:98%;}

.showpageNum a,.showpage a {
background:transparent url(http://3.bp.blogspot.com/-quBO8HJ2-bg/TrrjJINNSQI/AAAAAAAAAGM/T9oojmG1K_o/s1600/lite.png) repeat-x;
background-position:0px -0px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:0px 1px 0 1px;
padding:3px 10px;
color:#222;
line-height:30px;
cursor:pointer;}

.showpageNum a:hover,.showpage a:hover {
background-image:url(http://3.bp.blogspot.com/-quBO8HJ2-bg/TrrjJINNSQI/AAAAAAAAAGM/T9oojmG1K_o/s1600/lite.png) repeat-x;
background-position:0px -30px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#111;
-text-decoration:underline;}

.showpageOf{
margin:0 8px 0 0;
background:transparent url(http://3.bp.blogspot.com/-quBO8HJ2-bg/TrrjJINNSQI/AAAAAAAAAGM/T9oojmG1K_o/s1600/lite.png) repeat-x;
background-position:0px -0px;
border:2px solid #555;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
line-height:30px;
padding:3px 10px;
color:#222;}

.showpagePoint {background:transparent url(http://3.bp.blogspot.com/-quBO8HJ2-bg/TrrjJINNSQI/AAAAAAAAAGM/T9oojmG1K_o/s1600/lite.png) repeat-x;
background-position:0px -30px;
margin:0 3px 0 3px;
padding:3px 10px;
line-height:30px;
cursor:pointer;
white-space:nowrap;
border:2px solid #111;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#777;
text-decoration:underline;
font-weight:bold;
 </style>

<script type='text/javascript'>
//<![CDATA[
    var postperpage=6;
    var numshowpage=4;
    var upPageWord ='« Prev ';
    var downPageWord ='Next »';
    var urlactivepage=location.href;
    var home_page="/";

//]]>
</script>

<script type='text/javascript'src='https://dl.dropboxusercontent.com/s/msf4tmk4gr7gzs9/navipage-faiz-tutorial.js'></script>
 Keterangan:
  • var postperpage=6;  -  Gantikan nilai 6 dengan bilangan entri pada setiap halaman.
  • var numshowpage=4;  -  Gantikan nilai 4 dengan bilangan number navigation yang akan dipaparkan.
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Numbered Page Navigation Pada Blog