Banyaknya aturan-aturan pada template AMP yang berbeda dengan template non AMP kadang memang membuat saya bingung terkadang juga hamper putus asa, tetapi juga membuat saya semakin penasaran dan ingin mempe;ajari lebih dalam lagi tentang blog AMP. 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.
1. Memahami Tag Kondisional pada Blogspot Sebelum Edit CSSSebelum 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.
Halaman Homepage yaitu halaman beranda blog kita; halaman yang berisi daftar postingan kita; halaman muka atau alamat dari blog kita. Contoh: http://siijombi.blogspot.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: https://siijombi.blogspot.co.id/2017/03/free-tamplate-amp-kompi-design-blogger.html
Tag Kondisiona Halaman Item
<b:if cond='data:blog.pageType == "item"'>
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: https://siijombi.blogspot.co.id /p/contact.html
Tag Kondidional Halaman Static
<b:if cond='data:blog.pageType == "static_page"'>
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 Design AMPAda 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 Design AMP ini sudah dilengkapi dengan kustomisasi templatenya. Jadi saya cukup mempelajarinya dan segera mempraktekannya.
Dari gambar di atas dapat saya pahami bahwa pada template Kompi Design 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.
1. Tag kondisional halaman homepage untuk tampilan desktop<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.isMobileRequest == "false"'> ELEMEN/ISI KODE </b:if><b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.isMobileRequest == "true"'> ELEMEN/ISI KODE </b:if><b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "false"'> ELEMEN/ISI KODE </b:if><b:if cond='data:blog.pageType == "item" and data:blog.isMobileRequest == "true"'> ELEMEN/ISI KODE </b:if><b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "false"'> ELEMEN/ISI KODE </b:if><b:if cond='data:blog.pageType == "static_page" and data:blog.isMobileRequest == "true"'> ELEMEN/ISI KODE </b:if>Baca juga : Tutorial Cara Penulisan Image Pada Blogger AMP HTML
Dengan ini maka saya sudah bisa membedakan tag kondisional pada masing-masing halaman. Sesuai yang dijelaskan pada kustomisasi template Kompi Design 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 Design AMPDi sini saya praktek edit CSS pada template Kompi Design 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 Design 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 seperti di bawah ini :
Sumber : Risalahku.com
Tambahkan Komentar Tutup Komentar