Langsung ke konten utama

Postingan

Menampilkan postingan dengan label HTML

Buat Tombol Back To Top Efek Bounce

Berikut cara membuat tombol back to top pada website, sanggup di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML. saat kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce. Kode CSS nya: #Back-to-top {     text-align: center;     z-index: 9999;     position: center;     bottom: 70px;     cursor: pointer;     display: none;     opacity: 0.7;     } #Back-to-top:hover {     opacity: 1;     } Pasang script ini di dalam setelah </style> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script> Letakkan kode html ini di body <div id='Back-to-top'> <img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0aHhyphenhyphenWGq9qX3irU5CUSQNd-L_knxACWi1sisyM7Yqg8z2bUkoQVjMKmOR_xk17ohhsQ19XT06UuTD_NqQ9YnusM03iWCReYZEADVZJvbZpRXoB_-Ew8o5fK3FV11fYycgCbLOVJU0RKC/s128/backtotop.png'/&g

Buat Tombol Back To Top Efek Bounce

Berikut cara membuat tombol back to top pada website, sanggup di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML. ketika kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce. Kode CSS nya: #Back-to-top {     text-align: center;     z-index: 9999;     position: center;     bottom: 70px;     cursor: pointer;     display: none;     opacity: 0.7;     } #Back-to-top:hover {     opacity: 1;     } Pasang script ini di dalam sehabis </style> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script> Letakkan aba-aba html ini di body <div id='Back-to-top'> <img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb0aHhyphenhyphenWGq9qX3irU5CUSQNd-L_knxACWi1sisyM7Yqg8z2bUkoQVjMKmOR_xk17ohhsQ19XT06UuTD_NqQ9YnusM03iWCReYZEADVZJvbZpRXoB_-Ew8o5fK3FV11fYycgCbLOVJU0RKC/s128/backtotop.png

Membuat Bullet and Numbering (Daftar Isi) di HTML

Bullet and Numbering mungkin tidak abstrak lagi ditelinga anda yang biasa memakai Microsoft Word. Format yang biasa digunakan untuk menciptakan daftar isi atau list ini bisa juga di gunakan di halaman website/blog. Penggunaanya cukup sederhana, anda hanya perlu mengenal Tag Ordered List (OL) ialah daftar yang berupa angka atau huruf abjad . Sedang untuk menciptakan daftar yang berupa Bullet memakai Tag Unordered List (UL) . Berikut contoh penggunaanya : 1. Contoh Penggunaan Ordered List (Daftar Numbering) <ol> <li>Halaman Utama <li>Profil <li>Galery <li>Kontak Kami </ol> Hasilnya Halaman Utama Profil Galery Kontak Kami Secara default akan muncul modelnya 1,2,3.....dst, tetapi anda bisa juga menciptakan Daftarnya dengan Type yang lain, ialah dengan menambahkan Attribut Type, sebagai contoh : <ol type="A"> <li>Halaman Utama <li>Profil <li>Galery <li>Kontak Kami </ol> Hasilnya Halaman Utama Profil Galery Ko

Spasi, Tab dan Enter Terbaca di Browser

Dalam dokumen HTML penitikberatan tombol Enter,Tab dan Spasi tidak besar lengan berkuasa pada halaman website. Jadi Percuma saja kalau dikala ngedit HTML anda memakai Spasi sebanyak apapun hasil yang terbaca di halaman website hanya 1 spasi, begitu juga penggunaan Tab dan Enter tidak akan besar lengan berkuasa pada tampilan halaman website. Tetapi jikalau anda ingin menambahkan Spasi, Tab atau Enter pada Web/Blog anda maka gunakan tag <pre> isi </pre> , Data yang ada di dalam tag <pre> akan terbaca di halaman website sama persis ibarat yang kita tuliskan. Cobalah Latihan Berikut : <pre> Daftar Nama Blogger Pekalongan ------------------------------------------------------- NAMA Alamat ------------------------------------------------------- Nur Fakhrus Salis Landungsari - Pekalongan Roof-x Cepoko Kuning - Batang Andi Priyanto Tirto - Pekalongan Hendy Hidayat Keputran - Pekalongan Hisyam Slamaran - Pekalongan Sutor

Mengatur Jarak Spasi, Baris, dan Paragraf di HTML

Jika anda memakai Microsoft Word sangat gampang sekali mengatur jarak Spasi, Baris dan Paragraf yaitu hanya dengan klik dan drag, Tetapi di HTML anda harus mengerti aba-aba - aba-aba berikut : &nbsp; yaitu aba-aba untuk memberi jarak spasi antar karakter <br> yaitu tag untuk memberi jarak spasi antar baris <p> yaitu tag untuk menciptakan paragraf <br> dan <p> adalah tag tunggal alasannya tag tersebut berdiri sendiri tanpa tag penutup. Tag <p> mempunyai attribut, salah satunya yaitu align yaitu attribut yang berguna untuk perataan text pada paragraf. Penempatan attribut berada didalam tag, Untuk lebih jelasnya perhatian dan ikuti langkah berikut : 1. Buka Notepad 2. Ketikkan aba-aba berikut : <html> <head><title> Jarak Spasi, Baris dan Paragraf di HTML </title></head> <body> <p align="center"> Saya yaitu orang pekalongan asli, lahir di kelurahan landungsari Rt.02 Rw.01 Kecamatan Pekalongan TI

HTML Gak serumit yang di Bayangkan

Ada yang bilang " Kalo mencar ilmu HTML itu susah, rumit banget harus ngapalin kode - kode, bikin secuil teks dan gambar tapi kodenya seabreg "... Gw Jawab: " Ngapain juga lu susah - susah hidup, kalo harus cari duit cari makan cari pasangan cari temen cari cari cari..... dan paling final cari penyakit aja lu....hehehe ". Kan kini ada Blog yang super instan, yang semua bisa pakai, tanpa orang harus membangun sebuah website tanpa harus tau kode - kode HTML. Tapi menurutku ada baiknya anda juga mengerti wacana HTML walaupun anda sudah terbiasa dengan yang instan. Struktur HTML bekerjsama sangat simple, referensi : <html> <head> <title> Judul Sebuah Website </title> </head> <body> Ini Isi dari sebuah Website artinya semua yang tampil dihalaman website yaitu yang berada didalam tag body. </body> </html> Ok, kembali saya jelaskan secara detail. Sebuah Website kita ibaratkan Seorang Manusia, yang memiliki Kepala, Batan

Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile

Kali ini kita akan menciptakan share button. Padahal kemarin kita sudah menciptakan share button yang tak kalah bagusnya. Tapi tidak problem mungkin yang kemarin kurang bagus,jadi buat yng baru.Share button ini bekerjsama hampir mirip seakan-akan share button yang saya bagikan kemarin yang membedakan yakni share button ini lebih ringan dan lebih kecil serta ramah SEO. Yang pastinya share button ini tidak akan berpengaruh terhadap kecepatan loading blog sobat. Jika loading blog anda cepat maka sesudah memasang share button ini loading blog akan masih akan tetap cepat. Jika loading blog anda lambat maka sesudah memasang share button ini akan tetap lambat. 😄   Share button ini berukuran mini serta support untuk mobile device. Jadi jangan khawatir jikalau pengunjung anda kebanyakan memakai mobile,mereka maih bisa membagikan artikel anda. Untuk lebih lengkapnya,berikut Fitur yang terdapat dalam share button ini  : Responsive Seo Friendly + ada counternya  dll. Lalu

Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo Magz

Memasang Subcription Box Seperti Di Evo Magz Blog - Kotak berlangganan yang sering juga disebut subcription box adalah kotak yang berfungsi sebagai media bagi pengunjung blog yang ingin mengetahui dan berlangganan artikel terbaru di blog kita. Dalam kotak berlangganan biasanya juga berisi pesan acuan biar pengunjung mau berlangganan artikel melalui email. Kotak berlangganan atau subscription box ini bisa kalian letakkan dibawah artikel atau juga disidebar dan footer lantaran adalah memang subsription box ini responsive design serta fungsi aslinya yang terletak dibawah artikel. Kotak berlangganan yang akan kita buat ini saya ambil dari template Evo Magz,pasti tahu kan template Evo Magz. Walaupun subcription box pada template buatan Mas Sugeng tersebut berada dibawah artikel tapi anda bisa meletakkannya di sidebar lantaran adalah responsive. Bagaimana penampakan subcription boxnya? Dibawah adalah penampakannya ↴ Cara Membuat Kotak Berlangganan Evo Magz Langkah 1 Sila

Cara Memasang Sosial Share Button Dengan Counter Dibawah Postingan

Membuat Share Button dengan Counter - Tombol membuatkan atau share button ialah widget yang mempunyai kegunaan untuk memudahkan dalam membuatkan artikel. Share button ini biasanya terhubung dengan media sosial yang dipakai untuk media dalam membagikan artikel. Share button yang bagikan ini bisa tampil di semua device,alias responsive. Sehingga anda tidak perlu mencari tutorial menciptakan share button lain khusus untuk mobile. Bukan hanya responsive ,share button ini juga dilengkapi dengan counter/penghitung. Counter ini akan menghitung berapa kali artikel yang sudah di share jadi anda bisa tahu jumlah share yang ada. Berikut penampakan share button yang akan saya bagikan.👇👇👇 Bagaimana? Tertarik untuk menciptakan share buttonnya,langsung saja berikut langkah-langkah : Membuat Share Button dengan Counter 1. Buka  blogger ,Template ➞ Edit HTML Baca juga : Cara Membuat Share Button Sederhana dan Ringan [Seo Friendly] 2. Salin isyarat berikut kemudian