Monday, February 26, 2018

Cara Mudah Membuat Breadcrumbs Resfonsive Pada Blog

Cara Mudah Membuat Breadcrumbs Resfonsive Pada Blog

Tags

Breadcrumbs Resfonsive Pada Blog
Breadcumbs

Banyak bagian penting dari struktur template suatu blog. Masing-masing dari struktur template blog tersebut mempunyai fungsi tersendiri. Usahakan seminimal mungkin bagian dari struktur template yang terbilang penting ini jangan sampai mengalami error. Untuk mengecek struktur dari suatu blog bagus atau ada bagian yang error sobat bisa cek pada Uji data terstruktur dari google atau klik link berikut Uji data terstruktur.



Bicara tentan struktur data dari suatu blog pada halaman google uji data terstruktur ada beberapa bagian diantaranya WPSideBar, WPHeader, WebSite, WPFooter, SiteNavigationElement, Blog, dan hatom. Semua bagian ini memiliki peran masing-masing dan usahakan tidak mengalami error. Kali ini kita akan membahas bagian pada SiteNavigationElement dimana pada bagian ini terdapat Breadcrumbs.

Breadcrumbs sendiri berfungsi sebagai navigasi untuk memberitahu lokasi pengunjung saat berada pada halaman sebuah website. Biasanya Breadcrumbs ini terletak di bagian paling atas atau lebih tepatnya di bawah navigasi menu utama. Contohnya sobat bisa lihat pada gambar diatas yang saya beri kotak merah.

Pada umumnya Breadcrumbs ini sudah ada pada setiap template baik template gratis ataupun template berbayar. Nah bagi sobat yang lagi belajar redesign atau utak-atik template kali ini saya punya Breadcrumbs yang sudah resfonsive. Sobat bisa gunakan Breadcrumbs pada template blog sobat berikut langkah cara memasangnya.

Langkah pertama buka dashboard blog sobat kemudian pilih tema dan edit HTML. Selanjutnya backup dulu template untuk jaga-jaga dari kemungkinan buruk. Setelah itu copy kode di bawah ini dan sobat letakan di atas kode
]]></b:skin>
atau Breadcrumbs sobat yang lama hapus dan ganti dengan kode di bawah.

/* Css Breadcrumbs */
.breadcrumbs {font-size:12px;overflow:hidden;white-space:nowrap;padding:3px;margin:3px auto 7px;position:relative;color:#ccc;text-transform:uppercase;text-overflow:ellipsis;display:block}
.breadcrumbs a {color:#000;margin:0 2px;line-height:normal;}
.breadcrumbs span a {color:#DD613E;background:#fff;}
.breadcrumbs &gt; span:last-child {width:0;color:#ccc}
.breadcrumbs span a:hover {color:#fff;background:#0072C6}
.breadcrumbs a:hover {color:#fff;background:#0072C6}

Langkah selanjutnya adalah sobat cari bagian yang mirib dengan kode seperti di bawah ini pada template sobat.

<b:includable id='main' var='top'>........</b:includable>

Jika sudah ketemu copy kode di bawah ini dan tempatkan setelah kode di atas. Atau lebih tepatnya sobat letakan di bawah kode
 </b:includable>
dari kode di atas.

<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' title='Home'>Home</a></span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
<i class='fa fa-angle-right'/> <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=5&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>
</b:loop>
<i class='fa fa-angle-right'/> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a></span> <i class='fa fa-angle-right'/> <span>Without Label</span> / <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> <i class='fa fa-angle-right'/> <span>Archived 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' title='Home'>Home</a></span> <i class='fa fa-angle-right'/> <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> <i class='fa fa-angle-right'/> <span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Langkah terakhir adalah simpan template sobat. Selanjutnya cek kembali blog sobat pada halaman google uji data terstruktur. Jika tidak ada bagian yang error berarti sobat sudah sukses memasang Breadcrumbs pada blog sobat. Demikianlah pembahasang cara memasang Breadcrumbs resfonsive pada blog smoga bermanfaat.

Kebijaksanaan tidak tumbuh dengan serta merta.

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon