jual beli liberty reserve, jual beli paypal

Jumat, 08 Juli 2011

Cara membuat breadcrumbs / menu navigasi diatas artikel postingan

·

Membuat Breadcrumb Menu Pada Blog


cara membuat breadcrumbs / menu navigasi diatas artikel postingan atau istilahnya disebut breadcrumbs ,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.

Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.
Untuk melihat hasil dari sebuah blog yang sudah  cara membuat breadcrumbs / menu navigasi diatas artikel postingan bisa lihat gambar.

cara membuat breadcrumb.

Atau bisa kunjungi situs teman saya langsung di blog latihan seo nya.
Untuk membuatnya kita bisa menggunakan script ciptaan hoctro di hoctro.blogspot.com
Saya ingin menjabarkannya kembali langkah cara membuat breadcrumbs / menu navigasi diatas artikel postingan ini dalam bahasa Indonesia.

Langkah Cara Membuat Breadcrumb Pada Blogger

  1. Pertama,pastikan anda sudah membuat label pada blog.
  2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
  3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):
    <b:includable id='main' var='top'>
  4. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.
    <b:includable id='breadcrumbs' var='post'>

    <!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
      <b:if cond='data:blog.pageType == "item"'>
          <p class='breadcrumbs'>
          <span class='post-labels'>
            <b:if cond='data:post.labels'>

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

            </b:if>
          </span>
          </p>
      </b:if>
    <!-- End of Breadcrums Hack -->
    </b:includable>

  5. Kemudian,carai lagi kode berikut:

    <b:if cond='data:post.dateHeader'>
  6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.
    <b:include data='post' name='breadcrumbs'/>
  7. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.
    .breadcrumbs {
    border-bottom:1px dotted #000;
    margin:2em 0 0.5em;
    padding:0 0 0.5em;
    }

  8. Kemudian Simpan Templates dan Selesai.

Tutorial blogging lainnya...

0 komentar:

Posting Komentar

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
Silahkan tinggalkan komentar untuk postingan ini. Untuk komentar yang tidak mendidik akan segera didelete. No SPAM, NO SARA! Terimakasih. by : Marganda A Pasaribu

Radio Powerx Network

Radio Online Powerx Community
Browser not supported

AnDa PeNgUnJuNg YanG Ke :

Hit Counter
Web Counters
free counters

GaNs_FoX

Me

Me
SLow Bro

JaM