Home » , » Ribbon Menu With CSS3

Ribbon Menu With CSS3

Pada Tutorial Blogger kali ini saya akan mengajarkan Sobat cara membuat Ribbon Menu With CSS3 dihalaman Blog atau Website Sobat Semua dan apa itu Ribbon Menu? Oke Saya jelaskan sedikit, Ribbon Menu adalah Sebuah Menu navigasi yang berbentuk atau menyerupai sebuah Pita dan pembentukannya tidak menggunakan gambar atau image dan hanya menggunakan Kode CSS3 sehingga membuat Ribbon Menu ini sangatlah Efisien dan ringan untuk digunakan.


Silahkan Simak Dibawah ini untuk Cara Membuatnya.
  1. Pertama Silahkan Sobat Masuk atau Login Ke Akun Blogger.
  2. Masuklah Pada Rancanga => Edit HTML dan Beri Centang pada Expand Template Widget.
  3. Cari Kode ]]></b:skin> pada Kode HTML Tempalte Sobat.
  4. Bila Sudah ketemu silahkan taruh semua kode berikut tepat diatasnya.

    .ribbon {
    display:inline-block;
    }
    .ribbon:after, .ribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
    border:1.5em solid #01978C;
    }
    .ribbon:after {
    border-right-color:transparent;
    }
    .ribbon:before {
    border-left-color:transparent;
    }
    .ribbon a:link, .ribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
    }
    .ribbon span {
    background:#01978C;
    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 #01978C;
    }
    .ribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #9B8651;
    border-bottom:0.5em solid #01978C;
    }

  5. Selanjutnya Cari Kode <body> dan letakkan Kode Berikut Dibawahnya.

    <div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Software</span></a>
    <a href='#'><span>Game</span></a>
    <a href='#'><span>Tutorial</span></a>
    <a href='#' ><span>About</span></a>
    <a href='#'><span>Contact</span></a>
    </div>

  6. Keterangan:

    • Kode yang berwarna Hijau adalah Link/URL dari menu tersebut.
    • Kode yang berwarna Biru adalah Nama atau Judul dari Menu tersebut.

  7. Sekarang Simpan Template Sobat dan Lihat Hasilnya.

Cukup Sekian Tutorial Blogger kali ini dan nantikan Tutorial Terbaru Berikutnya.
filiex Artikel Oleh Filiex Boy dari filiex.blogspot.com, yang telah
Diterbitkan di 3:40 AM
Label: ,
Jangan lupa berlangganan via RSS feed untuk artikel terbaru
Share this article :
Unduh Adobe Flash player

+ komentar + 6 komentar

Anonymous
April 6, 2012 at 3:55 PM

Keren Tutorialnya Sob ^_^

Terimakasih Anonymous atas Komentarnya di Ribbon Menu With CSS3
Anonymous
April 11, 2012 at 10:05 AM

gak bisa woy udah gue coba

Terimakasih Anonymous atas Komentarnya di Ribbon Menu With CSS3
April 11, 2012 at 2:42 PM

@AnonymousTutorial Diatas sudah saya uji coba dan bekerja dengan baik kok

Anonymous
April 12, 2012 at 7:48 AM

udah gua taroh di atas kode disini ]]>



kagak ada yang muncul tuh :P

Terimakasih Anonymous atas Komentarnya di Ribbon Menu With CSS3
July 30, 2012 at 1:56 AM

kalo pengen nambah multi levelnya gimana kk?

Terimakasih ary Kencana atas Komentarnya di Ribbon Menu With CSS3
Anonymous
November 5, 2012 at 1:15 AM

gak ada menu rangcangan di blogg q, knpa ya?

Terimakasih Anonymous atas Komentarnya di Ribbon Menu With CSS3

Post a Comment