Home» belajar blog» cara membuat navigasi page blog seperti google

cara membuat navigasi page blog seperti google

Sharing Tentang Blog cara membuat navigasi halam blog sepeti Google. Oke tanpa basa basi kita bisa lihat screen shotnya di bawah ini :




1 . Login dulu > Rancangan > edit HTML >
2 . Cari kode ]]></b:skin>
3 . Kemudian taruh kode dibawah ini tepat diatas kode ]]></b:skin>


#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(
http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png
) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}




4 . Jika sudah , sekarang cari lagi kode </body>
5 . Kemudian letakan kode di bawah ini diatas kode </body>



<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;


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= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



htmlMap[htmlMap.length]=&#39;/&#39;;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {


var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){
if(thisNum==2){
upPageHtml = &#39;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}else{
upPageHtml = &#39;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += &#39;&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+thisNum+&#39;&lt;/td&gt;&#39;;
}else{
html += &#39;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+thisNum+&#39;&lt;/td&gt;&#39;;
}
}else{
if(p==0){
html += &#39;&lt;td&gt;&lt;a href=&quot;/&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;&#39;;

}else{
html += &#39;&lt;td&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}
}

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
eFlag++;
}
}
}

if(thisNum&gt;1){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
html2 = &#39;&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page (&#39;+(postNum-1)+&#39;) &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;&#39;;
html3 = &#39;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&#39;;
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += &#39;&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&#39;;
}



if(postNum==1) postNum++;
html += html3+ &#39;&lt;/div&gt;&#39;;


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



var labelHtml = &#39;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);


var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!=&#39;&#39;) postNum++;
htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
if(fFlag ==0 &amp;&amp; p == thisNum-2){



if(thisNum==2){
upPageHtml = labelHtml +&#39;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}else{
upPageHtml = &#39;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: 0pt 0pt; margin-left: auto; width: 44px;&quot;&gt;&lt;/span&gt;&lt;div style=&quot;margin-right: 8px;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}

fFlag++;
}





if(p==(thisNum-1)){
if(p==0){
html += &#39;&lt;span class=&quot;csb&quot; style=&quot;background-position: -26px 0pt; width: 18px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+thisNum+&#39;&lt;/td&gt;&#39;;
}else{
html += &#39;&lt;td class=&quot;cur&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -44px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+thisNum+&#39;&lt;/td&gt;&#39;;
}
}else{
if(p==0){
html = &#39;&lt;td&gt;&#39;+labelHtml+&#39;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;1&lt;/a&gt;&lt;/td&gt;&#39;;
}else{
html += &#39;&lt;td&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
}
}


if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = &#39;&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -76px 0pt; margin-right: 34px; width: 66px;&quot;&gt;&lt;/span&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/td&gt;&#39;;
eFlag++;
}
}
}




if(thisNum&gt;1){
if(!isLablePage){
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}else{
html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}
}

html2 = &#39;&lt;table id=&quot;nav&quot; style=&quot;margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;&quot; align=&quot;center&quot;&gt;&lt;tbody&gt;&lt;tr valign=&quot;top&quot;&gt;&lt;td class=&quot;b&quot;&gt;Page (&#39;+(postNum-1)+&#39;) &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;&#39;;
html3 = &#39;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&#39;;
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += &#39;&lt;td class=&quot;b&quot;&gt;&lt;span class=&quot;csb&quot; style=&quot;background-position: -76px 0pt; width: 42px;&quot;&gt;&lt;/span&gt;&lt;/td&gt;&#39;;
}

if(postNum==1) postNum++;
html += html3+ &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
html =&#39;&#39;;
}

if(blogPager){
blogPager.innerHTML = html;
}


}


</script>



Keterangan :

== Untuk melihat script aslinya klik disini... ( Biar cepat Copasnya )
== var pageCount=10; / ganti sesuai keinginan kalian
== var displayPageNum=6; / ganti sesuai keinginan kalian
== var upPageWord ='Previous'; / Bisa kalian ganti dengan sebelumnya
== var downPageWord ='Next'; / bisa kalian ganti denga selanjutnya
== Page ('+(postNum-1)+') / Untuk menampilkan kata page(10)/jumlah halaman

6 . Kemudian simpan

Dan lihat hasilnya !!! Mantabz... XD...


Semoga bermanfaat dan jangan lupa berikan komentarnya apabila ada yang kurang mengerti... oia kalian boleh juga Share Artikel dengan cara klik gambar logo sharing bookmark di bawah... Terima kasih.
DOWNLOAD
Single Links (Recommended)

Ditulis Oleh : Unknown ~Free Shop Ilmu

Muh.Akram Anda sedang membaca artikel berjudul cara membuat navigasi page blog seperti google yang ditulis oleh Free Shop Ilmu yang berisi tentang : Dan Maaf, Anda tidak diperbolehkan mengcopy paste artikel ini.

Blog, Updated at: 17:25:00
Unknown

3 comments:

  1. Unknown1 December 2012 at 02:13

    ga bisa??!!

    ReplyDelete
  2. Unknown1 December 2012 at 23:14

    @Berita Gue kalau tidak bisa pakai yang biasa saja sob,,, saya pernah mencoba dan berhasil, mungkin templatenya tidak mendukung..

    ReplyDelete
  3. kumpulan cerita13 May 2013 at 01:01

    wah perlu dicoba nih, nice tricks

    ReplyDelete