Blog layakanya
sebuah buku, karena memang blog ini terdiri dari halaman – halaman posting.
Untuk itu kiat perlu memberikan sebuah nomor halaman pada homepage kita untuk
memberikan informasi kepada visitor blog kita tentang seberapa banyak halaman
di blog kit selanjutnya.
Sebenarnya,
jika anda menggunakan template yang bukan default dari blogger, sudah ada
beberapa designernya yang sudah memberikan nomor halaman ini secara otomatis
tanpa kita harus membuatnya. Namun, jika anda masih ingin tetap menggunakan
template default dari blogger dan ingin memasang navigasi halaman blog,
langsung saja simak tutorial yang berikut ini.
Cara membuat navigasi halaman blog keren
1. Yang
pertama, silahkan masuk terlebih dahulu ke dashboard blogger anda masing –
masing.
2. Jika sudah
masuk ke menu “Template”.
3. Jangan lupa
untuk mem-back up terlebih dahulu template anda, untuk berjaga – jaga jika
nanti terjadi kesalahan pada saat proses edit template.
4. Masuk ke
“Edit HTML” pada menu template.
5. Cari kode </body> gunakan Ctrl + F atau
dengan menekan tombol F3 untuk mempermudah proses pencarian. Jika sudah ketemu
letakkan kode berikut ini tepat diatasnya.
|
<b:if cond='data:blog.pageType !=
"item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var
postperpage=6;
var
numshowpage=4;
var
upPageWord ='« Previous Page';
var
downPageWord ='Next Page »';
var
urlactivepage=location.href;
var
home_page="/";
/*]]>*/
</script>
<script type='text/javascript'>
/*<![CDATA[*/
var
nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function
loophalaman(banyakdata){var
html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span
class='showpageOf'>Page "+nomerhal+' of
'+maksimal+"</span>";var
prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span
class="showpage"><a
href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span
class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span
class="showpageNum"><a href="#"
onclick="redirectpage('+prevnomer+');return
false">'+upPageWord+'</a></span>'}else{html+='<span
class="showpageNum"><a href="#"
onclick="redirectlabel('+prevnomer+');return
false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span
class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span
class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='
... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span
class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span
class="showpageNum"><a
href="'+home_page+'">1</a></span>'}else{html+='<span
class="showpageNum"><a
href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span
class="showpageNum"><a href="#"
onclick="redirectpage('+jj+');return
false">'+jj+'</a></span>'}else{html+='<span
class="showpageNum"><a href="#"
onclick="redirectlabel('+jj+');return
false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span
class="showpageNum"><a href="#"
onclick="redirectpage('+maksimal+');return
false">'+maksimal+'</a></span>'}else{html+='<span
class="showpageNum"><a href="#"
onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var
nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span
class="showpageNum"><a href="#"
onclick="redirectpage('+nextnomer+');return
false">'+downPageWord+'</a></span>'}else{html+='<span
class="showpageNum"><a href="#"
onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var
pageArea=document.getElementsByName("pageArea");var
blogPager=document.getElementById("blog-pager");for(var
p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function
hitungtotaldata(root){var feed=root.feed;var
totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function
halamanblogger(){var
thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script
src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script
src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1"
><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var
nBody=document.getElementsByTagName('head')[0];var
newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function
redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var
nBody=document.getElementsByTagName('head')[0];var
newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function
finddatepost(root){post=root.feed.entry[0];var
timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var
timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var
alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var
alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
/*]]>*/
</script>
</b:if>
</b:if>
|
6. Lanjut,
untuk memperindah nomor halamannya silahkan cari kode ]]></b:skin> dan letakkan salah satu kode dibawah ini
sesuai dengan warna kesukaan anda tepat di atasnya.
Navigasi
halaman blog merah
|
/* Warna Merah
*/
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0
20px;padding:2em 0}
.showpageNum a,.showpage
a,.showpagePoint{background:#e74c3c;border:none;border-bottom:3px solid
#862B20;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px
5px 5px 5px;-webkit-border-radius:5px 5px 5px
5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px
5px;transition:background 400ms;-webkit-transition:background
400ms;-moz-transition:background 400ms;-o-transition:background
400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#c0392b;color:#FFF}
.showpageOf{display:none!important}
|
Navigasi
halaman blog biru
|
/* Warna Biru
*/
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0
20px;padding:2em 0}
.showpageNum a,.showpage
a,.showpagePoint{background:#3498db;border:none;border-bottom:3px solid
#246EA0;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px
5px 5px 5px;-webkit-border-radius:5px 5px 5px
5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px
5px;transition:background 400ms;-webkit-transition:background
400ms;-moz-transition:background 400ms;-o-transition:background
400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2980b9;color:#FFF}
.showpageOf{display:none!important}
|
Navigasi
halaman blog hijau
|
/* Warna Hijau
*/
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0
20px;padding:2em 0}
.showpageNum a,.showpage
a,.showpagePoint{background:#2ecc71;border:none;border-bottom:3px solid
#208C4D;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px
5px 5px 5px;-webkit-border-radius:5px 5px 5px
5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px
5px;transition:background 400ms;-webkit-transition:background
400ms;-moz-transition:background 400ms;-o-transition:background
400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#27ae60;color:#FFF}
.showpageOf{display:none!important}
|
Navigasi
halaman blog hitam
|
/* Warna Hitam
*/
#blog-pager{float:left;font-size:16px;line-height:normal;margin:0
20px;padding:2em 0}
.showpageNum a,.showpage
a,.showpagePoint{background:#34495e;border:none;border-bottom:3px solid
#202D3A;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;margin-left:10px;border-radius:5px
5px 5px 5px;-webkit-border-radius:5px 5px 5px
5px;-moz-border-radius:5px;-o-border-radius:5px 5px 5px
5px;transition:background 400ms;-webkit-transition:background
400ms;-moz-transition:background 400ms;-o-transition:background
400ms;padding:10px 20px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint,.blog-pager-newer-link,.blog-pager-older-link,.home-link{background:#2c3e50;color:#FFF}
.showpageOf{display:none!important}
|
7. Langkah
teakhir, tekan “Save” atau “Simpan” untuk menyimpan template anda.
Bagaimana, berhasil
tidak membuat navigasi halaman blognya? Pasti berhasi jika dilakukan sesuai
dengan langkah – langkah diatas. Sekian tutorial
cara membuat navigasi halaman blog keren kali ini, semoga tutorial kali ini
bermanfaat bagi anda.
0 komentar:
Posting Komentar