Memindahkan Breadcrumbs Ke Luar Postingan

Ditulis oleh: Adhy Suryadi

Ditulis pada: 7/10/2015

Sebenarnya trik ini konsepnya sama dengan trik menampilkan gambar postingan di luar postingan yang saya share beberapa waktu yang lalu. Namun bedanya, trik kali ini bukan meng-copy isi sebuah div tapi memindahkan isi sebuah div ke dalam div lainnya.

Dengan begitu, jika kita inspect element halaman maka tidak akan terdapat 2 buah element div namun div target sudah berpindah ke dalam div lainnya.

Jika kita ilustrasikan, maka akan tampak seperti di bawah ini

Sebelum:

<div id="div1">

.......................

isi div

.......................

</div>

<div id="div2"></div>

Sesudah:

<div id="div2">

<div id="div1">

.......................

isi div

.......................

</div>

</div>

Untuk melakukan hal itu, kita bisa menggunakan javascript sederhana seperti di bawah ini.

document.getElementById("div2").appendChild(document.getElementById("div1"));

Silahkan lihat pada screenshot dari jsfiddle dengan inspect element untuk melihat perubahannya dengan menggunakan javascript di atas, silahkan klik di sini.

Nah untuk mengimplementasikan trik di atas pada breadcrumbs agar dapat dipasang di luar postingan, maka lakukan seperti berikut ini.

Biasanya breadcrumbs akan seperti di bawah ini atau mirip seperti di bawah ini

<b:if cond='data:blog.homepageUrl != data:blog.url and data:blog.pageType == &quot;item&quot;'>

<b:loop values='data:posts' var='post'>

<b:if cond='data:post.labels'>

<div class='breadcrumbs' id='breadcrumbs'>

<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'><span itemprop='title'><i class='fa fa-home'/> Home&amp;nbsp;</span></a></span>&amp;nbsp;<i class='fa fa-tags'/>

<b:loop values='data:post.labels' var='label'>

<span itemscope='itemscope' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></a><b:if cond='data:label.isLast != &quot;true&quot;'> <i class='fa fa-angle-right'/> </b:if></span>

</b:loop>

 <i class='fa fa-angle-right'/> <span><data:post.title/></span>

</div>

</b:if>

</b:loop>

</b:if>

id='breadcrumbs' sebagai id target yang akan dipindahkan.

Kemudian kita buat tempat untuk meletakan div yang dipindahkan dengan id yang berbeda seperti berikut (menggunakan tag conditional agar hanya tampil di halaman postingan), silahkan tempatkan di tempat di mana Anda ingin menampilkan breadcrumbs-nya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='bread-crumbs'></div>

</b:if>

Kemudian simpan javascript di bawah ini di atas kode </body>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

document.getElementById("bread-crumbs").appendChild(document.getElementById("breadcrumbs"));

//]]>

</script>

</b:if>

Selesai...silahkan buka salah satu postingan blog Anda, maka breadcrumbs-nya sudah berpindah tempat.

Tentunya javascript di atas bisa digunakan untuk memindahkan element postingan lainnya dengan mengganti kedua id-nya, dan bisa juga digunakan di Wordpress.