Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile
RIANSEO.COM - Saya sebagai pengguna blog hosting dari blogspot sangat suka melihat tampilan tema Newspaper untuk platrom Wordpress. Tidak tangung-tangung saya bahkan nekat mau meniru gaya tampilan tema newspaper tersebut agar bisa digunakan di blogspot.
Nah dalam halaman ini, saya hanya ingin membagikan trik singkat buat kamu yang pengin mendesain tema blogger dibagian wigdet search kususnya untuk template VioMagz agar mirip seperti wigdet search tema newspaper.
Wigdet search ini, saya fokoskan tampilannya kebagian versi mobile dimana tampilan wigdet search ini akan kita tambahkan sedikit gambar saat kita klik icon pencarian di template VioMagz.
Untuk lebih jelasnya bisa kamu lihat contoh tampilan wigdet search VioMagz standar versi ponsel seperti contoh gambar dibawah ini.
Maka kita akan ubah sedikit tampilan nya menggunakan gambar dengan meniru gaya desain dari tema newspaper v9 seperti ini contohnya jika di buka lewat ponsel.
 |
| Search Desain VioMagz |
 |
| Search Newspaper |
Langkah pertama, kamu salin dulu kode CSS yang saya sediakan dikolom kotak bawah ini.
#searchfs.open { transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); visibility: visible; } #searchfs:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .98; background: #313b45; background: -moz-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -webkit-gradient(left top,left bottom,color-stop(0%,#313b45),color-stop(100%,#3393b8)); background: -webkit-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -o-linear-gradient(top,#313b45 0%,#3393b8 100%); background: -ms-linear-gradient(top,#313b45 0%,#3393b8 100%); background: linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient(starCol) } #searchfs { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUHSTODjgyfO_g3qn9urePnpO0eAwhw-mME4F5-kQlawPAWqp619iGIwKZTusjCGgIAu5BJWVTPVCxSSUIHXMm0NPtlqeHHE4i8XVQMWKh3rIyegvv9ptPmCtnMrQm8OSN5i-AaAu2Zs/s1600/gengset_3.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top; position: fixed; display: block; width: 100%; height: 113%; z-index: 9999; -webkit-transition: all .5s cubic-bezier(.79,.14,.15,.86); -moz-transition: all .5s cubic-bezier(.79,.14,.15,.86); -o-transition: all .5s cubic-bezier(.79,.14,.15,.86); transition: all .5s cubic-bezier(.79,.14,.15,.86); transform: translate3d(100%,0,0); -webkit-transform: translate3d(100%,0,0); -moz-transform: translate3d(100%,0,0); -ms-transform: translate3d(100%,0,0); -o-transform: translate3d(100%,0,0); visibility: hidden; } #searchfs input[type="search"] { top: 20%; width: 90%; margin-left: 5%; color: rgb(255, 255, 255); background: transparent; border-top: 0px solid rgba(255, 255, 255, .8); border-bottom: 1px solid rgba(255, 255, 255, .5); border-left: 0px solid transparent; border-right: 0px solid transparent; } Lalu silahkan kamu klik Tema > Edit HTML > crtl+f untuk mencari kode @media only screen and (max-width:800px) dan paste kode CSS yang sudah kamu salin tadi dibawahnya. Lihat contoh gambar dibawah ini.
Terakhir tinggal kamu klik Simpan / Save.
Tampilan wigdet search ini hanya akan tampil di versi seluler saja untuk ukuran layar maksimal 800px dan untuk tampilan desktop tetap seperti tampilan versi standarnya untuk template VioMagz.
Dan perlu kamu ingat, trik ini hanya di kususkan bagi kamu pengguna template VioMagz saja, jika untuk template lainnya trik diatas tidak akan bekerja maksimal 100%.
Demikian beberapa trik Desain Web untuk template blogger yang bisa saya bagikan kali ini, jika ada langkah yang kurang kamu pahami silahkan tulis komentar lewat blog rianseo ini.
