Freebies : Border keliling blog

Thursday, November 14, 2013


Weee. Bila tahap keboringan meninggi . Hee . So arinih saya nak share border yang saya guna in my blog NOW. 

Tutorial : Dropdown Menu

Tuesday, November 05, 2013






Alhamdulillah selamat sampai ke hostel sebentar tadi . Abg teksi I handsome u . Umo pon baru 25 . Muda kan ? Hehehe. 

Dah dah . Itu masuk mood menggedik . Tak baik Takbaik . Hehe . Okay siyes time okay.

Ada yang request dengan Cikk Mira aka sy tentang tuto . Tuto navigation bar bergabung dengan widget search . Yang nih siap ada dropdown lagi tau :P


sila tekan untuk ianya membesar yekkk ^^v


So let's proceed \(^_^)/

Steps
  1. Pegi ke Dashboard > Template > Edit template
  2. search code nih ]]>
  3. Dah jumpa ? Then copy code bawah nih ek


  4. #menujohanes{

    width: 898px;

    margin: auto;

    background: #fff;

    height: 50px;

    -moz-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    text-transform: uppercase;

    position: relative;

    border-left: 5px solid #FCD4DC;

    border-right: 5px solid #FCD4DC;

    border-bottom: 1px solid #ddd;

    border-top: 1px solid #ccc;}

    #menujohanes ul{

    list-style-type: none;

    z-index: 9;

    width: 1000px;

    margin: auto;}

    #menujohanes ul li{

    float: left;

    position: relative;

    padding: 12px;

    -moz-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;}

    #menujohanes ul li:hover a.menu{color:#fff;}

    #menujohanes ul li:hover{

    background: #D7F6B0 repeat top center;

    box-shadow: 0px 3px 0px rgba(0,0,0,0.2);}

    #menujohanes ul li a:hover {

    color:#fafafa;}

    #menujohanes ul li a{

    color: #666;

    padding: 0 10px;

    line-height:25px;

    font-size:11px;

    display:block;

    text-decoration:none;

    -moz-transition: all 0.3s ease-in-out;

    -webkit-transition: all 0.3s ease-in-out;

    -o-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    text-shadow: 0px 2px 0px rgba(0,0,0,0.1);}

    #menujohanes ul li ul li{float: none;position: relative;}

    #menujohanes ul li ul{

    position: absolute;

    top:49px;

    left:0;

    display: none;

    box-shadow: inset 0 4px 3px rgba(0, 0, 0, 0.3), 0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);

    width:150px;

    border-radius: 0px 0px 5px 5px;

    background: #fff;}

    #menujohanes ul li:hover > ul{display: block;}

    #menujohanes ul li ul li a{line-height:25px;}

    #menujohanes ul li ul li ul{

    position: absolute;

    top:0; left:150px;

    display: none;

    box-shadow:0 1px 0 #ddd,0 5px 10px rgba(0, 0, 0, 0.2);

    border-radius:5px;

    width:150px;

    background: #fff;}

    #menujohanes ul li.selected{color: #000;border-right: 1px solid #FCD4DC;}

    #search input[type="text"]:hover {width:160px;}

    #search input[type="text"] {

    background: #FAFAFA url("http://3.bp.blogspot.com/-uYZni0pIn-E/T-xY2vVu_-I/AAAAAAAACUY/ZMfR3_BvRFE/s1600/SEARCH_32x32-32.png")no-repeat center left;

    font-size: 12px;

    background-position-y: 10px;

    color: #222;

    width: 0px;

    padding: 11px 0px 7px 35px;

    z-index: 9;

    border: 1px solid #FAFAFA;

    -webkit-transition: all 0.5s ease-in-out;

    -moz-transition: all 0.5s ease-in-out;

    margin-bottom: -1px;

    position: absolute;

    top: 0px;

    right: 0px;

    border-left: 1px solid #ddd;

    height: 30px;}
  5. Paste code atas nih atas code ]]>
  6. Cari code
    , untuk pengguna denim template
  7. Dah ? Sekarang copy code bawah nih pulak ye.
    1. <div id='menujohanes'>
        <ul>
         <li class='selected'><a href='LINK ANDA' title='Home'><img border='0' src='http://1.bp.blogspot.com/-Yx-NuFKviSQ/TwETaPMdmfI/AAAAAAAAATs/fLZvwofZ8N0/s1600/home_white.png' style='padding:0px;'/> Home</a></li>
          <li><a class='menu' href='LINK ANDA'>Dashboard</a></li> 
          <li><a class='menu' href='#'>About me</a> <ul>
           <li><a href='LINK ANDA' target='new' title='SIAPA SAYA?'>Owner Blog</a></li>
           <li><a href='LINK ANDA' target='new' title='Insan tersayang'>Me Family</a></li> 
          <li><a href='#'>Contact me</a> <ul> 
          <li><a href='LINK ANDA' target='new'> Twitter</a></li> 
          <li><a href='LINK ANDA' target='new'> Fanpage</a></li> 
          <li><a href='LINK ANDA' target='new'> Facebook</a></li> 
          </ul>
           </li> 
          </ul> 
          </li>
           <li><a class='menu' href='#'>Service editing blog</a> <ul>
           <li><a href='LINK ANDA' title='my creation'>Own Portfolio</a></li> 
          <li class='hr'></li> <li><a href='LINK ANDA' title='Tempah servis saya'>My service</a></li> 
          <li class='hr'></li> <li><a href='LINK ANDA' title='portfolio'>My design</a></li> 
          <li class='hr'></li> <li><a href='LINK ANDA' title='ikot pakej'>Contoh Pakej</a></li> 
          </ul>
           </li> 
          <li><a class='menu' href='#'>Exchange</a> <ul> 
          <li><a href='LINK ANDA' target='new'>Links</a></li> 
          <li><a href='LINK ANDA' target='new'> Banner</a></li> 
          </ul> 
          </li> 
          <li><a href='LINK ANDA' target='new'>Tutobies</a></li>
           <li><a href='LINK ANDA' target='new'>Blogshop</a></li> 
          </ul>   <form action='/search' id='search' method='get'> <input name='q' placeholder='Search Somethings..' size='40' type='text'/></form> </div>
      1. Code yang atas nih korang paste bawah code , untuk pengguna denim template
      2. Dah siap >.< Huu . Preview dlu tau :)


      NOTA KAKI
      Merah : Tajuk
      BIRU : Warna
      PURPLE : Warna border
      LINK ANDA : ur link 

      #yang berwarna sahaja boleh ditukar 

      SELAMAT MENCUBA

      If ada masalah dengan tuto nih do roger2 me yea . Klik my nufnang boleh ? Ahaks >.<






      Latest Instagrams

      © CikkMiraDotCom. Design by FCD.