Home » Hacks » Membuat Navigasi Ala Google di Blogspot

Membuat Navigasi Ala Google di Blogspot

Tuesday, May 31, 2011 Unknown

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.
labelLabel: Blog, Hacks email


37 comments

Green 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 Van Persie May 31, 2011 at 2:23 PM

keren gan !!!

Reply delete
Unknown May 31, 2011 at 2:38 PM

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

Reply delete
Unknown May 31, 2011 at 2:40 PM

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

Reply delete
Unknown May 31, 2011 at 2:44 PM

@Dode-Xp [NEW] Creativity : OK gan .. :)

Reply delete
Green 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
Unknown 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
Unknown 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
Unknown 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
Unknown 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 Kitty June 1, 2011 at 2:22 AM

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

Reply delete
Unknown June 1, 2011 at 1:22 PM

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

Reply delete
Unknown 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
Unknown June 3, 2011 at 12:18 PM

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

Reply delete
Argo Merdiyanse June 5, 2011 at 3:53 AM

Mantabs bro info nya... thx

Reply delete
Unknown 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
Unknown June 8, 2011 at 2:03 PM

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

Reply delete
MussVersiPro June 12, 2011 at 2:05 AM

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

Reply delete
Unknown 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
Unknown June 22, 2011 at 11:20 AM

@aNaK KoS EnTerTaiNmEnT : OK mas. :)

Reply delete
Unknown June 22, 2011 at 11:21 AM

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

Reply delete
Unknown 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
Anak Pesisir August 12, 2011 at 10:55 PM

Dicoba yah.... Tks!

Reply delete
Arif Poetra Yunar 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
Unknown August 15, 2011 at 7:20 PM

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

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
Unknown 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).

Subscribe to: Post Comments (Atom)
 

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