Thursday, March 19, 2015

Membuat Top Menu diatas Judul Blog

Cara Membuat Top Menu diatas Judul Blog:
  1. Siapkan text yang akan dibuat di Top Menu bersama URL nya, contohnya sbb:

    Homehttp://notes-and-life.blogspot.com

    About:
    http://notes-and-life.blogspot.com/p/about.html

    Buat sub menu:
    Anita-Handayani Blogspot:
    http://anita-handayani.blogspot.comAnita's Personal Blog IPB: http://anitanet.staff.ipb.ac.id

    Article:
    http://notes-and-life.blogspot.com/search/label/Artike

    Tutorial:
    http://notes-and-life.blogspot.com/search/label/Tutorial
  2. Buka Edit HTML lalu cari script <header>
    Letakkan script ini diatasnya <header>

    <div id='cssmenu'>
     <ul>
     <li class='active'><a href='http://notes-and-life.blogspot.com'><span>Home</span></a></li>
     <li class='has-sub'><a href='http://notes-and-life.blogspot.com/p/about.html'><span>About</span></a>
     <ul>
     <li><a href='http://anita-handayani.blogspot.com'><span>Anita-Handayani Blogspot</span></a></li>
     <li class='last'><a href='http://anitanet.staff.ipb.ac.id'><span>Anita's Personal Blog IPB</span></a></li>
     </ul>
     </li>
     <li><a href='http://notes-and-life.blogspot.com/search/label/Artikel'><span>Article</span></a></li>
     <li class='last'><a href='http://notes-and-life.blogspot.com/search/label/Tutorial'><span>Tutorial</span></a></li>
     </ul>
     </div>
     
  3. Lalu simpan Script ini di CSS

    /Edit Top Menu diatas Header*/
     #cssmenu ul { margin: 0; padding: 0;}
     #cssmenu li { margin: 0; padding: 0; text-transform: lowercase;}
     #cssmenu a { margin: 0; padding: 0;}
     #cssmenu ul {list-style: none;}
     #cssmenu a {text-decoration: none;}
     #cssmenu {height: 40px; width: 100%; margin-left: 0px; background-color: #eee; box-shadow: 0px 0px 0px rgba(0,0,0,.4); ; margin: -40px 5px 7px;}

     #cssmenu > ul > li {
     float: left;
     margin-left: 125px;
     position: relative;
     z-index: 20;
     }

     #cssmenu > ul > li > a {
     color: #000;
     font-family: "Times New Roman", Times, serif;
     font-size: 18px;
     line-height: 40px;
     padding: 15px 0px;
     -webkit-transition: color .15s;
     -moz-transition: color .15s;
     -o-transition: color .15s;
     transition: color .15s;}

     #cssmenu > ul > li > a:hover {color: #BBB;}

     #cssmenu > ul > li > ul {
     opacity: 0;
     visibility: hidden;
     padding: 16px 0 20px 0;
     background-color: rgb(250,250,250);
     text-align: left;
     position: absolute;
     top: 35px;
     left: 50%;
     margin-left: -90px;
     width: 180px;
     -webkit-transition: all .3s .1s;
     -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
     transition: all .3s .1s;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     }

     #cssmenu > ul > li:hover > ul {
     opacity: 1;
     top: 45px;
     visibility: visible;
     }

     #cssmenu > ul > li > ul:before{
     content: '';
     display: block;
     border-color: transparent transparent rgb(250,250,250) transparent;
     border-style: solid;
     border-width: 10px;
     position: absolute;
     top: -20px;
     left: 50%;
     margin-left: -10px;
     }

     #cssmenu > ul ul > li { position: relative;}

     #cssmenu ul ul a{
     color: rgb(50,50,50);
     font-family: "Times New Roman", Times, serif;
     font-size: 15px;
     background-color: rgb(250,250,250);
     padding: 5px 8px 7px 16px;
     display: block;
     -webkit-transition: background-color .1s;
     -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
     transition: background-color .1s;
     }

     #cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

     #cssmenu ul ul ul {
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top: -16px;
     left: 206px;
     padding: 16px 0 20px 0;
     background-color: rgb(250,250,250);
     text-align: left;
     width: 160px;
     -webkit-transition: all .3s;
     -moz-transition: all .3s;
     -o-transition: all .3s;
     transition: all .3s;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     box-shadow: 0px 1px 3px rgba(0,0,0,.4);
     }

     #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}

     #cssmenu ul ul a:hover{
     background-color: #eee;
     color: #000;
     font-family: "Times New Roman", Times, serif;
     font-size: 15px;
     }


  4. Sekarang tambahkan script ini untuk membuat background nya menjadi abu2

    /*background menu sidebar warna abu2 dengan text warna hitam dan border*/
     .sidebar .widget H2 {
     background: #eee;
     border-top: 0px solid #DDDDDD;
     border-bottom: 0px solid #DDDDDD;
     border-left: 0px solid #DDDDDD;
     border-right: 0px solid #DDDDDD;
     margin: 0px 0px 10px 0px;
     line-height: 1.25;
     border: 2px solid #a1a1a1;/*buat bikin tepinya lengkung*/
     padding: 10px 40px;
     background: #dddddd;
     border-radius: 0px;
     }


No comments:

Post a Comment

Share this posts