.
,Sejarah jam gadang, danau singkarak, danau maninjau, hotel, tujuan wisata sumatera barat,daftar,jam gadang, fort de kock,West Sumatra, Sumatera Barat, Tourism

How To Show Current Active Page Navigation Menu

Posted By admin Saturday, March 26, 2011

Current active page is display on the navigation function to mark the currently active page in the navigation.

Elain function to mark the active page, current page also makes the blog look more elegant with a little development.
On how to make it please follow the steps below.

  1. Log into blogger.com
  2. Click Design
  3. Click Edit HTML, no need to check the Expand Widget Templates
  4. Find the following code

  5. </head>

  6. Copy the code below and put it just before (above) that code


  7. <style type='text/css'>
    #menu-wrapper {
    margin: 0;
    padding: 5px 10px 5px 0;
    background: #b7b7ff;
    font-size: .9em;
    line-height: 22px;
    border-top: 1px solid #a8a8ff;
    border-bottom: 1px solid #a8a8ff;
    }
    .menu {
    margin: 0;
    float: left;
    height: 26px;
    }
    .menu ul {
    margin: 0;
    padding: 6px 0 0 10px;
    font-weight: bold;
    list-style-type: none;
    text-align: left;
    }
    .menu li {
    display: inline;
    margin: 0;
    }
    .menu li a {
    text-decoration: none;
    margin: 0;
    padding: 4px 10px;
    color: #32527a;
    }
    .menu li a:hover {
    background: #c6c6ff;
    color: #64527a;
    }
    .current-cat{
    padding: 5px 10px;
    color: #64527a;
    background:#c6c6ff;
    border: 1px solid #a8a8ff;
    -moz-border-radius: 5px; -webkit-border-radius: 5px;
    border-radius: 5px;
    }
    .actived a {
    color: #64527a !important;
    }
    </style>

    <script type='text/javascript'>
    function currentpage (url,current,name) {
    var name = name ;
    var url = url;
    var current = current;
    if (current == url) {
    document.write (&#39;&lt;li class=&quot;current-cat&quot;&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    else {
    document.write (&#39;&lt;li&gt;&lt;a href=&quot;&#39;+url+&#39;&quot;&gt;&#39;+name+&#39;&lt;/a&gt;&lt;/li&gt;&#39;);
    }
    }
    </script>

  8. Search more code like this.




  9. <div id='header-wrapper'>


  10. Copy the code below and put it right on top (before) that code (this step determines the location of your navigation, if placed before the code before the menu you will be above the header. And vice versa if the code is placed after the end tag code before the navigation will be under the header.)


  11. <div id='menu-wrapper'>
    <b:section class='menu' id='menubar' showaddelement='no'>
    <b:widget id='LinkList1' locked='false' title='' type='LinkList'>
    <b:includable id='main'>
    <ul>
    <b:loop values='data:links' var='link'>
    <script type='text/javascript'> currentpage(&quot;<data:link.target/>&quot;,&quot;<data:blog.url/>&quot;,&quot;<data:link.name/>&quot;); </script>
    </b:loop>
    </ul>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  12. save



Related Post


Follow by Email