Halaman

    Social Items

Home / Search results for percepat-loading-blog
Showing posts sorted by relevance for query percepat-loading-blog. Sort by date Show all posts
Showing posts sorted by relevance for query percepat-loading-blog. Sort by date Show all posts
Membuat Search Bar Melayang Responsive Pure CSS Cara Membuat Search Bar Melayang Responsive Pure CSS

Dalam upaya untuk menciptakan tampilan web atau blog yang menarik banyak hal yang dilakukan oleh blogger, termasuk dengan memakai banyak sekali widget, script, Popup hidangan dan sebagainya. Hal ini lumrah dilakukan oleh Blogger.

Bergeser pada kurun ini ada hal lain yang penting untuk diperhatikan oleh para blogger, ialah loading blog atau web itu sendiri. Sekeren apapun tampilan dari website/blog tersebut, kalau loading nya lambat maka pengunungpun niscaya akan pergi. Inilah yang menjadi point penting bagi kami.

Bagaimanapun caranya seorang blogger harus menciptakan tampilan website/blognya menarik diwaktu yang bersamaan juga memiliki loading yang cepat. Salah satu solusinya yakni dengan memaksimalkan penggunaan CSS pada blog. Pada postingan ini kami akan memperlihatkan tutorial cara menciptakan hidangan atau tools yang keren hanya bermodalkan CSS dan Html sebagai pemanggilnya.

Baca Juga : Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS
Tutorial bab pertama akan di mulai dari navigasi blog berupa tombol search, Search box yakni salah satu elemen UI yang paling penting yang harus ada di setiap website/blog. Layaknya google, penggunaan Search box pada blog memudahkan pengguna (pengunjung) untuk menemukan konten yang spesifik dalam sebuah blog. Penempatannya pun harus gampang terlihat dan dijangkau oleh pengguna.

Skenario

Dalam tutorial ini kita akan menyembunyikan kolom search (untuk menghemat ruang) dan menampilkannya dengan perintah Show Hide dengan skenario menyerupai dibawah ini:

  1. Tombol search diklik
  2. Kotak Pencarian muncul
  3. Jika pengunjung klik bab luar dari Kotak Pencarian, maka Kotak Pencarian otomatis akan disembunyikan.

Skenario diatas akan sangat gampang dijalankan kalau memakai Javacript, ada sedikit trik yang akan kita gunakan untuk menjalankan skenario diatas hanya dengan memakai CSS.

:focus selector dan <label>

Kunci dari trik ini yakni memakai CSS selector :focus dan tag html <label>

  1. Label : Berfungsi untuk memanggil search box atau input search pada web, sehabis itu
  2. :focus : Selector CSS dipakai untuk memanggil efek show/hide nya.

Live demo nya sanggup Anda temukan pada blog ini, silahkan klik tombol search pada bab kanan atas. Untuk demo dengan style lain Anda sanggup lihat pada halaman di bawah ini:

DemoDownload

Tutorial

Silahkan masukkan arahan css dibawah ini kebagian CSS pada website/blog Anda, untuk pengguna Blogger.com silahkan masuk ke tab Temma > Edit HTML kemudian cari tag <style> atau <style type='text/css'> dan letakkan arahan di bawah ini kedalam bab tag tersebut:

 /* Search Demo */ #search-form #search-containerin{display: block;width: 100%;position: fixed;top: 38%;left: 0;z-index: 20;padding: 20px 11%;margin-top: -100%;font-size: 30px;font-family: Lato,sans-serif;text-align: center;outline: 0;border: 0;color: #fff;background: transparent;opacity: 0;transition: all 0.3s ease-in-out}   #search-form .search-close{display: block;width: 100%;height: 100%;background: rgba(0,0,0,.6);position: fixed;top: 0;left: 0;z-index: 19;text-align: center;visibility: hidden;opacity: 0;transition: all 0.3s ease-in-out} #search-form .search-close span{bottom: 0;width: 100%;position: absolute;left: 0} #search-form .search-close span i{color: #fff;padding: 7.5px;display: block;font-size: 18px;font-style: normal;width: 40px;height: 40px;text-align: center;background: #414141;border-radius: 50%;cursor: pointer;margin: 0 auto -100%;transition: all 0.3s ease-in-out} #search-form #search-containerin:focus, #search-containerin:focus + .search-close{visibility: visible;opacity: 1;margin: 0} #search-form #search-containerin:focus + .search-close span i{margin: 0 auto 20px} .iSearch{display: inline-block;width: 55px;height: 55px;float: right;text-align: center;cursor: pointer} /* Ini yakni arahan css untuk tombol search */ .iSearch svg{width: 20px;height: 20px;display: inline-block;vertical-align: middle;position: relative;top: 15px}

Ini yakni arahan standar search box yang terdapat pada blogger, kalau sebelumnya sudah ada arahan serupa di blog Anda maka hanya perlu menghapus dan menggantinya dengan arahan HTML ini. Kami memakai SVG sebagai icon search-nya Anda sanggup menggantinya dengan Font-awesome atau font icon bawaan dari blog Anda. ubah goresan pena berwarna putih sesuai harapan Anda kalau perlu

 <form expr:action='data:blog.homepageUrl + &quot;search&quot;' id='search-form' method='get'>   <input id='search-containerin' name='q' placeholder='Tulis dan tekan Enter...' type='text'/>   <label class='search-close'><span><i>X</i></span></label> </form>  // Masukkan arahan <label> dibawah ini di bab yang gampang dijangkau oleh pengguna  <label class='iSearch' for='search-containerin'><svg viewBox='0 0 16 16'><path class='path1' d='M15.504 13.616l-3.79-3.223c-0.392-0.353-0.811-0.514-1.149-0.499 0.895-1.048 1.435-2.407 1.435-3.893 0-3.314-2.686-6-6-6s-6 2.686-6 6 2.686 6 6 6c1.486 0 2.845-0.54 3.893-1.435-0.016 0.338 0.146 0.757 0.499 1.149l3.223 3.79c0.552 0.613 1.453 0.665 2.003 0.115s0.498-1.452-0.115-2.003zM6 10c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z'></path></svg></label>

Penjelasan CSS:

  • #search-containerin : Input atau kolom pencarian dibentuk melayang terlebih dahulu dengan menuliskan position: fixed;top: 40%;left: 0;, dan input disembunyikan dengan perintah opacity: 0. Tak lupa memperlihatkan efek smooth atau halus saat kolom tampil, arahan CSSnya yakni : transition:all 0.3s ease-in-out yang artinya yakni efek transisi akan ditampilkan selama 0.3 detik
  • .search-close : Ini yakni arahan CSS untuk menampilkan background pada kolom pencarian saat input di klik, perintahnya hampir sama dengan #search-containerin
  • .search-close span : Merupakan CSS untuk menampilkan tombol 'hilangkan/hide kolom pencarian', lebar dan tingginya diatur dengan ukuran 40px
  • #search-containerin:focus : Kode utama yang menjadi kunci untuk menampilkan fungsi ini, saat form pencarian di klik (dengan proteksi <label>) maka fungsi show hide search box akan otomatis muncul

Jika kesulitan menerapkannya di blog Anda silahkan bertanya di kolom komentar.

Cara Menciptakan Search Kafe Melayang Responsive Pure Css

CSS merupakan salah satu bab pengatur komponen penting yang harus ada dalam sebuah blog Percepat Loading Blog Dengan Memaksimalkan Penggunaan CSS

CSS merupakan salah satu bab pengatur komponen penting yang harus ada dalam sebuah blog/website berbasis HTML atau XHTML, kalau Html berfungsi sebagai pemanggil maka CSS yakni penyusun tampilan layoutnya.

Semua elemen yang ada dalam blog/website ditentukan oleh CSS dari segi warna, background, posisi, ukuran, jenis font dan sebagainya. Bisa dikatakan keduanya (Html + CSS) mempunyai keterkaitan satu sama lain.

Jika hanya Html saja tidak akan cukup untuk menampilkan halaman web, diharapkan CSS untuk memperbaiki tampilan dari Html tersebut. Sebaliknya kalau hanya memakai CSS tanpa (Html sebagai pemanggil) sebuah halaman tidak akan sanggup ditampilkan.
Cascading Style Sheet (CSS) merupakan hukum untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemorgraman. id.wikipedia.org

Alasan Kenapa Harus Meninggalkan Jquery

Lain halnya dengan Jquery, yakni sebuah library javascript yang berisi kumpulan dari banyak sekali fungsi 'siap pakai' untuk memudahkan penulisan isyarat JavaScript.

Tentu sajsa Jquery sangat mempunyai kegunaan tapi kalau dibandingkan dengan User Experience (UX) dari sebuah web maka alangkah baiknya kalau Anda harus meninggalkan Jquery alasannya yakni kuat jelek terhadap UX dan SEO, dari segi UX Jquery memperlambat loading blog/website dan dari segi SEO menghambat proses rendering oleh robot search enggine.

Walaupun ada cara untuk menciptakan Jquery tidak menghambat SEO namun terkadang hal ini menciptakan Jquery tidak bekerja sepenuhnya pada sebuah halaman web dan berimbas pada UX dari web tersebut. No more Jquery!

CSS Setara Jquery

Bagaimana cara menciptakan tampilan (fungsi/efek keren) tanpa Jquery?

Setelah dirilisnya CSS3 sanggup kami katakan CSS hampir setara dengan Jquery untuk menampilkan imbas Show Hide, Pop Up, Smooth Scroll dan sebagainya.

Banyak yang belum mengetahui bahwa CSS sudah melebihi ekspektas dari yang awalnya hanya mengatur layout, background dan sebagainya, hingga kini sudah menjadi sebuah komponen yang serbaguna.

Jika ditangan yang sempurna dengan sumbangan HTML sebagai pemanggil, CSS sanggup menciptakan banyak sekali fungsi dan imbas khusus untuk memaksimalkan tampilan blog/website. Percaya atau tidak, tampilan dan beberapa fungsi dari web blog ini hanya dibangun dengan CSS.

Lantas Bagaimana Caranya?

Hal inilah yang akan dibahas dan kami beberkan caranya di artikel ini dan artikel-artikel selanjutnya.

Memaksimalkan penggunaan CSS

1. Compress CSS

Pertama perkecil ukuran CSS pada blog/websie Anda dengan cara menyatukan semuanya dalam satu baris menyerupai pola dibawah:

 div {   display: table;   position: relative;   padding: 20px 0; } h1 {   display: block;   margin-bottom: 20px;   font-size: 25px; }

Gabung semua artibut CSS kedalam satu baris menjadi:

 div {display: table;position: relative;padding: 20px 0;} h1 {display: block;margin-bottom: 20px;font-size: 25px;}


Jika Anda sudah expert atau mahir memakai CSS sanggup menggabungkan semua isyarat dalam satu baris menyerupai dibawah ini:

 div{display:table;position:relative;padding:20px 0;}h1{display:block;margin-bottom:20px;font-size:25px;}

2. Gunakan CSS Selector

Bagian kedua inilah yang menjadi kunci untuk menciptakan fungsi khusus yang setara dengan Javascript hanya dengan memakai CSS. Pada artikel W3Schools.com terdapat sekitar 55 Selector CSS, namun yang akan dijelaskan disini hanya beberapa Selector penting yang jarang dipakai namun punya tugas penting dalam CSS:

  1. div > p - Berfungsi untuk menentukan semua elemen <p> yang hanya turunan eksklusif dari <div>. Berbeda dengan penulisan div p, penulisan menyerupai ini menentukan semua elemen <p> yang terdapat dalam <div> tanpa perduli baik itu turunan eksklusif atau bukan, silahkan perhatikan misalnya pada laman ini
  2. div + p - Digunakan untuk menentukan elemen <p> yang ditempatkan sempurna sehabis isyarat <div>, tidak akan berfungsi kalau diantara <div> dan <p> terdapat isyarat Html lain, pola penempatan yang memenuhi syarat yakni sebagai berikut:

     <div></div> <p>Isi teks halaman</p> <!-- Elemen <p> sempurna berada di bawah <div> -->

    div + p Tidak akan berfungsi kalau penulisannya menyerupai ini:

     <div></div> <h2>Contoh Heading</h2> <p>Isi teks halaman</p>

  3. [attribute=value] - Hanya menentukan elemen dengan atribut yang sudah ditentukan, sebagai pola Kami menuliskan isyarat CSS dan html dibawah ini:

     <style> p[style='display:block'] {background: #ea6d23;} </style>  <p>Isi teks halaman</p> <p style='display:block'>Kode CSS diatas hanya akan bekerja pada <p> baris ini yang di beri atribut style='display:block' </p>

  4. :checked - Kode ini berfungsi untuk input tipe Checkbox atau Radio, dimana kalau input tersebut diklik atau dipilih maka isyarat CSS akan berfungsi. Untuk pola akan ditulis di artikel terpisah
  5. :focus - Biasa dipakai untuk input tipe textbox atau textarea dengan fungsi yang sama yaitu saat input di klik(pengguna menuliskan sesuatu didalam input) barulah isyarat CSS aktif. contoh juga akan menyusul diartikel terpisah

    Penerapan CSS :focus

  6. :target - Kode ini ditunjukkan untuk link yang tertarget. pola jagodesan.com/#header, artinya kalau link semisal (dengan akhiran #header dan sebagainya) di klik makan isyarat CSS akan aktif
  7. :first-of-type - Ditujukan untuk elemen turunan pertama dari jenis yang sama, contoh:

     <style> p:first-of-type {background: #ea6d23;} </style>  <div>   <p>CSS diatas hanya akan berfungsi pada bab ini yang merupakan elemen turunan pertama dari jenisnya, kalau isyarat CSS diubah menjadi p:last-of-type maka isyarat CSS hanya aktif pada <p> paragraf ketiga atau elemen terakhir.</p>   <p>Contoh paragraf kedua</p>   <p>Contoh paragraf ketiga</p> </div>

Dengan bermodal beberapa selector diataslah kami akan menciptakan banyak sekali tutorial menciptakan fungsi web keren hanya dengan CSS. Pada artikel berikutnya kami akan menuliskan tutorial penggunaan Selector CSS untuk menghasilkan fungsi atau imbas keren dengan klarifikasi yang lebih detail.

Referensi : w3schools.com

Percepat Loading Blog Dengan Memaksimalkan Penggunaan Css

Subscribe to: Posts (Atom)