Lamp Grid - Template AMP Blogger

Download Template AMP Blogger Terbaru

Selamat datang kembali sobat di blog Code Pelajar, blog berbagi tutorial web design dan template blogger. Pada kesempatan kali ini saya sudah merampungkan pembuatan template AMP untuk blogger. Lumayan lama sih pembuatannya bukan karena templatenya susah tapi karena kita lagi ada pengisian konten di website lain jadi harus menunda pengerjaan template yang sudah saya buat satu bulan yang lalu.



Lamp Grid, sebut saja seperti itu. Nama template ini adalah gabungan dari 2 kata. Untuk kata pertamanya Lamp adalah gabungan dari 2 kata yakni "Light" dan "AMP". Saya memilih nama light karena pada dasar dan fungsionalnya sebagai template AMP sudah pasti harus ringan supaya cepat di akses. Dan untuk kata "Grid" saya ambil karena pada tampilan desktop/non mobile template ini dibuat GRID pada bagian homepage.


Template Blogger AMP ini merupakan yang pertama yang saya buat dan share di Code Pelajar. Setelah sebelumnya saya membuat template non amp responsive seperti Mangastrap, Viomagz Igniel Kw, juga template-template lain yang bisa kamu temukan disini. Awalnya juga saya ragu membuat template amp ini karena walaupun cepat, template amp bukan fashion saya juga. Karena pada dasarnya saya biasanya bermain bebas dengan template, hanya dengan amp kemampuan templating dan script saya memang di batasi.


Fitur Template

Mungkin tidak wah ya namun semoga bisa puas dengan fitur yang ada pada template ini sebagai berikut:


Tampilan Antar Muka Template AMP Lamp Grid

Untuk tampilan sendiri, template ini memiliki 2 tampilan berbeda saat di akses via Deskto dan Mobile. Untuk tampilan Desktop bisa dilihat seperti gambar di bawah ini.


Download Template AMP Blogger Terbaru

Pada tampilan desktop saya buat grid dengan 2 kolom. juga saya buat dengan sidebar yang muncul di setiap halaman. Sementara untuk tampilan Mobile saya buat dengan gaya list dan berbeda dari gaya desktop seperti pada gambar dibawah ini.


Download Template AMP Blogger Terbaru

Template Valid AMP

Template Lamp Grid sudah saya test dan hasilnya 100% Valid AMP, bisa dilihat hasil test ampnya dibawah ini.


Download Template AMP Blogger Terbaru

Template Fast Load, Cepat di Akses di PC maupun Seluler

Karena template AMP ini memang fokus pada seluler, jadi untuk kecepatan akses tidak diragukan lagi. Template AMP yang saya buat ini mendapat skor hijau di GT-Metrix dan Page Speed Insight


Download Template AMP Blogger Terbaru

Download Template AMP Blogger Terbaru

Download Template AMP Blogger Terbaru

Template SEO Friendly, Valid Data Struktur dan 100% SEO di Audit Tool

Selain Fast Load, template ini juga sudah saya rancang sedemikian rupa agar menambah SEO on Page situs kamu. Data struktur meta dan ld+json untuk AMP juga sudah saya sematkan dan valid 100% tanpa eror bisa kamu lihat hasilnya dibawah ini.


Download Template AMP Blogger Terbaru

Saya test template ini juga pada tool Audit dan hasilnya cukup memuaskan untuk menghasilkan 100% SEO, Accessibility, dan Best Practices walaupun skor mengecewakan di performa dan web progresif.


Kenapa bisa skor kuning di kubu kiri? karena pada dasarnya ini template AMP yang disematkan Script AMP khusus juga pantangan memakai scriptlain sehingga Audit mendeteksi skor ini tidak baik. Namun jangan khawatir karena skor ini sudah tercover oleh pagespeed insight.


Template Mobile Friendly

Hahaha kalo yang ini sih sudah pasti bro. Yang namanya template AMP Responsive sudah pasti Mobile friendly dan sudah tidak diragukan lagi.


Download Template AMP Blogger Terbaru

Templates Ads Ready

Tampilan Grid iya, Valid AMP iya, SEO dan Fastload sudah, namun kurang lengkap kalo kita pasang sendiri slot iklannya kan? apalagi untuk template lokal biasanya para pemilik blog juga mencari template yang sudah disediakan slot untuk menyimpan iklannya. Template Lamp Grid sudah saya pasang 5 slot untuk iklan banner bisa kamu lihat sendiri di Layout / Tata Letak. Untuk jenis banner sendiri saya sediakan 2 kondisi yaitu tampil dua"nya atau hanya di Homepage. Sementara untuk slot di sidebar pasang aja sendiri ya hehehe...


Template High CTR? Insyalloh

Saya juga sebelumnya penasaran dengan template dengan embel-embel high CTR (High Click Traffic Rate) istilah template yang bisa meningkatkan jumlah click pada iklan. Tapi perlu saya garis bawah juga yaitu tergantung topik juga usernya juga yang terkadang pintar. Yang membuat sebuah template itu dikatakan High CTR karena para pengunjung seringkali terjebak pada jebakan iklan yang seringkali serupa dengan konten. bukan karena dipasang skrip khusus atau jampi-jampi ya.


Nah pada template Lamp Grid saya buat selain menyesuaikan dengan perilaku iklan, saya juga mengatur jarak antara elemen 1 dan lainnya itu berdempetan sehingga tidak terlalu renggang atau istilah kerennya compact. Untuk warna latar juga sengaja saya kasih warna putih supaya terlihat simpel.


Template AMP Blogger Gratis

kabar baiknya template yang saya share ini dibagikan secara cuma-cuma alias gratis. Dengan beberapa fitur diatas cukup lah bagi kamu para kolektor template buat nambah-nambah koleksi. Kamu bisa download templatenya disini


Untuk fitur lainnya seperti News Ticker dan Stiky Sidebar juga bisa kamu lihat saja langsung pada demonstrasinya disini.


Setting Template Lamp Grid

Beberapa harus di setting agar bisa berfungsi semestinya.


Cara Setting Navigasi Template

Lamp Grid memiliki beberapa navigasi yang harus di atur. Caranya cukup cari 4 kata berikut lalu ubah codenya sesuai kebutuhan.

  • TOP NAV
  • AMP SIDEBAR (Mobile Only)
  • NAVIGASI UTAMA (Desktop Only)
  • Social Link

Cara Setting Nav Browser

Warna untuk ini bisa disesuaikan, caranya cari kata "WARNA NAV BROWSER" lalu ubah kode dibawah


<!-- meta browser color -->
<meta content='#efefef' name='theme-color'/>
<meta content='#efefef' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#efefef' name='apple-mobile-web-app-status-bar-style'/>


Cara Setting Web Master dan Meta Social

Cari tulisan "Web Master" lalu akan menemukan kode berikut ini dan ubah sesuai kebutuhan.


<link href='https://plus.google.com/YOUR-GOOGLE-PLUS-ID/posts' rel='publisher'/>
<link href='https://plus.google.com/YOUR-GOOGLE-PLUS-ID/about' rel='author'/>
<link href='https://plus.google.com/YOUR-GOOGLE-PLUS-ID' rel='me'/>
<meta content='YOUR-WEBMASTER-VERIFICATION' name='google-site-verification'/>
<meta content='YOUR-WEBMASTER-VERIFICATION' name='msvalidate.01'/>
<meta content='YOUR-WEBMASTER-VERIFICATION' name='yandex-verification'/>
<meta content='YOUR-COUNTRY' name='geo.placename'/>
<meta content='YOUR-NAME' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
</b:if>
</b:if>
<meta content='https://www.facebook.com/YOUR-FACEBOOK' property='article:author'/>
<meta content='https://www.facebook.com/YOUR-FANSPAGE' property='article:publisher'/>
<meta content='YOUR-APP-ID' property='fb:app_id'/>
<meta content='YOUR-ADMIN-ID' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<!-- Type of twitter card -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='YOUR-TWITTER' name='twitter:site'/>
<meta content='YOUR-TWITTER' name='twitter:creator'/>


Cara Setting Komentar Disqus

Untuk mengubah komentar disqus, cari tulisan shortname=codepelajar lalu ganti dengan shortname disqus kamu.


Download Template

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel