CSS / Posted 4 years ago / 6 Komentar
breadcrumb

Membuat Breadcrumb (Navigasi) sederhana dengan CSS

Breadcrumb (navigasi) dalam sebuah website sangatlah penting, memudahkan pengunjung berselancar di website kita, Breadcrumb sendiri bentuknya seperti menu biasa, tapi tujuan breadcrumb itu sendiri adalah menunjukkan kita berada dihalaman mana, biasanya bertingkat, Kita lihat contoh seperti apa breadcrumb tersebut

Nah, Sekarang kita akan membuat sebuah Breadcrumb (navigasi) sederhana seperti pada gambar ini :

Kita akan menempatkan panah tersebut disetiap text yang ada link-nya sedangkan text yang terakhir tidak ada link-nya maka tidak ada panahnya.

Kode HTML

<html>
<head>
    <title>Membuat Breadcrumb (Navigasi) sederhana  dengan CSS | BelajarWebdesign.com</title>
</head>
<body>
    <div class="bungkusan">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Webdesign</a></li>
            <li>Inspiration</li>
        </ul>
    </div>
</body>
</html>

Kode CSS

body {margin: o; padding: 200px 0; text-align: center; background: #f89927;}
.bungkusan {
    width: 500px;
    height: 60px;
    background: url(bg.jpg) repeat-x;
    margin: 0 auto;
    font-size: 24px;
    font-family: arial;
    color: #afafaf;
}
ul {
    list-style: none;
}
li {
    float: left;
    line-height: 60px;
    margin-right: 10px;
    col
}
li a {
    color: #a2a2a2;
    text-decoration: none;
    background: url(panah.png) center right no-repeat;
    padding-right: 30px;
}
li a:hover {
    color: #666;
}

Metode di atas saya tidak menggunakan list-style yang biasanya (bulat/kotak), saya menggunaka teknik backgound images dimana background tersebut saya letakkan di sebelah kanan pada teks yang mempunyai link. Jadi seberapa banyakpun teks yang punya link maka akan ada gambar panah di sebelah kanannya.

Mudah bukan, ini baru metode sederhana loh, nah bagaimana kalau membuat breadcrumb seperti pada website delicious.com itu :D

Tags

contoh web html,belajar web design pemula,contoh html sederhana,contoh web sederhana dengan html,belajar web design untuk pemula,contoh web design html,contoh web html sederhana,contoh web menggunakan html,contoh website menggunakan html,contoh website sederhana dengan html,contoh web css,web design sederhana,web html sederhana,contoh website sederhana menggunakan html,contoh web sederhana html,contoh web html dan css,contoh website dengan css,contoh website html sederhana,membuat css sederhana,contoh website menggunakan css Tags: , , , , , , , ,
cToko Toko Online

Seorang Web Designer, Web Developer, Wordpress Development dan independen Blogger. Spesialisasi Personal Branding. Selalu haus akan ilmu tentang perkembangan dunia Web Design, Social Media, Online Marketing. Kadang-kadang juga berprofesi sebagai konsultan Website dadakan :)

http://www.zulsdesign.com


4 Comments

  1. Posted January 25, 2011 at 6:52 am | Permalink

    Kalau tutorial ini, kayaknya cocok sekali di kombinasikan dengan artikel yang ini : http://belajarwebdesign.com/css/membuat-gambar-full-background-page/

  2. Rossiana
    Posted December 9, 2012 at 7:02 pm | Permalink

    bagus banget artikelnya . sayangnya, untuk url background tidak disertakan gambarnya. jadi untuk mencoba, kami hanya bingung dengan brapa ukuran pasti dri kedua gambar tsb :(

  3. April
    Posted December 22, 2012 at 3:55 am | Permalink

    Hem, perlu bongkar pasang css lagi nih ane,,
    Breadcrumb, perlu dipertimbangkan

  4. Posted January 19, 2013 at 1:30 am | Permalink

    Susah juga buatnya..
    Apalagi kalau Ilmu belum nyerap semua meski kudu ke w3school dulu..

2 Trackbacks

  1. [...] ya? hehe.. ya itu adalah salah satu elemen website, saya dulu pernah menulisnya di @belajar-web Membuat Breadcrumb (Navigasi) sederhana dengan CSS tapi hanya html-nya [...]

  2. [...] ya? hehe.. ya itu adalah salah satu elemen website, saya dulu pernah menulisnya di @belajar-web Membuat Breadcrumb (Navigasi) sederhana dengan CSS tapi hanya html-nya [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

webdesign