Memahami Cara Edit Css Pada Template Kompi Flexible Amp

Lagi-lagi saya diharuskan menciptakan postingan yang bersama-sama bukan keahlian saya. Sebenarnya bukan sebuah keharusan bagi saya tetapi memang kebutuhan yang perlu saya lakukan. Bagaimana tidak, kalau saya tidak menciptakan postingan ini maka nantinya saya semakin sulit memakai template AMP ini.



Sama menyerupai halaman sebelumnya, halaman ini juga saya buat sebagai fatwa saya langsung dan halaman praktek saya mempelajari kode-kode CSS juga HTML, syukur Alhamdulillah kalau nantinya postingan ini bermanfaat bagi blogger lainnya. Banyaknya aturan-aturan pada template AMP yang berbeda dengan template non AMP kadang memang menciptakan saya galau tetapi juga menciptakan saya semakin ingin tau dan semakin menciptakan saya ingin bisa.

Salah satu dari sekian banyak hukum AMP yang gres saya ketahui yaitu dihentikan ada tag HTML pada CSS inline dalam postingan. Contoh tag HTML yang tidak diperbolehkan contohnya <div style="text-align: right;">teks</div> untuk menciptakan teks rata kiri, atau <span style="color: red;">teks</span> untuk menciptakan teks berwarna merah. Kemudian untuk mengatasinya maka diharapkan aksesori instruksi CSS pada template yang nantinya dipakai 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 simpel dan memang perlu saya praktekan. Bagi sahabat blogger yang masih dalam tahap berguru menyerupai saya mari kita bahas satu persatu.

Sebelum edit CSS pada template ada hal yang perlu diperhatikan yaitu tag kondisional. Oleh alasannya yaitu itu ada baiknya kita sedikit memahami apa itu tag kondisional. Kurang lebih tag kondisional yaitu tag yang dipakai sebagai pengatur elemen-elemen yang akan ditampilkan atau yang tidak ditampilkan. Sebenarnya saya juga masih sangat galau wacana tag kondisional ini, tetapi di sini saya mencoba mengambil beberapa pola biar lebih simpel dipahami.

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



Halaman Homepage yaitu halaman beranda blog kita; halaman yang berisi daftar postingan kita; halaman muka atau alamat dari blog kita. Contoh: https://aquinosemascachicle.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://aquinosemascachicle.blogspot.com//search?q=template-amp-itu-ternyata-gampang-gampang-susah
Tag Kondisiona Halaman Item

<b:if cond='data:blog.pageType == &quot;item&quot;'>
ELEMEN atau ISI KODE
</b:if>

Halaman Static yaitu halaman yang bangun sendiri, biasanya kita isi dengan about, contact, sitemap, dll. Di dalam dasbor blogger kita sanggup membuatnya pada sajian laman (page). Contoh: https://aquinosemascachicle.blogspot.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 menyerupai saya yang lagi dalam tahap belajar, untuk sekedar memahami dan biar sanggup membedakan saya rasa ini saja sudah cukup. Tentang bahan beserta pola tag kondisional lebih lengkapnya sanggup kunjungi blognya Kang Ismet.

B. Edit CSS pada Template Kompi Flexible AMP

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



Inilah kenapa saya harus mempelajari wacana tag kondisional dulu biar nantinya saya tidak salah saat ingin edit CSS pada template. Dari screnshot di atas sanggup saya pahami bahwa pada template Kompi Flexibel AMP terdapat 6 halaman yang perlu saya perhatikan saat 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 simpel membedakan maka saya ambil screnshot edit HTMLnya sebagai berikut:



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 sanggup membedakan tag kondisional pada masing-masing halaman. Sesuai yang dijelaskan pada kustomisasi template Kompi Flexible AMP bahwa kalau ingin edit CSS maka maka harus edit keduanya dari tiap-tiap halaman. Misalnya kalau ingin edit atau merubah tampilan postingan maka yang harus diedit yaitu 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 menyerupai 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 yaitu menambah instruksi CSS untuk mengatasi eror AMP biar valid AMP pada setiap postingan yang akan saya buat nantinya. Berbeda dengan template non AMP yang mana sudah disediakan menu-menu menyerupai sajian untuk menciptakan teks berwarna, background berwarna, dan menu-menu lain yang sudah disediakan oleh bawaan dasbor blog.

Berikut instruksi 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 instruksi CSS tersebut pada halaman item (postingan) dan halaman static (laman) serta sanggup berfungsi untuk tampilan desktop dan mobile, maka saya harus memasukkan instruksi CSS tersebut pada setiap tag kondisoanal halaman yang sudah saya bedakan di atas.

Dan berikut instruksi HTML yang nantinya saya gunakan saat menciptakan 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 alhasil yaitu 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 sanggup dan saat saya cek ternyata sudah valid AMP. Mungkin ini yaitu hal biasa bagi yang sudah ahli, tetapi bagi saya ini yaitu hal yang sangat luar biasa. Mencoba sesuatu yang belum saya sanggup lalu berhasil menerapkannya merupakan kepuasan yang tiada duanya bagi saya.

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