Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile

Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile
Bagikan :
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.

Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile

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.

Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile
Search Desain VioMagz

Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile
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://2.bp.blogspot.com/-5Enh5dEJfrk/W_2MwfOlTXI/AAAAAAAAIjI/8wrr6KwjrE89RBTkdlVP8O7lv73G6XueQCLcBGAs/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.

Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile

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.

Jangan lupa untuk Berlangganan update artikel terbaru via email:

2 Responses to "Cara Mendesain Wigdet Search Template VioMagz Mirip seperti Tema Newspaper Versi Mobile"

  1. versi menu nya dong gan sekalian jangan cuma searchnya doang :) yg mobile

    ReplyDelete
  2. Nanti akan saya bagikan!

    ReplyDelete

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel