Belajar Menciptakan Breadcrumb Sederhana Di Blogger

Joss
 Membuat breadcrumb yang valid sesuai dengan data struktur sangatlah gampang Belajar menciptakan breadcrumb sederhana di blogger

Blog kak Ryan – Membuat breadcrumb yang valid sesuai dengan data struktur sangatlah mudah, terlebih lagi jikalau kau sudah mengenal lebih banyak meta tag condiition pada blogger serta menguasai dasar-dasar instruksi HTML.

Tapi sebelumnya kau harus tahu apa itu breadcrumb beserta fungsinya. Dikutip dari seniberfikir.com “Breadcrumb ialah alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi mereka ketika ini dalam konteks sebuah website.”

Manfaat breadcrumbs juga sanggup meningkatkan interaksi pengunjung terhadap konten yang ada dalam blog kamu. Cara menciptakan breadcrum sangat gampang sekali asalkan kau memahami struktur dasar susunan kodenya, sanggup dibentuk dengab memakai markup HTML sanggup juga dibentuk dengan memakai JSON. Tapi kalau yang JSON ini hanya digunakan untuk menampikan pada search engine, kalau kau mau memakai yang sanggup diklik atau dalam bentuk hyperlink maka kita sanggup membuatnya menggunakam HTML. Susunan struktur instruksi breadcrumb yang valid sanggup kau lihat di dokumentasi google developer.

Biasanya kau sering melihat susunan menyerupai ini kan?
Home » Kategori » kategori » judul Artikel

Atau mungkin pernah melihat yang bentuknya menyerupai ini:
Home / Kategori / kategori / judul artikel.

Nah elemen itu disusun oleh instruksi breadcrumb menyerupai dibawah ini :

<div itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta content='1' itemprop='position'/>      <a href='URL Kategori' title='Home' itemprop='item'>         <span itemprop='name'>Nama Kategori</span></a>              </span> »  <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta content='2' itemprop='position'/>      <a href='URL Kategori' title='Home' itemprop='item'>         <span itemprop='name'>Nama Kategori</span></a>              </span> »   Judul Artikel  </div>

Pada instruksi diatas saya menyimpan breadcrumb pada elemen div, kau juga bebas mau memakai tag apa saja. Bisa tag ol, sanggup tag span, sanggup tag h2, yang penting kau menyertakan atribut itemscope=’itemscope’ itemtype=’https://schema.org/BreadCrumbList’ yang mengambarkan kalau instruksi yang berada didalam elemen tersebut ialah breadcrumb. Dalam hal ini kita memakai domain schema.org alasannya ialah schema pada domain data-vocabulary.org sudah tidak digunakan lagi dan akan kadaluarsa.

Read:  Cara Pasang Iklan Admob Di Blogger, Gampang Banget!

Untuk bab penyusunya breadcrumb terdiri dari beberapa meta tag komponen penyusun. Bagian penyusun awal kita berikan atribut itemprop=’itemListElement’ itemscope=’itemscope’ itemtype=’https://schema.org/ListItem’ untuk memberi tanda kalau pada bab tersebut ada satu item link. Bagian meta konten position digunakan untuk memberitahukan mesin pencari posisi urutan link tersebut. Atribut lain yang harus kau sertakan dalam tag link ialah title=’JUDUL Link’ itemprop=’item’, yang memberitahuna search engin bawah itu ialah item link dengan nama yang kau berikan.

Sebenarnya penyusunya tidak serumit itu, hanya saja saya menyesuaikan dengan blogger. Karena biasanya pada blogger bab list style sudah diatur pada css, sehingga akan sangat sulit kita mempelajarinya. Dan beginilah bab penyusunya yang saya ambil dari google developer.

<ol itemscope itemtype="https://schema.org/BreadcrumbList">   <li itemprop="itemListElement" itemscope       itemtype="https://schema.org/ListItem">     <!-- Method 1 (preferred) -->     <a itemprop="item" href="https://example.com/books">         <span itemprop="name">Books</span></a>     <meta itemprop="position" content="1" />   </li>   ›   <li itemprop="itemListElement" itemscope       itemtype="https://schema.org/ListItem">     <!-- Method 2 -->     <a itemscope itemtype="https://schema.org/WebPage"        itemprop="item" itemid="https://example.com/books/sciencefiction"        href="https://example.com/books/sciencefiction">       <span itemprop="name">Science Fiction</span></a>     <meta itemprop="position" content="2" />   </li>   ›   <li itemprop="itemListElement" itemscope       itemtype="https://schema.org/ListItem">     <span itemprop="name">Award winners</span>     <meta itemprop="position" content="3" />   </li> </ol>

Silakan kau pahami terlebih dahulu komponen penyusunya, terlihat diatas kurang lebih sama saja. Karena saya hanya menggunakn div elemen sebagai pengganti ol. Sedangkan pada bab dalamnya ialah komponen item dan URLnya yang terdapat pada breadcrumb.

Oke baklah saya anggap kau sudah memahami susunan instruksi diatas, kini kita mulai menciptakan breadcrumb pada blogger. Tapi kali ini kita akan memakai meta tag condition berupa looping dan variable pengisinya yang sudah disediakan oleh blogger.

Nama Kode Fungsi Kode
expr: mendefinisikan adanya variable
data:label.url Berisi string URL label
data:post.title berisi String Judul Post
data:label.name Berisi string nama label
<b:loop index=’Nomor’ values=’Array’ var=’variabel’></b:loop> Perulangan Pada Blogger
Read:  Cara Pasang Iklan Sticky Pada Halaman Web Atau Blog

Breadcrumb versi sederhananya sanggup kalian lihat dibawah ini, pada bab ini saya tidak memperlihatkan class apapun pada elemen ini. Jadinya kalau dipasang akan terlihat menyerupai teks polos biasa. Adapun bab looping (perulangan) kita gunakan untuk mengulangi semua data label yang digunakan dalam sutu artikel. Sedangkan data labelnya berupa nama dan URL kita panggil memakai variabel. Index=” ialah atribut yang akan memperlihatkan kita angka secara berurutan ketika 1x perulanhan, maka kita kasih nilai num (number).

Rahasia
<div 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' title='Home' itemprop='item'>         <span itemprop='name'>Home</span></a>              </span> &#187; <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 + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>             <span itemprop='name'><data:label.name/></span></a>                </span>                <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>         </div>

Kode diatas menghasilkan breadcrumb secara keseluruhan, dan kalau nggak ada maka nggak ada yang tampil alasannya ialah itu kodenya masih polos. Belum kita kasih sentuhan dengan tag kondisi yang lain, tapi cuma satu kondisi kita gunakan sebagai penanda label terakhir semoga sanggup memberi tanda » terpisah dengan judul.

Cukup sederhana jikalau kau kesulitan memahaminya saya sarankan mencar ilmu lagi mengenai instruksi HTML, Struktur data schema, dan pastinya tag condiction pada blogger. Tanpa mengenal itu semua sama saja menyerupai kau melihat Huruf alpabet A-Z dalam bentuk kalimat tetapi kau tidak sanggup membacanya. Sekarang saya anggap kau sudah memahaminya, saya tidak akan menjelaskan berulang kali mengenai kode-kode blogger ini. Karena kodenya ada aneka macam daj fungsinya sanggup berbeda-beda apalagi kita rangkai sedemikian rupa niscaya fungsinya akan berbeda lagi. Untuk itu, kau sanggup melihat instruksi breadcrumb yang sudah saya rangkai dibawah ini.

Read:  Tips Menciptakan Halaman Post Safelink Sederhana

Kita menyimpan struktur pembuatan breadcrumb yang kompleks dalam sebuah <b:includable id=’breadcrumb’ var=’posts’>, untuk mengganti breadcrum usang kau silakan temukan instruksi diatas. Lalu kau tandahin hingga ketemu tag epilog </b:includable>. Hati-hati jangan hingga kelebihan ya. Karena tag menyerupai itu ada banyak pada template. Setelah itu hapus dan ganti dengan instruksi 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='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span> 	    </div>       <b:else/>         <b:if cond='data:blog.pageType == &quot;item&quot;'>         <b:loop values='data:posts' var='post'>         <b:if cond='data:post.labels'>         <div class='breadcrumbs' 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' itemprop='item' title='Home'>         <span itemprop='name'>Home</span></a>              </span> &#187; <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 + &quot;?&amp;max-results=8&quot;' expr:title='data:label.name' itemprop='item'>             <span itemprop='name'><data:label.name/></span></a>                </span>                <b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>         </div>           <b:else/>         <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>  	    </b:if>         </b:loop>       <b:else/>         <b:if cond='data:blog.pageType == &quot;archive&quot;'>         <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>  	    </div>        <b:else/>         <b:if cond='data:blog.searchQuery'>         <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><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' rel='nofollow'>Home</a></span> &#187; <span>All post</span>         <b:else/>         <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>          </b:if>         </div>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if>       </b:if> </b:includable>

Kalau dilakukan dengan benar nggak akan terjadi error, dan kalau kau benar-benar memperhatikan struktur instruksi diatas. Kamu akan menerima pelajaran gres dimana kau akan mulai memahami struktur dasar penyusuna instruksi serta tag kondisi yang kita gunakan.

Perlu kau ketahui juga, susunan breadcrumb yang saya buat diatas memakai kelas “breadcrumb” jikalau pada template blogmu ada selectot elemen dengan nama yang sama kemungkinan tampilan breadcrumbnya menjadi berbeda dengan versi polos.

Next Post

How To Fix Failure Of Web Server Bridge

To fix the problem you will need to. No backend server available for connection. Hp 3d Driveguard Protects Hard Drive From Damage After Accidental Drops Hard Drive Driving Damaged This troubleshooting scenario for correcting a source bridge destination connection failure also applies to target bridge destinations. How to fix failure […]
How To Fix Failure Of Web Server Bridge