Navigasi Halaman Web dan Blog

Navigasi Halaman merupakan fitur penomoran halaman yang berfungsi untuk mempermudah pengunjung dalam melihat isi atau ‘content’ dari sebuah webpage maupun blog dan boleh dikatakan fitur Navigasi Halaman sebagai pengganti fitur daftar isi sebuah webpage atau blog. Fitur ini biasanya diletakkan pada bagian bawah artikel pada halaman muka webpage atau blog, dengan model penomoran menggunakan angka 1,2,3,… dan seterusnya.
Pada wordpress fitur Navigasi halaman ini sudah tersedia pada template-template mereka, namun untuk blogspot belum menyediakannya. Namun anda tidak perlu kecewa, karena kita juga berkreasi sendiri untuk membuatnya.

Ada 2 cara yang akan saya bahas dalam 'Teknik Blogging' ini, yaitu dengan pemasangan Navigasi Halaman melalui ‘Edit HTML’ dan melalui penambahan ‘Gadget’ pada menu sidebar template. Jadi anda tinggal memilih mana yang menurut anda lebih fleksibel dan lebih mudah dalam pemasangan nantinya.

PEMASANGAN NAVIGASI HALAMAN MELALUI ‘EDIT HTML’

1. Login ke Account Blog anda

2. Pilih menu ‘Tata Letak' atau ‘Layout’ dan masuklah kedalam menu ‘Edit HTML’

3. Pada kotak 'Expand TemplateWidget' dibiarkan saja.

3. Cari kode :

]]></b:skin>

Hapus kode tersebut dan ganti dengan kode berikut :

.showpageArea a {

text-decoration:underline;

}

.showpageNum a {

text-decoration:none;

border: 1px solid #cccccc;

margin:0 3px;

padding:3px;

}

.showpageNum a:hover {

border: 1px solid #cccccc;

background-color:#cccccc;

}

.showpagePoint {

color:#333;

text-decoration:none;

border: 1px solid #cccccc;

background: #cccccc;

margin:0 3px;

padding:3px;

}

.showpageOf {

text-decoration:none;

padding:3px;

margin: 0 3px 0 0;

}

.showpage a {

text-decoration:none;

border: 1px solid #cccccc;

padding:3px;

}

.showpage a:hover {

text-decoration:none;

}

.showpageNum a:link,.showpage a:link {

text-decoration:none;

color:#333333;

}

]]></b:skin>

4. Berikutnya anda cari kode :

</ body>

Hapus kode tersebut dan ganti dengan kode :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v2.js' type='text/javascript'/>
</b:if>
<!--Page Navigation Ends-->
</body>

5. Simpan Template & Selesai.


PEMASANGAN NAVIGASI HALAMAN MELALUI MENU ‘TAMBAH WIDGET'

1. Login ke Account Blog anda

2. Pilih menu ‘Tata Letak' atau ‘Layout’, dan pada menu halaman pilih ‘Tambah Gadget’

3.Selanjutnya muncul kotak plugin gadget, anda Pilih 'HTML /Javasript'

4. Salin kode di bawah ini :

<style>

. blog-pager (

text-align: center;

margin-top: 10px;

font-size: 0.75em;

font-weight:

bold;

)

. showpageArea a (

text-decoration: underline;

padding: 2px 6px 2px 6px;

color: # 333; background: # 101010;

margin: 2px;

)

. showpagePoint (

padding: 2px 6px 2px 6px;

color: # ff6600;

background: # a0c800;

border: 1px solid # ccc;

margin: 2px;)

/ * Current page * /

. showpageOf (

padding: 2px 6px 2px 6px;

color: # 333;

background: # 101010;

border: 1px solid # ccc;

margin: 2px;

)

/ * Page (1), Page (2) ... * /

. showpageNum a (

text-decoration: none;

padding: 2px 6px 2px 6px;

color: # 0066cc;

background: # 101010;

border: 1px solid # ccc;

margin: 2px;

)

. showpageNum a: hover (

border: 1px solid # aaa;

background-color: # ccc;

color: # ff9600;

)

. showpageNum a: link (

text-decoration: none;

color: # 333;

)

. showpage a (

text-decoration: none;

padding: 2px 6px 2px 6px;

color: # 0066cc;

background: # F20808;

border: 1px solid # ccc;

margin: 2px;

) / * Selanjutnya, Sebelumnya ...*/

. showpage a: hover (

padding: 2px 6px 2px 6px;

color: # F20808;

background-color: # ff6600;

border: 1px solid # aaa;

margin: 2px;

)

. showpage a: link (

text-decoration: none;

color: # 333;

)

</ style>

<script type="text/javascript">

fungsi showpageCount (json) (

var thisUrl = location.href;

var htmlMap = new Array ();

var isFirstPage = thisUrl.substring (thisUrl.length-14, thisUrl.length )==". blogspot.com / ";

var isLablePage = thisUrl.indexOf ( "/ search / label /")!=- 1;

var isPage = thisUrl.indexOf ( "/ search? updated ")!=- 1;

var thisLable = isLablePage? thisUrl.substr (thisUrl.indexOf ( "/ search / label /") 14, thisUrl.length): "";

thisLable = thisLable.indexOf ("?")!=- 1? thisLable.substr (0, thisLable.indexOf ("?")): thisLable;

var thisNum = 1;

var postNum = 1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html ='';

var upPageHtml ='';

var downPageHtml ='';

var pageCount = 3;

var displayPageNum = 6;

var firstPageWord = 'First';

var endPageWord = 'terakhir';

var upPageWord = 'Kembali';

var downPageWord = 'Berikutnya';

var labelHtml = '<span class="showpageNum"> <a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for (var i = 0, post; post = json.feed.entry [i]; i + +) (

var timestamp = post.published. $ t.substr (0,10);

var title = Post.title. $ t;

if (isLablePage) (

if (judul !=''){

if (post.category) (

for (var c = 0, post_category; post_category = post.category [c]; c + +) (

if (encodeURIComponent (post_category.term) == thisLable) (

if (itemCount == 0 | | (itemCount% pageCount == (pageCount-1))) (

if (thisUrl.indexOf (timestamp)! =- 1) (

thisNum = postNum;

)

postNum + +;

htmlMap [htmlMap.length] = '/ search / label /' + thisLable + '? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08% 3A00 & max-results =' + pageCount;

)

)

)

) / / end if (post.category) (

itemCount + +;

)

) else (

if (judul !=''){

if (itemCount == 0 | | (itemCount% pageCount == (pageCount-1))) (

if (thisUrl.indexOf (timestamp)! =- 1) (

thisNum = postNum;

)

if (judul !='') postNum + +;

htmlMap [htmlMap.length] = '/ search? updated-max =' + timestamp + 'T00% 3A00% 3A00% 2B08% 3A00 & max-results =' + pageCount;

)

)

itemCount + +;

)

)

for (var p = 0; p <htmlMap.length; p + +) (

if (p> = (thisNum-displayPageNum-1) & & p <(thisNum + displayPageNum)) (

if (fFlag == 0 & & p == thisNum-2) (

if (thisNum == 2) (

if (isLablePage) (

upPageHtml = labelHtml + upPageWord + '</ a> </ span>';

) else (

upPageHtml = '<span class="showpage"> <a href="/">' + upPageWord + '</ a> </ span>';

)

) else (

upPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">' + upPageWord + '</ a> </ span>';

)

fFlag + +;

)

if (p == (thisNum-1)) (

html + = '<span class="showpagePoint"> <u>' + thisNum + '</ u> </ span>';

) else (

if (p == 0) (

if (isLablePage) (

html = labelHtml + '1 </ a> </ span> ';

) else (

html + = '<span class="showpageNum"> <a href="/"> 1 </ a> </ span>';

)

) else (

html + = '<span class="showpageNum"> <a href="'+htmlMap[p]+'">' + (p +1) + '</ a> </ span>';

)

)

if (eFlag == 0 & & p == thisNum) (

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">' + downPageWord + '</ a> </ span>';

eFlag + +;

)

) / / end if (p> = (thisNum-displayPageNum-1) & & p <(thisNum + displayPageNum)) (

) / / end for (var p = 0; p <htmlMap.length; p + +) (

if (thisNum> 1) (

if (! isLablePage) (

html = '<span class="showpage"> </ span>' + upPageHtml + '' + html + '';

)

)

html = '<div class="showpageArea"> <span class="showpage"> Page' + (postNum-1) + ': </ span>' + html;

if (thisNum <(postNum-1)) (

html + = downPageHtml;

)

if (postNum == 1) postNum + +;

html + = '</ div>';

if (isPage | | isFirstPage | | isLablePage) (

var pageArea = document.getElementsByName ( "pageArea");

var blogPager = document.getElementById ( "blog-pager");

if (postNum <= 2) (

html ='';

)

for (var p = 0; p <pageArea.length; p + +) (

pageArea [p]. innerHTML = html;

)

if (pageArea & & pageArea.length> 0) (

html ='';

)

if (blogPager) (

blogPager.innerHTML = html;

)

)

)

</ script>

src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" <script type="text/javascript"> </ script>

5. Letakkan kode tersebut pada kotak 'HTML / Javasript' dan jangan diberi judul.

6. Kemudian anda pindahkan atau Drag & Drop di bawah 'Kotak Postingan' seperti terlihat pada gambar :

7. Simpan dan lihat halaman muka blog anda.

Selamat mencoba dan semoga berhasil.

PR: wait...  I: wait...  L: wait...  LD: wait...  I: wait... wait...  Rank: wait...  Traffic: wait...  Price: wait...  CY: wait...  I: wait...  YCat: wait...  I: wait...  Top: wait...  I: wait...  L: wait...  C: wait...