CSS3 – Page 4 – News Today Buffington

Membuat Tab Panel Di Dalam Postingan Blog AMP HTML

Aug 2, 2018

—

by

in AMP, Blogger, CSS3, HTML5, Trik, Tutorial, Widget

Sebenarnya saya sebelumnya sudah membuat tab panel dengan jquery namun tentu saja tidak bisa digunakan pada amp html. Kemudian saya kembali membuat tab panel hanya dengan CSS saja agar bisa digunakan oleh blog amp dan non amp. Dan kini kita akan membuat tab panel khusus untuk blog amp dengan amp-selector. Kita juga akan menambahkan fungsi…

CSS Selector Untuk Elemen Dengan Identitas Khusus

Jul 3, 2018

—

by

Mr Android

in CSS3, HTML5, Tutorial

CSS selector yang akan kita pelajari ini akan bermanfaat ketika kita memberikan gaya pada elemen yang di-inject oleh sebuah script, misal untuk show hide atau dengan kondisi lainnya. Saya yakin, jika Anda sering utak-atik kode template untuk memodifikasi tampilan blog, maka suatu saat Anda akan menemukan sebuah kondisi yang saya maksudkan ini. Misalkan pada sebuah…

CSS Untuk Elemen Yang Berada Di Luar Elemen Lain

Jun 30, 2018

—

by

Mr Android

in CSS3, HTML5, Tutorial

Dalam membuat layout sebuah halaman web, kadang kita menemukan situasi di mana elemen yang menjadi target bukan sebuah anakan atau elemen berada di luar elemen lain atau elemen berada di luar div. Jika kita membuat CSS untuk elemen tersebut tidak tepat, maka style yang kita buat tidak akan berpengaruh pada elemen target. Dan yang saya…

Membuat Kotak Catatan Dengan Tombol Close Di Blog

Jun 15, 2018

—

by

Mr Android

in Blogger, CSS3, HTML5, Trik, Tutorial, Widget

Membuat Kotak Catatan Dengan Tombol Close Di Blog – Kotak catatan dengan tombol close ini seperti yang saya gunakan untuk ucapan selamat Hari Lebaran, atau mungkin akan digunakan untuk hal lainnya ke depan. Post ini saya buat karena beberapa sahabat Kompi meminta dibuatkan cara untuk menampilkan kotak catatan seperti yang saya gunakan. Kotak catatan ini…

Membuat Show Hide Simple Web Chat Dari Tlk.io Untuk AMP Dan Non AMP

May 28, 2018

—

by

Mr Android

in AMP, Blogger, CSS3, HTML5, Javascript, Trik, Tutorial, Widget

Tool chat ini saya temukan dari tlk.io, penggunaannya cukup simple dan tidak perlu mendaftar. Anda hanya perlu membuat channel maka ruang chatting pun telah siap digunakan. Anda tinggal membagikan URL ruang chat Anda ke teman Anda untuk bergabung di dalam ruang chat. Dan widget chat dari talk.io ini pun bisa di-embed di dalam web atau…

Membuat Breadcrumb Microdata Schema.org Dengan Ikon SVG

May 11, 2018

—

by

Mr Android

in Blogger, CSS3, HTML5, SEO, Trik, Tutorial, Widget

Sebenarnya tidak perlu markup apa pun untuk membuat breadcrumb tampil di hasil pencarian, yang penting ada navigasi halaman berupa list. Namun apa pun itu, sebaiknya kita mengimplementasikan sesuatu yang direkomendasikan oleh mesin pencari seperti Google. Salah satunya membuat breadcrumb dengan markup schema.org. Kali ini saya akan membagikan cara membuat breadcrumb untuk Blogger dengan

Widget Recent Comments Disqus Untuk Blog AMP HTML

May 6, 2018

—

by

Mr Android

in AMP, Blogger, CSS3, HTML5, Tutorial, Widget

Widget recent comments Disqus berfungsi untuk menampilkan komentar Disqus terbaru sehingga ini akan lebih memudahkan untuk mengelola komentarnya. Admin blog akan menjadi lebih mudah untuk menjawab pertanyaan-pertanyaan yang diajukan pengunjung pada kolom komentar. Tinggal klik maka akan masuk ke halamannya. Nah kali ini saya akan membagikan sebuah widget recent comments Disqus untuk blog AMP

Cara Memasang Share Button AddThis Dengan Counter Pada Blog AMP

May 3, 2018

—

by

Mr Android

in AMP, Blogger, CSS3, HTML5, Tools, Trik, Tutorial, Widget

Tentu saja ini menjadi sebuah kabar gembira untuk pengguna AMP HTML dengan adanya share button AddThis. Karena dengan ini kini kita bisa menampilkan counter atau jumlah sharing sosial media dengan desain yang eye catching. Share button AddThis pun memberikan kemudahan untuk kustomisasi tombol-tombol share sosmed apa saja yang ingin ditampilkan, termasuk dengan warna, bentuk, dan…

Cara Mudah Show Hide Komentar Blogger Non AMP

Apr 28, 2018

—

by

Mr Android

in Blogger, CSS3, HTML5, Javascript, Trik, Tutorial, Widget

Tutorial ini direquest oleh beberapa sahabat Kompi Ajaib untuk show hide komentar Blogger non AMP. Dan saya buatkan dengan cara yang paling mudah yaitu hanya 1 kali mengganti kode dengan kode yang saya buatkan maka otomatis komentar blog Anda akan menggunakan tombol buka tutup komentar. Langsung saja ya, jika Anda ingin mencoba tombol show hide…

Penggunaan Gambar WebP Pada Postingan Blogger Non AMP HTML

Apr 22, 2018

—

by

Mr Android

in Blogger, CSS3, HTML5, Trik, Tutorial

Dan meskipun kini Blogger belum support untuk upload image webp, tetapi kita bisa mendapatkan dengan mudah gambar webp dari gambar Blogger seperti yang sebelumnya kita bahas pada postingan tentang cara mengkonversi gambar Blogger menjadi WebP untuk amp-img. Dan cara ini juga bisa digunakan pada blog non AMP, namun tentunya kode html yang digunakan berbeda. Pada…

Category: CSS3