Membuat Navigasi Ala Google di Blogspot



Navigasi Google
Jika kemaren saya membuat tutorial mengenai cara membuat navigasi breadcrumb di blogspot, maka kali ini kita akan membahas cara Membuat Navigasi Ala Google di Blogspot. Sebenarnya navigasi ini seperti biasa, namun ini khas ala google, tau kan? Kalo masih belum tahu, lihat gambar di bawah ini:

Navigasi Google

Sudah paham kan? Jika sobat berminat untuk membuatnya, silahkan ikuti tutorial berikut:
1. Login ke akun blogger sobat.
2. Pergi ke tab rancangan, lalu edit HTML.
3. Cari kode ]]></b:skin>, kemudian taruh kode berikut ini TEPAT di atasnya:
#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. Sekarang cari lagi kode </body>.
5. Jika sudah ketemu, copy dan paste kode berikut TEPAT di atasnya:
<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';


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 ='';



htmlMap[htmlMap.length]='/';
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] = '/search?updated-max='+timestamp+'&amp;max-results='+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 = '&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;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&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;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '&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;'+thisNum+'&lt;/td&gt;';
}else{
html += '&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;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html += '&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;';

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

if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&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;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}

if(thisNum&gt;1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '&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 ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&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;';
}



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


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

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

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


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

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= '';
var upPageHtml ='';
var downPageHtml ='';



var labelHtml = '&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
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!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&amp;max-results='+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 +'&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;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}else{
upPageHtml = '&lt;a href=&quot;'+htmlMap[p]+'&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;'+ upPageWord +'&lt;/a&gt;&lt;/td&gt;';
}

fFlag++;
}





if(p==(thisNum-1)){
if(p==0){
html += '&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;'+thisNum+'&lt;/td&gt;';
}else{
html += '&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;'+thisNum+'&lt;/td&gt;';
}
}else{
if(p==0){
html = '&lt;td&gt;'+labelHtml+'&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;';
}else{
html += '&lt;td&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;&lt;span class=&quot;csb ch&quot; style=&quot;background-position: -60px 0pt; width: 16px;&quot;&gt;&lt;/span&gt;'+ (p+1) +'&lt;/a&gt;&lt;/td&gt;';
}
}


if(eFlag ==0 &amp;&amp; p == thisNum){
downPageHtml = '&lt;td class=&quot;b&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&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;'+ downPageWord +'&lt;/a&gt;&lt;/td&gt;';
eFlag++;
}
}
}




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

html2 = '&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 ('+(postNum-1)+') &lt;/td&gt;&lt;td class=&quot;b&quot;&gt;';
html3 = '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;';
html = html2+html;

if(thisNum&lt;(postNum-1)){
html += downPageHtml;
}else{
html += '&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;';
}

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

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

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

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

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

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


}


</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
}
}

var home_page = &quot;/&quot;;
if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
document.write('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
}
}
</script>

6. Save template, dan lihat hasilnya!

Begitulah Kiranya Step by Step Membuat Navigasi Ala Google di Blogspot

Semoga Bermanfaat!

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Anda sedang membaca artikel tentang Membuat Navigasi Ala Google di Blogspot dan anda bisa menemukan artikel Membuat Navigasi Ala Google di Blogspot ini dengan url http://daw-xp.blogspot.com/2011/05/membuat-navigasi-ala-google-di-blogspot.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Navigasi Ala Google di Blogspot ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Membuat Navigasi Ala Google di Blogspot sumbernya.


38 comments

ADHIE_KLOPERER May 31, 2011 at 9:47 AM

okeyyy gan ,,mantap ...mksh info keren nya ,,
ane tunggu lagi info keren laiinya
mampir ke sini yuk gan

http://adhiekloperer.blogspot.com/

Reply delete
Ladida Cafe May 31, 2011 at 10:07 AM

wah, sepertinya menarik . .
tapi saya masih pake navigasi yg biasa aja, hehee
saya pernah nyoba ini malah error blog saya, wkwkwkwkk
tapi ngga tau kalo yg ini, sepertinya bisa soalnya kodenya beda . .
info bagus sob!!

Reply delete
Dode-Xp [NEW] Creativity May 31, 2011 at 2:23 PM

keren gan !!!

Reply delete
Deny Arya Wiranata May 31, 2011 at 2:38 PM

@ADHIE_KLOPERER : OK gan sama-sama. Itu pasti. :)

Reply delete
Deny Arya Wiranata May 31, 2011 at 2:40 PM

@Ladida Cafe : Hehe silahkan dicoba dulu aja mas. :)

Reply delete
Deny Arya Wiranata May 31, 2011 at 2:44 PM
ADHIE_KLOPERER May 31, 2011 at 4:54 PM

sob,,,cara disabled google navigate nya gimna tuh,,,punya ane malah kuran menarik,saya cari kode2 td udahga ada,,,trims

Reply delete
Deny Arya Wiranata May 31, 2011 at 5:28 PM

@ADHIE_KLOPERER : Yang bener, coba dicari lagi gan, nda mungkin nda ada. Pake centang expand template widget juga, baru cari kodenya. :)

Reply delete
yangpentingshare May 31, 2011 at 6:14 PM

Mantap sobb.,tapi sayangnya ane udah dari sononye hehehe jadi terima jadi deh,thanks komment terbanyak hari ini hehe

Reply delete
Deny Arya Wiranata May 31, 2011 at 6:22 PM

@yangpentingshare : Hehe, kalo sudah dari sononya ya bagus lah gan, nda usah ganti-ganti lagi. Sama-sama gan. :)

Reply delete
donimasrul May 31, 2011 at 6:55 PM

Mantap sob tutorialnya.. tp untuk skrng sy masih pk yg standar dulu.. makasih infonya..

Reply delete
Deny Arya Wiranata May 31, 2011 at 7:40 PM

@donimasrul : OK, silahkan gunakan yang standar saja terlebih dahulu. Sama-sama mas, makasih juga karena dah mau berkunjung dan berkomentar di blog sederhana ini. :)

Reply delete
sichandra May 31, 2011 at 8:39 PM

wah sepertinya keren nih :)

Reply delete
Deny Arya Wiranata May 31, 2011 at 9:34 PM

@sichandra : Iya mas, silahkan dicoba jika berkenan. :)

Reply delete
Obat Sakit 2011 June 1, 2011 at 12:32 AM

blog yang bagus disini gan
aku save dulu gan kodenya

Reply delete
Tarry KittyHolic June 1, 2011 at 2:22 AM

Ga berani nyoba takut error ntar ga bs balikin hohohoho.....

Reply delete
Deny Arya Wiranata June 1, 2011 at 1:22 PM

@Obat Sakit 2011 : OK makasih dan silahkan mas. :)

Reply delete
Deny Arya Wiranata June 1, 2011 at 1:22 PM

@Tarry KittyHolic : Hehe kalo nda berani nyoba backup dulu templatenya, baru nyoba ntar kalo error ya upload lagi template yang udah di backup tadi mbak. :)

Reply delete
Arhy Tutorial June 2, 2011 at 8:29 PM

mantap!! nemu dimana sob? :D

Reply delete
Deny Arya Wiranata June 3, 2011 at 12:18 PM

@Arhy Tutorial : Banyak referensinya sob, dan dari web bahasa Inggris. :)

Reply delete
merdiyanse7 June 5, 2011 at 3:53 AM

Mantabs bro info nya... thx

Reply delete
Deny Arya Wiranata June 5, 2011 at 10:02 AM

@merdiyanse7 : OK mas bro, makasih yo komentarnya. :)

Reply delete
Tips dan Trik Blog dan Komputer June 7, 2011 at 6:32 PM

mantap, saya mau coba dulu. makasih ya.

Reply delete
Deny Arya Wiranata June 8, 2011 at 2:03 PM

@Tips dan Trik Blog dan Komputer : Silahkan dicoba mas. :) Sama-sama.

Reply delete
aNaK KoS EnTerTaiNmEnT June 12, 2011 at 2:05 AM

mantab kax,,, kapan2 deh baru di cobaen...

Reply delete
ViKrY'X MadZ June 15, 2011 at 7:52 AM

wah scriptnya panjang,ntr bkin berat blog ?? eh mau tanya ni berlaku gak cuma di HOMEPAGE kan?

Reply delete
Catur Setyawan June 21, 2011 at 7:38 PM

MantapZ mas!!

Reply delete
Deny Arya Wiranata June 22, 2011 at 11:20 AM
Deny Arya Wiranata June 22, 2011 at 11:21 AM

@ViKrY'X MadZ : Iya mas, dicoba dlu. :)

Reply delete
Deny Arya Wiranata June 22, 2011 at 11:21 AM

@Catur Setyawan : OK mas. :)

Reply delete
Triyono Infect July 8, 2011 at 6:13 PM

oka buddy

Reply delete
Ian Konjo August 12, 2011 at 10:55 PM

Dicoba yah.... Tks!

Reply delete
Arif August 14, 2011 at 11:18 PM

Untuk templte bawaan blogger bs gak gan ?? coz dl ane pernah coba bikin menu navigasi tp malah error blog ane,, makasih gan

Reply delete
Deny Arya Wiranata August 15, 2011 at 7:20 PM

@Arif : coba di backup dlu sob, baru coba dgn cara ini.

Reply delete
Asmara Susanto August 31, 2011 at 10:27 AM

kalo tulisan googleny di-ilangin makin keren tuh sob :o

Reply delete
om onny November 8, 2011 at 8:23 PM

wah keren. tapi masih perlu diedit dikit-dikit, mas

Reply delete
trik blogger November 14, 2011 at 2:23 PM

Thank sob, infonya, sudah saya coba berhasil.

Reply delete
hezty tatawarna December 23, 2013 at 9:54 AM

keren ... :)

Reply delete

Post a Comment

Silahkan Anda kritik dan sarannya pada kolom komentar di bawah ini. Karena setiap satu kata Anda berkomentar sangat berarti untuk kemajuan blog ini (baca: Cara Berkomentar yang Baik).

 

Site Info

  • Fortuner SUV Terbaik
  • Commonwealth Life Perusahaan Asuransi Jiwa Terbaik Indonesia
  • Cincin Kawin
  • PageRank

    Followers

    back to topReturn to top of page Copyright © 2012 | Blog SEO DAW - XP | Tutorial Blogspot | Belajar SEO Blogspot - Privacy Policy Template by Hack Tutors