Membuat Navigasi Halaman Berupa Angka

Navigasi Halaman Berupa Angka

Membuat Navigasi Halaman Berupa Angka - Untuk blogger, biasanya link navigasi halaman ini berupa link POSTING LEBIH BARU atau POSTING LAMA. Yang menjadi masalah dari sistem navigasi seperti ini, pengunjung blog hanya bisa berpindah halaman demi halaman. Ini bisa diatasi dengan membuat navigasi angka yang bisa menampilkan beberapa halaman sekaligus.

Ini adalah salah satu widget yang mulai banyak digunakan. Jika anda tertarik untuk memasang navigasi angka seperti ini, maka ikuti prosedur sederhana berikut ini. Tapi untuk keamanan blog anda sebaiknya backup dulu template anda.

Berhubung trik seperti ini kadang berhasil pada suatu template namun bermasalah pada template lain saya mencoba menghidangkan dua metode. Yang pertama dengan memasang internal script pada template anda. Yang kedua menggunakan external script.

METODE 1: INTERNAL SCRIPT
  • Masuk ke akun blogger saudara
  • Masuk ke menu TEMPLATE, lalu pilih EDIT HTML. CENTANG EXPAND TEMPLATE WIDGET
  • Cari kode  ]]></b:skin>
  • Taruh kode berikut tepat di atas ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}
  • Sekarang cari kode di bawah ini
<b:section class='main' id='main' showaddelement='yes'>
  • Jika sudah ketemu, maka carilah terus ke bawah sampai menemukan kode penutupnya, seperti di bawah ini.
</b:section>
  • Hati-hati dalam mencari karena antara tag pembuka <b:section... dan tag penutupnya </b:section> terdapat kode yang sangat panjang.
  • Kalau sudah ketemu tag penutupnya, maka tepat sesudah kode tersebut, masukkan kode di bawah ini.
&lt;script type=&quot;text/javascript&quot;&gt;

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;

var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

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(title!=&#39;&#39;){
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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=&#39;&#39;){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p&lt; htmlMap.length;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
}else{
if(p==0){
if(isLablePage){
html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
}
}else{
html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
eFlag++;
}
}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
}//end for(var p =0;p&lt; htmlMap.length;p++){

if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
&lt;/script&gt;

&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

Perhatikan kode di bawah ini:
var pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Previous&#39;;
var downPageWord = &#39;Next&#39;;


Keterangan:
  • var pageCount itu adalah jumlah posting per halaman
  • var displayPageNum itu jumlah link halaman yang ditampilkan di bawah postingan
JIKA SUDAH SELESAI SIMPAN PERUBAHAN. JIKA ANDA MELAKUKANNYA DENGAN BENAR, MAKA TAMPILANNYA KURANG LEBIH SEPERTI DI BAWAH INI...
screenshot navigasi angka

 METODE 2 EXTERNAL SCRIPT
  • Upload kembali template yang sudah anda simpan terlebih dahulu di awal....
  • Cari kode </head>
  • Taruh kode berikut tepat di atas </head>
<!--pengaturan tampilan-->
<style type='text/css'>
.showpageArea {
padding: 0 2px;
margin-top:50px;
margin-bottom:5px;
}
.showpageArea a {
color: #000000;
font-weight:normal;
background:#fff;
padding: 3px 6px !important;
font-size:11px;
margin:0px 2px;
text-decoration:
none;-moz-border-radius:5px;
}

.showpageNum a {
font-weight:normal;
font-size:11px;
padding: 3px 6px !important;
margin:0px 2px;
text-decoration: none;
-moz-border-radius:5px;
}
.showpagePoint {
font-size:11px;
-moz-border-radius:5px;
padding: 2px 5px 2px 5px;
margin: 2px;
font-weight: bold;
}
.showpage {
font-size:11px;
-moz-border-radius:5px;
}
.showpage a:hover {
font-size:11px;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
font-weight:normal;
}
.showpage a:hover {
color: #FFFFFF;
background-color: #3d85c6;
}
.showpagePoint {
color: #FFFFFF;
background: #3d85c6;
border: 1px solid #3d85c6;
}
.showpageNum a:link,.showpage a:link {
color: #000000 !important;
background-color: #3d85c6;
border: 1px solid #3d85c6;
}
.showpageNum a:hover {
color: #FFFFFF !important;
background: #3d85c6 !important;
border: 1px solid #3d85c6;
}
.showpageArea a {
border: 1px solid #3d85c6;
}
.showpageArea a:hover {
border: 1px solid #3d85c6;
color: #FFFFFF !important;
background: #3d85c6 !important;
}
</style>
<!--akhir pengaturan tampilan-->
  • Kode #3d85c6 adalah untuk biru muda. Silahkan diganti sesuka anda
  • Cari kode </body> dan taruh kode di bawah tepat di atasnya
<!--navigasi halaman mulai dari sini-->
<script type='text/javascript'>
var pageCount=2;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://rickynavigation.googlecode.com/files/rickynavigation.js' type='text/javascript'/>
<script src='http://rickynavigation.googlecode.com/files/rickynavigation2.js' type='text/javascript'/>
<!--akhir dari navigasi halaman-->
  • var pageCount=2; adalah jumlah posting per halaman
  • var displayPageNum=5; adalah jumlah tombol pada sisi kiri sebelum menambah tombol baru
  • Simpan Perubahan Template anda....
  • Masuk ke menu SETELAN dan pilih POS DAN KOMENTAR
  • Atur agar jumlah postingan pada halaman utama sama dengan  nilai var pageCount
  • Simpan Setelan (lihat gambar dibawah)
atur jumlah postingan halaman utama

Lihat demonya klik di sini
Thanks sudah mampir gan.... jangan lupa add ya
https://www.facebook.com/ricky.pratama.12139
Jika tidak keberatan mohon vote-nya untuk blog saya di sosmed, thanks berat gan!
TIDAK PUNYA WAKTU MENCARI BACKLINK?

JASA BACKLINK TRIKMUDAHSEO
(KLIK LINK DI ATAS)
Info: Kursus SEO sudah tidak buka karena kesibukan online dan offline yang semakin meningkat. Harap maklum....dan terima kasih sudah berkunjung.

Silahkan Berkomentar

No comments:

 
TIDAK PUNYA WAKTU MENCARI BACKLINK?

JASA BACKLINK TRIKMUDAHSEO
(KLIK LINK DI ATAS)
Info: Kursus SEO sudah tidak buka karena kesibukan online dan offline yang semakin meningkat. Harap maklum....dan terima kasih sudah berkunjung.

Mencari Sesuatu?

Masukkan kata kunci topik yang diinginkan. Misalnya meta description, onpage, atau apa saja

Popular Posts

Google + Saya

Google+ Followers

Blog Followers

BLOG INI ONLINE SEJAK
22 MARET 2012
HATI-HATI COPY PASTE
Diharapkan agar tidak melakukan copy paste. Untuk pengutipan diharapkan disertai link ke halaman artikel di blog ini. Terima Kasih atas pengertiannya

Powered by Blogger.