Loading...

cara pasang breadcumb di blog

Breadcumb adalah menu navigasi untuk memudahkan pengunjung mencari artikel di blog kita yang terletak diatas judul artikel
cara membuatnya:
Pertama-tama,masuk ke menu Rancangan - Edit HTML - Expand template widget.
Lalu cari kode di bawah ini melalui F3 atau Ctrl+F

    <b:if cond='data:post.title'>

Dan bila sudah ditemukan,simpan kode ini dibawah kode yang diatas tadi.


    <b:if cond='data:blog.pageType == "item"'>
    <div class='breadcrumb'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    &gt;
    </b:if>
    <data:post.title/>
    </div>
    </b:if>



Sehingga menjadi seperti ini:

    <b:if cond='data:post.title'>

    <b:if cond='data:blog.pageType == "item"'>
    <div class='breadcrumb'>
    <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
    <b:if cond='data:post.labels'>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
    <b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    &gt;
    </b:if>
    <data:post.title/>
    </div>
    </b:if>


Setelah langkah tadi selesai,cari kode ]]></b:skin>
dan simpan kode ini di atas kode tersebut.

    .breadcrumb {
    padding:4px 4px 4px 0px;
    margin: 0px 0px 10px 0px;
    font-size:96%;
    line-height: 1.2em;
    border-bottom:2px double #003000;
    }



Hasilnya seperti ini :


    .breadcrumb {
    padding:4px 4px 4px 0px;
    margin: 0px 0px 10px 0px;
    font-size:96%;
    line-height: 1.2em;
    border-bottom:2px double #003000;
    }
    ]]></b:skin>


Selanjutnya,simpan template 

semoga bermanfaat....

0 comments:

Posting Komentar

 
TOP