Apapun yang terjadi kepada Anda, akan tetap menjadi sesuatu yang menguatkan Anda, bila Anda tidak mengijinkannya untuk melemahkan Anda.Maka mulailah dari tempat di mana Anda berada, dan mulailah sekarang. Anda sampai, hanya karena Anda berangkat.Dan ingatlah, bahwa Batas waktu itu dibuat bukan karena Anda harus selesai, tetapi karena Anda harus segera memulai. Dan setelah pengertian ini mendapatkan tempat yang kuat di hati Anda, perjelaslah bagi diri Anda sendiri, bahwa Keberhasilan Anda ada pada tempat yang lebih tinggi dari yang sedang Anda kerjakan sekarang. Kemudian, janganlah berlaku seperti orang yang mengeluhkan apa saja yang tidak terlihat di dalam sebuah gambar, Berfokuslah pada yang telah jelas terlihat, karena dari sana lah Anda mencapai tempat-tempat yang belum terlihat bahkan oleh imajinasi Anda. Lalu bekerja keraslah dalam kedamaian bahwa Anda telah melakukan yang benar. Janganlah berupaya menjelaskan mengapa Anda tidak mencapai yang belum Anda capai. Bekerjalah untuk mencapai yang telah jelas bagi Anda. Maka, Mulailah keberhasilan Anda dari mana pun Anda berada.(Mario Teguh)

31 Mei 2009

Membuat Navigasi Halaman/Page Navigation

Page navigation atau navigasi halaman adalah menu yang memungkinkan pengunjung untuk melihat isi postingan per halaman dengan mengklik angka halamannya.

Saya pernah coba dan alhamdulillah berhasil, saya tidak pasang karena saya sudah memakai daftar isi untuk menavigasi semua postingan blog.

Caranya simpel, cukup dengan menyisipkan javascriptnya. Langkah-langkahnya:
1. Masuk Layout
2. Pilih Tata Letak
3. Tambah Gadget
4. Pilih menu gadgdet HTML/Javascript
5. Sisipkan kode di bawah ini:

<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;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 #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;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 #333;
color: #000000;
background-color: #FFFFFF;

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


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
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 #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function 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=10;
var displayPageNum=5;
var firstPageWord = 'Home';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



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(title!=''){
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(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') 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"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;" class="showpage">Page '+thisNum+' for '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

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>

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

5. Simpan
6. Lihat Blog
7. Letakan gadgetnya tepat di bawah minebar/halaman postingan

Have a nice try it!

9 komentar:

  1. thanks sob, teruskan beramalnya yah.
    salam kenal aja, jgn lupa beri komentar jg d artikelku Belajar SEO para pemula

    BalasHapus
  2. tutorial untuk blog ya? keep it up!

    thx sudah main ke blog saya ;)

    BalasHapus
  3. aku d punya nih yang kayak gnian d blogku...mirip2 daftar isi sih...but thanks for d tutorial kang...btw, link bannernya d kupsang..psng link banner ku jg ya kang..dtnggu..

    BalasHapus
  4. keren infonya sobbb, i will try..

    BalasHapus
  5. Makasih sobat semua, semoga bisa nambah-nambah ilmu blogging....

    BalasHapus
  6. Infonya sangat bermanfaat...
    Thanks 4 share...

    BalasHapus
  7. Good article mas, bagus tutornya. Keep it!
    comment balik ya... n salam kenal

    BalasHapus

SOBAT KANG JURED