Sama sekali tidak ribet begini cara memasang breadcrumb valid HTML ke template terbaru blogger

Essential adalah varian tunggal dari salah satu template terbaru blogger  yang strukturnya identik atau mirip dengan contempo, akan tetapi jika di teliti terdapat beberapa perbedaan pada sedikit pengaturan, pendeklarasian dan markupnya. Kita akan membahasnya pada kesempatan berbeda pada kesempatan memposting artikel yang berbeda.

Kali ini kita hanya membahas cara memasang breadcrumb ke dalam templatenya. Dan jika ia berhasil pada template essentials, maka ia juga berlaku untuk template contempo. Percayalah, kami telah mengujinya. 

template essential

Kita tahu template template default ini di buat berbasis layout versi ke 3 yang sangat baik strukturnya dan di buat seolah untuk di modifikasi oleh penggunanya. 

Aku menyukai tampilan halaman untuk memuat konten yang 'full' tanpa sidebar - karena sidebarnya tersembunyi - seperti umumnya template template website modern masa kini.

Aku tergoda untuk memasang breadcrumb ke template berbasis layout ke 3 karena membaca artikel dari Bung Frenky, aku mencobakan matode tersebut akan tetapi gagal karena beberapa tag seperti yang disebutkan pada konten Bung Frenky tidak aku temukan di dalam template essential, (mungkin pendeklarasiannya di setiap template yang ada memang beda).

Dan lagipula cara yang disampaikan Bung Frenky itu jelas tidak valid lagi karena masih menggunakan standar data.vocalubary yang telah ditinggalkan oleh Google, sekarang sudah zamannya standar schema.org.

Silahkan kunjungi blog beliau: https://www.bungfrangki.com/2018/04/memasang-breadcrumb-pada-blogger-terbaru.html

Bagaimana cara memasang breadcrumb yang benar pada template blogspot Essential, Contempo dan Soho?

Ke 3 varian Template blogger plus Essential ini di desain dengan layout versi ke 3. Tentu saja strukturnya beda dengan template layout versi ke 2. Lalu bagaimana cara memasang breadcrumb HTML ke dalam template template ini? Mudah saja.

Caranya melalui halaman editor HTML blogger. Dengan asumsi Anda telah memahami cara mengedit halaman HTML:
  • Masuk ke pengaturan (dasbor) blogger blogspot
  • Pilih Tema
  • Lalu pilih Edit HTML

1. Di dalam halaman editor HTML blogger template essential cari kode </head> dan letakan kode berikut di atasnya:
<style>.Blog .breadcrumbs{font-size:13px;color:$(posts.icons.color);margin-bottom:10px;margin-top:-60px;} .Blog .breadcrumbs a{color:$(posts.icons.color)} .Blog .breadcrumbs a:hover{color:red;} .Blog .info,.Blog .breadcrumbs{font-size:13px} .Blog .breadcrumbs{font-size:10px;margin-bottom:10px} .breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;font-size:80%;color:#777;font-weight:500;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap} .breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#555;font-weight:500} .breadcrumbs a:hover{color:red} .breadcrumbs svg{width:16px;height:16px;vertical-align:-4px} .breadcrumbs svg path{fill:#777} </style>
2. Masih di dalam halaman editor HTML blogger template essential cari kode:
<data:post.body/> Lalu letakan kode berikut tepat di atasnya:
<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'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' itemprop='item' title='Home'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>

<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
Save template. Dan Selesai!

Akan tetapi pemasangan di atas kode tag <data:post.body/> bisa menghasilkan hasil salah prespektif jika misalnya Anda menghilangkan tampilan tanggal dan share bawaan template di bagian bawah judul postingan. Untuk menghindarkan hal itu Anda bisa mengambil opsi dengan memasang kode breadcrumb di atas di bagian bawah kode:
<b:include name='noContentPlaceholder'/>
Atau bisa juga di bagian bawah kode:

<b:includable id='post' var='post'> 

Pokoknya ia bekerja jika di letakan pada bagian bagian kode kode berikut:
  1. Di bawah kode <b:include name='noContentPlaceholder'/>
  2. Di bawah kode <b:includable id='post' var='post'> 
  3. Di atas kode <data:post.body/>
Hasil pengujian:

breadcrumb valid HTML

Uniknya cara ini tidak memerlukan kode pemanggil dengan cara menyisipkan kode berikut ke dalam template: 

<b:include data='post' name='breadcrumb'/>

Tidak perlu. Dan ternyata mudah sekali memasang breadcrumb pada salah satu template dengan desain layout versi ke 3. 

Oh ya, untuk breadcrumb Aku sering mengunjungi situs milik para developer Google berikut, Anda juga bisa mendapatkan model model breadcrumb dari:
Google Search uses breadcrumb markup in the body of a web page to categorize the information from the page in search results. Often, as illustrated in following use cases, users can arrive at a page from very different  ...
Sameton nympangin laman puniki ring 2/23/21.
Anda tinggal memodifikasinya sesuai dengan kebutuhan blogging. Dan Lihat hasilnya:

Kesimpulan cara ini bekerja dengan baik pada template template terbaru:
  1. Essentials
  2. Soho
  3. Contempo
Dan hanya bekerja setelah templatenya dimodifikasi pada template template:
  1. Emporio
  2. Notable
Yakni jika variabel framework.skin-nya telah di modifikasi.

Catatan!!! 

Kode CSS ini berlaku untuk template essentials dan Contempo karena mereka ini identik. Jika ingin menerapkannya pada template SOHO, ganti setiap deklarasi kode $(posts.icons.color) dengan kode warna biasa karena sintaksis pengaturannya beda. Misal ganti saja dengan tulisan 'red' dan 'blue' contohnya:
.Blog .breadcrumbs{font-size:11px;color:blue;margin-bottom:15px;margin-top:0px;}
.Blog .breadcrumbs a{color:red}
.Blog .breadcrumbs a:hover{color:$(body.text.color)}
.Blog .info,.Blog .breadcrumbs{font-size:11px}
.Blog .breadcrumbs{font-size:10px;margin-bottom:10px}
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;font-size:80%;color:#FFCCFF;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#FFCCFF;font-weight:400}
.breadcrumbs a:hover{color:#FFCCFF}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#FFCCFF}

Ikuti trik dan seni blogging kami, kami membagikan segalanya dengan ikhlas!

Komentar


  1. Kalau pakai model tersembunyi bagus gak del, aku pakai yg tersembunyi ambil dari kode yg dishare di blog ini juga, dari hasil tes di search konsol atau hasil kaya kayaknya diterima alias diperbolehkan.

    BalasHapus
    Balasan
    1. Justeru kode terswmbunyi itu yang dianjurkan oleh Google sebuah skema yang benar dan kode itu asli dari pengembang saat pertama skema vocalubary di tendang dari standar

      Hapus
  2. Wuih jadi cakep tampilannya setelah tadi kuintip contoh demo-nya ....
    Jadi pengin gunain cara ini juga.

    BalasHapus

Posting Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

Label

adwords aibo ajax alexa algoritma alternative Am I Responsive amazon ambigu Amerika AMP Andorid Android Android 10 Angular animasi antivirus aplikasi apple ARM Art Of War artikel sabtu asesories audio autodidact avatar avatar penulis awesome awsome back to top backdoor backlink bahasa Bandar Lampung bank btn batam beautiful bedak beginning belajar belajar koding berita bing web master biografi blackberryOS blackhat blank space blockquote blog blogcomments blogger bloggerhelp blogging Blogging mobile bloging blogspeed blogspot bluetooth bootstrap border dash breadcrumb browser btn mobile bugs Buku business capital letter cara catatan catatan awal tahun Cek IMEI cerai Cerita cerpen cewek chimpense chipset chrome chrome 76 Cina cinta clickjacking codeigniter codepen coding compose compose view condenser mic contact form contempo contempo base contempo blackmagic contempo hibrida contempo hybrid converter coolest copy-paste copyright covid 19 covid_19 cowok CPC credit footer css CTR cuitan curhat cybercrime Dahlan Iskan dark mode dasbor data default Demo desain diblokir dirtylink disway DOM domain domain authority Donald Trump download download template terbaru dropdown duplikat e-commerce earn money edisi minggu edit editblogtema editor HTML ekonomi elektronik embed emoji emporio emporio hybrid english error essential expires header expires headers facebook fakta fanpage fast loading template fastloading template favicon featured posts feed burner firefox fitur fixed fixed sidebar flipaclip font font awsome footer footer link Footer navigasi forbes framework Free friendship fuchsia full stacks furure g-suite gadget gagdet galeri gambar gambar bergoncang gambar profile penulis gambar responsive game generasi Alpha Generasi Z geng motor genius gerhana girl gmail Gmetrix gojek good news google google chrome Google Domain google drive google font Google honemoon google Plus google search console google webmaster Googlewebmaster gradasi warna grafik gramedia gratis grid style GTmetrix h1 Habibie hack hacker halaman web hamburger menu hanya opini hapus hari bumi harimau heading headings heart secret hewan hoax hobi hometown hotpink HTM5 html HTML view huawei hukum human Idulfitri Iklan ikon Imlek in memories index indie Indonesia Indonesia darurat corona indosat infinite color infinity war informasi instagram instan article intel inteligensia internal link internasional internet internt interntet interntt intert iOS iPad iPadOS iPhone isu IT italia Jaime Ocabo java JavaScript jimdo jin Ping jingling Jokowi jQuery JSitor kaca pembesar kafe kalimantan kalkulus kamera kanonis kartun keamanan keamanan blogger kebijkan kebun raya kecantikan kecepatan blog mobile kehidupan kemanusiaan kesehatan keyakinan keyboard keyword khusus kiata G+ kinemaster klasik klik kode warna koding komentar komentar blog komputer konsipirasi konten konversi kopi korsel korut kota kota kelahiran kotak navigasi menu blog kotak pencarian kotlin kriminalitas kualitas kucing label lapangan kerja laptop lay out lay out version 3 theme layarlipat layout lazyload lelaki liburan life-style lifehack lingkungan logitech logo love Macbook Macbook Air machine learning MacOS magnifier maintenance makeover makmur manusia margasatwa masa depan masonry matahari matematika medsos mega menu mengganti tempa menu menu navigasi menu pencarian menulis merombak metafisika microfon Microsoft microsoft edge Minggu minify misteri mitos mobile modal modern modifikasi monetisi morality motivasi motivation mouse moz multimedia musik myths narasi nasehat terbaik navbar navigasi navigasi menu blog ngeblog nibbler notable office olahraga Omnibus online online editor operating sistem opini otodidak pagelist pagerank paginator Pandora panduan panduan mobile paradox parameter parasit parse pekerjaan pembatasan pemilu 2019 Pemilu Indonesia 17 April 2019 pemrograman pemula pendidikan pengalaman pengaturan pengornbanan pengusaha Penulis perang perang dagang Cina vs Amerika perang dunia ketiga perangdagang perceraian perihal perkawinan permalink perubahan pexel phablet PHP plagiat plagiator PlagScan play store podcast polemik politik ponsel popularitas popularposts portable powered by blogger Powerpoint prediksi premium privasi produk profesi profile programmer programming programming. prosesor pseudo-sains psikologi Python rahasia ramalan ranking faktor rawgit re-desain re-desain tema blogger React Reactions read more recentPosts redesain rekomendasi related posts remaja resolusi responsinator responsive review robot robot.txt s-pen sains samsung sanggahan saran temaplate blogger saran template search secrets security sederhana sejarah seken selegram semrush SEO sepatu sepi share button sharing buttons I.O sidebar sidenav siginifikan silikon simple simpson singapore singularity sitelink sitemap smartphone snippet soho solusi somadmorroco spesial spoiler star wars statistik sticky sidebar sticky widget Strategi SEO streaming Student study study online style submenu subscriber success sudut cerita SVG SVG icon syimbian tab s2 tab s7 tabel tablet tabs2 tabs7plus tagging takdir takhyul talenta tataletak Teen teka teki teknik teknologi TELKOMSEL tema tema kesederhanaan tempat wisata template template premium template premium gratis template SOHO template versi ke-2 terbang terkemuka tes popularitas testimoni testmysite text theme Thucydides tiktok tip tips toggle tokoh tombol berbagi tombol pengalihan tombol reply komentar tops traffik trafic trafik translator travelling tribun tricks Trik triks troubleshooting Tutorial Tutorial Anissa tutorial css tutorialKhusus twitter uang UAS unduh unik update urang utan ustazd Abdul Somad vanilla Script video viomagz viral virus corona vlogging vue w3-css w3school W3Shool wabah warna web web story WebAssembly webdesign WEBP website whatsapp widget wifi ID windows Windows Mobile wisata WIX wordpress wps X-Frame xiomi xml yandex youtber youtube youtuber z-index
Tampilkan selengkapnya

Postingan Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

EKSPRIMEN DAN KREASI MANUSIA YANG MENYIMPANG DARI AKIDAH DAN KEYAKINAN