tRikSonic
Tema
Menampilkan konten pada kategori Tutorial

Doraemon Pure CSS - Belajar CSS

Terakhir diperbarui : 11 Juni 2019 - 08.33
Belajar desain sebuah kartun menggunakan html dan css . Pada tutorial ini saya menggunakan kartun doraemon sebagai modelnya. HTML < div class = "doraemon" > < div class = "head" > < div class = "face" > </ div > < div class = "eye-left" > </ div > < div class = "eye-right" > </ div > < div class = "nose" > </ div > < div class = "nose-line" > </ div > < div class = "mustache" > < div class = "left" > </ div > < div class = "right" > </ div > </ div > </ div > < div class = "mouth" > </ div > < div class = "necklace" > < div class = "bell" > < div > </ div > ...
Baca selengkapnya

Cara mengaktifkan dynamic view

Terakhir diperbarui : 22 Januari 2019 - 09.23
Table of contents Cara merubah feed situs Contoh tautan Catatan Alat Untuk mengaktifkan tampilan dinamis pada blog yang digunakan, langkah pertama yang perlu dilakukan adalah mengubah pengaturan Feed postingan menjadi penuh. Cara merubah feed situs masuk ke pengaturan setelan → Lainnya → Feed situs dan rubah Feed postingan Blog menjadi penuh. Tampilan yang disediakan untuk tampilan dinamis adalah sebagai berikut: Klasik ( classic ) Flipcard ( flipcard ) Magazine ( magazine ) Mosaic ( mosaic ) Bilah Samping ( sidebar ) Snapshot ( snapshot ) Timeslide ( timeslide ) Contoh tautan Tanpa custom domain https://----.blogspot.com/ view / snapshot Dengan custom domain https://example.com/ view / snapshot Catatan Penggunaan tampilan dinamis ini hanya diperuntukan kepada pengguna lay...
Baca selengkapnya

Parallax Scrolling Effect Menggunakan CSS

Terakhir diperbarui : 1 Juni 2019 - 02.54
Apa itu Parallax Dikutip dari Wikipedia bahasa Indonesia, ensiklopedia bebas. Paralaks , atau lebih tepatnya paralaks gerak (bahasa Yunani: παραλλαγή (parallagé) ) adalah perubahan kedudukan sudut dari dua titik diam, relatif satu sama lain, sebagaimana yang diamati oleh seorang pengamat yang bergerak. Secara sederhana, paralaks merupakan pergeseran yang tampak dari suatu objek (titik 1) terhadap latar belakang (titik 2) yang disebabkan oleh perubahan posisi pengamat. Sumber dan penjelasan lebih lengkap : https://id.wikipedia.org/wiki/Paralaks Parallax biasanya digunakan pada bagian atas dari konten HTML atau biasa disebut konten header , dan juga biasa digunakan pada konten block agar memberikan tampilan lebih. Contoh HTML < div class = 'parallax parallax-1' > < header class = 'header' > < h1 > hello world </ h1 > </ header > </ div > Contoh CSS .parallax-1 { height : 100vh ; background : #333 ur...
Baca selengkapnya

Menghapus Attribut XML Blogger dengan Tag b:attr

Terakhir diperbarui : 3 Januari 2019 - 19.19
Cara menghapus attribut pada XML blogger Tutorial Ringan dan simpel berikut adalah bagaimana cara menghapus sebuah attribut pada XML blogger dengan metode menggunakan tag <b:attr> . Terkait Selengkapnya mengenai b:attr Contoh < html xmlns = 'http://www.w3.org/1999/xhtml' xmlns:b = 'http://www.google.com/2005/gml/b' xmlns:data = 'http://www.google.com/2005/gml/data' xmlns:expr = 'http://www.google.com/2005/gml/expr' > < head > ... </ head > < body > ... </ body > </ html > Bagaimana cara menghapus attribut yang ada pada tag HTML diatas, gunakan tag <b:attr> untuk melakukannya. < b:attr name = '[attribute]' value = '' /> berikan nilai kosong atau tidak ada nilai pada attribut value Contoh Penggunaan < html xmlns = 'http://www.w3.org/1999/xhtml' xmlns:b = 'http://www.google.com/2005/gml/b' xmlns:data = 'h...
Baca selengkapnya

Memuat jQuery dengan metode Async dan Defer

Terakhir diperbarui : 23 Desember 2018 - 06.27
Cara Memuat jQuery.js dengan metode Async dan Defer Tutorial kali ini adalah tentang bagaimana cara menulis jquery kode secara inline, tapi librari jquery nya dimuat secara Asynchronous dan Deferred (Asinkron dan Ditangguhkan). Table of contents Cara Memuat jQuery.js dengan metode Async dan Defer Apa itu jQuery Kenapa menggunakan jQuery Cara Penulisan Library jQuery dengan Async dan Defer Cara menuliskan Library jQuery Cara penulisan kode jQuery pada secara inline pada Halaman HTML Contoh Lengkap Apa itu jQuery jQuery adalah pustaka JavaScript lintas-platform yang didesain untuk menyederhanakan client-side scripting pada HTML. Dewasa ini, jQuery merupakan pustaka JavaScript yang paling po...
Baca selengkapnya

Artikel terbaru berdasarkan Label

Terakhir diperbarui : 23 Mei 2018 - 10.01
Cara memasang widget artikel terbaru berdasarkan label di blogger - kali ini TrikSonic akan share tutorial cara membuat atau memasang widget artikel terbaru berdasarkan label. Tutorial yang saya bagikan kali ini hanya menampilkan judul artikel saja tanpa gambar atau image, jadi akan mengurangi beban pada saat loading page. Javascript dan html : Copy dan pastekan kode berikut pada template atau widget html/javascript, disesuikan dengan keperluan < div id = "artikel-terbaru" > < ol > < script > var jumlahnewpost = 5 ; //jumlah post yang ingin ditampilkan var create = true ; </ script > < script > //<![CDATA[ function showrecentposts ( e ) { for ( var t = 0 ; t < jumlahnewpost; t++) { var r, n = e.feed.entry[t], i = n.title.$t; if (t == e.feed.entry.length) break ; for ( var l = 0 ; l < n.link.length; l++) if ( "alternate" == n.link[l].rel) { ...
Baca selengkapnya