Cara redirect 404 Cara redirect 404 page di blogger - kali ini saya akan share tutorial cara redirect halaman error kehalaman lain, dimana dengan menggunakan metode ini akan banyak keuntungan didapat, tergantung cara penggunaannya. Metode redirect halaman error atau yang lebih tepat dibilang 404 page redirect kali ini menggunakan dua opsi yang langsung di jalankan. Opsi yang pertama dengan menggunakan perintah javascript, dan yang kedua menggunakan element html <meta> . Kode xml Blogger : Metode 1 Untuk metode yang pertama ini menggunakan Tag Conditional Blogger yang baru untuk halaman error page < b:if cond = 'data:view.isError' > < script > window .location.href= "https://example.com/" ; </ script > < meta content = '0;url=https://example.com/' http-equiv = 'refresh' /> </ b:if > Metode 2 Untuk metode yang kedua ini menggunakan Tag Conditional Blogger yang lama untuk halaman error page...

Baca selengkapnya

Tutorial CSS - perbedaan padding dan margin Perbedaan padding dan margin pada css, tutorial kali ini kita akan membahas tutorial ringan mengenai apa perbedaan padding dan margin pada css. Padding digunakan untuk memberikan ruang pada element yang membungkusnya atau memberikan ketebalan bidang element, sedangkan margin digunakan untuk memberikan ruang antara element satu dengan yang lainnya. Artikel ini sengaja saya buat karena adanya pencarian yang masuk di blog ini dengan keyword perbedaan padding dan margin. Ilustrasi ringan untuk memahami perbedaan padding dan margin adalah, anda mempunyai rumah yang ada pagarnya, nah padding itu ibarat jarak antara pagar dengan rumah anda. Sedangkan ilustrasi untuk margin adalah anda mempunyai tetangga dan antara rumah anda dengan rumah tetangga anda mempunyai selokan sebagai pembatas, nah selokan tersebut adalah kiasan untuk margin. Sudah pahamkan apa perbedaan padding dengan margin, jika belum paham silahkan dibaca lagi dari awal. Jika kura...

Baca selengkapnya

Cara membuat seleksi teks otomatis dengan metode double click - kali ini kita akan mempelajari tutorial tentang bagaimana membuat seleksi teks otomatis. Tutorial kali ini kita akan menggunakan cara metode double click atau klik dua kali pada teks yang sudah disetting sebelumnya. Metode seleksi teks otomatis pada tutorial kali ini penggunaannya menggunakan javascript. Mengapa menggunakan double click atau klik 2 kali, karena dengan menggunakan cara ini akan memudahkan user atau pengunjung/pembaca artikel dalam melakukan seleksi sebuah teks. Kenapa tidak menggunakan one click atau satu kali klik, karena tidak semua pembaca artikel suka dengan metode satu kali klik otomatis terseleksi, misal anda pengunjung blog hanya ingin menyeleksi bagian bagian tertentu saja pada teks atau code yang anda buat Contoh 1 Javascript Kode var TargetSeleksi = document .querySelectorAll( "pre,blockquote,i,code" ); for ( var i = 0 ; i < TargetSeleksi.length; i++) { TargetSelek...

Baca selengkapnya

Tutorial HTML <nav> HTML nav Tag - belajar html nav. Element nav digunakan sebagai navigasi atau arah berupa teks link, baik itu link keluar dari halaman yang ada ataupun berupa link dihalaman yang ada, intinya sebagai penunjuk arah atau navigasi. Contoh yang biasa digunakan adalah navigasi menu , next dan previous artikel dan Tombol navigasi page berupa nomor atau angka. Table of contents Tutorial HTML <nav> Contoh HTML <nav> Contoh 2 HTML <nav> Contoh 3 HTML <nav> Global Attributes Event Attributes Browser Support Desktop Mobile Default CSS Html nav dalam peletakannya bisa diletakkan di mana saja asal masih di d...

Baca selengkapnya

Tutorial HTML <meter> HTML meter Tag - belajar html meter, element meter mempunyai definisi sebagai pengukur skala dari sebuah hasil atau pencapaian dengan rentang yang diketahui. Element <meter> diperuntukan untuk skala penilaian atau pencapaian yang telah berlangsung, misal : penilaian rata-rata sebuah kegiatan yang sudah di ketahui hasilnya, nilai kinerja pegawai bulan sebelumnya dan lain sebagainya. Html <meter> tidak diperuntukan untuk menilai dari proses yang sedang berlangsung, karena dianjurkan menggunakan element html <progress> . Attribute HTML <meter> form Menentukan target dari <form> dengan mengeksekusi ID Contoh : < h3 > Hasil pemenang kejuaraan bulan lalu adalah </ h3 > < p > Andi : Juara 1 < meter form = "form1" min = "0" max = "3" value = "3" > </ meter > </ p > < p > Budi : Juara 2 < meter form = "form1" min = ...

Baca selengkapnya

Tutorial Cara Membuat Pop-Up Search Box Membuat Pop-Up Search Box - kali ini kita akan belajar bagaimana cara membuat Pop-Up untuk kotak pencarian atau biasa disebut Search Box. Tutorial kali ini menampilkan Search Box dengan metode Klik fungsi pada element Nah dapat dilihat pada contoh gambar diatas, kurang lebih seperti itulah hasil tutorial kali ini. Oke langsung pada inti cara membuat Pop-Up kotak pencarian. HTML < span id = 'btn_seacrh' onclick = 'open_search();' > KLIK AKU </ span > < div class = 'conteainer-search' id = 'conteainer-search' > < div class = 'position_mode_form' id = 'position_mode_form' > < span id = 'search_close' onclick = 'close_search();' > X </ span > < form action = '/search' id = 'search-form' method = 'get' > < input class = 'input_text_search' id = 'input_text_sear...

Baca selengkapnya

Teks berputar menggunakan css3 HTML < div class = 'rotate-box' > < div class = "rotate-box-body" > < div class = "rotate" > TRIKSONIC </ div > </ div > </ div > CSS .rotate-box { background : black; position : relative; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; text-align : center; padding : 15px ; perspective : 400px ; height : 300px ; } .rotate-box .rotate-box-body { position : absolute; top : 0 ; left : 0 ; bottom : 0 ; right : 0 ; } .rotate-box .rotate-box-body .rotate { position : relative; top : 25% ; font-family : cursive; font-size : 65px ; color : #f1f1f1 ; text-shadow : 3px 4px #c1c1c1 ; text-transform : uppercase; font-weight : bold; animation-name : rotate; animation-timing-function : linear; animation-iteration-count : infinite; animation-duration : 10s ; margin : 35px ...

Baca selengkapnya

Cara membuat slideshow sederhana kali ini saya ingin berbagi tentang konsep sederhana dalam pembuatan sebuah slideshow. Tutorial membuat slideshow kali ini merupakan kerangka yang sangat simple mudah di modifikasi, dan sangat ringan karena penggunaan javascriptnya relative kecil. Konsep HTML : < div class = 'container' > < div class = 'slider active' > < h2 > Kontent 1 </ h2 > </ div > < div class = 'slider demo' > < h2 > Kontent 2 </ h2 > </ div > < div class = 'slider' > < h2 > Kontent 3 </ h2 > </ div > < div class = 'slider demo' > < h2 > Kontent 4 </ h2 > </ div > </ div > Konsep CSS : .slider { display : none; border : 1px solid #bdbdbd ; border-radius : 5px ; -moz-border-radius : 5px ; -webkit-border-radius : 5px ; background : #e0e0e0 ; ...

Baca selengkapnya