ManKoin

Dalam memposting konten banyak yang menggunakan gambar supaya lebih menarik. Atau mungkin menggunakan media gambar sebagai media untuk mempermudah dalam memahami isi artikel. Serta, mungkin juga sebagai media Galery. Seringkali banyak pengunjung blog yang mempratinjau atau memperbesar gambar agar terlihat lebih jelas, terutama gambar yang memiliki bagian-bagian yang detail. Sehingga mereka harus membuka gambar di tab . Dengan menggunakan alat lightbox gambar dapat diperbesar. Ada banyak tutorial untuk membuat lightbox non-amp dan banyak juga plugin untuk membuat lightbox. Di amp project ada tiga jenis komponen lightbox, diantaranya: amp-lightbox , menampilkan elemen html dengan layar penuh. amp-image-lightbox , menampilkan efek lightbox untuk gambar yang telah ditentukan. amp-lightbox-gallery , menampilkan gambar dalam mode galery lightbox. Pengguna dapat beriteraksi untuk melihat-lihat gambar dengan lebih nyaman. Di sini akan membahas tutorial membuat lightbox menggunakan amp-lightbox

Pada artikel sebelumnya yaitu Cara Membuat Gambar di Postingan Blogger Valid AMP menjelaskan cara untuk mengatur gambar postingan supaya valid AMP (amp-img). Serta cara supaya gambar (amp-img) bisa responsive dengan lebar perangkat. Terkait: Cara Menggunakan AMP di Blogger Yang Perlu Diketahui . Serta menjelaskan supaya bisa responsive maka amp-img menggunakan atribut layout="responsive" dan elemen induknya atau yang menampungnya harus diatur lebarnya (dengan menggunakan max-width ). Jadi elemen induk (biasanya dengan atribut class berisi separator) selalu diatur menggunakan CSS. Karena jika tidak, Gambar akan melebar sesuai lebar artikel. Masalahnya jika ukuran lebar gambar kecil maka akan menyebabkan gambar pecah-pecah. Dalam artikel ini membahas cara terbaru untuk membuat amp-img menjadi responsive. Dan cara ini akan lebih mudah digunakan karena tidak perlu mengatur elemen induknya. Jadi lebar amp-img akan menyesuaikan lebar gambar. Jika sebelumnya menggunakan atribut

Sekarang Google memfokuskan konten dengan blog AMP pada pencarian mobile. Salah satunya dengan adanya validasi data terstruktur pada pengujian AMP milik google. Yang tidak valid akan ada " Missing or invalid structured data item " di bagian bawah, bagi yang akun google-nya di setting bahasa indonesia maka akan menggunakan peringatan "Item data terstruktur hilang atau tidak valid". Tapi ketika di cek di pengujian data terstruktur tidak ada error sama sekali. Setelah saya amati ternyata ada yang salah dalam penempatan schema, yang tentunya tidak sesuai pedoman. Tapi bagi yang sering berkunjung di blog kompi ajaib milik kang adhy akan mendapatkan penyelesaian masalah seputar blog. Salah satu contohnya yang dibahas di posting ini. Di blog kompi ajaib dalam Memperbaiki Item Data Terstruktur yang tidak valid menggunakan cara yang agak rumit, lalu bagaimana bagi yang belum terlalu paham dengan kode HTML. Tidak harus mengubah semua struktur data, seperti pada tutorial komp

Umumnya komentar pada blog AMP menggunakan Disqus atau Facebook comment. Awalnya versi mobile blog ini juga menggunakan komentar Facebook, tapi sekarang menggunakan Threaded Comment Blogger yang tentunya sudah di custom valid AMP. Untuk versi dekstop juga ditambahkan fitur komentar Disqus (untuk diskusi). Sama seperti di posting sebelumnya komentar blogger ini menggunakan schema.org dan anti backlink untuk SEO. Schema komentar yang saya temukan hanya ada dua jenis yaitu https://schema.org/UserComments dan https://schema.org/comment. Karena usercomment mencantumkan sebagai cara lama untuk berinteraksi, maka diputuskan untuk menggunakan https://schema.org/comment, itu juga diperkuat lagi dengan digunakan oleh mastah blogger (platform wordpress). Blogger sudah menggunakan tag nofollow untuk setiap anchor link yang ada pada komemtar seperti yang sudah dijelaskan di blog resminya puluh tahun lalu. Tapi bagi saya itu tidak cukup, maka dengan Anti Backlink link apapun yang ada pada komentar a

Sudah lama Adsense merilis fitur iklan otomatis versi AMP. Jika script biasa berfungsi untuk menyelipkan iklan, dan untuk page-level ads (iklan anchor/sticky dan vinyet). Namanya "AMP Auto Ads" berfungsi untuk menyelipkan iklan amp-ad. Setelah melewati status beta/eksperimen, sekarang amp-auto-ads sudah bisa digunakan secara umum. Yang sebelumnya (masih status beta) harus mendapatkan izin dari adsense untuk menggunakannya, tapi sekarang bisa digunakan tanpa menunggu izin. Maaf! ternyata fitur ini masih tahap Eksperimen. Memasang Iklan Otomatis Amp Auto Ads di Blog Setelah amp auto ads berada pada menu: Iklan Saya (my ads) > Iklan otomatis (auto ads) kemudian pilih tab IKLAN OTOMATIS UNTUK AMP (auto ads for amp). Ada tiga langkah, diantaranya: Langkah pertama aktifkan lalu centang "Secara otomatis mendapatkan format baru" untuk menggunakan iklan format baru jika ada iklan format baru. Langkah Kedua, salin kode script auto ad amp lalu letakkan di dalam tag HEAD (an

Sebuah Unit Iklan Billboard Adsense memiliki ukuran yang sangat besar yaitu 970x250 terlalu memakan banyak ruang. Tapi juga memiliki nilai yang cukup tinggi. Tidak ada salahnya jika memasang Unit Iklan Billboard untuk mencoba dan bereksperiment. Karena iklan billboard memiliki ukuran yang besar, maka bisa dipasang tombol open dan close untuk menutup dan membuka iklan, agar jika pengunjung terganggu bisa menutup iklannya. Awalnya teinspirasi dari blog kompi dan mencobanya. Kali ini cara membuatnya dengan tombol show hide untuk blog AMP dan Non AMP yang bisa dipilih. Untuk Tampilannya mirip seperti pada tampilan dekstop blog ini. Jika di tutup iklan akan hilang dan ketika dibuka akan muncul iklan dengan yang baru. Membuat Show Hide Iklan Billboard AMP Bagi yang menggunakan blog amp untuk cara memasang cukup mudah dan tidak terlalu riber. Tombol show hide menggunakan action atau shortcode. Pertama simpan style CSS berikut di style amp-custom . /* Top Banner */.ad-c{text-align: center;p

Ada banyak blog yang sharing tentang cara untuk mendaftar di Google Analytic s dan sekaligus cara memasangnya termasuk juga di platform blogger. Di sini saya tidak membahas cara untuk mendaftarnya tapi membahas soal Penggunaan google analytics di blogger atau bisa juga cara memasangnya di blog khususnya blogger. Sekedar sharing pengalaman . Apa Google Analytics? Sebelum itu apa yang dimaksud dengan Google Analytics. Google Analytics adalah sebuah layanan gratis dari Google yang berfungsi untuk menampilkan statistik pengunjung dari suatu situs web. Seperti menelusuri pengunjung berdasarkan informasi halaman, mesin pencari, iklan, jaringan pay-per-click , email marketing . Jika dimaksudkan bisa berupa data informasi dari kejadian-kejadian suatu situs web. Memasang Google Analytics Dalam memasang Google Analytics di blogger sudah ada opsi untuk meletakkan kode analytics, dan memanggilnya dengan tag kondisional . Tempat meletakkannya berada di menu Setelan kemudian sub Lainnya > scro

Walaupun AMP belum support di blogger, tapi blog AMP bisa dipasang dan digunakan di blogger. Untuk blogger pemula dan yang belum tau coding akan kesulitan untuk pertama kalinya menggunakan AMP di blogger , walaupun sudah ada dan template blogger yang valid AMP. Dan disini akan belajar tentang penggunaan AMP di platform blogger, utamanya hal-hal penting yang harus diketahui pada amp blogger pemula. Penggunaan amp-img SEO Blog AMP tidak support html5 , itu tidak masalah dalam search engine mobile (bisa AMP) maupun dekstop (tidak bisa AMP). Tapi bagaimana dengan element gambar yang merupakan elemen penting pada blog, padahal tidak support html5. Tidak masalah juga karena di w3c validator elemen amp-img tidak termasuk dalam kesalahan, jadi jangan khawatir untuk SEO pada element gambar. Tepatnya amp-img sudah seo dalam hal html5 (valid html5). Dalam Penggunaan Featured Image Gambar utama pada postingan (featured image) bisa di atasi dengan menggunakan tag element <noscript></noscri

Sekarang sudah banyak orang yang menggunakan blog amp . Untuk blogger masih belum support AMP, tapi walau belum support amp Blogger bisa dibuat support amp. Dalam hal related post dan comment sudah di atasi oleh Kang Ismet dan Adhy Suryadi agar support amp dengan menggunakan amp-iframe. Update! sekarang blogger sudah bisa untuk HTTPS pada Custom Domain. Baca dan lihat tutotialnya di Blogger Mendukung Https untuk Custom Domain . Dalam related post kebanyakan hanya menggunakan satu label seperti milik kompiajaib yang menggunakan FeedWind, bahkan saya belum tau untuk yang multi label. Sekarang akan membahas related post dengan label lebih dari satu (multi label) atau berlabel banyak. Kisah pembuatannya Yang ini boleh dilewati!... 😉😏 Dalam pembuatan related post ini awalnya saya hanya mencoba-coba karena saya berfikir bahwa mungkin bisa untuk multi label dan ternyata hasilnya sukses. Dalam hal ini butuh waktu yang sangat lama karena saya juga masih belajar menggunakan javascript. Pertam