Memindahkan Breadcrumbs Ke Luar Postingan

Memindahkan Breadcrumbs Ke Luar Postingan

Bola Hero Gawai

Memindahkan Breadcrumbs Ke Luar Postingan

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, 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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×