Diberdayakan oleh Blogger.
» » Cara Pasang Nomor Navigasi Untuk BLOGG

Cara Pasang Nomor Navigasi Untuk BLOGG

Add Comment
Navigasi Nomor Halaman pada Blog, yap.. itu yang akan Kamu Klik share pada postingan kali ini.
Navigasi Nomor Halaman pada Blog atau yang biasa yang disebut Page Number adalah urutan nomor-nomor halaman pada blog kita. Tampilan Page number yang bakal Kamu Klik share seperti ini sob:
Gimana tampilannya ? Tentunya navigasi halaman bernomer atau page number ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada.
Buat kamu yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. wkwk..
Bagaimana cara membuat navigasi nomer halaman blog di blogger?


Cara Pasang Navigasi Halaman:






  • Login ke blogger
  • Klik Rancangan/Design, kemudian klik menu Edit HTML (bagi pengguna blogger tampilan baru langsung ke tab Template saja)
  • Beri centang pada bagian Expand Template Widget
    • Cari kode beriku(ctrl+f)
    </body>
    Jika kode tersebut sudah dapat silakan pasang kode berikut di atas kode </body> tadi 

    <script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
     
     
     
    atau jika tidak bisa gunakan yang ini 
     
     
    <script type='text/javascript'>//<![CDATA[
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=10;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
//]]></script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
     
     
    Catatan :
    var postperpage=10; = jumlah poting perpage (perhalaman)
    var numshowpage=4; = jumlah nomor navigasi yang ditampilkan
    Jangan disimpan dulu ya, karena masih ada kode yang haru kamu pasang lagi.
    Sekarang cari kode
    'data:label.url'
    Kemudian ganti kode tersebut dengan kode ini
    'data:label.url + &quot;?&amp;max-results=10&quot;'

    Lajut ...

    6 Macam Style Navigasi Halaman Untuk Blogger

    Sekarang cari kode ]]></b:skin>
    Jika sudah dapat silakan pasang kode css berikut tepat di atasnya, kemudian simpan pengaturan template kamu. Silakan pilih salah satu dari 6 Style berikut (Ingat, salah satu saja, urutan gambar di atas sudah saya sesuaikan dengan urutan style):


     
    Style 1


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    .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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 -50px repeat-x;
      }
       
    .showpageNum a:hover {
      border:1px solid #888;
      background: #ccc url(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_a0U9fJI/AAAAAAAAAAU/qcqAF8aqWME/s1600/wp1.jpg) 0 0 repeat-x;
      text-decoration: none;
      }


    Style 2


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    .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(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 -50px repeat-x;
      }
       
    .showpageNum a:hover {
      border:1px solid #aeae0a;
      background: #ccc url(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/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(http://1.bp.blogspot.com/_McxL-_3YYuM/TBG_enC7gWI/AAAAAAAAAAc/HWqEJ9LyzPc/s1600/wp2.jpg) 0 0 repeat-x;
      text-decoration: none;
      }


    Style 3


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    .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(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -25px repeat-x;
      }
       
    .showpageNum a:hover {
      background: #044697 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 -50px repeat-x;
      }
    .showpagePoint {
      color:#fff;
      padding: 3px 8px;
      margin: 2px;
      font-weight: 700;
      background: #e30000 url(http://2.bp.blogspot.com/_McxL-_3YYuM/TBG_h_wTHCI/AAAAAAAAAAk/rFiXqN3fyes/s1600/wp3.jpg) 0 0 repeat-x;
      text-decoration: none;
      }
    .showpageOf{
      margin:0 8px 0 0;
      }


    Style 4


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    .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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/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(http://4.bp.blogspot.com/_McxL-_3YYuM/TBG_pY-zi5I/AAAAAAAAAAs/NhvUZ3iOFe4/s1600/wp4.jpg) 0 0 repeat-x;
      text-decoration: none;
      }
    .showpageOf{
      margin:0 8px 0 0;
      }



    Style 5


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    .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(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -50px repeat-x;
      }
       
    .showpageNum a:hover {
      background: #666 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 -25px repeat-x;
      }
    .showpagePoint {
      color:#fff;
      padding: 3px 8px;
      margin: 2px;
      font-weight: 700;
      background: #06a2b9 url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG_wCOTrOI/AAAAAAAAAA0/MaANtQYQwgg/s1600/wp5.jpg) 0 0 repeat-x;
      text-decoration: none;
      }
    .showpageOf{
      margin:0 8px 0 0;
      }



    Style 6


    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    .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;
      }



    Nah itulah tutorial membuat navigasi halaman di blogger.
    Selamat mencoba dan semoga berhasil 

    Sumber 6 Macam Style Navigasi Halaman Untuk Blogger :
    http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/
    http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/ http://blog.ahmadrifai.net/2012/01/6-macam-style-navigasi-halaman-untuk.html

    Tips and Trick Blogg
    Bagikan :
    +
    Next
    « Prev Post
    Previous
    Next Post »
    0 Komentar untuk "Cara Pasang Nomor Navigasi Untuk BLOGG"

    coment anda sangat bermanfaat.......

     
    Copyright © 2015 KiloMeters 07 - All Rights Reserved
    Template By Kunci Dunia
    Back To Top