Template SEOAMP 100% Valid AMP dan Full Responsive by Goomsite


SPOTROID - Template Valid AMP keren SEOAMP - Goomsite. Template ini 100 persen valid AMP dan fast loading serta full responsive. Template atau tema blog Goomsite AMP ini sangat cocok untuk pengguna blog Blogger dan penayang iklan Google Adsense.

Link Demo dan Donwload template SEOAMP ada dibagian akhir artikel. Jadi sempatkan waktu sobat untuk membacanya hingga tuntas agar tidak terjadi kesalahan dalam penggunaan template blog AMP.

Blog yang bertemakan Android ini sesekali membagikan juga artikel tentang tutorial Blogger. Hal ini spot lakukan untuk menambah jumlah artikel dan melengkapi kebutuhan pengguna Blogger pemula.

Kembali ke topik.
Jika di pikiran sobat ada pertanyaan begini, "kenapa admin spot tidak menggunakan template AMP SEOAMP?", katanya bagus, valid AMP, fast loading dan full responsive, tapi admin sendiri tidak memakainya.

Sebenarnya begini.
Bukannya spot tidak suka dan tidak menggunakan template AMP tersebut, tapi spot sudah beberapa kali ganti template dan itu cukup merepotkan. Disamping hal tersebut spot sudah sangat nyaman menggunakan template full responsive yang sekarang ini.

Mengapa spot buat postingan ini?
Karena spot telah memasang template AMP tersebut pada blog yang lain yaitu Blog Padesoh. Spot telah mengujinya di blog tersebut dan ternyata template tersebut adalah valid AMP, responsive dan dapat memuat halaman dengan sangat cepat sekali.

Baiklah berikut ini beberapa screenshot dari blog yang spot pakai template SEOAMP


Beberapa tampilan versi mobile dan desktop.

* Menu drop down (v.mobile)
Seperti biasa untuk setiap blog responsive mobile friendly tentunya selalu menggunakan menu drop down (buka tutup) untuk memudahkan penggunanya ber-navigasi, dan juga mempersempit ruang antara header dengan konten.




* Halaman depan (v.mobile)
Halaman depan versi mobile (seluler) tidak ubahnya seperti tampilan mobile pada template-template responsive lain yang non-AMP. Akan tetapi yang ini lebih fast loading.




* Halaman depan (v.desktop)
Nah pada tampilan home page versi desktop terlihat semua jelas semuanya tanpa perlu scroll jauh ke bawah seperti di v.mobile. Semua yang ada pada v.desktop tetap ada pada v.mobile seperti kotak iklan (atas, bawah, dan kanan atas), serta fiur widget popular post, fans page dan juga label.




* Postingan (v.mobile)
Halaman artikel v.mobile seperti biasanya yang sering sobat lihat di blog lain.




* Postingan (v.desktop)
Pada v.desktop halaman postingannya juga sama seperti pada blog lain.




Setelah melihat beberapa ss tampilan di atas apakah sobat tertarik dengan templat AMP tersebut?
Jika memang sobat tertarik bisa lihat fitur apa saja dan cara menggunakan template Blogger valid AMP SEOAMP.

Fitur Template AMP Goomsite
  • Valid AMP
  • Full responsive
  • Fast loading
  • Menu: drop down v.mobile, horizontal v.desktop
  • Search: segaris dengan menu
  • Header fixed
  • Button share
  • Comment Disqus
  • 3 slot responsive
  • Popular Post
  • Fans Page
  • Label

Fitur-fitur di atas telah mendukung template AMP atau valid AMP (ACCELERATED MOBILE PAGES).

Petunjuk Cara Menggunakan Template SEOAMP

1. MENU
Buka edit HTML cari kode <nav id='menu'> sobat ganti semua kata-kata seperti home, business dan lain-lain dengan kaat yang sobat inginkan. Kemudian jalan lupa untuk menggati tanda # (pagar) dengan url URL yang sesuai dengan kata-kata yang telah sobat ganti.

2. Search Box
Karena template AMP beda dengan template responsive biasa jadi beberapa fiturnya pun berbeda seperti fitu kotak pencarian (search box). Pada fitur ini sobat harus menggati atau url blog www.goomsite.net, hapus URL tersebut dan ganti dengan URL blog sobat. Caranya? Masih pada edit HTMl sobat cari kode <div id='search-box'>, setelah menemukannya lalu temukan URL Goomsite dibawahnya dan ganti (tidak perlu menggunakan http:// atau https://).

3. Comment
Dikarenakan template AMP tidak dukung srcipt jadi untuk komentarnya menggunakan komentar Disqus. Pada fitur komentar sobat car tulisan shortname=seoamp&amp; kemudian sobat ganti tulisan seoamp (seoamp saja yang diganti) dengan nama Disqus sobat.

4. Fans Page
Untuk fitur Fans Page hampir sama dengan langkah nomor 3. Sobat hanya perlu menggati kata atau tulisan yang dimaksud nanti dengan Username Halaman Facebook sobat.
Sobat cari dan temukan ini page=goomsite&quot; sobat ganti goomsite dengan Username Halaman Facebook sobat.

Empat (4) poin di atas adalah yang harus sobat ganti langsung pada edit HTML xml template. Sedangkan untuk membuat sebuah postingan yang valid AMP telah spot sajikan di bawah ini dan bisa langsung sobat pelajari.




Postingan Valid AMP

Seperti apakah postingan atau artikel yang valid AMP dan cara menerapkannya? Jawabannya adalah seperti ini.

1. Gambar
GAMBAR SAMPUL:
Untuk gambar paling atas postingan atau yang akan jadi gambar sampul artikel penerapannya seperti berikut.

<noscript><img alt="keterangan gambar sobat" height="400" src="url-gambar-sobat" title="judul gambar sobat" width="700" /></noscript>

Sobat sesuaikan angka tinggi 400 dan lebar 700 dengan ukuran asli gambar yang sobat masukkan dalam postingan.

Kode <noscript> dan </noscript> adalah kode untuk memuat gambar sampul. Gambar yang akan terlihat di feed seperti halaman depan, popular post, serta gambar yang akan muncul ketika ada yang membagikan artikel sobat ke medsos.

Jika sobat tidak menggunakan tag noscript tersebut maka seperti gambar feed (thumnail halaman depan, related, popular post, dan cover postingan tidak akan muncul.

GAMBAR POSTINGAN:
Untuk gambar dalam postingan blog AMP beda cara penerapannya seperti di blog yang non AMP. Blog non AMP bisa memasukkan gambar bebas terserah sobat, sedangkan untuk blog AMP harus menerapkannya dengan manual sehingga dapat valid atau mendukung fitur AMP.

Jika sobat memasukkan gambar seperti biasa pada non AMP di blog AMP gambar tetap muncul namun sayangnya gambar tersebut tidak sesuai dengan AMP sehingga blog AMP sobat tidak Valid.

Berikut cara dan kode untuk penerapan gambar dalam postingan blog agar valid AMP.

<amp-img alt="keterangan gambar" height="300" layout="responsive" src="url-gambar" title="judul gambar" width="480" ></amp-img>

Masih sama seperti yang di atas, sobat perlu mengubah angka pada ukuran tinggi (height 300) dan lebar (width 400) yang sesuai dengan ukuran asli gambar yang sobat masukkan dalam postingan.

Dalam postingan blog valid AMP tidak mendukung untuk memasukkan atau menulis kode tertentu seperti css dan script lainnya. Hal tersebut melanggar validasi AMP dan postingan blog sobat tidak akan valid AMP.

Lihat dan download template SEOAMP

Dan untuk memasukkan file-file lainnya dalam postinhan AMP seperti audio dan video dll itu hampirlah sama. Selengkapnya akan spot tambahkan disini pada kesempatan berikutnya.


Salam sukses...
BLOG: Awak Blang Awe

YUK IKUTAN BERPARTISIPASI
Anda suka dengan artikel di atas? Bagikan!
Dengan 1x Anda membagikan artikel blog ini, artinya Anda telah ikut serta dalam menunjang berkembangnya blog "Spot Teknologi Android". Sekecil apapun usaha partisipasi Anda sangat berarti bagi blog ini, terimakasih.