Rabu, 30 November 2016

Memahami Cara Edit CSS pada Template Kompi Flexible AMP

Tags

Lagi-lagi saya diharuskan membuat postingan yang sebenarnya bukan keahlian saya. Sebenarnya bukan sebuah keharusan bagi saya tetapi memang kebutuhan yang perlu saya lakukan. Bagaimana tidak, jika saya tidak membuat postingan ini maka nantinya saya semakin sulit menggunakan template AMP ini.

Edit CSS Template AMP

Sama seperti halaman sebelumnya, halaman ini juga saya buat sebagai pedoman saya pribadi dan halaman praktek saya mempelajari kode-kode CSS juga HTML, syukur Alhamdulillah jika nantinya postingan ini bermanfaat bagi blogger lainnya. Banyaknya aturan-aturan pada template AMP yang berbeda dengan template non AMP kadang memang membuat saya bingung tetapi juga membuat saya semakin penasaran dan semakin membuat saya ingin bisa.

Salah satu dari sekian banyak aturan AMP yang baru saya ketahui adalah tidak boleh ada tag HTML pada CSS inline dalam postingan. Contoh tag HTML yang tidak diperbolehkan misalnya <div style="text-align: right;">teks</div> untuk membuat teks rata kiri, atau <span style="color: red;">teks</span> untuk membuat teks berwarna merah. Kemudian untuk mengatasinya maka diperlukan tambahan kode CSS pada template yang nantinya digunakan di dalam postingan.

A. Memahami Tag Kondisional pada Blogspot Sebelum Edit CSS

Sebelumnya saya mohon maaf, bukan maksud menggurui atau mengajari. Terlebih kepada para blogger yang sudah ahli, mungkin cara yang saya bagikan ini sangat sepele bagi anda. Tetapi bagi saya ini bukanlah hal yang mudah dan memang perlu saya praktekan. Bagi sahabat blogger yang masih dalam tahap belajar seperti saya mari kita bahas satu persatu.

Sebelum edit CSS pada template ada hal yang perlu diperhatikan yaitu tag kondisional. Oleh sebab itu ada baiknya kita sedikit memahami apa itu tag kondisional. Kurang lebih tag kondisional adalah tag yang digunakan sebagai pengatur elemen-elemen yang akan ditampilkan atau yang tidak ditampilkan. Sebenarnya saya juga masih sangat bingung tentang tag kondisional ini, tetapi di sini saya mencoba mengambil beberapa contoh supaya lebih mudah dipahami.

Supaya lebih mudah membedakan tag kondisional pada blog kita, saya buat gambar berikut:

Tag Kondisional Blogspot

Halaman Homepage yaitu halaman beranda blog kita; halaman yang berisi daftar postingan kita; halaman muka atau alamat dari blog kita. Contoh: http://www.risalahku.com/
Tag Kondisional Halaman Homepage

<b:if cond='data:blog.url == data:blog.homepageUrl'>
ELEMEN atau ISI KODE
</b:if>

Halaman Item yaitu halaman postingan kita; halaman yang berisi isi artikel yang kita tulis. Contoh: http://www.risalahku.com/2016/11/template-amp-itu-ternyata-gampang-gampang-susah.html
Tag Kondisiona Halaman Item
<b:if cond='data:blog.pageType == &quot;item&quot;'>
ELEMEN atau ISI KODE
</b:if>

Halaman Static yaitu halaman yang berdiri sendiri, biasanya kita isi dengan about, contact, sitemap, dll. Di dalam dasbor blogger kita bisa membuatnya pada menu laman (page). Contoh: http://www.risalahku.com/p/about.html
Tag Kondidional Halaman Static
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
ELEMEN atau ISI KODE
</b:if>

Sebenarnya masih ada lebih banyak lagi tag kondisional pada blog kita. Tetapi sebagai blogger pemula seperti saya yang lagi dalam tahap belajar, untuk sekedar memahami dan supaya bisa membedakan saya rasa ini saja sudah cukup. Tentang materi beserta contoh tag kondisional lebih lengkapnya bisa kunjungi blognya Kang Ismet.

B. Edit CSS pada Template Kompi Flexible AMP

Ada beberapa aturan juga ketika ingin edit CSS pada template AMP supaya tidak eror (valid AMP) yang cukup merepotkan juga bagi blogger pemula. Beruntungnya saya ketika membeli template Kompi Flexibel AMP ini sudah dilengkapi dengan kustomisasi templatenya. Jadi saya cukup mempelajarinya dan segera mempraktekannya.

Edit CSS

Inilah kenapa saya harus mempelajari tentang tag kondisional dulu supaya nantinya saya tidak salah ketika ingin edit CSS pada template. Dari screnshot di atas dapat saya pahami bahwa pada template Kompi Flexibel AMP terdapat 6 halaman yang perlu saya perhatikan ketika ingin edit CSS atau merubah tampilan template. 6 halaman tersebut antara lain: 1 halaman homepage (beranda) untuk tampilan desktop, 1 halaman homepage (beranda) untuk tampilan mobile, 1 halaman item (postingan) untuk tampilan desktop, 1 halaman item (postingan) untuk tampilan mobile, 1 halaman static (laman) untuk tampilan desktop, 1 halaman static (laman) untuk tampilan mobile.

Supaya lebih mudah membedakan maka saya ambil screnshot edit HTMLnya sebagai berikut:

Edit CSS

1. Tag kondisional halaman homepage untuk tampilan desktop.
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> ELEMEN/ISI KODE </b:if>
2. Tag kondisional halaman homepage untuk tampilan mobile.
<b:if cond='data:blog.pageType != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'> ELEMEN/ISI KODE </b:if>
3. Tag kondisional halaman item untuk tampilan desktop.
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;'> ELEMEN/ISI KODE </b:if>
4. Tag kondisional halaman item untuk tampilan mobile.
<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'> ELEMEN/ISI KODE </b:if>
5. Tag kondisional halaman static untuk tampilan desktop.
<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;false&quot;'> ELEMEN/ISI KODE </b:if>
6. Tag kondisional halaman static untuk tampilan mobile.
<b:if cond='data:blog.pageType == &quot;static_page&quot; and data:blog.isMobileRequest == &quot;true&quot;'> ELEMEN/ISI KODE </b:if>

Nah dengan ini maka saya sudah bisa membedakan tag kondisional pada masing-masing halaman. Sesuai yang dijelaskan pada kustomisasi template Kompi Flexible AMP bahwa jika ingin edit CSS maka maka harus edit keduanya dari tiap-tiap halaman. Misalnya jika ingin edit atau merubah tampilan postingan maka yang harus diedit adalah halaman postingan untuk desktop dan halaman postingan untuk mobile begitu seterusnya. Jika hanya mengedit pada halaman postingan untuk tampilan desktop saja maka halaman untuk tampilan mobile sama saja seperti belum diedit (hasil edit tidak berfungsi pada halaman postingan untuk mobile).

C. Praktek Edit CSS pada Template Kompi Flexible AMP

Di sini saya praktek edit CSS pada template Kompi Flexible AMP, untuk selain template ini saya rasa caranya hampir sama. Yang saya praktekan adalah menambah kode CSS untuk mengatasi eror AMP supaya valid AMP pada setiap postingan yang akan saya buat nantinya. Berbeda dengan template non AMP yang mana sudah disediakan menu-menu seperti menu untuk membuat teks berwarna, background berwarna, dan menu-menu lain yang sudah disediakan oleh bawaan dasbor blog.

Berikut kode CSS yang saya tambahkan pada template Kompi Flexible AMP:
.center {text-align: center}
.right {text-align: right}
.justify {text-align: justify}
.teksmerah {color: red}
.tekshijau {color: lime}
.teksbiru {color: blue}
.tekskuning {color: yellow}
.bgmerah {background-color: red}
.bghijau {background-color: lime}
.bgbiru {background-color: blue}
.bgkuning {background-color: yellow}
.tekskecil {font-size: x-small}
.teksbesar {font-size: x-large}

Karena saya ingin menampilkan atau memfungsikan kode CSS tersebut pada halaman item (postingan) dan halaman static (laman) serta bisa berfungsi untuk tampilan desktop dan mobile, maka saya harus memasukkan kode CSS tersebut pada setiap tag kondisoanal halaman yang sudah saya bedakan di atas.

Dan berikut kode HTML yang nantinya saya gunakan ketika membuat postingan
<div class="center"> teks tengah </div>
<div class="right"> teks rata kiri </div>
<div class="justify"> teks rata kanan-kiri </div>
<span class="teksmerah"> teks berwarna merah </span>
<span class="tekshijau"> teks berwarna hijau </span>
<span class="teksbiru"> teks berwarna biru </span>
<span class="tekskuning"> teks berwarna kuning </span>
<span class="bgmerah"> teks background merah </span>
<span class="bghijau"> teks background hijau </span>
<span class="bgbiru"> teks background biru </span>
<span class="bgkuning"> teks background kuning </span>
<span class="tekskecil"> teks ukuran kecil </span>
<span class="teksbesar"> teks ukuran besar </span>

Kemudian hasilnya adalah sebagai berikut:

teks berwarna merah - teks berwarna hijau - teks berwarna biru - teks berwarna kuning
teks background merah teks background hijau teks background biru teks background kuning teks ukuran kecil - teks ukuran besar

Alhamdulillah saya bisa dan ketika saya cek ternyata sudah valid AMP. Mungkin ini adalah hal biasa bagi yang sudah ahli, tetapi bagi saya ini adalah hal yang sangat luar biasa. Mencoba sesuatu yang belum saya bisa kemudian berhasil menerapkannya merupakan kepuasan yang tiada duanya bagi saya.

Baja Juga:
Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP

hal yang membuat tersenyum adalah kebahagian orang lain oleh diriku

Pilih Sistem Komentar yang Anda Sukai
Disqus
Blogger

7 komentar

Siip infonya.. terima kasih..

Sama-sama, :)
dulu saya memang pake template AMP, tetapi sekarang tidak lagi.. hehe

makasih banget ya jeng,..infonya akurat banget.
sekarang lagi beres2 nih,..biar valid,..lid...lid
salam cantik

Sangat detail ,bermanfaat sekali bagi newbie seperti saya

salam juga mbak ratna dewi yang cantik, semoga valid amp, hehe

terima kasih, senang bisa membantu, hehe

Makasih mbak infonya. Sebelumnya aku udah punya blog, cuman non AMP. Dan skrng aku baru buat blog lagi. Rencananya blog itu mau dibuat valid AMP. Jadi infonya bermanfaat banget buat aku yang masih belajar soal AMP. ��

Silahkan Tinggalkan Komentar Anda