Memindahkan Breadcrumbs Ke Luar Postingan

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, jikalau kita inspect element halaman maka tidak akan terdapat 2 buah element div namun div sasaran sudah berpindah ke dalam div lainnya.

Jika kita ilustrasikan, maka akan tampak ibarat 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 melaksanakan hal itu, kita sanggup memakai javascript sederhana ibarat di bawah ini.

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

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

Nah untuk mengimplementasikan trik di atas pada breadcrumbs biar sanggup dipasang di luar postingan, maka lakukan ibarat berikut ini.

Biasanya breadcrumbs akan ibarat di bawah ini atau ibarat mirip 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 sasaran yang akan dipindahkan.

Kemudian kita buat kawasan untuk meletakan div yang dipindahkan dengan id yang berbeda ibarat berikut (menggunakan tag conditional biar hanya tampil di halaman postingan), silahkan tempatkan di kawasan 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 instruksi </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 sanggup dipakai untuk memindahkan element postingan lainnya dengan mengganti kedua id-nya, dan sanggup juga dipakai di Wordpress.
Sumber https://www.kompiajaib.com/

Share this post