Author: Ahmad Dahlan

  • Google Adsense – Keyword Volume dan CPC dalam Menaksir Penghasilan GA

    Google Adsense – Keyword Volume dan CPC dalam Menaksir Penghasilan GA

    Matamu.NET – Ada banya tools dan website yang bisa digunakan untuk mengetahui Keyword search Volume dan CPC Bid dari sebuah website. Tools ini biasanya dikategorikan sebagai Search Engine Optimization tools (SEO), seperti Semrush, AhRef, Keywoordtool.io dan lain-lain.

    Tujuan penggunaan tool ini ada beragam, seperti mengintip bancklik situs lain, mengetahui kualitas Page dan Domain situs lain, Menelusuri Kata kunci (keyword) dan mengitung nilai cpc dari Keyword.

    Mari kita bahas dua outputnya saja yakni Kewyord Volume dan CPC. Kita ambil contoh hasil analasis Keyword dari Semruhs :

    Hasil Analsisi Dari Semrush

    Perhatikan kata Ski Jackets! Disana ada informasi Volume : 12.100 dan CPC : 1,93 $. Hal ini berarti kata Ski Jackets 12.100 kali diketikkan dalam sebulan di Search Enggine. Jika situs kamu memenangkan kata kunci ini itu berarti ada 12.100 pengunjung dalam satu bulan di situs hanya untuk kata kunci ini.

    CPC adalah singkatan dari Cost per Click yang artinya artinya adalah taksiran penghasilan yang kamu dapatkan dari iklan yang tayang dari kata kunci ini.

    Mari kita hubungkan dengan aturan Google adsense tentang maksimal klik iklan hanya 20% dari total penampilan. Namun rata-rata CTR yang saya dapat hanya 2 % dari total tayangan. Hal ini tergantung dari penempatan iklan tapi kita pakai 2 % saja. Maka taksiran perhitungan sebagai berikut :

    Penghasilan : 12.100 x 2% x 1,93 $ = 467.06 $.

    Jadi dalam sebulan dari kata kunci ini menghasilkan 467.06 $ dalam sebulan hanya dari kata kunci Ski Jackets saja. Kalau dirupiahkan taksiran penghasilan situs kamu sekitar 6.800.000 rupiah.

    Sangat jarang sih sebuah situs memenangkan hanya satu kanca, biasanya ketika kita memenangkan satu kunci, pada kata kunci turunannya juga ikutan melipir, meskipun tidak di posisi satu tapi kemungkinan untuk ikutan nangkring di laman satu juga besar.

    Perhatikan kata kunci Ski Jakets kembali, disana ada kata kunci turunan Ski Jaket yang juga dicari lebih 5400 kali dalam sebulan. Ada kemungkinan artikel kita juga diakses seteleh seseorang menuliskan kata kunci tersebut.

    Catatan :

    CTR = Click Trough Ratio
    CPC = Cost per Click
    CPM = Cost per Mile
    RPM = Rate per Mile

  • Google Adsense – Daftar Program GA dengan Platform Blogger

    Google Adsense – Daftar Program GA dengan Platform Blogger

    Matamu.NET – Blogger.com adalah platform yang menyediakan layanan membuat website basis CMS. User akan diberikan kesempatan untuk membuat website dengan Bandwith, Storage, dan CDN yang tidak terbatas secara gratis selama tidak melanggar aturan komunitas mereka.

    Membuat Website dengan Blogger.

    1. silahkan logging di Gmail pada browser yang kamu gunakan
    2. masuk ke blogger.com lalu klik buat akun
    3. Buat nama blog, Sesuai dengan keinginan kamu. Namanya sama dengan website lain juga tidak masalah
    4. buat URL parameter yang akan ditampilkan dalam bentuk namadomainkamu.blogspot.com. Url ini harus unik atau tidak boleh sama dengan milik orang lain
    5. Tunggu Beberapa saat dan Blog kamu selesai dan kini sudah bisa diakses oleh orang lain.

    Catatan :

    Jika kamu ingin website kamu terlihat lebih profesional, ada baiknya kamu menyediakan domain TLD seperti .com, .net, .id dan sejenisnya. Setelah itu, redirect url namadomainkamu.blogspot.com ke namadomainkamu.com misalnya.

    Fasilitas re-direct dapat diakses di Setelan > mempublikasikan

    Layanan redirect Domain dari Blogspot ke TLD

    Menyiapkan website

    Sebelum mendaftarkan ke program Google Adsense sebaiknya kita siapkan persyaratan yang harus dipenuhi :

    1. Ganti templete yang kamu gunakan dengan Templete yang valid HTML 5. Sebaiknya gunakan pengembang Templet Profesional seperti Sugeng.ID
    2. Siapkan identitas situs :
      1. About Us – Penjelasan mengenai siapa kamu atau situs kamu
      2. Privacy Policy – Penjelasan mengenai aturan kebijakan yang kamu terapkan di blog kamu. Aturan ini mengikut dengan platform blogger. kamu boleh kok meniru Privacy Policy dari blog orang lain
      3. Disclaimer – Penjelasan seputar hak dna kewajiban yang didapatkan pengunjung selama berada di situs kamu. Sama dengan Privacy Policy kamu bisa meniru dari blog orang lain.
      4. Contact Us – Informasi dan cara menghubungi administrator seperti alamat email atau formulir online.
    3. Perbaiki Navigasi di Blog kamu seperti artikel berdasarkan label lalu dijadikan Navigasi atas, sedangkan Identitas situs dijadikan di bagian footer.
    4. Mulai buat artikel melalui Postingan.

    Catatan :

    Buatlah identitas situs kamu di Laman / Page bukan di Postingan.

    Indetitas Situs dengan Laman Page di Blogger

    Mendaftar Google Adsense

    Setelah melakukan 2 langkah-langkah yang ada di atas berikut ini ada ceklist yang harus kamu pastikan sebelum mendaftar Program Googel Adsense :

    1. Templete sudah valid HTML 5 cek di validator.w3.org
    2. Terdaftar pada Google webmaster dan kirim sitemap .xml
    3. Hubungkan dengan google analitik
    4. Terdapat minimal 10 artikel dengan jumlah kata lebih 500 kata
    5. Tidak ada link mati / error 404
    6. Navigasi Artikel berjalan baik
    7. Identitas situs lengkap dan tampil di setiap laman

    Catatan :

    Jika semua ceklist tersebut terpenuhi, saatnya untuk mendaftar google adsense. Kamu bisa daftar google adsense melalui Dashboard kamu di https://www.google.com/adsense/ atau melalui dashboard blogger :

    Daftar Google Adsense melalui Dashboard

    Silahkan ikut petunjuk yang ada di Google Adsense. Jangan lupa untuk simpan Googel Adsense Publisher Id di Head Templete blogger kamu untuk memudahkan proses verifikasi.

    Jika sudah, silahkan menunggu hasil verifikasi dari tim Google Adsense. Biasanya akan ada pemberitahuan jika website kamu gagal atau lulus paling cepat 3 hari paling lama 14 hari setelah mengajukan daftar program.

    Penting !!! – Selama proses review Google Adsense ada baiknya kamu mem-posting satu artikel setiap hari minimal 300 kata. Ini berdasarkan pengelaman saja sih

  • Google Adsense – Memilih Niche Website

    Google Adsense – Memilih Niche Website

    Matamu.NET – Sebelum membuat website, ada baiknya kita memulai dengan memilih Niche (ceruk pasar) website. Sederhanya, Niche itu berbicara tentang topik utama dari website yang kamu buat. Misalnya Niche Tenokologi, itu artinya situs kamu membahas mengenai seputar gadget, Computer, Laptop, Kamera dan sejenisnya.

    Niche itu menentukan iklan yang tayang di website. Misalnya website kamu adalah website dengan Niche Wisata maka besar kemungkinkan iklan yang tayang adalah iklan hotel, tiket dan hal-hal yang berkaitan dengan perjalanan.

    Uniknya, Iklan-iklan dengan niche tertentu memiliki nilai CPC yang tinggi sehingga sedikit klik saja akan membuat kamu mendapatkan banyak earning.

    Berikut ini urutan Niche Webiste dengan nilai CPC tertinggi di Google Adsense

    Bahasa Inggris

    1. Insurance
    2. Loans
    3. Mortgage
    4. Attorney
    5. Credit
    6. Lawyer
    7. Donate
    8. Deegre
    9. Hosting
    10. Claim

    Bahasa Indonesia

    1. Keuangan
    2. Trading
    3. Home Desain
    4. Wisata
    5. Kesehatan
    6. Tekno
    7. Game
    8. Pendidikan
    9. Berita
    10. Hiburan / Enterteinment

    Pertingan kasarnya seperti ini :

    1. Misalkan CPC Niche Keuangan Rp 1.500 dan Niche Pendidikan Rp. 200.
    2. 10 klik di situs keuangan setara dengan 15.000 rupiah sedangkan di Niche pendidikan sebesar 2.000 rupiah
    Hasil Screenshoot Analisis CPC Website dengan Semrush

    Pertimbangan Memilih Niche

    Kalau bisa memilih Niche yang lebih tinggi kenapa harus yang rendah secara potensi penghasilan lebih besar!

    Memang pernyataan ini tidak ada salahnya dan logis namun misalnya saja kamu mulai membahas tentang keuangan tapi tenyata kamu sekali tidak menegerti tentang keuangan, maka kemungkinan artikel-artikel yang kamu terbitkan akan sulit dipahami oleh pembaca.

    Kamu hanya menerbitkan artikel hasil re-write murni tanpa ada tambahan atau ide yang datang dari pengetahuan kamu sendiri. Dalam kasus ini menulis 20 sampai 30 artikel mungkin belum menjadi masalah, tapi untuk perkembangan website kamu hal ini bakalan menyusahkan.

    Selain itu dimana ada gula di stu akan banyak semut bro. Semua orang yang punya modal besar akan berpikir hal yang sama sehingga Situs-Stius dengan Niche tinggi bakalan diisi sama sesepuh SEO atau perusahaan dengan modal besar.

    Tips saya sih, buatlah Niche yang paling dekat kehidupan kamu sehingga kamu bisa menikmati setiap artikel yang kamu terbitkan. Kejar prestasi saja terlebih dahulu, Uang hanyalah Reward yang kamu dapatkan setelah berprestasi.

    Blog Gado-Gado

    Selain dari Niche tunggal beberapa Blog juga bisa memungkinan dibuat dengan banyak Niche alias Blog Gado-gado. Blog gado-gado ini jauh lebih nyaman sih sebenarnya dimiliki karena kita bisa dengan bebas membuat artikel sesuai dengan mood kita sehingga bakal akan ada banyak artikel yang bisa kita terbitkan.

    Begitu ketemu ide, kita bakalan bahas ide tersebut. Begitu ada yang trend kita akan bahas yang trend tersebut.

    Tapi ada dua kekurangan dari Blog Gado-Gado.

    Pertama – Google menganggap blog ini tidak ditulis secara profesional karena ditulis bukan oleh orang yang punya kompetensi khusus.

    Kedua – nilai CPC nya sangat kecil karena iklan yang muncul bisa random

    Saya sendiri memulai website saya dengan Niche Gado-gado pada tahun 2014 yang lalu. Dan tidak sampai satu tahun sudah ada 800 artikel yang terbit yang artinya sehari saya bisa terbitkan 2 artikel. Penghasilannya juga lumayan cuman jika dibanidngkan dengan teman yang punya Website dengan Niche tunggal hasilnya jauh lebih besar sih. padahal jumlah pengunjung sama.

    Semi Wallpaper

    Selain Niche tungal, sebenarnya jenis website bisa dilihat berdasarkan kecedenrungan menampilkan kontent. Pada umumnya Jenis Webiste tersebut adalah :

    1. Blog Wallpaper – isinya hanya gambar-gambar saja buat didownload dan dijadikan wallpaper
    2. Blog Semi Wallpaper – Isinya gambar-gambar dengan penjelasan singkat (100 sampai 200 kata) mengenai gambar tersebut
    3. Blog Donwload – Blog yang isinya link download film, software, templete dan sejenisnya.

    Sayangnya google sangat membeci dua jenis Blog di atas karena rentang dengan pelanggaran hak Cipta. Sampai hari ini yang masih banyak rekomendasikan adalah Blog Semi Wallpaper dimana Setiap Gambar yang kamu unggah akan dijelaskan dengan keterangan yang teridiri dari 100 sampai 200 kata.

    Keterangan inilah yang membuat content kamu bisa terhindar dari plagiasi jika hanya berisi gambar yang kita sendiri ambil dari internet.

  • Google Adsense – Pengenalan Program GA dan Menghasilkan Uang Online

    Google Adsense – Pengenalan Program GA dan Menghasilkan Uang Online

    Matamu.NET – Google adsense adalah program monetize online content yang kalian miliki dengan platform yang sesuai dengan ketentuan dari Google. Platform yang diizinkan oleh google Adsense adalah :

    1. Website
    2. Channel Youtube
    3. Apk yang diverifisikasi oleh Google Play

    Gampangnya sih gini, kamu punya Website dengan pengunjung. Iklan akan tayang di website kamu. Dari iklan ini google akan membagi biaya iklan yang dibayar oleh pengiklan ke Goole

    Hebatnya lagi kamu bisa mendapatkan 68% persen total biaya yang dibayarkan oleh pengiklan ke Google. Sisanya milik Google.

    Pembagian Hasil Jasa Pengiklan dari Google Adsense

    Siapa saja yang bisa daftar Google Adsense?

    Google adsense memberikan izin akun secara individu dan perusahaan di lebih dari 80 Negara termasuk Indonesia. Jadi kalau kamu adalah Warga negara Indonesia dengan usia lebih dari 17 tahun dan memiliki KTP maka kamu punya kesempatan memiliki akun Google Adsense.

    Buat kalian yang belum 17 tahun, anda tetap bisa mendapatkan akun Google Adsense dengan bantuan Orang dewasa atau orang tua yang membuat data pribadi mereka sebagai pemilik akun.

    Dimana saya bisa mengambil uang hasil Adsense saya?

    Pengelola keuangan Google Adsense paling dekat berada di Singapura, Marine View Lantai 8. Uang yang kalian dapatkan dari Google Adsense akan ditransfer langsung ke Rekening Bank kamu setelah melakukan verifikasi Bank.

    Sampai saat ini saya masih mencairkan saldo adsense menggunakan dua bank, yakni Mandiri dan BNI. Beberapa teman juga menggunakan BCA, BRI dan beberapa bank dalam negeri baik BUMN maupun Swasta.

    Uang akan ditransfer minimal 100 $ atau Rp 1.300.000 di akhir bulan dan akan cari pada akhir bulan. Kebanyakan sih cair dalam rentang tanggal 21 sampai 27 pada bulan berjalan.

    Jika saldo tidak mencukupi pada bulan tersebut, maka saldo tersebut akan disimpan dan diakumulasikan dengan saldo pada bulan berikutnya.

    Bagaimana Skema Menghasilkan Uang Googel Adsense?

    Google adsense mendapatkan melalui pengiklan yang menggunakan jasa Google Adwords. Iklan kemudian ditayakan secara acak dengan parameter-paramater yang telah diatur oleh google agar iklan tayang ke orang yang tepat.

    Anda hanya perlu menyediakan Platform seperti yang website, Channel Youtube atu apk. Setelah itu daftarkan paltform andadi program Google Adsense. Jika lulus review, Iklan akan mulai tayang dan akan dikonversi menjadi uang.

    Dashboard Googel Adsense pakai Dollar

    Apakah Program Google Adsense ini berbayar?

    Tidak, ini pertanyaan paling klasik yang selalu diajukan, tapi jawabannya Googel tidak pernah meminta uang kepada Publisher mereka.

    Apakah yang Harus Saya Siapkan Agar bisa Daftar Google Adsense?

    Dalam artikel ini, kita akan lebih berfokus pada daftar google Adsense melalui paltform Website. Artikel-artikel berikutnya akan membahas mengenai cara dan strategi mendaftar google adsense dan pada tingkat intermediette kita akan membahasa mengenai strategi mengingkatkan penghasilan Google Adsense.

    Kembali ke pertanyaan awal, untuk bisa daftar google adsense, kita cukup punya website yang bisa didaftarkan ke Googel adsense. Saya akan buat dia kategori :

    1. Gratis – Blogger.com
    2. Self-Hosted Website – WordPress.

    Apakah saya harus bisa Coding agar bisa buat Website dan Daftar Google Adsense?

    Jawabannya tidak, sama sekali tidak butuh coding jika cuman pengen punya website dan daftar google adsense. Tugas kita sebagai publisher adalah mengatur dan manage content yang akan kita tampilkan di website.

    Kalau kamu pernah ngerjain tugas mengarang pas lagi belajar Bahasa Indonesia, maka bekal itu sudah cukup untuk belajar menghasilkan uang melalui google adsense.

    Tapi kalau pengen mengembangkan keterampilan di dunia Website, memahami coding itu perlu.

    Akhir Kata

    Nah itu dulu sekumpulan Pertanyaan Mengenai Program Google Adsense. Jika ada pertanyaan silahkan ajukan di kolom komentar atau DM di Instagram @ahmadzargon.

  • Belajar HTML – Memasukkan Image dengan Tag IMG

    Belajar HTML – Memasukkan Image dengan Tag IMG

    Matamu.NET – Foto atau Image dapat digunakan untuk meningkatkan tampilan dari sebuah laman HTML. Gambar bisa dimasukkan ke dalam document HTML dengan tag <img> dengan syntax sebagi berikut :

    <img src="url gambar" alt="Tittle Gambar">

    Tag ini tidak perlu ditutup dengan penutup </img> sebagaimana lazimnya penggunaan tag pada HTML.

    src adalah alamat dari gambar yang disimpan. Alamat gambar bisa disimpan dalam folder lokal dan dipanggil dengan syntax :

    <img src="C://my document/picture/nama file gambar.jpg" alt="Tittle Gambar">

    Jika ditaruh dalam sebuah server atau website maka syntaxnya sebagai berikut :

    <img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar">
    Contoh tampilan Image dengan tag igm di HTML

    A. Ukuran Tampilan Gambar

    File foto / image di komputer disimpan dalam satu px atau Pixel, namun kita menampilkan gambar di HTML berbeda dengan ukuran aslinya. Tujuannya agar lebih cantik atau sesuai dengan kebutuhan kita.

    Untuk mengganti ukuran gambar kita tambahkan atributte style pada gambar.

    <img src="https://matamu.net/wp-content/uploads/2021/04/Membuat-website-Fotografi-keren-murah-dan-gratis.jpg" alt="Tittle Gambar" style="width:400px; height:200px;">

    Hasilnya gambar akan ditampilan dengan ukuran fix yakni lebar 400 px dan tinggi 200 px. ukuran gambar tidak sesuai dengan propostional gambar asli, maka gambar akan ditampilkan stretch (tertarik)

    Tampilan gambar dengan tag HTML img dan value fix satuan px

    B. Floating

    Floating digunakan untuk membuat penampilan lebih menarik di mana gambar akan berada di suatu sisi dari paragraf, misalnya sisi kiri, tengah atau kakan.

    Contoh penggunaan tag IMG dengan style floating
    <h2>Image Size</h2>
    
    <p> <img src="img_girl.jpg" alt="Girl in a jacket" style="float:left;width:66px;height:88px;">
    Tulis paragrafinya disini... </p>
    

    Perhatikan bahwa tag <img> adalah bagian dari tag <p>.

    C. Background dengan Image

    Kita bisa menjadikan sebuah gambar menjadi background laman. Caranya dengan meletakkan informasi tersebut dalam CSS dari laman dengan syntax berikut :

    <style>
    body {
      background-image: url('example_img_girl.jpg');
    }
    </style>

    Secara dafault, HTML akan memasukkan gambar sebagai background, jika gambar berukuran kecil, maka gambar akan diulang (repeat) sampai laman terpenuhi, seperti pada gambar di bawah ini!

    Default tag IMG akan mengulang gambar jika ukurannya terlalu kecil

    Untuk membuat gambar tidak berulang kita berikat attribute no.repeat. Agar fit dengan ukuran layar kita tambahkan attributte attachment fix dengan syntax seperti berikut :

    <style>
    body {
      background-image: url('img_girl.jpg');
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover;
    }
    </style>

    hasilnya akan terliaht seperti gambar di bawah :

    Contoh penggunaan tag IMG di gambar
  • Belajar HTML – Color Value dan Spesifikasi Warna

    Belajar HTML – Color Value dan Spesifikasi Warna

    Matamu.NET – Warna pada HTML akan membuat laman website kamu semakin menarik dan meningkatkan user experience. Warna bisa diberikan pada bagian background laman, elemen dan font.

    Pewarnaan dalam HTML dapat dilakukan dengan format RGB, HEX, HSL, RGBA, dan HSLA.

    A. Color Name

    Code HTML untuk Value color paling dasar adalah nama warna itu sendiri dalam Bahasa Inggris. Misalnya warna merah (255,0,0) itu bisa dipanggil dengan Red, sedangkan biru (0,0,255) bisa dipanggil dengan Blue.

    Contoh penggunaan warna dasar yang dikenali oleh Library HTML sebagai berikut :

    Contoh Penggunaan Warna dengan Code HTML

    Jika ingin mencoba pada, silahkan gunakan sintax berikut :

    <h1 style="background-color:Tomato; color:white; text-align:center;">Tomato</h1>

    Perhatikan kata Tomato, Violet, LigthGray, StateBlue, Gray, MediumSeaGreen, Orange, dan DodgerBlue. Kata tersebut adalah Color value yang dikenal oleh HTML. Paling tidak ada 140 nama warna yang dikenal oleh HTML. Untuk lebih detailnya silahkan cek w3.org atau di w3School.com

    Contoh Code Warna HTML value dengan NAma

    B. Color Background

    Color Background dapat diberikan ke dalam elemen dan laman.

    1. Text Color Background

    Untuk memberikan latar belakang warna pada tulisan dapat dilakukan melalui pemberian attribute seperti background-color=value. Contoh Syntax seperti berikut :

    <h1 style="background-color:DodgerBlue;">Penggunan Warna</h1>
    
    <p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. </p>

    Hasilnya sebagai berikut :

    Penggunaan Warna

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. 

    2. Text Color

    Pemberian warna pada huruf di text diberikan melalui attribute style dengan syntax sebagai berikut :

    <p style="color:red;">Hello World</p>
    <p style="color:green;">Lorem ipsum...</p>
    <p style="color:blue;">Ut wisi enim...</p>

    Hasilnya sebagai berikut :

    Hello Word
    Lorem Ipsum…
    Ut wisi enim

    C. Color Value

    Seperti yang telah dijelaskan sebelumnya jika Warna dalam HTML bisa ditulis dalam format RGB, HEX, HSL, RGBA, dan HSLA. Untuk valuenya dapat dilakukan dengan syntax sebagi berikut :

    1. RGB syntax : rgb(255, 99, 71)
    2. HEX syntax : #ff6347
    3. HSL syntax : hsl(9, 100%, 64%)

    1. HTML RGB

    HTML RGB itu mengenali warna berdasarkan nilai dari masing-masing warna Red, Green, dan Blue. Masing-masing warna dapat dibagi ke dalam 255 warna, 0 berarti tidak ada warna dan 255 berarti warna merah penuh.

    Misalkan kita menuliskan value sebagai berikut :

    color : rgb (255,0,0)

    Hal ini menunjukkan warna merah 255, green 0 dan blue 0. Sehingga warna yang muncul adalah Merah. Jika kita mencapurkan warna Red dan Green kita akan mendapatkan warna Yellow. Ingat!!! yang dicampurkan ini adalah panjang gelombangnya bukan berdasarkan pandangan seni (zat kiminya)

    Sintax untuk mencampurkan warna Red dan Green ditulis dengan :

    color : rgb (255,255,0)

    Warna hitam akan muncul jika tidak ada sama sekali warna disana, dan putih akan muncul jika semua warna dimunculkan :

    1. black = rgb (0,0,0)
    2. white = rgb (255,255,255)

    Karena masing-masing warna bisa menampilakn 255 level, maka combinasi warna yang bisa ditampilkan melalui HTML adalah :

    256 x 256 x 256 = 16.777.216 warna.

    Lumayan banyak warna bukan, 16,7 juta warna tentu saja tidak mungkin diberi nama satu-satu persatu. Hal ini yang membuat code RGD jadi penting dalam pewarnaan.

    2. HTML HEX

    Hex adalah singkatan dari Hexadesimal yang memberikan warna berdasarkan indek 6 digit desimal. Syntaxnya dimulai dari # lalu diikuti 6 angka.

    #53,23,21

    Secara umum indeks hex dapat diterjemahkan sebagai berikut #RRGGBB, dimana RR mewakili Red, GG mewakili Blue, dan BB mewakili Blue.

    Misalkan #430000, maka code hex ini menunjukkan warna merah 43. Untuk warna dasar penuh dituliskan dengan code ff. Misalkan code #00ff00, ini menunjukkan warna Green 255 di RGB karena Red dan Blue-nya kosong.

  • Belajar HTML – Formatting Pada Text

    Belajar HTML – Formatting Pada Text

    Matamu.NET – Pembuatan paragraf (text) di HTML hampir sama aturan membuat paragraf dalam penulisan buku. Kita membutuhkan format text yang berbeda untuk menunjukkan tanda-tanda dalam tulisan.

    Misalkan untuk menulis istilah yang masih dalam bahasa asing, maka istilah tersebut ditulis miring. Tulisan miring ini yang disebut sebagai format text italic.

    Seperti text dibawah ini :

    Ini adalah penulisan dengan text polos dimana semua huruf dalam paragraf ini dibuat seragam dan biasa saja. Hal ini tentu saja membatasi kerja kita dengan HTML.Ini adalah text dengan format yang lebih banyak yang dirancang sesuai kebutuhan seperti italic, bold, dan underline. Tujuannya agar lebih informatif

    Formating text di HTML dilakukan dengan menggunakan fasilitas tag format. Syntax-nya sebagai berikut : <tagformat> kata kata </tagformat>

    Tag Format TextHasil yang ditunjukkan
    <b>bold</b>Bold
    <i>italic</i>italic
    <u>underline</u>underline
    <strong>Strong</strong>Strong
    A<sup>Supscripe</sup>ASupscripe
    A<sub>Subscripe</sub>ASubscripe
    <del>Tercoret</del>Tercoret
    <mark>Mark stabilo</mark>Mark stabilo
    <pre>praformat seperti code</pre>
    praformat seperti code

    Sintaks untuk penggunaan Format Text lebih dari satu dilakukan dengan aturan nested tapi tidak memperdulikan order-nya seperti :

    <b><i><u>bold, italic dan uderline</u></i></b>bold, italic dan uderline
    <u><b><i>bold, italic dan uderline</i></b></u>bold, italic dan uderline

    Catatan :

    Dalam beberapa kasus, Format text mungkin saja menunjukkan hal yang sama dari segi visualisasi seperti

    Tag Format TextHasil yang ditunjukkan
    <b>bold</b>Bold
    <strong>Strong</strong>Strong
    <i>Italic</i>italic
    <em>empashis</em>empashis

    Meskipun secara visual beda, search enggine yang membaca struktur document HTML dari setiap postingan akan mengenali perbedaan dari masing-masing text formatting.

  • Belajar HTML – Membuat Jendela dengan Tag Iframe

    Belajar HTML – Membuat Jendela dengan Tag Iframe

    Matamu.NET – Tag Iframe HTML digunakan untuk memasukkan laman website ke dalam sebuah laman website. Laman website tersebut akan ditampilkan dalam bentuk jendela yang melekat pada laman. Sumbernya bisa berasal dari laman website sendiri maupun laman website lain.

    A. Syntax Iframe HTML

    Inline frame ditulis dengan tag <iframe>. Syntax Ifram ditulis dengan urutan sebagai berikut :

    <iframe src="url" title="description">

    Secara default Elemen HTML ini menampilkan laman dari link yang menjadi target. Kita dapat mengatur ukuran box Iframe dengan attribute width (lebar) dan height (tinggi).

    Contoh Syntax dari Iframe dengan attribute Height dan Witdh sebagai berikut :

    <iframe src="url" height="200" width="300" title="Iframe Example"></iframe>

    atau syntax bisa dimasukkan ke dalam style dengan syntax sebagai berikut :

    <iframe src="url" style="height:200px; width:300px;" title="Iframe Example"></iframe>

    Catata : Karena Style lebih tinggi dari CSS, maka menulsikan ukuran box ifram dengan style akan mencegah box tersebut dienterupsi oleh CSS. Jika langusng ditulis dalam bentuk attributte, maka attribute tersebut akan dienterupsi css.

    Responsive Size

    Value dari attribute height dan width di Iframe bisa dimasukkan ke dalam bentuk fix yakni px atau responsive. Responsive itu berarti ukurannya mengikuti ukuran device yang digunakan dengan value %.

    <iframe src="url" style="height:200px; width:100%;" title="Iframe Example"></iframe>

    Catatan :

    Iframe ini banyak digunakan untuk memasukkan fitur yang tidak bisa disediakan pada pada website anda seperti memasukkan URL video dari Youtube.

    Membuat Source pemutar Video cukup berat apalagi pengguna VPS speksifikasi rendah. Jadi kita gunakan saja YouTube sebagai tempat penyimpanan dan pemutar Video, lalu masukkan Video tersebut dengan Tag Iframe.

  • Review – Satu Minggu Bersama Macbook Pro M1 13 Inci

    Review – Satu Minggu Bersama Macbook Pro M1 13 Inci

    Matamu.NET – Kali ini saya ingin berbagi cerita setelah seminggu membeli Laptop terbaru dari Apple, Macbook Pro 13″ M1 2020. Sebelumnya, saya adalah pengguna Macbook Pro 13″ keluaran Mid 2012 yang dibeli tahun 2015 silam.

    Setelah digunakan kurang lebih 6 tahun, Laptop tersebut mengalami Gangguan Over Heating, terutama sejak ganti OS ke Mojave. Hasilnya layarnya mati total dan harus ganti layar. Setelah ganti layar di tukang Service dekat rumah, Akhirnya bisa menyala, namuan namanya juga Layar IPS KW, meskipun harganya sampai 2 jutaan lebih, warna yang dikeluarkan tidaklah secemerlang warna aslinya.

    Parahnya lagi, Hue warnanya bergeser, jadi warna biru yang terlihat di layar IPS KW nya tidaklah biru. Selain itu mata jadi lebih perih jika bekerja lama dengan Laptop tersebut.

    Oh iya buat kalian yang baru pnya niat membeli Laptop Macbook, ini sekedar informasi saja biar tidak bingung. Apple menaruh informasi tahun pembuatan setiap Laptop mereka yang tidak bisa dihilangkan. Misalnay Laptop Edisi tahun 2012, itu artinya pertama kali dibuat tahun 2012, jadi ada kemungkinan dibelinya tidak tahun 2012, mungkin tahun 2015 seperti saya.

    Harga dan SPEK Macbook Pro 2020

    Jadi saya membeli laptop ini kira-kira kamis 8 April 2020 di M3 Gallery, salah satu distributor remis Apple di Indonesia, selain IBox.

    Sebelum berangkat ke sana sih, sebenarnya saya sudah diskusi dengan teman-teman penggunan Apple dan juga melihat beberapa Review tentang Macbook Pro M1 ini, tapi reviewnya terlalu Normatif, hanya menonjolkan sisi unggulnya saja.

    Saya sendiri kepikiran sebenarnya kok, bisa Apple memilih untuk mengembangkan Prosesor M1 dan menggeser posisi Porsesor Intel dan GPU Intel Hd yang selama ini setia menemai Mac di setiap Edisi, Sejak edisi 2009, 2010, 2011, 2012, 2014, 2015, 2017, 2019 bahkan sampai eraly 2020 itu Mac masih menggunakan prosesor Intel Core I5 1,4 GHz 6 Core loh.

    Keunikan pertama yang bisa ditemukan di M1 ini adalah Proses CPU dan GPU dikelolah oleh satu Chip Set yakni Chip Set M1. Nah menurut pandangan awam saya sih, logika sederhana, kalau ada satu chip set yang mengelola dua pekerjaan, pasti kerjanya semakin berat. Semakin berat pekerjaannya, semakin tinggi suhunya.

    Hal ini jadi pertimbangan mengepa di setiap perdebatan mengenai Macbook Pro M1 dan Macbook Pro Intel, saya selalu ada di pihak Intel, sedangkan teman saya yang Fanboy-nya Apple selau berada di sisi M1, dengan alasan

    Apple tidak mungkin melakukan perubahan drastis tanpa ada pertimbangan yang matang. Selama ini semua perubahan yang dibawa selalu mengingkatkan User Experience selama menggunakan Apple.

    Benar juga sih, Selama ini Updating Mac OS dan perangkat Os selalu meningkatkan kenyamanan pengguna, kecuali dua hal. Keryboard di Macbook tahun 2017, 2019 dan Mac OS Mojave. Gak mau deh komentar terlalu banyak. soalnya saya juga masih pengguna Mac OS garis berat,

    Sebagai perbandingan berikut ini perbedaan speksifikasi fisis dari dua versi Macbook ini.

    M1 Processor (Dual Port)Intel Processor (Dual Port)
    CPU1,1 GHz (8 Core)1,4 GHz (6 Core)
    GPUTanpa Keterangan1500 GB Intel HD
    RAM8 GB 2133 Hz8 GB 2133 Hz
    Storage256 GB 256 GB
    LayarIPS 2560 x 1600IPS 2560 x 1600
    HargaRp. 21.499.000Rp. 19.999.000

    Nah pada awalnya sih saya jalan dari rumah menuju Me Gallery ini tujuan membeli Macbook dengan Processor Intel, tapi entah mengapa kalimat simpel dari Salesnya membuat saya membeli Versi M1.

    Pak, Versi M1 itu jauh lebih cepat dibanidngkan dengan Intel Pak, lagian ini generasi teranyar dan beda harganya cuman beda 1,5 juta loh pak.

    Memang sebelumnya saya sempat baca review Apple dan Intel “saling serang” mengenai siapa yang lebih cepat dan Appel dengan bangganya menunjukkan kinerja M1 mereka jauh lebih cept dibandingkan produk sekelas dengan intel, selain itu Apple menklaim M1 jauh lebih hemat energy dibanidng processor keluaran intel.

    Dan jadih deh saya boyong Macbook Pro M1 13 Inci tahun 2020 pulang ke rumah. Dijalana itu memang ada sedikit penyesalan sih, membeli barang yang tidak sesuai dengan tujuan utama ketika meninggalkan dari rumah. Tapi Veris Update itu selalu lebih unggul dari sebelumnya, mungkin cukup baik untuk menutupi kegembiraan hatiku.

    Judge it By Its Cover!!!

    Memang sih ada pepatan meangatakan jika Don’t Judge Book by It Cover!, Tapi kali ini saya tidak setuju kalau ditrepkan ke Gadget, Cover dari Gadget itu adalah bagian penting dari Pengalaman Penggunaannnya (User Experience).

    Tampilan yang baik itu akan membuat nyaman selama menggunakannya. Seperti pada seri-seri Macbook sebelumnya. Desain dan pemilihan bahan dari Apple memang tidak pernah mengecewakan.

    Logam yang digunakan memiliki teksture yang nyaman dikulit, selain itu deisan kompak dan minimalis membuat mata benar-benar hanya tertuju pada layar. Hal ini membuat rasa pada saat bekerja semakin nyaman.

    Pokoknya kalau berbicara mengenai tampilan dari Macbook itu, Versi M1 ini sudah meneruskan kebiasan leluhurnya, selalu menawan dan elegan.

    Teksture dari Macbook Pro M1

    Keyboard yang Nyaman

    Sebagai seorang Blogger yang tidak terkenal (infamous Blogger) atau sebut saja Blogger wanna be, tentu saja saya akan banyak bekerja menggunakan Keyboard dan Mouse, jadi unsur ini sangat penting untuk dipertimbangkan saat membeli Laptop baru.

    Macbook peernah melakukan Blunder dengan papan ketik tipe Butterfly di Macbook seri-seri tahun 2017 dan 2019. Saya sendiri pernah meminjam perangkat Macbook Pro 2017 teman untuk beberapa lama. Saya merasa akward pada saat mengetik dengan menggunakan Keyboard karena sangat sulit untuk membedakan apakah huruf sudah terketik atau tidak. Pasalnya motion papan ketiknya sangat lembut dan nyaris tidak terasa.

    Papan keyborad tersebut sempat jadi kontroversi dan banyak pihak yang menganggap Apple melakukan blunder besar dengan papan ketik tersebut. Setelah itu, Apple mengganti papan ketik mereka dengan tipe Magic Keyboard. Kalau diminta pendapat sih, Keyborad lumayan nyaman dengan tipikal Tracking pad yang terasa nyata. Setiap ketukan terasa dan membuat PD pada saat mengetik.

    Retina Display yang Ciamik

    Sebenarnya saya sih saya mau menjelaskan aspek tehnis dari sisi layar sepertu Resolusi Layar yang sampai 2560 x 1600 x dengan kedalama warna P3 yang konon jumlah warnanya lebih 25% lebih banyak dibandingkan dengan sRGB, tapi apakah itu penting?

    Kalau menurut kalian penting, sebaiknya kunjungi situs resmi Apple seperti iBox. Disana ada informasi penting mengenai spesifikasi fisis dari Perangkat yang melekat pada M1.

    Saya cuman mencoba memebrikan Review dari sisi pengalaman menggunakan Laptop M1.

    Meskipun baru satu minggu dari sisi layar sih saya merasa sangat puas dengan produk Apple yang satu ini. Cahaya yang dikeluarkan sangat lembut sampai membuat mata saya merasa nyaman bekerja sampai 10 jam di depan Laptop dengan waktu isntrihata yang pendek.

    Jangan tanya berapa minus dari mata saya, karena keseringan berlama-lama di depan Laptop. Tapi dengan M1 ini saya merasa lebih nyaman bekerja berlama-lama ria di depan Laptop.

    Ada satu fitur yang saya belum konfirmasi, apakah fitu ini memang ada atau tidak di Macbook, tapi saya merasa jika layar dari M1 ini dinamis dimana tone colornya akan berubah sesuai dengan keadaan sekitar. Saya merasa kadang tone colornya kuning tai beberapa saat berubah lagi jadi biru. Perubahannya itu tergantung dari kondisi cahaya di sekitar saya.

    Tapi ini belum saya konfirmasi dan lagi malas baca sih apakah memang ada atau tidak. Soalnya informasi seputar M1 di internet itu kebanyakan hanya re-Write saja dari situs luar. bahkan situs berita raksasa pun melakukan hal yang sama, jadinya kesel juga waktu cari-cari seputar Review Macbook M1.

    Baterai dan Kinerja

    Nah ininih satu hal yang satu ini saya sangat senang dari M1, dingah kesibukan saya menggunakan Laptop untuk Blogging, M1 ini memiliki kemampuan yang super handal dalam energy. Pasalnya sayang menggunakan Laptop ini hampir setiap hari selama sepekan dengan waktu penggunaan rata-rata 10 jam sehari.

    Hasilnya Cirlce countnya masih 3 kali, Yup saya baru nge charge Laptop ini sebanyak tiga kali dengan penggunaan sekitar 50 jam.

    Sebagai bahan perbandingan, saya menggunakan sambil online dengan browser Chrome, membuka WordPress, mengetik, mendengarkan lagu melalui Youtube dan menggunakan Magic Mouse 2. Cukup hemat bukan?

    Masalah kinerja, jangan salah. Saya belum merasakan kendala sama sekali dengan M1 ini dari sisi kinerja prosesor. Belum lagi Body macboonya benar-benar dingin saat dipakai. Tidak terdengar bunyi kipas dan jauh banget deh dari kata “Over Heat”.

    Memang sih belum digunakan buat Render file berat dan saya edit fotonya masih menggunakan aplikasi editor foto online, Photopea.

    Penyesalan pertama

    Tak ada gading yang tak retak dan tak ada prodak yang sempurna, Apalagi kalau produknya masih baru seperti M1. Sebagaimana masalah pada Gadget baru pada umumnya. Lingkungan yang baik masih kurang mendukung Macbook Pro M1, terutama dari sisi Software.

    Sebut saja Softwa-software flamboyan buat kerja seperti Microsoft Office belum didukung perangkat ini alias M1 tidak bisa menjalankan program kantoran ini. Alasannya adalah Biner Logic dari prosesor M1 itu sangat berbeda dengan Intel.

    Dan sebagaimana yang kita ketahui bersama jika semua produk Macbook sebelumnya selalu dibenamkan dengan Proccessor milik Intel, jadi wajar dong kalau Lingkungan sangat mendukung. Hampir semua developer Software dengan senang hati mengembangkan produk untuk MacOS instead of Windows OS.

    Sebagai pendatang baru, M1 ini sepertinya masih kurang didukung oleh lingkungan yang sehat. Pasalnya Software sekelas Microsoft Office saja belum bisa dijalankan secara Native di perangkat ini.

    Salah satu solusi yang ditawarkan Appel adalah menginstall Rosetta sebuah Applikasi yang mentranslate Software yang dikembangkan agar bisa berlajan dengan Processor Apple Silicon alias M1. Tapi jadinya mereka tidak berjalan secara Native jadi wajar saja jika terkadang kita temukan beberapa Bug dan Crash padahal tidak digunakan untuk kerja berat.

    Photoshop oh Photoshop

    Salah satu software andalan saya saat bekerja adalah Software-software keluaran Adobe seperti Photoshop dan Adobe Ilustrator. Nah ini bencana bagi saya pada saat mau menginstall Photoshop. Ternyata sampai hari ini Photoshop belum bisa berjalan Native di M1.

    Setelah cek situs dari Photoshop, ternyata Photoshop baru menyediakan Versi Beta untuk M1, hal ini berbeda dengan software-software sederhana yang bisa dengan cepat di trasnlate dan dikembangkan for M1, seperti Google Chrome for M1.

    Hanya saja yang melegakan setelah mengunjungi Adobe, mereka sedang bekerja keras menyiapkan Photoshop bisa berjalan Native di M1.

    Do’a saya sih semoga versinya masih sama dengan yang ada di Intel, biar gak pelru beli lisensi lagi. Kalau beda, jangan-jangan kita harus bayar lisensi baru lagi untuk menggunakan Photoshop.

  • Belajar HTML – Cara Membuat Link dan Hyperlink

    Belajar HTML – Cara Membuat Link dan Hyperlink

    Matamu.NET – Link dalam HTML disebut sebagai Hyperlink yakni fasilitas yang bisa membuat kamu berpindah ke laman lain setelah mengklik text yang sudah berisi link.

    Tujuannya tentu saja untuk memudahkan pembaca mendapatkan ifnormasi lebih yang berkaitan dengan artikel yang mereka baca. Selain itu pada beberapa kasus, Link bisa dimanfaatkan untu menghubungkan satu lama dengan laman lain.

    Syntaks HyperLink

    Link di HTML diset dengan tag <a> dengan bentuk sintaks : <a href=”url”>link text</a>.

    Contoh penulisan link about us di situs matamu.net dilakukan dengan syntax berikut :

    <a href="https://matamu.net/about-us>about us</a>

    Attribute Target dari Link

    Secara default sebuah link akan membuka laman target yang dituju. Misalkan pada kasu about us di atas, ketika di klik akan ke laman About Us dari matamu.Net.

    Link dapada diisi dengan 4 jenis atributte :

    • _self – Set dafault dimana laman akan dibuka di Tab yang sama ketika diklik.
    • _blank – Laman Target akan dibuka di tab atau jendela baru
    • _parent – Laman target akan terbuka di frame induk
    • _top – laman target akan di buka secara menyeluruh di jendela.

    Contoh penggunaan Atribute :

    <a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

    Absolute dan Relative Link

    Absolut link adalah link dengan tipikal yang menuliskan seluruh alamat yang dituju lengkpa dengan protocol linknya. Seperti https://ahmaddahlan.Net/tentang-saya. Tipe link bisa digunakan baik keluar website maupun ke dalam website itu sendiri.

    Relative link hanya dapat digunakan untuk laman atau file target yang ada di dalam file blok server website yang sama.

    Conoth penggunaannya

    <h4>Absolute URLs</h4>
    <p><a href="https://ahmaddahlan.Net/tentang-saya">Tentang Saya</a></p>
    <p><a href="https://www.google.com/">Google</a></p>
    
    <h4>Relative URLs</h4>
    <p><a href="/tag/html">Artikel HTML</a></p>

    Hasil nya jika dijalankan di website seperti berikut ini

    Absolute URLs

    Tentang saya

    Googel

    Relative URLs

    Artikel HTML

    Link dengan Target Gambar

    Link juga digunakan untuk menampilkan gambar dalam website, baik sumber dari internal maupun eksternal wesbite. Hanya saja dengan tag <img>.

    Contoh Penggunannya sebagai berikut :

    <a href="default.asp">
    <img src="https://matamu.net/wp-content/uploads/2021/04/Pengertian-Exposure-pada-Foto.jpg" alt="Pemandangan" style="width:100%;">
    </a>
    Contoh Penggunaan Link di HTML