Kumpulan tag data template Blogger

Dalam me-redesain Template diperlukan pengenalan kode khususnya tag data dari Blogger agar tidak terlalu bingung dalam mewujudkan desain keinginan kita.

Kode ini tidak sepenuhnya dijelaskan di Bantuan Blogger atau tidak dijelaskan secara rinci jadi di postingan ini saya mencoba memberikan potongan2 kode yang langsung diambil dari dalam Template.

Langsung saja berikut ini beberapa tag kode yang biasa digunakan.

Merubah ukuran url gambar dengan kode isResizable.

Salah satu penyebab beratnya loading blog akibat gambar karena size kb/mb nya terlalu besar. Meskipun width/height kecil tapi kalau kb/mb besar akan tetap terdeteksi sebagai berat.

Kode berikut hanya contoh, diperlukan penyesuaian dengan css agar kode bekerja lebih baik.

<b:if cond='data:post.featuredImage.isResizable'>

<img expr:src='data:post.featuredImage' sizes='256' alt='Gambar'/>

</b:if>

ATAU

<b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'>

<a class='snippet-thumbnail' expr:href='data:post.url'>

<span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>

<style>

@media (max-width: 1168px){

<b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/>

{

background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).cssEscaped'/>);

}

}

</style>

<b:else/>

<img expr:src='data:post.featuredImage' sizes='256' alt='Gambar'/>

</b:if>

</a>

</b:if>

Menampilkan konten hanya dihalaman postingan.

<b:include cond='data:view.isSingleItem'/>

Tidak Menampilkan konten di halaman about.

<b:include cond='data:view.isPost'/>

Dapat digabung dengan Menampilkan konten hanya dihalaman postingan tapi tidak dipostingan halaman about.

<b:include cond='data:view.isSingleItem and data:view.isPost'/>

Kode Dapat juga ditulis sbb:

<b:if cond='data:view.isSingleItem and data:view.isPost'/>

Menampilkan link lompat dari atas postingan ke kolom komentar.
Catatan: Link hanya terlihat jika kolom komentar diaktifkan.

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

<a expr:href='data:post.commentsUrl'>Jump to comments on</a>

<b:else/>

Jump to comments off

</b:if>

Menampilkan total (count) komentar tiap postingan.

<data:post.numberOfComments/>

Dan masih banyak lagi, akan saya tambahkan dibawah ini nanti begitu ada yang di ingat.

Selain itu baca juga di Bantuan Blogger:

Tag Widget: https://support.google.com/blogger/answer/46995

Tag Data Tata Letak:

https://support.google.com/blogger/answer/47270

Fungsi lain dari penggunaan kode CDATA di Blogger

Bagi pengguna Blogger tentu pernah melihat kode berikut dalam Template yang biasanya dibuka dengan atribut <![CDATA[ dan ditutup dengan ]]>

Kalau dalam HTML kemungkinan fungsinya sama dengan atribut ini <!-- dan ditutup dengan ini -->

Jika sebuah susunan kode maupun teks di letakkan diantara pembuka dan penutup tersebut maka kode/teks tidak akan berfungsi atau tidak kelihatan.

Dengan kata lain fungsi dari atribut tersebut untuk menyembunyikan sesuatu agar tidak aktif dan agar tidak kelihatan, saya lupa nama tepatnya apa, fungsingya hampir sama seperti kode comment <comment>Komentar yang ditulis disini tidak akan kelihatan.</comment>

Itu fungsi utama/umumnya tapi bukan itu yang akan kita bahas melainkan fungsi lainnya, yaitu:

Terkadang ada beberapa kode semisal kode javascript yang tidak bisa berjalan/bekerja jika di tambahkan ke dalam Template padahal tidak ada kesalahan atau kodenya bisa bekerja di tempat lain.

Itu terjadi karena Blogger sangat ketat keamanannya, kita tidak bisa memasukkan kode sesuka hati tanpa melalui proses dan atau setiap kode yang ditambahkan biasanya akan berubah dengan sendirinya. Perubahan itu bisa saja menyebabkan kode yang tadinya berfungsi menjadi tidak berfungsi.

Contoh sederhana tanda seperti ini > jika terdeteksi akan otomatis berubah menjadi &gt; atau tanda begini (") berubah menjadi begini (') dan dalam beberapa kasus itu membuat kode/script jadi tidak berjalan.

Nah dengan menambahkan atribut <![CDATA[ dan menempatkan script kode ditengahnya ini ]]> maka setiap kode yang ditambahkan kedalam Template akan tetap original tanpa perubahan.

Namun penambahannya perlu diberi awalan //<![CDATA[ //]]> atau yang begini perlu ditambahi awalan dan akhiran /*<![CDATA[*/ /*]]>*/

Diberi awalan dua buah garis miring atau satu garis miring dikuti satu buah karakter bintang dan ditutup dengan bintang dan satu garis miring.

Contoh:

<script>/*<![CDATA[*/ Tambahkan kode Javascript disini /*]]>*/</script>

Dengan begitu kode yang ditambahkan tetap original tanpa perubahan dan tak repot harus mengubah kode misal menjadi &amp;gt; kalau bisa original mengapa kita harus merubah > menjadi &amp;gt; lebih baik gunakan /*<![CDATA[*/ saja.

Jika langsung seperti ini:

<script>Tambahkan kode Javascript disini </script>

Kemungkinan besar kode ditengahnya akan berubah dengan sendirinya sehingga tidak akan bekerja/berjalan.

Saya tidak mengerti mengapa begitu tapi begitulah adanya. Kalau dipikir-pikir memasang kode seperti ini /*<![CDATA[*/ berarti menonaktifkan kode itu sendiri karena satu garis miring diikuti bintang juga fungsinya sama semacam menonatifkan apapun yang ada ditengahnya tapi kenyataannya menjadi seperti sebaliknya.