Pengertian dan Cara Memasang Breadcrumb di Blog

Pengertian dan Cara Memasang Breadcrumb di Blog - Kali ini Kang maz akan membagikan tentang pengertian dan manfaat breadcrumd. ketika sobat blogwalking dan menemukan seperti ( Home > Nama kategori > Judul posting ) ini termasuk yang namanya breadcurmb. Breadcurmb sendiri berfungsi untuk petunjuk navigasi sebuah artikel diblog tertentu maka breadcurmb sangat membantu blog kita lebih SEO friendly serta lebih mudah terindex di mesin pencarian.

Salah satu mempercepat dan mudah terindex adalah dengan memasang breadcurmb pada blog sobat, dalam artikel ini akan membahas pengertian, manfaat dan cara memasang breadcurmb. berikut ...

Arti Breadcurmb ?

Breadcurmb adalah navigasi menu untuk mempermudah pengunjung web/blog melacak lokasi dalam dodokumen dan kembali ke awal dengan mudah.

Baca juga : Cara mudah membuat Privacy Policy untuk pemula blogger

Pengertian singkat breadcurmb adalah breadcurmb merupakan sebuah petunjuk simpel terhadap sebuah artikel yang berkaitan dengan kategori dan halaman situs sebuah artikel yang terdapat didalam sebuah blog, seperti gambar dibawah ini

Manfaat dan Fungsi Breadcurmb

Manfaatnya adalah sebenarnya memperkaya kata kunci dalam postingan web atau blog kita. tentunya sangat baik untuk SEO blog (menurut pakar SEO). memasang breadcurmb juga akan membuat konten/postingan blog lebih cepat terindex oleh mesin pencarian dan keterlihatn pada hasil pencarian juga akan berbeda

Fungsinya adalah memberikan tanda dan mengetahui dibagian mana pengunjung web atau blog saat berada dalam web atau blog, juga untuk mengikuti kembali ke halaman utama atau entri lainnya. breadcurmb sendiri memudahkan kita dalam menavigasi link bisa lebih mudah.

Cara Memasang Breadcumb di Blogger

Seperti yang Kang Maz diatas gunanya breadcurmb untuk mempermudah pengunjung dimana letak mereka saat berada di blog/web kita. bagaimana cara memasang breadcurmb di blogger? berikut caranya

Masuk Ke Blogger 

Setelah masuk ke Blogger terus pilih menu samping Template > Edit HTML, kemudian cari kode ]]></b:skin> lalu simpan kode dibawah ini tepat diatas ]]></b:skin>

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Lalu cari kode <b:includable id='main' var='top'> kemudian ganti dengan kode dibawah ini.

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><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'>Home</a></span><b:loop values='data:post.labels' var='label'>&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span></b:loop>&#187; <span><data:post.title/></span></div><b:else/><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><!-- breadcrumb for the label archive page and search pages.. --><div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span><b:else/><span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/>

Simpan Template. dari sini sobat berhasil memasang breadcurmb pada blog sobat khusus yang berdomain blogspot.com

Cara Memasang Breadcurmb di Wordpress

Bagaimana cara memasang breadcurmb di wordpress? cara memasang breadcurmb di wordpress tidaklah susah. hal pertama yang harus sobat lakukan, masuk ke dashboard wordpress, klik Appearance > Editor. setelah ituk pilih function.php. Silahkan Copy kode di bawah ini dan letakkan di bagian paling bawah function.php.

//breadcrumbs

if ( ! function_exists( 'breadcrumbs' ) ) :

function breadcrumbs() {

$delimiter = '&rsaquo;';

$home = 'Home';

echo '<div xmlns:v="http://rdf.data-vocabulary.org/#">';

global $post;

echo ' <span typeof="v:Breadcrumb">

<a rel="v:url" property="v:title" href="'.home_url( '/' ).'">'.$home.'</a>

</span> ';

$cats = get_the_category();

if ($cats) {

foreach($cats as $cat) {

echo $delimiter . "<span typeof=\"v:Breadcrumb\">

<a rel=\"v:url\" property=\"v:title\" href=\"".get_category_link($cat->term_id)."\" >$cat->name</a>

</span>"; }

}

echo $delimiter . the_title(' <span>', '</span>', false);

echo '</div>';

}

endif;

Setelah meletakkan kode diatas di bagian paling bawah function.php, trus klik single.php cari kode <?php if(have_posts()):while(have_posts()):the_post();?> letakkan kode dbawah ini tepat dibawa kode <?php if(have_posts()):while(have_posts()):the_post();?>.

<div id="breadcrumbs">
<?php breadcrumbs(); ?>
</div>

Klik Update file, lihat hasilnya. dari sini sobat berhasil memasang breadcurmb blog di wordpress

Demikan artikel tentang Pengertian dan Cara Memasang Breadcurmb di Blog, Semoga Bermanfaat.