Create Pages on Github for Free

Membuat Blog di Github Gratis - Pada artikel kali ini mimin akan share cara membuat blog / halaman pada Github, seperti yang orang banyak tau kalau github ini adalah layanan hosting sebuah source atau code secara gratis, maksudnya begini kalian bisa Hosting atau menaruh kode kalian pada github ini sesuka kalian. 

Akan tetapi github juga bisa dibuat page / halaman juga ada beberapa kekurangan yang bisa anda dapatkan apabila membuat page pada github ini. 

Keuntungan Github Page

Ada beberapa keunggulan jika kalian membuat github page ini apa aja itu ini dia keunggulan nya :

• Gratis : sama seperti kalian membuat blog di Blogger layanan github page ini bisa kalian nikmati secara gratis
• Bisa Custom Domain : Jika kalian ingin menggunakan domain di Github ini kalian bisa di buat dengan domain sendiri
• Keamanan : untuk keamanan nya sendiri terbilang sama seperti Blogger jadi tidak usah khawatir apabila akun kalian dibajak. 

Cara Membuat Github Page Hanya 10 Menit

Berikut ini adalah cara membuat github page hanya dalam 10 menit langsung bisa si pakai :

1. Masuk Akun Github Kalian, apabila belum memiliki akun bisa langsung aja Mendaftarkan akun

2. Klik aja tautan berikut ini yaitu Jekyll Now, kemudian klik Fork

3. Setelah itu klik pada pojok titik tiga kemudian pilih Setting

4. Ganti nama repositorynya dengan nama akun sobat kali ini saya ganti dengan sudarblogger.github.io, seperti yang ada di bawah ini

5. Selsai, sekarang kalian sudah memiliki github page ini untuk aksesnya kalian bisa langsung aja klik aja namaakun.github.io

Nah itulah Cara Membuat Github Page Secara Gratis, bisa kalian coba nih apabila tidak mau membuat blog pada Blogger. 

Mengatasi Iklan Adsense Blank Pada Tampilan Desktop blog AMP

Mengatasi Iklan Adsense Blank - Jika kalian menggunakan AMP HTML tentu akan ada kendala salah satunya adalah iklan adsense yang punya blog saya alami dimana saya coba cek pakai laptop teman saya itu tidak tampil alias blank, akan tetapi pada tampilan mobile iklan yang ada pada blog ini tampil seperti biasa. 

Akan tetapi pada saat di akses melalui PC atau Desktop iklan adsense ada beberapa yang blank, tentu ini akan membuat pendapatan menjadi berkurang karena hanya iklan tampil pada tampilan mobile saja akan tetapi tidak tayang pada tampilan mobile. 

Walaupun ada beberapa iklan yang tayang pada tampilan dasktop yaitu iklan yang ada di dalam artikel, akan tetapi ada iklan yang tidak tayang misalnya aja pada sidebar template ini. 

Akhirnya saya coba cari di Kompiajaib akhirnya menemukan caranya untuk mengatasi iklan tidak tampil pada desktop. 

Penyebab Iklan Adsense Tidak Tampil

Ternyata ada beberapa faktor yang memperngaruhi kenapa iklan tidak tayang pada tampilan desktop ini yaitu iklan Responsive yang menggunakan elment fixed-height.

Sekarang google adsense sudah support unit iklan fixed-height ini entah kanapa penyebab nya, padahal unit iklan tersebut membuat tampilan akan menjadi lebih rapih saat membuka tampilan pada desktop.

Memperbaiki Iklan Blank Pada AMP HTML

Agar bisa tayang lagi iklan tersebut tentu yang harus dilakukan adalah menggantikan fixed-height dengan ukuran tertentu misalnya dengan menggunakan iklan jenis responsive. 

Berikut ini adalah beberapa kode yang bisa kalian gunakan agar iklan bisa tayang pada tampilan desktop, kode ini saya ambil dari Kompiajaib dan saya gunakan pada blog saya ini dan alhamdulillah masih bisa hingga sekarang ini. 

Iklan di Header

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='90' media='(min-width: 1025px)' type='adsense' width='970'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='90' media='(max-width: 1024px) and (min-width: 737px)' type='adsense' width='728'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='60' media='(max-width: 736px) and (min-width: 601px)' type='adsense' width='468'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 600px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>

Iklan di Sidebar

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='600' type='adsense' width='300'>
</amp-ad>

Atau

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='600' type='adsense' width='160'>
</amp-ad>

Atau

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='250' type='adsense' width='300'>
</amp-ad>

Iklan di Atas dan Bawah Post

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='250' media='(min-width: 737px)' type='adsense' width='300'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>

Atau

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='280' media='(min-width: 737px)' type='adsense' width='336'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>

Unit Iklan Link

Untuk unit iklan link masih bisa pakai layout fixed-height seperti berikut.

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='250' layout='fixed-height' media='(min-width: 737px)' type='adsense'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>

Unit Iklan Matched Content

<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-format='autorelaxed' data-ad-slot='xxxxxxxx' data-full-width='' height='700' layout='responsive' media='(min-width: 601px)' type='adsense' width='700'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='mcrspv' data-full-width='' height='320' media='(max-width: 600px)' type='adsense' width='100vw'>
  <div overflow=''/>
</amp-ad>

Untuk ukuran unit iklan matched content untuk tampilan desktop (kode yang atas) ini silahkan bisa coba rubah dan sesuaikan ukurannya, yang penting perbandingan 1:1 atau 4:3.

Mengenal Google AMP, Apa itu AMP HTML?

Mengenal AMP HTML, apa itu AMP HTML? Hay semua mimin kali ini akan membahas menganai AMP HTML kepada kalian semua artikel ini saya tujukan buat kalian yang belum mengetahui tentang AMP HTML ini, seperti yang kita ketahui AMP HTML ini cara kerjanya sangatlah berbeda dengan Non AMP. 

Apa itu AMP HTML? 

AMP (Accelerated Mobile Page) adalah framework open source yang kembangkan oleh Google dimana halaman website atau blog bisa diakses lebih cepat di perangkat mobile. Dengan AMP ini juga membatasi penggunaan kode HTML dan CSS pada sebuah template tersebut menjadi lebih sederhana, selain itu penggunaan JS pun di hilangin.

Template yang menggunakan AMP ini di mesin pencari Google akan ada tanda petir nya yang dimana pada saat website tersebut diakses dalam perangkat mobile. 

AMP ini saat diakses melalui perangkat mobile akan lebih cepat dari website biasa yang bukan Non AMP.

Bagaimana cara kerja AMP HTML ?

Waktu yang dimuat dalam halaman AMP ini memiliki load kurang dari satu detik, ada beberapa componen yang membuat load halam AMP ini lebih cepat dari biasanya yaitu AMP HTML, AMP Javascript dan AMP Cache.

Terus bagaimana cara kerja pada komponen tersebut nah berikut ini adalah ulasan nya :

1. AMP HTML

Pada AMP HTML ini kerangka pada HTML memiliki aturan yang sangat ketat berbeda dengan Non AMP yang dapat kamu gunakan. Dalam aturan nya format HTML ini tidak diperbolehkan ini sebabnya kenapa halama AMP memiliki loading lebih cepat dari Non AMP. 

Selain itu tag HTML akan diganti dengan tag khusus AMP ini yang disebut denga HTML AMP. 

Cara kerja lainnya yaitu dengan meminimalkan kode CSS menjadi lebih sederhana, bagi kalian yang mengenal HTML modern tentu tidak lah sulit belajar tentang hal ini. 

2. AMP JS

Library AMP JS memastikan agar redering agar mempercepat halaman AMP HTML ini, selain itu agar pemuatan pada halaman seluler menjadi lebih cepat dari biasanya selain itu AMP juga membatasi penggunaan Javscript apapun.

AMP JS ini membuat daya sumber eksternal menjadi singkron jadi tidak ada halaman yang dapat memblokir apapun dari redering ini. Selain itu JS AMP ini membuat membuat perhitungan tata letak pada setiap element halaman sebelum dimuat agar tidak menjadi lamabat. 

3. AMP Chache

AMP Chache ini adalah jaringan pengirimana yang berupa proxy untuk mengirim dokumen yang valid, cara kerjanya ini dimana Chache mengambil AMP HTML kemudian menyimpan nya, kemudian meningkatkan halaman secara otomatis. 

AMP Chache ini dilengkapi sistem validasi dimana mengonfirmasi kalau halaman tersebut berfungsi, ini juga bertujuan agar halaman yang dimuat tidak membuat halaman menjadi lambat. 

Kelebihan dan Kekurangan AMP

Ada beberapa kekurangan dan kelebihan yang dimiliki oleh Google AMP Ini, apa aja itu berikut ini adalah kekurangan dan kelebihan Google AMP.

Kelebihan Google AMP

• Gratis, kamu bisa menggunakan Google AMP secara gratis tanpa harus mengeluarkan biaya sepeser pun
• Meningkatkan User Exsperiense, dengan loading cepat tentu membuat semakin nyaman
• Otomatis Optimasi Website, dengan memakai Google AMP maka otomatis diotimasi salah satunya adalah gambar
• Meringatkan Beban Server, Karena data - data disimpan oleh Google Chache maka server tidak akan di bebani
• Meningkatkan Konversi, beberapa riset membuktikan bahwa meningkatkan konversi 20%

Kekurangan Google AMP

• Banyak Widget Yang Tidak Berfungsi, karena membuat website menjadi minimalis maka banyak widget yang tidak berfungsi
• Mengurangi Pendapat Iklan, kalau ini tidak begitu apabila bisa optimalkan maka hasilnya akan sama
• Tampilan Sangat Minimalis, karena mengurangi beberapa element maka membuat website menjadi minimalis. 
• Javascript Banyak Yang Tidak Berjalan, dengan adanya Javascript maka membuat beberapa tidak bisa berjalan. 

Nah itulah penjelasan dari mimin mengenai Google AMP, yang dimana ada beberapa kekurangan dan kelebihan yang dimiliki. Apa ada yang ditanyakan langsung aja melalui kolom komentar di bawah ini.