Membuat Postingan Agar Valid Amp Dari Template Kompi Flexible Amp
Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP - Menggunakan template AMP tentu bukan hal yang gampang terutama bagi blogger pemula menyerupai saya. Banyak hukum yang perlu diperhatikan supaya blog dengan template AMP benar-benar valid AMP. Mengingat AMP belum usang diluncurkan mungkin masih banyak yang merasa asing dengan hukum AMP.
Saya rasa setiap blogger yang menggunakan template AMP niscaya mengalami kesulitan dengan hukum yang ada. Berbeda dengan template selain AMP yang umumnya sudah dipakai blogger selama bertahun-tahun. Mungkin lantaran telah berkembang usang sehingga penggunaannya lebih mudah.
Halaman ini saya buat untuk mempermudah saya menciptakan postingan dan sebagai arsip saya mempelajari template AMP. Kustomisasi ini saya sanggup dari Kompi Ajaib dikala saya membelinya.
Membuat postingan atau menulis artikel yaitu acara yang paling sering dilakukan oleh bogger dalam berbagi blognya, apa lagi kalau tidak menciptakan postingan. Tetapi untuk menciptakan posting supaya valid AMP saya rasa memang cukup merepotkan terlebih dikala menyisipkan gambar dan video. Oleh lantaran itu halaman ini saya buat dan biar sanggup membantu blogger lain yang masih pemula menyerupai saya. Awalnya mungkin memang sulit tetapi bila sudah terbiasa niscaya jadi mudah.
Perlu diingat bahwa di dalam postingan dilarang ada tag HTML dengan CSS inline menyerupai <div style="text-align: justify;"></div> ataupun lainnya. Untuk mengatasinya kita sanggup menambah isyarat CSS pada template sebagai berikut .center {text-align: justify;} kemudian mengganti <div style="text-align: justify;"></div> menjadi <div class="justify"></div>. Meskipun saya masih belum sanggup tetapi saya rasa ini diharapkan sebagai catatan saya.
Update! Jika teman-teman masih gundah dikala ingin menambah atau merubah beberapa tampilan blog AMP, mungkin dengan membaca postingan saya di bawah ini sanggup membantu teman-teman. Postingan ini saya tulis menurut pengalaman saya dikala edit CSS pada template AMP ini, jadi Insya Allah gampang dipahami.Untuk panduanya sanggup ikuti tautan berikut →Memahami Cara Edit CSS pada Template Kompi Flexible AMP
Yaitu gambar yang muncul di atas postingan bukan di dalam postingan. Yang perlu diperhatikan dikala menyisipkan gambar yaitu pilih “original size” kemudian hapus “link” gambar dan jangan lupa memberi “alt” dan “title” gambar.
Gambar yang dimasukkan secara deafult dikala dilihat pada HTML terlihat menyerupai ini:
Ganti menjadi:
Yaitu gambar yang muncul di dalam postingan atau artikel. Yang perlu diperhatikan sama menyerupai dikala memasukkan gambar pada poin 1.2 di atas. Tetapi ganti menjadi menyerupai di bawah ini:
Dan tambahkan isyarat di dibawah ini pada postingan paling atas supaya dikala gambar di klik sanggup full screen. Jika tidak ingin menambahkan isyarat di bawah ini maka isyarat tabindex=”0” pada <amp-image di atas harus dihapus.
Sehingga menjadi menyerupai ini:
Untuk pengaturan tata letak gambar di dalam postingan; bagaimana cara meletakkan gambar dengan posisi gambar berada disisi kiri, kanan, atau tengah supaya responsive dan valid AMP lebih lengkapnya sanggup kunjungi blog Kompi Ajaib.
https://mughir.blogspot.com//search?q=memahami-cara-edit-css-pada-template-kompi-flexible-amp.html
4. Menyisipkan slider gambar
Dengan slider gambar kita sanggup memasukkan beberapa gambar pada satu daerah saja sehingga tidak menghabiskan banyak ruang di dalam postingan. Slider gambar sangat cocok dipakai sebagai album gambar. Caranya yaitu dengan menggunakan isyarat berikut:
Banyak sekali manfaat video di dalam postingan terlebih pada blog yang berkonten tutorial. Bahkan saya pernah membaca bahwa konten yang menarik yaitu konten yang tidak cukup hanya degan goresan pena artikel saja, tetapi harus memuat gambar, audio, dan video. Dengan konten yang menarik (lengkap) tentunya niscaya memberi manfaat yang lebih bagi pembaca, disukai pengunjung, dan dikala mendaftar adsense mempunyai kesempatan besar untuk diterima (katanya sih,, soalnya saya belum mencoba lantaran blog ini masih terlalu dini dan miskin konten, hehe..).
Berikut isyarat untuk menyisipkan video di dalam posting supaya valid AMP
Karena saya masih belum punya video sama sekali maka saya izin menambahkan videonya bapak Adhy Suryadi di dalam postingan ini. Soalnya mau menggunakan videonya kakak saya dianya pelit sekali.
Hasilnya menyerupai berikut:
Saya akan update videonya bila saya sudah mempunyai video sendiri. :D
Meskipun terasa sulit tetapi saya tidak harus berganti template. Toh lama-lama niscaya terbiasa dan alhasil akan terasa mudah. Kenapa harus menggunakan template AMP bila penggunaannya merepotkan, kan masih ada template yang lebih mudah? Itu sih terserah penggunanya masing-masing. Ada yang suka template dengan desain tampilan yang megah, tetapi ada juga yang suka template dengan desain tampilan sederhana. Yang niscaya diantara keduanya (sulit-mudah atau megah-sederhana) niscaya mempunyai kekurangan dan kelebihan masing-masing.
Setelah mengingat, menimbang, dan memperhatikan kekurangan-kelebihan tersebut alhasil saya tetapkan untuk tetap menggunakan template AMP. Alasan saya ada pada postingan sebelumnya dan salah satunya yaitu lantaran saya ingin mengikuti perkembangan teknologi. Saya yakin AMP niscaya akan terus berkembang dan penggunanya pun akan semakin banyak, serta tidak menutup kemungkinan AMP akan lebih dipermudah oleh perancangnya.
Di mana saya sanggup mendapat template blogger AMP yang keren?
Di themeforest.net berbagai tetapi saya rasa harganya cukup mahal :D
Di mana saya sanggup mendapat template blogger AMP yang murah?
Insya Allah di kompiajaib. com lebih murah dan full service :)
Saya sudah mempunyai banyak postingan, tentunya lebih susah bagi saya mengedit semua postingan saya supaya valid AMP!
Ada cara lebih gampang yang dibagikan oleh kompiajaib.com (https://mughir.blogspot.com//search?q=memahami-cara-edit-css-pada-template-kompi-flexible-amp)
Malahan dia rela mengedit 800 postingan demi AMP :)
Saya rasa setiap blogger yang menggunakan template AMP niscaya mengalami kesulitan dengan hukum yang ada. Berbeda dengan template selain AMP yang umumnya sudah dipakai blogger selama bertahun-tahun. Mungkin lantaran telah berkembang usang sehingga penggunaannya lebih mudah.
Halaman ini saya buat untuk mempermudah saya menciptakan postingan dan sebagai arsip saya mempelajari template AMP. Kustomisasi ini saya sanggup dari Kompi Ajaib dikala saya membelinya.
Lalu Bagaimana Caranya Supaya Postingan Blog Valid AMP Dari Template Kompi Flexible AMP ??
Membuat postingan atau menulis artikel yaitu acara yang paling sering dilakukan oleh bogger dalam berbagi blognya, apa lagi kalau tidak menciptakan postingan. Tetapi untuk menciptakan posting supaya valid AMP saya rasa memang cukup merepotkan terlebih dikala menyisipkan gambar dan video. Oleh lantaran itu halaman ini saya buat dan biar sanggup membantu blogger lain yang masih pemula menyerupai saya. Awalnya mungkin memang sulit tetapi bila sudah terbiasa niscaya jadi mudah.
1. Tidak boleh ada style di dalam postingan
Perlu diingat bahwa di dalam postingan dilarang ada tag HTML dengan CSS inline menyerupai <div style="text-align: justify;"></div> ataupun lainnya. Untuk mengatasinya kita sanggup menambah isyarat CSS pada template sebagai berikut .center {text-align: justify;} kemudian mengganti <div style="text-align: justify;"></div> menjadi <div class="justify"></div>. Meskipun saya masih belum sanggup tetapi saya rasa ini diharapkan sebagai catatan saya.
Update! Jika teman-teman masih gundah dikala ingin menambah atau merubah beberapa tampilan blog AMP, mungkin dengan membaca postingan saya di bawah ini sanggup membantu teman-teman. Postingan ini saya tulis menurut pengalaman saya dikala edit CSS pada template AMP ini, jadi Insya Allah gampang dipahami.Untuk panduanya sanggup ikuti tautan berikut →Memahami Cara Edit CSS pada Template Kompi Flexible AMP
2. Menyisipkan gambar di luar postingan
Yaitu gambar yang muncul di atas postingan bukan di dalam postingan. Yang perlu diperhatikan dikala menyisipkan gambar yaitu pilih “original size” kemudian hapus “link” gambar dan jangan lupa memberi “alt” dan “title” gambar.
Gambar yang dimasukkan secara deafult dikala dilihat pada HTML terlihat menyerupai ini:
<div class="separator" style="clear: both; text-align: center;">
<img alt="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHdmeP6eD1JYWYdaXQMe86iW5EKq0BR0s40o4Q6phuCkcZC-j78eVj4WatlQzwT5dd1b3-0tb90jmk-tY48Wuqw5LBZURiNAzzuTbd9njPUA4Kxg3Eca3FTsB6qVfboMBnAcDBwDgGT9s/s1600/valid-amp.jpg" title="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP" /></div>
Ganti menjadi:
<noscript>
<img alt="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP" width="650" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHdmeP6eD1JYWYdaXQMe86iW5EKq0BR0s40o4Q6phuCkcZC-j78eVj4WatlQzwT5dd1b3-0tb90jmk-tY48Wuqw5LBZURiNAzzuTbd9njPUA4Kxg3Eca3FTsB6qVfboMBnAcDBwDgGT9s/s1600/valid-amp.jpg" title="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP" />
</noscript>
3. Menyisipkan gambar di dalam postingan
Yaitu gambar yang muncul di dalam postingan atau artikel. Yang perlu diperhatikan sama menyerupai dikala memasukkan gambar pada poin 1.2 di atas. Tetapi ganti menjadi menyerupai di bawah ini:
<amp-img
alt="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
title="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDBxnXlYsw5ojF8t-Z15dpnT87SDljSihfc4Q7osItDs4M9OhV6knuSKY5ak-P5k9lzaq9TuYeiE-SXbo0KK7m6MemDpi-76W-eI2GbNAkkVUF7xy8DCBuAUhSFrDVXOLkcRPbwVpU7Ux/s1600/Chris-Gardner2.jpg"
tabindex="0">
</amp-img>
Dan tambahkan isyarat di dibawah ini pada postingan paling atas supaya dikala gambar di klik sanggup full screen. Jika tidak ingin menambahkan isyarat di bawah ini maka isyarat tabindex=”0” pada <amp-image di atas harus dihapus.
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>
Sehingga menjadi menyerupai ini:
<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>Catatan; ukuran gambar harus diadaptasi dengan lebar dan tinggi gambar asli
<noscript>
<img alt="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
title="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
width="650"
height="350"
src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSV23RaUo4vw-wSKcQI876Y5_svakEL-nTVrGJQMlXcfpvqSQTDMJP6EZj9QjiQ3dqlT3mDeVwTAq1w3KuifzOlj-vlKc9Pc7eAS652avqg2ufG7bOJWiMKWL-lUCZlJrhisq5fNfrAFwv/s1600/manajemen.jpg "/>
</noscript>
TULISAN ARTIKEL
<amp-img
alt="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
title="Membuat Postingan Supaya Valid AMP dari Template Kompi Flexible AMP"
width="650"
height="350"
layout="responsive"
on="tap:lightbox1"
role="button"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDBxnXlYsw5ojF8t-Z15dpnT87SDljSihfc4Q7osItDs4M9OhV6knuSKY5ak-P5k9lzaq9TuYeiE-SXbo0KK7m6MemDpi-76W-eI2GbNAkkVUF7xy8DCBuAUhSFrDVXOLkcRPbwVpU7Ux/s1600/Chris-Gardner2.jpg"
tabindex="0">
</amp-img>
TULISAN ARTIKEL dst..
Untuk pengaturan tata letak gambar di dalam postingan; bagaimana cara meletakkan gambar dengan posisi gambar berada disisi kiri, kanan, atau tengah supaya responsive dan valid AMP lebih lengkapnya sanggup kunjungi blog Kompi Ajaib.
https://mughir.blogspot.com//search?q=memahami-cara-edit-css-pada-template-kompi-flexible-amp.html
4. Menyisipkan slider gambar
Dengan slider gambar kita sanggup memasukkan beberapa gambar pada satu daerah saja sehingga tidak menghabiskan banyak ruang di dalam postingan. Slider gambar sangat cocok dipakai sebagai album gambar. Caranya yaitu dengan menggunakan isyarat berikut:
<amp-carousel width="400"
height="300"
layout="responsive"
type="slides">
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHB8a4sOocY67ptYSSKJBfBuHB-0hBk3QEwfVx3g4ztWU9zaIF1PLPhSb1k4tUrakvPpKzHovZKA3TrcIQwx_SlZkUZXF2EeYmz_nvb0YtMenXwxYaKumoDy_qzlziuooItwAQdGC1tH6R/s1600/image1.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2viVXAwp5iAq5uBF066cgpVm9KVDAD1ECEJ6iiJkrAMB1lUuy68RZu64HrGh5JefgyR7esp0Bhc162qH6DEZ7Usz5WtRgnU6tIlYkPYOwrb4ExFmtOPmBB7wKRO2tnNSDZ7l3yS7lVGD3/s1600/image2.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
<amp-img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh23RzqZFUpcKiMC7KOhyphenhyphenPgEAmqLzHCusLOHy2DcTxr0TI32hTkE7a4a-cbVwgSJBh8ZuU_NoNcNEwx0P3jLBOW50UdjTz7tvWugKqB_IonfT6PZCpV5Zk_KJ66rMs49DA1VZpfzBiy8e8_/s1600/image3.jpg"
width="400"
height="300"
layout="responsive"></amp-img>
</amp-carousel>
4. Menyisipkan video di dalam postingan
Banyak sekali manfaat video di dalam postingan terlebih pada blog yang berkonten tutorial. Bahkan saya pernah membaca bahwa konten yang menarik yaitu konten yang tidak cukup hanya degan goresan pena artikel saja, tetapi harus memuat gambar, audio, dan video. Dengan konten yang menarik (lengkap) tentunya niscaya memberi manfaat yang lebih bagi pembaca, disukai pengunjung, dan dikala mendaftar adsense mempunyai kesempatan besar untuk diterima (katanya sih,, soalnya saya belum mencoba lantaran blog ini masih terlalu dini dan miskin konten, hehe..).
Berikut isyarat untuk menyisipkan video di dalam posting supaya valid AMP
<amp-youtube
data-videoid="ID VIDEO YOUTUBE"
height="270"
layout="responsive"
width="480"></amp-youtube>
Karena saya masih belum punya video sama sekali maka saya izin menambahkan videonya bapak Adhy Suryadi di dalam postingan ini. Soalnya mau menggunakan videonya kakak saya dianya pelit sekali.
Hasilnya menyerupai berikut:
Saya akan update videonya bila saya sudah mempunyai video sendiri. :D
Meskipun terasa sulit tetapi saya tidak harus berganti template. Toh lama-lama niscaya terbiasa dan alhasil akan terasa mudah. Kenapa harus menggunakan template AMP bila penggunaannya merepotkan, kan masih ada template yang lebih mudah? Itu sih terserah penggunanya masing-masing. Ada yang suka template dengan desain tampilan yang megah, tetapi ada juga yang suka template dengan desain tampilan sederhana. Yang niscaya diantara keduanya (sulit-mudah atau megah-sederhana) niscaya mempunyai kekurangan dan kelebihan masing-masing.
Setelah mengingat, menimbang, dan memperhatikan kekurangan-kelebihan tersebut alhasil saya tetapkan untuk tetap menggunakan template AMP. Alasan saya ada pada postingan sebelumnya dan salah satunya yaitu lantaran saya ingin mengikuti perkembangan teknologi. Saya yakin AMP niscaya akan terus berkembang dan penggunanya pun akan semakin banyak, serta tidak menutup kemungkinan AMP akan lebih dipermudah oleh perancangnya.
Di mana saya sanggup mendapat template blogger AMP yang keren?
Di themeforest.net berbagai tetapi saya rasa harganya cukup mahal :D
Di mana saya sanggup mendapat template blogger AMP yang murah?
Insya Allah di kompiajaib. com lebih murah dan full service :)
Saya sudah mempunyai banyak postingan, tentunya lebih susah bagi saya mengedit semua postingan saya supaya valid AMP!
Ada cara lebih gampang yang dibagikan oleh kompiajaib.com (https://mughir.blogspot.com//search?q=memahami-cara-edit-css-pada-template-kompi-flexible-amp)
Malahan dia rela mengedit 800 postingan demi AMP :)
Komentar
Posting Komentar