Saturday, March 22, 2014


Cara Mengganti Older Post & New Post menjadi Angka



Kembali hadir Nakama, pada kangen gak dengan kemantepan ane , apa kabar para blogger dihari yang cerah ini ? Kalau sehat koment kalau enggak sehat koment juga aja ! bzzzz : -p

Hari ini ane masih liburan sekolah, karna anak kelas 3 lagi yang menghadapi namanya UAS, ( Ujian Akhir Semester / Sekolah )  tapi sebenarnya UAS udah selesai 2hari yang lalu, tapi entah kenapa ane masih ngerasa kalau sekarang masih libur. Yasudah lupakan !

Lupakan ! Bzzzz  : -x
cerita sedikit tentang Today

Hari ini adalah hari Sabtu, dimana ane dapat "eSeMeS" dari teman ane kalau sekarang dihari Sabtu ini disuruh datang kesekolah, jadi ane datang kesekolah. Berangkat sama Partner ane si "Taliban", semalamnya kami jalan-jalan mengelilingi kota Batam seharian, sungguh melelahkan :) . Kembali ke pokok inti, Sesampainya disekolah ternyata yang baru datang teman seangkatan cuman ane sama partner ane tadi. Nunggu teman Pramuka yang satu lagi, pas di SMS ternyata dia lagi "Nyuci Motor",  eh udah lah ya!

Nah, sekarang judul Artikelnya yaitu " Page Navigasi ", semuanya sudah pada dengar bukan, ??
Page Navigasi yang mudah pasti akan sangat membantu dalam pembaca blog, para blogging, dan Nakama untuk melihat artikel-artikel dari si User Blog tersebut. Jadi mungkin artikel ini membantu para Nakama untuk meramaikan suasana blog Nakama, oke langsung ke tempat kejadian .

TKP :



Pasti Nakama sudah pernah mendengar nama "Page Navigasi", ya atau disebut dengan Related Post biasanya. " Biasanya " nah kebanyakan dari template blog Page Navigasi dengan angka itu susah dicari, kebanyakan bawaannya hanya sebuah tanda panah atau tulisan. Itu mungkin juga hanya ada di bagian HOMEPAGE bukan di bagian PAGEnya, kalau dibagian PAGEnya biasanya sih sama, tapi kalau sama semua pasti jelek dilihat bukan Nakama ?

Bagaimana pada bagian HOMEPAGE kita buat Navigasi menjadi angka, pengen gak, kalau pengen ya udah tunggu postingan selanjutnya ,, bzzz
Gak lah, bercanda. Gitu aja kok nan*gis ( berlebihan kali ), yaudah kebanyakan kali ane ngomong, Nakama pasti bosan. Kalau bosan gak usah dilanjutin kalau gak bosan lanjutin bacanya.

Tutorial Blog lengkap, b-digg

Oke, simak ya :
1. Login ke Blogger Nakama !
2. Pergi ke bagian " Template" dan "Edit Template"
3. Untuk memperaman Template Nakama, di Back Up dulir Templatenya
4. Kemudian tekan F3 atau CTRL+F dan cari kode ]]></b:skin>
    setelah itu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
    
Model 1
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}

.showpageNum a {border: 1px solid #FFFFFF;
color: #FF8000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #fff;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #FFFFFF;
color: #FF8000;
background-color: #000000;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #fff;
color: #FF8000;
background-color: #000000;
}
 

Model 2
.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;
}

Model 3
.showpageArea {
padding:2px;
margin:0px auto;
text-align: center;
}
.showpageArea a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #5FB404;
color: #FE2E2E;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #5FB404;
color: #fff;
background-color: #5FB404;


}

.showpage a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #5FB404;
color: #FE2E2E;
background-color: #FFFFFF;
}

Diatas itu terdapat Model-Model Navigasi Page, bisa Nakama pilih sesuai selera ~

5. Kemudian tetap di "Edit Template" dan cari kode </body>
    selanjutanya letakkan kode dibawah ini diatas kode </body> 

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



6. Kemudian "Pratinjau" dahulu, jika bagus baru "Save Template"


Nb :

Lihat  var pageCount=5; angka 5 menunjukkan jumlah posting yang akan ditampilkan pada HOMEPAGE. Sesuai yang sama dengan Menu - Setelan - Pos & Komentar, kemudian jika  var displayPageNum=3; menunjukkan banyak nomor halaman yang akan ditampilkan.

Di bagi-bagi ilmu itu jangan di pendam sendiri.
Arigatou ~ bzzzz

Bagikan Artikel ini :

2 comments:

Komentarnya hati-hati, banyak yang baca ~