?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Bacaanku×

iklan
Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttps://kang-onk.blogspot.com/Konsep Blogging Sederhana
Stok Datahttps://stokdata.blogspot.com/Share something beautiful for you
Cipta Desahttp://ciptadesa.comSeputar Informasi Tentang Desa

Cara Meletakkan Kode CSS Kustom Blogazine

Tidak seperti WordPress dengan plugin Art Direction-nya, blogspot tidak memiliki kemampuan untuk menyisipkan sesuatu seperti kode CSS atau JavaScript ke dalam area <head> melalui editor posting karena blogspot tidak dilengkapi dengan fitur khusus untuk menyisipkan kode modifikasi secara sepihak pada posting tunggal.

Admin berbicara mengenai Blogazine, sebuah konsep blog dimana setiap posting memiliki keunikan tampilan sendiri-sendiri. Selama ini para Blogazinist blogspot menggunakan cara yang sederhana untuk menciptakan posting-posting unik, namun cara ini tidak sesuai dengan prosedur dokumen HTML:

Kode CSS di dalam Posting
Kode CSS di dalam Posting

Bukan masalah jika kita meletakkan JavaScript di dalam area <body>, tapi meletakkan CSS di dalam <body> akan menimbulkan resiko ketidakstabilan tampilan pada saat awal halaman termuat. Dan mereka juga tidak valid!

Line 294, Column 23: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.) - W3C Markup Validation Service

Baiklah, validasi memang tidak penting. Tapi jika kita masih bisa menghilangkan kesalahan tersebut, kenapa tidak?


Tag Meta Deskripsi

Belum lama ini Blogger memperkenalkan fitur barunya yaitu preferensi penelusuran. Salah satu fitur paling menarik menurut Admin adalah formulir meta deskripsi yang memungkinkan kita untuk menciptakan deskripsi penelusuran yang berbeda-beda pada setiap posting - Pelajari di sini:

Pada intinya, deskripsi yang kita tuliskan di dalam formulir akan ditampilkan pada bagian data:blog.metaDescription dan menjelma menjadi deskripsi penelusuran yang Admin maksudkan saat posting sudah diterbitkan. Seperti ini:

>

Belum lama ini Blogger memperkenalkan fitur barunya yaitu preferensi penelusuran. Salah satu fitur paling menarik menurut Admin adalah formulir meta deskripsi yang memungkinkan kita untuk menciptakan deskripsi penelusuran yang berbeda-beda pada setiap posting - Pelajari di sini:

<b:if cond='data:blog.metaDescription'>
    <meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>

Pada intinya, deskripsi yang kita tuliskan di dalam formulir akan ditampilkan pada bagian data:blog.metaDescription dan menjelma menjadi deskripsi penelusuran yang Admin maksudkan saat posting sudah diterbitkan. Seperti ini:

<meta content='Deskripsi penelusuran yang Anda tuliskan di dalam formulir...' name='description'/>

Anda bisa menemukan dan mengenali kode-kode XML Blogger seperti yang Admin tuliskan di atas jika Anda sudah mengaktifkan fitur preferensi penelusuran pada bagian Tag Meta dan memodifikasi template yang Anda pakai untuk optimasi mesin penelusuran. Jika Anda tidak menemukannya, Anda harus mulai mempelajari tentang fitur ini dari luar. Artikel ini tidak bermanfaat untuk Anda.

Formulir meta deskripsi inilah yang ingin Admin manfaatkan, karena dia memiliki kemampuan untuk menyimpan data yang berbeda-beda pada setiap posting.
Idenya sebenarnya sederhana, yaitu Admin akan menggunakan data meta deskripsi sebagai konten tag <style> secara tidak langsung:

<b:if cond='data:blog.metaDescription'>
<style id='custom-post' type='text/css'>
    <data:blog.metaDescription/>
</style>
</b:if>

Bisa Anda bayangkan bukan? Dengan cara mengubah status data deskripsi penelusuran menjadi konten dari tag <style> seperti di atas, maka kita bisa menyisipkan kode CSS di dalam formulir deskripsi penelusuran untuk ditampilkan di dalam tag <style> sebagai CSS seperti ini:

Formulir Meta Deskripsi Sebagai Penyimpan Data CSS
Formulir Meta Deskripsi Sebagai Penyimpan Data CSS

Dan hasilnya, kode CSS yang kita masukkan ke dalam formulir meta deskripsi akan tampil di dalam tag <style id='custom-post' type='text/css'> sebagai CSS saat posting telah diterbitkan:

Hasil Tampilan Setelah Posting Diterbitkan
Hasil Keluaran Setelah Posting Diterbitkan

CSS Eksternal

Alternatif lain, Anda juga bisa menggunakan data meta deskripsi sebagai nilai atribut href pada elemen <link> untuk tipe CSS eksternal, dan Anda bisa menggunakan formulir deskripsi penelusuran untuk menyimpan URL file:

URL File CSS Eksternal
Menyimpan URL File CSS Eksternal ke dalam Formulir Meta Deskripsi

Selanjutnya, format kode template bisa Anda ubah menjadi seperti ini:

Selanjutnya, format kode template bisa Anda ubah menjadi seperti ini:

<b:if cond='data:blog.metaDescription'>
    <link expr:href='data:blog.metaDescription' media='screen' rel='stylesheet' type='text/css'/>
</b:if>

Hasil akhirnya bisa Anda tebak:

Tag Link Dinamis
Hasil Keluaran

Dengan cara ini maka Anda tidak perlu lagi meletakkan kode CSS di dalam posting dan membuat isi posting Anda menjadi berantakan. Dan proses perbaikan (maintenance) juga akan menjadi lebih mudah. Misalnya, jika Anda ingin menonaktifkan fitur posting unik pada blog Anda, maka Anda cukup menghapus kode <data:blog.metaDescription/> dari template sehingga data tidak akan terpanggil.
Admin sudah beberapa kali mengetes formulir tag meta yang ada pada editor posting dan dia bisa menampung teks tanpa batas!

Pahami Resiko

Walau bagaimanapun juga, metode ini adalah metode yang tidak standar dan tidak sesuai dengan prosedur perkembangan Blogger, karena kita menggunakan direktori deskripsi penelusuran sebagai direktori CSS. Admin hanya sedang mencoba untuk memecahkan masalah dengan apa yang ada dari Blogger saat ini.
Karena tidak ada rotan, maka Admin gunakan akar.

Ya, itu jika dilihat dari sisi Blogger, tapi jika dilihat dari sisi hasil akhir, maka metode ini bisa dijadikan sebagai jalan keluar untuk mengikuti prosedur dokumen HTML yang benar, yaitu: "Tag <style> harus berada di dalam tag <head>!"

Admin juga tidak bisa menjamin bahwa formulir deskripsi penelusuran akan terus bisa menampung teks tanpa batas. Bukan hal yang tidak mungkin jika suatu saat Blogger memutuskan untuk membatasi jumlah teks deskripsi penelusuran.
Admin sudah mencobanya sampai sejauh ini dan semuanya baik-baik saja. Selanjutnya adalah pilihan Anda, apakah Anda mau mengambil resiko atau tidak, karena Anda berada dalam situasi yang penuh dengan keterbatasan.

Lupakan SEO! - Seperti perkataan para Blogazinist pada umumnya, sayangnya Anda harus sedikit mengabaikan mengenai SEO karena Anda telah menggunakan data:blog.metaDescription untuk hal lain yang sama sekali tidak berhubungan dengan meta deskripsi.
Tapi itu juga bukan berarti bahwa Anda akan kehilangan deskripsi penelusuran Anda. Anda masih bisa menggunakan cara lama, yaitu menuliskan deskripsi tag meta secara manual. Hanya saja nilainya tidak bisa berubah-ubah:

<!-- Manual Meta Description -->
<meta content='Deskripsi penelusuran utama Anda...' name='description'/>
<!-- Hack: Art Direction Plugin for Blogger with Meta Description Data -->
<b:if cond='data:blog.metaDescription'>
<style id='custom-post' type='text/css'>
    <data:blog.metaDescription/>
</style>
</b:if>

Terakhir Diperbaharui

    Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Tutorial pasang link  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!