Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

21
Tgl. 03 April 2012

Menerapkan Breadcrumb Navigation Pada Judul Artikel

Bisa jadi Anda sudah tidak asing lagi dengan istilah Breadcrumb Navigation atau label berurutan dalam sebuah blog yang menyatakan tautan ...

Ilustrasi Breadcrumb Navigation
Bisa jadi Anda sudah tidak asing lagi dengan istilah Breadcrumb Navigation atau label berurutan dalam sebuah blog yang menyatakan tautan untuk beranda, kategori artikel, serta judul artikel. Breadcrumb Navigation selain dapat digunakan untuk mempermudah dalam melakukan navigasi, juga memberikan kemudahan bagi pengunjung untuk mengetahui posisinya dalam sebuah blog.

Jika pada umumnya fasilitas tersebut diterapkan dengan menempatkannya di atas atau di bawah judul artikel, maka dalam artikel ini saya akan menguraikan cara yang digunakan untuk menerapkan Breadcrumb Navigation langsung pada judul artikel yang diterbitkan seperti yang tampak pada contoh gambar di bawah ini.
Ilustrasi Breadcrumb Navigation Pada Judul Artikel
Screenshot: eltelu.blogspot.com

Selain dirasa akan lebih efektif, dengan menerapkan Breadcrumb Navigation seperti yang terdapat dalam uraian ini nantinya juga akan berdampak terhadap SEO (Search Engine Optimization). Dampak yang dimaksud di sini adalah, bahwasanya setiap label yang digunakan untuk mengkategorikan setiap artikel pun akan dapat terindeks oleh mesin telusur seperti yang tampak pada gambar contoh di bawah ini.
Ilustrasi Efek Penggunaan Breadcrumb
Screenshot: google.co.id

Seperti yang tampak pada gambar di atas, dapat dilihat bahwa bagian yang ditunjukkan dengan tanda anak panah adalah label atau kategori artikel yang ikut terindeks dan kemudian ditampilkan oleh mesin telusur dalam SERP (Search Engine Result Page).

Lantas bagaimana cara yang digunakan untuk menerapkan dan memanfaatkan fasilitas ini? Caranya cukup mudah karena secara prinsip serupa dengan penambahan bingkai untuk mempercantik judul artikel, yaitu dengan menyisipkan beberapa script tertentu ke dalam template blog yang digunakan. Dan langkah-langkahnya adalah sebagai berikut:
  1. Login ke akun Blogger Anda.
  2. Pada ‘Dasbor Blogger’ klik nama blog Anda dan kemudian klik menu ‘Template’.
  3. Klik tombol ‘Edit HTML’ kemudian klik tombol ‘Lanjutkan’.
  4. Centang pilihan ‘Expand Template Widget’.
  5. Cari kode ]]></b:skin> dan kemudian sisipkan kode berikut ini tepat di atasnya.
    .breadcrumbs {
    margin: 0px;
    padding: 0px; 
    }

  6. Cari kode <b:includable id='main' var='top'> dan kemudian sisipkan kode berikut ini tepat di atasnya.
    <b:includable id='breadcrumb' var='posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='text-align: justify;'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.labels'>
          <div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
            <span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Beranda</a></span>
              <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == &quot;true&quot;'>
                  &gt; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
                </b:if>
              </b:loop>
              &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span>
          </div>
        <b:else/>
          <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></span> &gt; <span>Unlabelled</span> &gt; <span><a expr:href='data:post.url'><data:post.title/></a></span></div>
       </b:if>
      </b:loop>
    </div>
    </b:if>
    </b:includable>

  7. Cari kode <b:includable id='post' var='post'> dan kemudian perhatikan bahwa di bawahnya terdapat kode <h3 class='post-title entry-title'> yang secara default adalah seperti di bawah ini.
    <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>

  8. Ganti <data:post.title/> yang terdapat pada kode tersebut dengan <b:include data='posts' name='breadcrumb'/> yang akhirnya menjadi seperti kode di bawah ini.
    <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <b:include data='posts' name='breadcrumb'/>
              </b:if>
            <b:else/>
              <b:include data='posts' name='breadcrumb'/>
            </b:if>
          </b:if>
          </h3>

  9. Simpan template Anda.

Nah, bagaimana? Mudah bukan? Jika Anda tertarik untuk menggunakan dan memanfaatkannya, maka silakan mencoba menerapkannya pada blog yang Anda kelola.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 21 komentar pada artikel ini ▶
05/04/12, 10.56 O

Mas, panduan sudah saya coba, tapi belum bisa karena yang data post title-nya tidak ada.
Mohon saran dan panduannya. Terima kasih sebelumnya.
Jika berkenan silahkan mampir dan memberikan komentar di blog saya ya...

Anonim
08/04/12, 10.27 O

dengan navigasi Breadcrumb akan memudahkan pengunjung mengetahui mereka sedang berada di halaman mana pada blog kita, dan juga katanya lebih SEO friendly... :)
nice share mas...
salam kenal..........

03/08/12, 12.23 O

Selamat Sore Mas, tolong bantu saya untuk Menerapkan Breadcrumb Navigation Pada Judul Artikel, tersebut sudah saya buat sesuai dengan petujuntuknya lengkap tidak ada satupun yang kurang, tapi malah tidak muncul, sudah saya terapkan dari blog lian tapi hasilnya tetap sama,kira2 dimana letak kesalah tersebut? pusing saya mas hehehe maklum (Pemula), sangat bertrima kasih jika anda ingin membantu saya...blog saya
kraeng-francisco-tutorial.blogspot.com

Anonim
04/08/12, 01.21 O

@Kapten FranciscoTadi blog Sobat sudah saya cek. Dan sepertinya Sobat belum mengerjakan langkah-langkah tersebut secara lengkap, karena saya tidak menemukan kode .breadcrumb { di sumber halaman blog yang Sobat kelola.

Jadi, coba kerjakan langkah-langkah di atas secara lengkap dan berurutan.

Sekian dan salam. :)

05/08/12, 00.40 O

Trima ksih mas sudah kasih balasan. sudah saya coba...dan berhasil...boleh saya tanya lagi mas, buat posisi tanggal berada di tengah bagaimana caranya? maaf sudah merepotkan?

Anonim
05/08/12, 23.59 O

@Kapten FranciscoSobat, silakan klik di sini untuk membuka artikel yang menguraikan tentang hal tersebut.

06/10/12, 09.17 O

mas ko punya say ga muncul juga ya.. padahal sduah saya coba dan teliti

06/10/12, 09.47 O

@Laboratorium SainsSetelah saya cek, sepertinya sudah bisa gitu kok.

Jadi untuk melihat apakah sudah berhasil atau belum, caranya silakan Sobat buka dulu salah satu artikel yang ada dan kemudian setelah artikel terbuka perhatikan bagian judul artikelnya.

Sedangkan untuk pemunculannya dalam SERP (seperti yang tampak pada gambar ketiga dari atas) memang tidak dapat seketika. Perlu beberapa waktu sampai dengan dilakukannya perayapan (proses pengindeksan) yang dilakukan oleh search engine pada blog tersebut.

:)

15/03/13, 23.52 O

salam kenal sebelum nya mas'alhamdulillah tutorial yang sampean berikan saya sudah terapkan dan berhasil jika berkenan di tunggu kunjungan nya di http://galerihabaib.blogspot.com

20/03/13, 15.54 O

@cahaya alhaddadSalam kenal balik Sobat. Syukurlah bila Sobat tidak mengalami kendala atau kesulitan dalam menerapkan teknik yang saya uraikan di atas.

21/04/13, 17.59 O

balik lagi gan....
mudah - mudahan gak bosen ama saya
sudah saya terapkan breadcrumbs update diblog saya dan berhasil
www.ione13.blogspot.com
cuman beda script .breadcrumbsnya aja :P

terimakasih...
saya banyak dapet ilmu dari blog ini
semoga ilmu agan bertambah lagi
semoga agan tidak bosan menyebarkan ilmu

amin.....

29/04/13, 00.34 O

@iwan setiawanSama-sama dan terimakasih atas doanya, Sobat.

Saya turut bersyukur bila Sobat tidak mengalami kendala atau kesulitan dalam menerapkan teknik tersebut.

28/05/13, 21.04 O

Mas sayakan menggunakan costum template yang memang sudah ada breadcrumbnya! jika saya ingin menyembunyikan judul pada halaman postingan kyak punya mas langka mana mas yang hrus dikerjakan...? sebelumnya sya sudah menrapkan langkah2 di atas tpi tetep masi tampil judulnya mas...terimaksih sebelumnya

28/05/13, 23.39 O

@gio akramSob, kalau bsa saya minta alamat blognya dulu ya. Sebab kalau saya tidak tahu alamat blog yang Sobat maksud tersebut, tentu saja saya sangat kesulitan karena tidak dapat melakukan analisa secara langsung untuk memberikan urain solusi jawabannya.

Sementara itu setelah saya lihat di profil Google Plus, ternyata Sobat juga tidak pencantumkn informasi apapun tentang blog yang Sobat maksud tersebut.

Jadi, untuk sementara saya mohon maaf bila belum dapat memberikan uraian jawaban untuk pertanyaan di atas.

29/05/13, 04.20 O

Maf mas sebelumnya sudah merepotkan....
ini almatnya mas http://gioakram13.blogspot.com/

30/05/13, 08.56 O

@gio akramJadi begini Sob. Silakan edit template dan kemudian cari bagian berikut ini.

<div class="post">
<a name=" ...dan seterusnya
<h3><a ...dan seterusnya </a></h3>
<div class="post-header-line-1"></div>
<div class="info"> ...dan seterusnya

Nah, selanjutnya untuk menghilangkan judul yang terletak di bawahnya breadcrumb, hapuslah bagian yang saya tandai dengan cetakan tebal di atas.

30/05/13, 15.16 O

terimaksih mas sudah jadi...tapi kira2 mempengaruhi pada Search Engine gak mas?

31/05/13, 23.16 O

@gio akramWahhh, kalau masalah itu jujur saja saya juga kurang begitu paham Sob.

Tapi yang jelas dengan menghilangkan bagian itu maka secara otomatis 1 (satu) buah tag heading juga hilang.

Jadi saya sarankan agar Sobat menggantinya dengan menempatkan sebuah tag heading (dalam hal ini H3) pada bagian breadcrumb.

31/05/13, 23.16 O

@gio akramWahhh, kalau masalah itu jujur saja saya juga kurang begitu paham Sob.

Tapi yang jelas dengan menghilangkan bagian itu maka secara otomatis 1 (satu) buah tag heading juga hilang.

Jadi saya sarankan agar Sobat menggantinya dengan menempatkan sebuah tag heading (dalam hal ini H3) pada bagian breadcrumb.

05/06/13, 20.16 O

oke mas, sudah sukses.
tapi mau tanya kok diblog saya ukurannya besar sekali yahh.. caranya gmna yah biar ukurannya pas??

ini blog saya : indovisiontoptvbandung.blogspot.com

thanks:

05/06/13, 21.02 O

@Indovision BersamaCaranya edit template kemudian ubah ukuran huruf (font-size) yang dipakai pada CSS berikut ini sesuai dengan ukuran yang Sobat kehendaki.

.post h1 {color: #666666;font-size: 27px;line-height: 30px; margin: 0 0 5px;}

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog