Panasaran apa sih halaman blog AMP itu?

Apakah AMP itu...?

Jauh di tahun tahun sebelumnya, yang telah menjadi zaman old, membaca artikel melalui hape itu lambat alias lelet dan ribet, kaku dan juga bikin frustasi. Namun tentu saja tidak harus selamanya demikian, zaman baru selalu datang dengan perubahan: Proyek AMP (Accelerated Mobile Pages) sebuah proyek terbuka telah melakukan sebuah terobosan demi mewujudkan impian kita dimana para publisher dapat membuat konten mobile yang optimal dengan kecepatan menampilkan dan memuat konten moble dimana mana, karena sifatnya yang terbuka kita juga diberikan kesempatan untuk berkonstribusi terhadap proyek yang satu ini.

Baca juga: TIGA POLEMIK AMP

APA SIH BEDANYA HTML KLASIK SAMA AMP? 

So pasti beda dong, karena faktanya anda tidak dibenarkan menggunakan secara sembarangan kode Javascript kecuali untuk modul modul yang telah disediakan oleh AMP Google dan anda tidak dibenarkan menggunakan stylesheet.css kecuali apabila hanya diperuntukan untuk gaya huruf atau font font Google. Walaupun nampaknya masih jauh dari kata sempurna dan memenuhi harapan, namun projek AMP kelihatannya cukup menjanjikan. Paling tidak itu yang di promosikan oleh Google sampai saat sekarang.

Jika platform blogging Anda adalah Wordpress, maka halaman anda adalah PHP, dan kita tidak bisa mengujinya secara lokal, jadi bagaimana dong?

Halaman PHP memerlukan setting server lokal seperti WAMP untuk mengunggah item item anda ke sebuah server untuk tujuan melakukan pengujian. Nyatanya bahwa halaman kita adalah PHP tidak berarti menunjukan adanya kode tersebut begitu rumitnya, dan pada faktanya beribu cara dapat kita lakukan untuk membuat hal itu lebih mudah yakni untuk merubah style yang biasanya harus hadir pada tiap barisan kode, tapi membuat suatu perubahan pada kode css bisa jadi saja mimpi buruk bagi anda.

Ada yang bilang tidak ada stylesheet eksternal...tapi kok anda memakai style.css eksternal?

Hal yang separo benar dan separo tidak. Camkan baik baik, menambahkan CSS ke dalam barisan kode bisa menyebabkan sakit kepala yang berlarut larut, bagi kita sebagai pengguna diharuskan mengedit setiap baris HTML padahal hanya untuk merobah satu bagian dari style saja. 

Kita perlu sebuah fungsi READ/WRITE daripada PHP (Itulah sebabnya mengapa halaman AMP itu sepenuhnya PHP tetapi basis mereka sebenarnya adalah HTML). Fungsi ini membolehkan kita menggunakan suatu stylsheet eksternal TETAPI sebenarnya itu bukan sepenuhnya eksternal melainkan Internal! 

Ketika halaman di muat, kode kode CSS ditambahkan kedalam halaman, membuatnya masuk kedalam barisan kode kode dan hal inilah yang menyebabkannya menjadi VALID.

Lalu bagaimana kita mengetahui bahwa halaman AMP kita sudah Valid? Bagi Anda Pengguna platform Wordpress?

Sangat sederhana. Katakanlah halaman yang anda edit adalah sebuah index.PHP. Maka dari itu link yang anda uji akan terlihat http://awesomebuyer.com/mobile/index.php. Demi untuk mengetahui bahwa halaman telah valid, anda harus menambahkan ini #development=1 di akhir tautan atau link anda, buka konsol dan tekan refresh. Anda akan melihat pesan pada konsol anda yang menyatakan bahwa halaman AMP akan valid jika kodenya benar.

Lebih lanjut kunjungi: https://www.ampproject.org/docs/guides/validate

Apa yang tidak bisa kita gunakan sebagai CSS?

Seperti yang kita telah kita ketahui, AMP sedikit terbatas, tetapi AMP adalah sebuah proyek yang sedang berkembang, jadi tulislah kode kode yang telah diijinkan sekarang, bisa saja berjalan lancar dalam satu atau dua bulan sebelum error datang memusingkan kepala anda lagi, oleh karenanya dianjurkan untuk mengikuti halaman ini: https://www.ampproject.org/docs/guides/responsive/style_pages

Tetaplah terhubung jika suatu ketika terjadi perubahan lagi

Fitur fitur AMP

AMP adalah flatform yang sedang bertumbuh kembang, dan pada waktunya menyediakan beberapa kode scripts yang benar benar mengagumkan dan berjalan sangat baik pada produk semisal: https://ampbyexample.com/

CATATAN:

1. Pemasangan sebuah script. Setelah anda menemukan sebuah script yang anda sukai untuk anda gunakan, maka anda akan mengimpor file JS yang sudah tersedia di bagian kepala daripada item tempat script script tersebut tersedia, hal ini hanya bisa dilakukan menggunakan struktur HTML yang telah tersedia, jika tidak validasi akan gagal.

2. Menggunakan fitur fitur halaman AMPSeluruh komponen yang kita pakai dapat ditemukan di ampbyexample.com dan lebih jauh di sertai dengan tutorial dan contoh penggunaannya. 

Bagaimana cara memasang gambar di AMP?

AMP google memiliki cara berbeda dalam menambahkan gambar, anda dapat menemukannya hal tersebut sebagai <amp-img>. Bisa saja kami menjelaskannya akan tetapi jauh lebih mudah apabila anda berkunjung saja untuk mendapatkan contoh di halaman Google AMP https://www.ampproject.org/docs/guides/responsive/control_layout

Item item Struktur halaman

Struktur halaman AMP sangat sederhana sebagaimana pada contoh berikut:

Header<header> <button class="header-icon-1" on='tap:sidebar.open'><i class="fa fa-navicon"></i></button> <a href="index.php" class="header-logo"></a> <a href="contact.php" class="header-icon-2"><i class="fa fa-envelope-o"></i></a> </header> 

Header terdiri dari 3 elemen. Sebuah tombol yang mengaktifkan sidebar (harus satu tombol pada setiap setting AMP)LOGOnya yang dapat anda rubah pada style.css di baris 264.Ikon terakhir yang kita pilih adalah ikon kontak, akan tetapi anda bisa menambahkan apa saja yang anda inginkan pada pencampuran ini.

Sidebar<amp-sidebar id="sidebar" layout="nodisplay" side="left"> <!-- Sidebar Content Here --> </amp-sidebar>

Ini adalah basis struktur sidebar 

Sidebar Header <div class="sidebar-header"> <a href="https://www.facebook.com/enabled.labs/"><i class="fa fa-facebook"></i></a> <a href="https://twitter.com/iEnabled"><i class="fa fa-twitter"></i></a> <a href="tel:+123 456 7890"><i class="fa fa-phone"></i></a> <a href="sms:+123 456 7890"><i class="fa fa-comment-o"></i></a> <a href="#"><i class="fa fa-times"></i></a> <div class="clear"></div> </div>

Sidebar header terdiri daripada 5 ikon yang terdapat di atas halaman. Ganti semua menurut kebutuhan anda akan tetapi tinggalkan yang teraikhir untuk menutup sidebar

LOGO Sidebar

<a href="#" class="sidebar-logo"></a>
Logo sidebar yang dapat anda ganti pada baris ke 469
Sidebar Divider<p class="sidebar-divider">Navigation</p>
Pemisah atau separator dengan text anda dapat gunakan untuk membedakan elemen menu

Simple Sidebar Menu Item 

<div class="sidebar-menu"> <a href="index.php" class="sidebar-item"><i class="bg-red-dark fa fa-star-o"></i>Welcome<i class="fa fa-circle"></i></a> </div>

Kode ini akan membuat sebuah sidebar sederhana daripada sebuah menu item. Tidak ada dropdown, tidak ada efek.

Submenu Sidebar Menu Item<amp-accordion class="sidebar-menu"> <section expanded> <h4><i class="bg-green-dark fa fa-home"></i>Home<i class="fa fa-angle-down"></i></h4> <ul> <li class="active-menu"><a href="index.php"><i class="fa fa-angle-right"></i>Classic<i class="fa fa-circle"></i></a></li> <li><a href="index-splash.php"><i class="fa fa-angle-right"></i>Splash<i class="fa fa-circle"></i></a></li> <li><a href="index-landing.php"><i class="fa fa-angle-right"></i>Landing<i class="fa fa-circle"></i></a></li> <li><a href="index-news.php"><i class="fa fa-angle-right"></i>News<i class="fa fa-circle"></i></a></li> </ul> </section> </amp-accordion>

Submenu harus di tambahkan didalam struktur yang telah ditunjukan diatas tadi. amp-accordion akan memperbolehkan submenu ditutup dan dibuka. Sementara bagiannya akan menempatkan elemen elemen kode dan menambahkan "perluasan" itu akan membuat menu perluasan atau expanded secara default.Setiap item didalamnya adalah sederhana - yakni menu item yang telah ditambahkan kedalam daftar elemen
Membuat halaman Paddings
Membuat sebuah lapisan (padding) kiri dan kanan <div class="content"></div>

Secondary Classes

Sebuah kelas kedua adalah sebuah kelas yang dapat menambahkan elemen kode menjadi lebih fleksibel
Mengapa hal ini peneting? AMP Google adalah tentang bagaimana kita menggunakan kembali elemen elemen dan menggunakan sedikit mungkin style agar kita tetap dapat menjaga ukuran tetap kecil. Maka dari itu kelas kedua untuk warna latar, margin dan border di tujukan agar membuat style sekecil mungkin.

Latar, border dan warna

Anda dapat memilih suatu warna, borderm atau warna latar untuk elemen dengan menambahkan kelas kedua berikut:

bg-teal-light
bg-teal-dark
border-teal-light
border-teal-dark
color-teal-light
color-teal-dark
bg-green-light
bg-green-dark
border-green-light
border-green-dark
color-green-light
color-green-dark
bg-blue-light
bg-blue-dark
border-blue-light
border-blue-dark
color-blue-light
color-blue-dark
bg-magenta-light
bg-magenta-dark
border-magenta-light
border-magenta-dark
color-magenta-light
color-magenta-dark
bg-night-light
bg-night-dark
border-night-light
border-night-dark
color-night-light
color-night-dark
bg-yellow-light
bg-yellow-dark
border-yellow-light
border-yellow-dark
color-yellow-light
color-yellow-dark
bg-orange-light
bg-orange-dark
border-orange-light
border-orange-dark
color-orange-light
color-orange-dark
bg-red-light
bg-red-dark
border-red-light
border-red-dark
color-red-light
color-red-dark
bg-pink-light
bg-pink-dark
border-pink-light
border-pink-dark
color-pink-light
color-pink-dark
bg-gray-light
bg-gray-dark
border-gray-light
border-gray-dark
color-gray-light
color-gray-dark
bg-white
color-white
border-white
bg-black
color-black
border-black

Latarbelakang Media Sosial

facebook-bg
linkedin-bg
twitter-bg
google-bg
whatsapp-bg
pinterest-bg
sms-bg
mail-bg
dribbble-bg
tumblr-bg
reddit-bg
youtube-bg
phone-bg
skype-bg

Warna sosial media:

facebook-color
linkedin-color
twitter-color
google-color
whatsapp-color
pinterest-color
sms-color
mail-color
dribbble-color
tumblr-color
reddit-color
youtube-color
phone-color
skype-color

Opsi Font

Anda juga bisa mengganti parameter font, tipis, lebih kecil, tebal, dan banyak lagi. Tambahkan saja kelas ke elemen huruf dari salah satu pilihandibawah ini:

ultrathin
thin
thiner
boder
bold
ultrabold
capitalize
italic
small-text
center-text
right-text
uppercase
boxed-text

Properti Box

Margin juga bisa dipakai memperbesar elemen tertentu dengan menggunakan kelas kedua:

.container{margin-bottom:30px}
.full-bottom{margin-bottom:25px}
.no-bottom{margin-bottom:0px}
.full-top{margin-top:25px}
.half-bottom{margin-bottom:15px}
.half-top{margin-top:15px}
.quarter-bottom{margin-bottom:15px}
.hidden{display:none}

Mengunakan halaman lainnya

Setiap halaman dalam pembuatannya terdiri dari copy-paste blok elemen sederhana. Buka semuanya dan lihat kedalamnya, jika disana terdapat sesuatu yang membuat anda bermasalah, pembuatan akan mendapatkan bantuan, tetapi jangan kuatir kode kode kita sangat mudah dibaca dan 100% bisa di copy-paste. TombolTombol-tombol
Tombol tombol mudah dipergunakan. Anda tambahkan saja Tombol class dan lalu kelas kedua untuk warna sesuai keinginan anda

<div class="content"> <a href="#" class="button bg-green-light">Button</a> <a href="#" class="button bg-red-light">Button</a> <a href="#" class="button bg-blue-light">Button</a> <a href="#" class="button bg-teal-light">Button</a> <a href="#" class="button bg-magenta-light">Button</a> <a href="#" class="button bg-night-light">Button</a> <a href="#" class="button bg-orange-light">Button</a> <a href="#" class="button bg-gray-dark">Button</a> <a href="#" class="button bg-pink-dark">Button</a> </div> 

Ikon

Ikon juga gampang di pergunakan. Tersedia sebuah ikon, dan sebuah warna

<div class="content"> <a href="#" class="icon-round facebook-bg"><i class="fa fa-facebook"></i></a> <a href="#" class="icon-round google-bg"><i class="fa fa-google-plus"></i></a> <a href="#" class="icon-round twitter-bg"><i class="fa fa-twitter"></i></a> <a href="#" class="icon-round pinterest-bg"><i class="fa fa-pinterest"></i></a> <a href="#" class="icon-round dribbble-bg"><i class="fa fa-dribbble"></i></a> <a href="#" class="icon-square facebook-bg"><i class="fa fa-facebook"></i></a> <a href="#" class="icon-square google-bg"><i class="fa fa-google-plus"></i></a> <a href="#" class="icon-square twitter-bg"><i class="fa fa-twitter"></i></a> <a href="#" class="icon-square pinterest-bg"><i class="fa fa-pinterest"></i></a> <a href="#" class="icon-square dribbble-bg"><i class="fa fa-dribbble"></i></a> </div>

Form kontak

Form kontak 100% telah diuji, dan sepenuhnya valid, maka jika terdapat isu terkait masalah itu ikuti petunjuk:
1. Pastikan halaman anda sudah Valid AMP, jika tidak valid form kontak tidak akan mengirimkan pesan
2. Hubungi provider hosting kontak anda dan minta mereka untuk mensetting PHP untuk ini<IfModule mod_security.c> SecFilterEngine Off SecFilterScanPOST Off </IfModule>
Tanpa setting setting ini form kontak tidak akan mengerimkan pesan untuk anda!

Artikel diatas hanya sebagai ilustrasi agar kita mendapatkan gambaran apa sih AMP itu?

Baca juga: CARA PEMASANGAN TOMBOL BERBAGI ADDTHIS KE BLOG AMP

Camkan: AMP bukan segalanya.

1. Karena AMP berkampanye dan terkesan mengumbar janji kecepatan sebuah halaman mobile. Sedangkan kecepatan bukanlah segalanya.
2. Jika AMP tetap ngotot mengatakan bahwa ia mempercepat loading suatu halaman web. Itu terdengar tidak penting karena kecepatan itu lebih banyak bergantung pada jaringan: bandwith. Masa depan akan dipenuhi oleh internet cepat, 5G, 6G, 7G dan kecepatan teknologinya itu eksponsional.
3. Teknologi Mesin ponsel juga berkembang dan jangan jangan pula segala macam platform web tidak akan mempengaruhi kecepatannya lagi. Jadi mengapa harus menggunakan AMP?
4. Kecepatan itu relatif, ada masanya kelak sampai batas nadir orang tidak perduli dengan kecepatan yang hanya selisih sepersekian detik: AMP versus Kecepatan dan kekuatan Bandwith.
5. Semakin AMP mengikuti semua fitur dan kecantikan halaman mobile klasik, maka semakin mirip mereka satu sama lain dalam hal kecepatan loading karena keduanya akan menanggung beban peramban yang sama. Pada akhitnya teknologi 
   akan merobah segalanya.
   

Namun apapun alasannya AMP buklanlah segalanya, perubahan zaman secara keseluruhan telah menjadikan model itu seperti hal biasa, bahkan halaman mobile klasik juga tidak kalah dengan model AMP dari segi performanya. Jaringan internet juga sudah berkembang semakin maju menjadi 5G, 6G dan 7G, soal kecepatan AMP hampir tidak dapat bicara banyak lagi.


Ikuti terus tips, triks dan hack kami.