Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, June 15, 2013

Cara membuat page number valid html 5

Page Number pada suatu halaman situs sangat berguna dimana para pengunjung lebih mengetahui halaman yang ada dalam tubuh suatu situs web ataupun blog. Page Number navigasi sangat membantu para pengunjung untuk lebih leluasa melihat suatu halaman yang terkandung artikel yang telah kita posting. Ini lah sebagai alasan pentingnya suatu page number pada suatu halaman blog ataupun web.
script page number

 

Fungsi Script 

 

Kegunaan dari script Page Number Navigasi ini adalah untuk menampilkan jumlah halaman dan tombol link suatu halaman yang akan dipergunakan untuk menampilkan postingan pada blog ataupun web. Pemasangan script page number ini pada tubuh blog pada khususnya sangatlah mudah, hanya dipasang dibagian widget pada blogspot secara otomatis akan menjadi ataupun menggantikan page number yang telah ada ( devault ), walaupun widget tersebut diletakkan sembarangan. Script ini akan membantu anda dalam menangani counter halaman blog ataupun web anda. Setiap pengunjung blog / web anda dapat dengan mudah melihat jumlah halaman pada situs anda dan sekali klik postingan dari artikel yang pernah anda buat akan tampil.
Dalam tutorial kali ini saya membuat script ini, atas permintaan sobat saya. Saya sengaja mempermudah untuk pemasangan script ini pada halaman web khususnya blog. Tapi untuk menjadikan script ini valid HTML 5 script CSS ditempatkan di bagian ( Skin ) dan script dapat ditempatkan di widget kalo untuk blogspot. Bila mana template anda belum valit HTML 5 silahkan gabungkan semua code CSS dan script bersamaan didalam widget pada blogspot. 

demo page number

    Fitur

  • Jumlah Halaman
  • Navigasi selanjutnya ( Berikut )
  • Navigasi Kembali
  • Aktive page CSS
  • Hover page CSS
  • Box page number

Install Program CSS 

 

  • Login ke dashboard anda
  • Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  • Cari code ]]></b:skin> 
  • Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
.blog-pager,#blog-pager{
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:12px;
width:550px;
padding:10px;
color: #000000;
text-align: left;
margin-top: -15px;
}
.showpageNum a,.showpage a {
color:#000000;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 10px 7px;
background-color: #FFFFFF;
border: solid #999999 1px ;
}
.showpageNum a:hover,.showpage a:hover {
color:#FF0000;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-weight:bold;
line-height:0;
text-align:center;
padding:7px 10px 7px;
border-radius:15px;
background-color: #E2E2E2;
border: solid #999999 1px ;
}
.showpageOf{
margin:0 8px 0 0;
font-family:Arial, Helvetica, sans-serif;
text-decoration:none;
font-size:15px;
font-weight:bold;
color: #FFFFFF;
padding:7px 10px 7px;
border-radius:5px;
background-color: #000000;
margin-left: -5px;
}
.showpagePoint {
font-family: Verdana, Arial, Helvetica, sans-serif;
color:#FFF;
margin-right:0.6em;
text-decoration:none;
font-size:15px;
font-style:italic;
line-height:0;
text-align:center;
padding:7px 10px 7px;
border-radius:5px;
background-color: #000000;
border: solid #999999 1px ;
}

 

Install Program Script 

 

  • Login ke dashboard anda
  • Masuk ke "Tata letak "
  • lalu klik "Add Gadget " 
  • Pilih HTML/JavaScript
  • Capy code dibawah kemudian pastekan di widget.
<script>
var home_page_url = location.href;
var pageCount=10;
var displayPageNum=2;
var upPageWord ='Kembali';
var downPageWord ='Berikutnya';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);var title = post.title.$t;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+'&amp;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){
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">'+thisNum+'</span>';
}else{
if(p==0){
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++;
}}}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}html = '<div class="showpageArea"><span class="showpageOf"><blink>'+(postNum-1)+'</blink> Halaman</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}if(postNum==1) postNum++;
html += '</div>';
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;
}}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&amp;max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;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){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}fFlag++;}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'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++;
}}}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}}
html = '<div class="showpageArea"><span class="showpageOf"> page('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
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>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&amp;max"));
}}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999" ><\/script>')
}}
</script>

Keterangan Code

  • Untuk mengedit jumlah tampilan , counter page dll silahkan ganti angka dengan tulisan var = 0
  • Untuk membuat script ini valit HTML 5 silahkan simpan CSS diatas code ]]></b:skin>
  • Template anda tidak valid HTML 5 Silahkan gabungkan kedua kode CSS dan SCRIPT pada widget blog anda
Semoga postingan ini bermanfaat bagi anda, bila ada kekurangan dari penulisan script maupun Css mohon dimaklumi dan silahkan konsultasikan dengan saya langsung.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 6:07 PM

9 comments :

  1. mau nanya nih sob gimana caranya
    mengatasi H4, H5 & H6 heading tags not found
    di seo analyzer ...?

    ReplyDelete
  2. makasih atas pertanya annya sob, oya soal menu melayang itu besok saja ya saya publish, sabar ya sob...

    untuk penggunaan tag heading H4, H5, H6 itu silahkan ganti tag heading widget sidebar nya 1 atau 2 widget dengan tag heading h5

    ReplyDelete
  3. mantab sob sudah berhasil ,
    by the we , kalau mengurangi ekternal link itu bisa gak sob ...?

    malah ngerepotin , tanya terus hehehe ...?

    ReplyDelete
  4. Untuk blog agar lebih SEO dalam hal menangani link internal dan external kuncinya harus blog bersifat " nofollow " sebab SEO mempunyai aturan dan peraturan yang sudah di standartkan untuk pemakaian link agar seo adalah

    Link Internal : Harus dibawah 100link/1situs
    Link External : Harus dibawah 20link/1situs

    Jadi untuk link external blog anda silahkan batasi harus dibawah 20 link yang keluar dari blog anda agar tidak menyebabkan link juise buat blog anda. batasi pemakaian link banner dan tentukan link teman yang paling bermanfaat untuk ditempatkan pada halaman blog anda, yang paling bagus sebagai tukarlink adalah blog yang memiliki ranking review dibawah 500.000 dan memiliki artikel yang bermanfaat alias tidak copas sebab akan mempengaruhi halaman blog anda..

    salam bloger dari saya, semoga dapat membantu.

    ReplyDelete
    Replies
    1. Batasan untuk link internal di bawah 100 link dan untuk eksternal dibawah 20 link apa masih berlaku hingga saat ini, dan apakah itu untuk satu posting atau untuk keseluruhan posting (satu situs blog)?. Dan bagaimana jika sebuah blog memiliki posting lebih dari 100 judul/url, di mana antara satu dengan yang lain terdapat internal link yang berkaitan?

      Delete
  5. Horas lae! hehehehe gabe salah iba lae , hape mambahen valid HTML5 adong do sihapuson disi , kode ini harus dihapus " <b:include name='quickedit'/> ido kan master , horas sian au lae..

    ReplyDelete
    Replies
    1. iya lae... code <b:include name='quickedit'/> merupakan code string dari script edit devault blogspot, sebab kode <b:include name='quickedit'/> bila di terjemahkan kode & tidak memiliki kode lengkap seperti amp;

      Delete
  6. sangat bermanfaat. Terimakasih banyak dan sukses selalu

    ReplyDelete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog