Membuat Template Blogger Amp Dari A Sampai Z

Membuat Template Blogger Amp Dari A Sampai Z - Hai teman - teman saya nazmudin 😄 pada pembelajaran kali ini kita akan belajar bagai mana cara membuat template atau tema blogger tapi sebelum nya saya akan menjelaskan dulu kepada teman - teman apa sih itu Blogger ? blogger adalah salah satu aplikasi web geratis yang dapat di akses secara online melalui alamat blogger.com yang memiliki fungsi utama yaitu untuk mempublikasikan postingan  tulisan - tulisan  berupa artikel seperti berita, informasi, tutorial, dan bisa juga untuk menyampai kan ide - ide kreatif seiring perkembangan jaman blogger juga dapat menghasilkan uang melalui iklan yang di tampilkan pada blog.

ngomong - ngomong kalau yang pernah denger istilah AMP (Acelerated Mobile Pages) yaitu sebuah proyek google yang berupa sebuah struktur code web yang dapat meminimalisir penggunaan  Html, Css, dan Javascript  dilihat dari nama nya pasti teman - teman sudah bisa menyimpulkan apa itu Acelerated Mobile Pages yang memiliki arti "Halaman Ponsel Yang di Percepat"

Bagi yang belum mempunyai  accounts blogger siapkan terlebih dahulu alamat email untuk mendaftar blogger.com dan silahkan anda daftar terlebih dahulu untuk mengikuti langkah langkah berikutnya

Setelah teman - teman menyimak Apa Itu Blogger dan Apa Itu  AMP (Acelerated Mobile Pages) kita akan lanjut pada poin - poin apa saja yang akan di bahas

• Mengenal Tag Conditional Pada Blogger
• Membuat Header Pada Blogger
• Membuat Menu Vertical Dan Horizontal 
• Membuat Widget Random Post, Label, Popular Post, Dll
• Membuat Tampilan Postingan Pada Blogger
• Membuat Meta Info
• Membuat Footer Pada Bloger
• Membuat Halaman Archive
• Membuat Mesin Pencari
• Memasang Icon Font Awesome Pada Blogger
• Template Responsive
• Memasang Komentar Disqus

List di atas merupakan daftar yang akan di bahas tapi sebelum nya saya akan jelaskan dulu strukrur dan elemen pada template blogger agar teman - teman bisa menjadikan modal untuk membuat tampilan blog amp atau memodifikasi template supaya lebih mudah untuk mempelajari nya.

Struktur dan elemen - elemen Pada Blogger AMP

• Header
  Headar adalah bagian kepala dari sebuh blog atau website yang tentu memiliki peran yang sangat penting bagi blog atau website yang umumnya berisikan Logo, Nama Blog, atau Judul Blog dan Deskripsi pada blog tersebut.
  
• Menu
  Menu tentu saja teman - teman sudah tidak asing lagi apa itu menu karena menu tidak hanya pada website saja bahkan setiap program aplikasi memiliki menu yang memiliki perintah - perintah yang jika di klik akan berpindah halaman utama ke halaman lain atau dari halaman lain ke halaman lain nya.
  
• Posting
  Posting adalah sebuah tampilan dimana pada area tersebut menampilkan Judul Postingan, Gambar postingan, Deskripsi Postingan dan Meta Info
  
• Sidebar
  sidebar bagian tataletak blog atau website umumnya posisi nya di kanan atau di kiri yang berisikan widget - widget blog atau iklan.
  
• Footer
  Jika Header adalah bagian atas dari blog atau website maka Footer sebaliknya artinya footer adalah sebuah tataletak blog atau website yang berposisi di bagian bawah yang berisikan Widget, Info Hak Cipta, DLL.
  
• Body
  Body bisa dibilang adalah bagian tubuk dari blog atau website yang berisikan Semua struktur pada website.

Pengertian Serta Penjelasan HTML CSS dan Javascript

Untuk membuat Template Blogger Amp harus mengerti HTML CSS dan Javascript karena akan lebih mudah untuk mempelajari nya.

HTML
Html adalah singkatan dari (Hyper Text MarkUp Language) yaitu adalah struktur dasar dari sebuah website atau blog untuk membut krangka nya untuk membuat teks, gambar ataupun video untuk menghias nya agar blog amp teman - teman lebih cantik atau mengatur Struktur nya kita gunakan CSS Lalu ada Javascript Untuk menjadikan blog amp anda lebih interaktif seperti membuat galery foto atau ntuk pengunjung melakukan action acton tertentu pada blog amp anda

Teman - Teman Tidak Usah Khawatir Bagi Yang Masih Baru Belajar Mengenai CSS, HTML Dan Javascript Karena Saya Akan Menjelaskan Code Setiap Rancangan Dari Template Nya Nanti

Mengenal Tag Kondisional Pada Blogger

Ini yang harus diperhatikan saat membuat template blog amp karena pada pada template amp tidak boleh ada dua costum style dalam satu halaman tag kodisional berfungsi untuk mengatur kondisi dari kode yang di bungkus oleh tag kondisional apakan elemen - elemen dari kode tersebut di tampikan atau tidak.

 <b:if cond='data:blog.url == data:blog.homepageUrl'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.pageType == "static_page"'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.url == data:post.url'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.pageType == "item"'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.pageType == "index"'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.searchLabel'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.searchQuery'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.pageType == "archive"'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.pageType == "error_page"'>
[...CODE...]
</b:if> 

 <b:if cond='data:blog.url == "URL"'>
[...CODE...]
</b:if> 

 <b:if cond='data:post.numComments == [number_DISINI]'>
[...CODE...]
</b:if> 

Operator Tag Conditional

Teman - Teman bisa lihat code di atas ada tanda == berarti untuh Tag Conditional tersebut di nyatakan BENAR untuk pernyataan yang dinyatakan sebaliknya teman bisa mengubah nya dengan !=
dan inilah beberapa List oprator Tag Conditional

• == Operator yang menyatakan BENAR
• != Operator yang menyatakan SALAH
• < Kurang dari
• > Lebih besar dari
• <= Kurang dari atau sama dengan
• >= Lebih besar dari atau sama dengan

The [number_Disini] (Tag Conditional Untuk Halaman Tampilkan konten hanya pada posting yang memiliki nomor komentar tertentu) harus diganti dengan bilangan bulat non-negatif (0, 1, 2, ..., 200, dll).

Akan banyak sekali yang bisa teman - teman pelajari, semoga jelas saya saya stop dulu untuk postingan Membuat Template Blogger Amp  akan lanjut pada postingan berikut nya jika ada yang mau ditanyakan teman - teman bisa berkomentar di bawah daaah 👋 sampai ketemu lagi di postingan berikut nya