21 April 2013

Bagaimana cara menambahkan menu seperti pita dengan efek hover di blog

Posted at  19.24  |  in  tips dan triks blog



Tutorial saya kali ini akan menjelaskan sedikit tentang bagaimana cara menambahkan menu seperti pita modern dengan efek hover di blog. Beberapa kali blogwalking ke tetangga sebelah, banyak juga yang memberikan tutorial tentang menu yang hampir mirip.  

Sedikit ada perbedaan memang, karena menu yang akan saya share ke anda ini menu yang menggunakan efek hover, juga menggunakan CSS3 dan HTML sehingga tampilan blog akan terkesan lebih profesional kalau dipasang menu cantik dan molek ini. hehe..

Berharap anda akan menyukainya..:)

Coba lihat dibawah dan diatas View Demonya..


  

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template -> Edit HTML
 

  • Cari tag/kode ]]></b:skin> Gunakan CTRL+F untuk menemukan kode ini dengan cepat 
  • Berikutnya pastekan kode dibawah ini tepat diatas tag  ]]></b:skin>
.ribbon span {
    background:#A81B6A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
    background:#FFD204;
    margin-top:0;
  
}
.ribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}

.ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #fff;
}
.ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #A81B6A;
}
.ribbon:after {
    border-right-color:transparent;
}

.ribbon:before {
    border-left-color:transparent;
}
  • Simpan Template...
  • Masuk lagi ke Blogger -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript  
  • Pastekan kode berikut didalamnya:
<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Download</span></a>
    <a href='#'><span>Css3</span></a>
    <a href='#'><span>HTML</span></a>
    <a href='#'><span>MySQL</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

  • Silahkan ganti tanda # dengan link tujuan anda
  • Simpan Gadget, Selesai...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 19.24
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

1 komentar:

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top