Cara Membuat Nomor Halaman Blog Flat

Tips And Trik Trik Blog

AkuDuluAnak.Tk - Boa amigo Manhã :D. Di pagi yang cerah ini saya mau kasih tutorial lagi bagaimana cara membuat nomor halaman blog dengan tema flat. Seperti dibawah ini screenshot nya

Bagaimana anda tertarik :D . Disini saya mau kasih 4 Warna bisa dipilih salah satu mana yang cocok dengan template blog anda :).
Langsung saja kita bahas cara pemasangannya.

• Pergi ke BLOGGER.
• Template >> Edit HTML
• Cari kode </body>
• Jika sudah ketemu copy kode dibawah ini dan paste diatas kode tersebut 

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<script type='text/javascript'>

  /*<![CDATA[*/

    var postperpage=5;

    var numshowpage=2;

    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> 

• Jika sudah terpasang cari kode ]]></b:skin>
• Lalu copy kode dibawah ini pastekan di atas kode tersebut

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:open 
sans;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}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')} 

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:open 
sans;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}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

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:open 
sans;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}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

Warna Gelap

#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:open 
sans;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}

@font-face{font-family:'font-style:normal;font-weight:700;src:local('OpenSansBold'),
 local('OpenSans-Bold'), 
url(http://themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff)
 format('woff')}

• Simpan template dan lihat hasilnya :D

Bagaimana mudah kan jika ada yang masih kesulitan bisa ditanyakan di komentar atau bisa kontak saya langsung.

Akhir kata Vê-lo novamente :D obrigado por ler o meu artigo

Bagikan

Jangan lewatkan

Cara Membuat Nomor Halaman Blog Flat

4/ 5

Oleh Rijal Imnida

Rijal Imnida 10:08 5 Komentar