Tutorial cara memasang breadcrumb di template blogger. Breadcrumb adalah sejenis menu navigasi yang muncul di atas judul artikel berdasarkan Label atau Category halaman postingan. Fungsi Breadcrumb adalah untuk memudahkan search eangine dalam merayapi sebuah halaman berdasarkan label dan judul postingan.
Fungsi Breadcrumb pada postingan artikel juga sebagai navigasi Label. Yang akan membuat pengunjung mengetahui isi artikel-artikel yang ada pada label yang sama. Maka, dengan adanya breadcrumb tersebut akan memberi dampak positif. Dan membuat blog jadi SEO Friendly dan User Friendly.
Sauatu perbandingan antara blog/website yang pakai breadcrumb dan tidak memakainya. Ini memang sangat berbeda dari penilaian SEO. Yang menggunakannya lebih di sukai oleh mesin penelusuran dan juga pengunjung. Kesimpulannya, suatu blog yang memasang breadcrumb itu lebih unggul dalam bidang Seo.
Cara Termudah Memasang Breadcrumb Valid Di Template Blogger/Blogspot:
Pengguna blogger/blogspot pastinya sudah familiar dengan tema template yang tersedia. Ada banyak jenis dan bentuk tema yang bisa jadi pilihan menurut selera masing-masing. Tapi, dari sekian jumlah template yang tersedia, tidak ada satu pun yang menggunakan Breadcrumb.
Tapi masih untung, karena pengguna blogger boleh dan bebas merombaknya. Agar template-template tersebut ada Breadcrumbnya, maka harus bisa memasang sendiri. Untuk pemasangannya kita harus merombak tema. Dan ini membutuhkan sedikit pengetahuan tentang kode HTML atau CSS.
Apabila blogger sudah mempelajari tentang kode-kode tersebut, Admin sangat yakin pasti dengan mudah bisa memasangnya. Dan bagi yang baru kecimpung di blogger, tidak perlu kuwatir atau sedih. Sebab, di tutorial ini Admin akan bagikan cara paling mudah memasang Breadcrumb valid di template blogspot.
Cara Paling Simple Memasang Breadcrumb Di Blogspot
Template di blogspot memang banyak pilihannya, mulai dari Layout Versi: #2. Misalnya: Template Simple, Water Mark, Jendela Baru, Tema Perjalanan, dan sejenisnya. Template Layout Versi: 2 dengan tampilan asli, sudah tidak memenuhi standard SEO saat ini.
Apabila ingin menggunakannya, maka kita harus merubahnya sendiri. Sebagai contoh template layout versi: (2) hasil dari merombak sendiri adalah yang di gunakan blog WapHtml ini. Mungkin Anda tidak akan menjumpai model style template seperti blog ini di luar sana. Bila pun ada, berarti hasil nyontek template blog ini.
Selanjutnya template blogger Layout Versi:#3. Ini merupakan beberapa tema yang sudah memenuhi standard SEO. Akan tetapi sayangnya belum ada Breadcrumb yang terpasang. Jadi, buat pengguna tema layout versi: (3) yang asli seperti: Contempo, SOHO, Essential, Emporio dan Notable, harus memasangnya sendiri.
Selanjutnya, langsung saja kita menuju pada Tutorial pemasangan breadcrumb di template blogger/blogspot menurut jenis templatenya. Silahkan di baca dan di cermati satu persatu tata cara di bawah ini.
Sebelumnya anda harus Copy terlebih dahulu kode BreadCrumb dan CSS-nya yang di buat oleh Mbak Igniel. Kunjungi situsnya di https://igniel.com.
Silahkan mencopy kode breadcrumbnya terlebih dahulu, dan simpan di buku catatan Anda.
<!-- Breadcrumb Blogger by igniel.com --><b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'><meta content='1' itemprop='position'/><a expr:href='data:blog.homepageUrl.canonical' itemprop='item' title='Home'><span itemprop='name'>Home</span></a></span><b:if cond='data:post.labels'><b:loop index='num' values='data:post.labels' var='label'> › <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'><meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'><span itemprop='name'><data:label.name/></span> </a></span></b:loop><b:else/> › Tidak Ada Kategori </b:if></div> </b:loop></b:if>
Pasang Kode CSS Breadcrumb
Setelah mencopy Kode Breadcrumb, sekarang harus copy kode CSS Breadcrumb yang ada di bawah. Lalu pasang kode CSS di atas kode </b:skin>, apabila tidak work bisa di pasang di atas kode: </head>. Dan cara ini berlaku untuk seluruh tema/template blogger yang tersebut di atas. Setelah tahu tempat atau letak pemasangan kode CSS-nya, sekarang silahkan copy kode scriptnya di bawah ini:
/* Breadcrumb Blogger by igniel.com */.breadcrumb {margin-bottom:20px;} .breadcrumb, .breadcrumb a, .breadcrumb a:hover {font-size:12px; /*ukuran text*/ color: #006600; /* warna text */}
Untuk menyesuaikan jarak, ukuran huruf dan warnanya silahkan di rubah sendiri menurut selera.
Proses Pemasangan Kode Breadcrumb Di Template Blogger Versi2 Dan Versi3
Masuk di akun blogger terlebih dahulu. Kemudian cari menu Tema-->, Lalu klik Panah-->, dan klik pada menu Edit HTML-->. Kemudian cari kode HTML sesuai dengan kode masing-masing template.
Template Versi: 2 Blogger
Memasang breadcrumb pada template layout versi 2 (dua) seperti yang Admin sebut di atas: Misalnya: Template Simple, Water Mark, atau tema Perjalanan. DI dalam template tersebut ada 3 jenis kode yang sama seperti kode di dalam kotak bawah ini.
<a expr:name='data:post.id'/> <b:if cond='data:post.title'> ...Isi Kode BreadCrumb Di Sini... <h3 class='post-title entry-title' itemprop='name'>
Untuk tempat menempel kode Breadcrumb, cari dan temukan deretan kode yang ke 3 (tiga). Setelah ketemu, tempel script Breadcrumb tepat di atas kode: <h3 class='post-title entry-title', lihat contoh di atas dalam kotak.
Template Blogger Layout Versi: 3
Template blogger yang baru yaitu Layout Versi: 3 ini ada beberapa macam. Di antaranya adalah: Template: Contempo, Essential, SOHO, Emporio dan Notable.
Template Blogger CONTEMPO
Cara pemasangan BreadCrumb di template Contempo. Cari kode seperti di kotak. Di template Contempo ada 2 (dua) jenis kode seperti di bawah ini. Dan pasanglah kode Breadcrumb pada barisan kode yang pertama.
<b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> ....Pasang Kode BreadCrumb Tepat Di Sini.... <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
Template Blogger ESSENTIAL
Untuk cara pemasangan Breadcrumb valid di template Essential. Di dalam editor Html template Essential, terdapat 3 (tiga) jenis kode yang mirip seperti pada kotak di bawah ini. Gunakan dan pasang kode breadcrumb pada barisan kode yang ke dua.
<b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> ...Pasang Dan Letakkan Kode BreadCrumb Tepat Di Sini... <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
Template Blogger SOHO
Bagaimana cara pasang breadcrumb di template SOHO?. Caranya juga simple seperti template di atas. Cari kode seperti di bawah ini, lalu kode Breadcrumb di tempelkan tepat di atas kode <h3 class='post-title entry-title'>. Kalau bingung, lihat contohnya di dalam kotak hijau bawah ini.
<b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> ...Pasanglah Kode BreadCrumb Dan Tempel Tepat Di Sini... <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
Template Blogger NOTABLE
Sekarang saatnya pasang breadcrumb di template Notable. Pada tema Notable ada 3 (tiga) jenis kode yang hampir mirip seperti di di kotak bawah ini. Tapi pilihlah susunan kode yang kedua untuk menempel kode Breadcrumb. Di antara 3 deretan kode yang hampir sama tersebut ada satu yang berbeda. Cukup mencari yang ada susunan kode seperti ini: <h3 class='post-title entry-title'>. Jika sudah ketemu tempelkan script breadcrumb di atasnya. Contoh detailnya ada di kotak hijau bawah ini.
br/><b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> ...Pasanglah Kode BreadCrumb Di Sini... <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
Itulah tutorial cara memasang breadcrumb valid html di template blogger/blogspot. Apabila tutorial ini bermanfaat, silahkan di bagikan di akun medsos atau blog yang Anda miliki.
Tidak ada komentar:
Posting Komentar