Rizal saputra

Pada info kali ini, aku posting satu jQuery navigasi menu yang di panggil Lava lamp. dari demo asal yang dapat Anda lihat di sini (silakan klik). Tutorial yang aku coba dari net.tutsplus.com ini nampaknya sangat menarik dari segi effect dan mudah untuk di pasang di template blogspot. Aku mencoba implement di blogspot dan berhasil. Namun, sedikit modifikasi telah dilakukan bertujuan agar navigasi menu ini sesuai pada berbagai jenis theme dan dapat di pasang terus di HTML / Javascript. Background asal di ubah oleh warna background pada template. Warna button, warna teks dan ukuran juga di ubah karena ukuran asli yang terlalu besar.

Untuk memasang jQuery lava-lamp navigasi menu , ikut beberapa langkah di bawah ini.

Salin dan paste kode di bawah pada HTML / Javascript

<style>
#container {
width: 100%;
margin: 0px 0px;
padding: 0px 0px 40px 10px;
}

ul, li {
margin: 0; padding: 0;
}

#blob {
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
top: 0;
z-index : 1;
background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 5px #011331;
-webkit-box-shadow: 2px 3px 5px #011331;
}

#lava-lamp {
background: #32312E;
float: left;
border: 1px solid #BDBCBA;
margin: 0px 0px 15px;
padding: 8px 430px 10px 0px;
}

#lava-lamp li {
float: left;
list-style: none;
border-right: 1px solid #4a4a4a;
border-left: 0px solid #4a4a4a;
}

#lava-lamp li a {
color: #DDDCD8;
text-shadow: 0 0px 1px #81807B;
position: relative;
z-index: 2;
float: left;
font-size: 13px;
font-family: arial, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0px 20px;
}
</style>

<div id="container">

<ul id="lava-lamp">
<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>
<li><a href="http://link-di-sini.blogspot.com">About</a></li>
<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>
<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>
<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>
</ul>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/jquery.spasticNav.js"></script>

<script type="text/javascript">
$('#lava-lamp').spasticNav();
</script>

Pesan:
1.Untuk mengubah warna button, edit kode yang di bold berikut.

background: #0b2b61;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));

2.Untuk mengubah warna background, edit kode yang di bold berikut.

background: #32312E;

3.Untuk mengubah URL dan Title, edit kode yang di bold berikut.

<li id="selected"><a href="http://link-di-sini.blogspot.com">Home</a></li>

<li><a href="http://link-di-sini.blogspot.com">About</a></li>

<li><a href="http://link-di-sini.blogspot.com">Blog</a></li>

<li><a href="http://link-di-sini.blogspot.com">More About My Portfolio</a></li>

<li><a href="http://link-di-sini.blogspot.com">Contact</a></li>

4.Untuk mengubah jarak background ( lihat gambar di bawah), edit kode yang di bold berikut.

padding: 8px 430px 10px 0px;

I have inspiration to make page navigation with google style.Now I will give this for all of you if you want to use or modify base on you template style.

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and and add this CSS code below above ]]></b:skin> code.

#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}

(If you blog black background color, change the address http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png becomes http://img683.imageshack.us/img683/1649/navlogo6.png)
Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>

Now Add This script just below the </b:section> .

if you can’t find you can search (ctrl+f) by this key ” id=’main’ ”

Now Add script below just below the </b:section> .

<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+'&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< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){
                if(thisNum==2){
                    upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }else{
                    upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
                }

                fFlag++;
            }

            if(p==(thisNum-1)){
                if(p==0){
                    html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }else{
                    html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
                }
            }else{
                if(p==0){
                        html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

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

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

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

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }


    if(postNum==1) postNum++;
    html += html3+ '</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 = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
    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+'&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< banyaknomer;p++){
        if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
            if(fFlag ==0 && p == thisNum-2){



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

                fFlag++;
            }





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


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



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

    html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+')   </td><td class="b">';
    html3 = '</tr></tbody></table>';
    html = html2+html;

    if(thisNum<(postNum-1)){
        html += downPageHtml;
    }else{
        html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
    }

    if(postNum==1) postNum++;
    html += html3+ '</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 type='text/javascript'>

         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("?&max"));
            }
        }

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

Warning :

In the code above you can edit this line only :
var pageCount=10;
var displayPageNum=6;
1 : var pageCount = 10;
The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.
for example :
In my example I have put that value as 10 . In each page you can see only 10 posts .
The number have to same with your setting

The picture show from Setting –> Formatting –> Show –> 10 posts
2 : var displayPageNum = 6;
here the digit 6 represents number of pages to be listed.
For example :
In my example I have chosen 6 , then 6 pages will be shown.

Step 4: Modification Step for Label :

1 : Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

2 : From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)

3 : Search this
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>

change with code below

<script type='text/javascript'>
var lblname = "<data:label.name/>";

lblname2 = encodeURIComponent(lblname);
var feedlink = '/search/label/' + lblname2+'?&max-results=10';
document.write('<a href="' + feedlink + '">'+lblname+'</a>');
</script>

And Click “save template”

Fanbook

Labels

Followers

Pasang Jquery Lava-lamp Navigation Tab

Page navigation with google style for blogger

Recent Post

mampir

Popular Posts

My Blog List

Recent comment

read this

traffic rank

paceboox

Recent Post