Pages

6

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.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

6 comments:

  1. AnonymousApril 6, 2012 at 3:55 PM

    Keren Tutorialnya Sob ^_^

    ReplyDelete
  2. AnonymousApril 11, 2012 at 10:05 AM

    gak bisa woy udah gue coba

    ReplyDelete
  3. AlfionaApril 11, 2012 at 2:42 PM

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

    ReplyDelete
  4. AnonymousApril 12, 2012 at 7:48 AM

    udah gua taroh di atas kode disini ]]>



    kagak ada yang muncul tuh :P

    ReplyDelete
  5. Admin AmpalusoftwareJuly 30, 2012 at 1:56 AM

    kalo pengen nambah multi levelnya gimana kk?

    ReplyDelete
  6. AnonymousNovember 5, 2012 at 1:15 AM

    gak ada menu rangcangan di blogg q, knpa ya?

    ReplyDelete