Skip to main content

PANASARAN SEPERTI APA BLOG AMP ITU

Sebelumnya, membaca artikel melalui hape itu lambat, kaku dan 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:

APA SIH BEDANYA HTML KLASIK SAMA AMP?

So pasti beda dong, karena faktanya anda tidak dibenarkan menggunakan secara sembarangan kode Java 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 masihjauh dari kata sempurna dan memenuhi harapan, namun projek AMP cukup menjanjikan.

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 kedalam 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?

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 kita memakai 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 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

Sumber: enable

Comments

  1. sepertinya rumit yah meski katanya lebih cepat loadingnya

    ReplyDelete
    Replies
    1. Tidak juga, hanya karena Sedikit berbeda prosedur...pembuatannya Sedikit lebih teliti

      Delete

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © editblogtema. All rights reserved.