Senin, 13 April 2020

Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS

Ubuntu, tidak ada habisnya untuk terus mengoprek sistem operasi ini, sudah gratis dan bebas untuk di kustomisasi. Aku paling suka sama tampilan desktop dari Mac OS, untuk tutorial kali ini aku mau kasih tau cara ubah tampilan ubuntu menjadi tampilan Mac OS yang elegan dan terlihat mewah.

Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS

Oke biar tidak terlalu tegang baca artikelnya, silahkan sambil mendengarkan musik kesukaan kalian :). Jika sudah kita lanjut ke tutorialnya, btw aku sudah pasang tema ini jadi semua gambar tutornya sudah memakai tema Mac OS.

Pertama-tama buka Ubuntu Software (Secara default ada di dock kalian atau bisa cari di dash), kemudian ketik Tweaks pada fitur pencarian.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Tampilan Ubuntu Software

Nantinya akan muncul banyak aplikasi, kalian pilih Gnome Tweaks (karena aku pakai Gnome) lalu klik install.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Pilih GNOME Tweaks

Jika sudah selesai memasang Tweaks, lanjut untuk memasang ekstensi / add-ons. Cari Dash to Dock pada fitur pencarian klik lalu install.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Install Dash to Dock

Kemudian cari ekstensi User Themes di fitur pencarian, klik lalu install.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Install User Themes

Sudah semua di install aplikasi dan ekstensinya, selanjutnya buka Setting.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Buka menu Setting untuk mengatur Dock

Pilih tab Dock, ubah posisi dock ke bawah dengan pilih Bottom pada menu dropdown.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Ubah posisi Dock ke bagian bawah layar

Secara default posisi dock itu ada disebelah kiri layar, setelah diubah posisi dock kalian sudah berada di bawah layar.

Sekarang buka terminal dengan cara tekan CTRL + ALT + T, kemudian ketik perintah sudo add-apt-repository ppa:noobslab/macbuntu untuk menambahkan list repository (masukkan sandi root jika ditanyakan).
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Menambahkan list repository baru

Jika sudah lakukan sudo apt-get update di terminal.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Lakukan update

Install tema Mac OS dengan ketik perintah berikut di terminal sudo apt-get install macbuntu-os-ithemes-v1804, tunggu sampai selesai.

Setelah selesai, install ikon-ikon software yang ada di Mac OS dengan mengetik perintah sudo apt-get install macbuntu-os-icons-v1804 di terminal, tunggu sampai selesai.

Setelah semuanya dipasang, saatnya kita kustomisasi dengan cara buka Tweaks.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Ikon Tweaks

Saatnya mengubah penampilan ubuntu kalian di tab Apperance. Tema, kursor dan ikon yang tadi sudah diinstal sudah bisa kalian pilih di menu ini.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
Kustomisasi Mac OS
Sesuaikan dengan selera kalian ya. Kalau sudah tutup dan restart komputer / laptop kalian.
Mac OS Low Budget : Ubah tampilan Linux Ubuntu menjadi Mac OS
neofetch

Tara, sudah jadi deh Mac OS low budgetnya, gimana cara ubah tampilan Linux Ubuntu menjadi Mac OSnya? susah-susah gampang atau gampang banget nih? kalau ada kesulitan jangan sungkan untuk bertanya di kolom komentar ya :).

Poka! Do vstrechi~
Kucing belajar linux
Read more

Minggu, 05 April 2020

Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu

Halo, apakah kalian pengguna linux? Jika kalian nyasar di artikel ini aku rasa kalian pengguna linux yang belum move on dari aplikasi windows ya :).
Sebenarnya untuk mengedit atau memanipulasi gambar di linux bisa menggunakan aplikasi GIMP, memang fiiturnya tidak selengkap dari Adobe Photoshop (yaiyalah gratis dan berbayar beda jauh). Tapi jika memang ingin hijrah dari windows kalian harus membiasakan menggunakan aplikasi yang ada di linux (walaupun perlahan) dan untuk aplikasi vector di linux mungkin bisa menggunakan Inkscape.

Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu

Cukup basa-basinya ya, sebelum kita memasang Adobe Photoshop dan Adobe Illustrator CS6 kalian harus memasang paket wine terlebih dahulu melalui terminal atau tekan CTRL + ALT + T, kemudian ketik perintah dibawah ini :

Wine

sudo apt install winehq-stable
Setelah selesai lanjut memasang playonlinux, ketik perintah dibawah ini :

PlayOnLinux

sudo apt install playonlinux
Setelah selesai memasang playonlinux, kalian bisa melihat icon playonlinux pada dash ubuntu

Kemudian buka playonlinux dan klik install a program atau bisa klik tanda + Install.
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Icon PLayOnLinux pada dash Ubuntu

Pilih Graphic atau bisa ketik adobe pada kolom pencarian
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Install a Program pada playonlinux

Sebenarnya cara memasang Adobe Photoshop dan Illustrator ini sama, tidak ada bedanya. Aku contohin satu saja ya, saya pilih Adobe Photoshop CS 6 lalu klik tombol install
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Pilih program yang ingin di pasang

Kemudian akan muncul seperti ini, pilih next
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Klik tombol next

Selanjutnya klik tombol Browse dan pilih aplikasi Adobe Photoshop CS6 Portable.exe
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Klik Browse
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Pilih Aplikasinya

Selanjutnya hanya next-next saja sampai selesai, disarankan untuk tersambung ke internet, nantinya playonlinux akan meminta untuk mengunduh berkas tambahan.

Apabila Adobe Photoshop dan Illustratornya berhasil di pasang, akan muncul di daftar aplikasi playonlinux dan dash ubuntu kalian.
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Daftar aplikasi terpasang di playonlinux

Kalian sudah bisa untuk menjalankan aplikasi Photoshop dan Illustratornya deh...
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Tampilan Adobe Photoshop di Linux Ubuntu
Berikut tampilan Adobe Illustrator CS6 yang sudah dipasang
Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu
Tampilan Adobe Illustrator di Linux Ubuntu
Selesai sudah Cara Menginstall Adobe Photoshop dan Adobe Illustrator CS6 di Linux Ubuntu, mudah bukan? jika ada kesulitan tanya di kolom komentar ya. Oh iya aplikasinya ada di kolom komentar :)

Poka! Do vstrechi~
Kucing Linux
Read more

Selasa, 31 Maret 2020

Cara install Wordpress Offline dengan XAMPP di komputer

Hai, apa kabar? lama tidak jumpa. Tetap dirumah saja ya, bantu pemerintah kita untuk menyelesaikan pandemi covid-19 ini.

Buat kalian yang baru memulai blogging atau mau coba ngeblog dilain platform selain blogger seperti yang aku pakai sekarang ini, kalian bisa coba platform Wordpress untuk membuat blog atau website professional. Wordpress bisa dibilang CMS (Content Management System) yang baik untuk saat ini (menurutku sih), kalian bisa bebas custom yang kalian mau. Mau dibuat website corporate, e-commerce maupun website berita / blogging semua bisa dengan platform wordpress (ilmu sotoy :D).

Cara install Wordpress Offline dengan XAMPP di komputer
 
Seperti biasa langsung ke tutorialnya saja, sekarang aku mau kasih tutorial Cara install Wordpress Offline dengan XAMPP di komputer. Dimana kamu bisa mencoba membuat website atau ngeblog offline dirumah tanpa jaringan internet. Fyi, mengapa harus offline tidak langsung online saja? Toh ujungnya pasti akan online juga. Benar sekali semua selera masing-masing, menurutku membuat website, blog dan semacamnya jika belum jadi atau masih tahap awal dan berstatus online saya rasa mubazir. misalnya domain dan hosting kita berjalan tapi website belum jadi, menurutku itu rugi waktu. Maka dari itu kita buat offline dulu jika sudah siap publish langsung di upload deh di hosting. Setelah tutorial ini aku juga akan kasih tau cara untuk meng-onlinekannya.

Oke yang harus kamu siapkan hanya 2, file Wordpress dan Web Server seperti XAMPP, WAMPP, LAMP, dll. Kalian bisa mengunduh file Worpress di website wordpress.org dan XAMPP di apachefriends.org. Males searching? ini aku siapin link dibawah :
  1. Download Wordpress
  2. Download XAMPP
Karena kita pakai XAMPP kalian harus install terlebih dahulu file XAMPP di komputer/laptop. Caranya gampang banget sampai aku tidak buat tutorialnya, cuma klik next sampai akhir, jangan lupa untuk centang semua pilihannya (kalau masih tidak mengerti komen saja di artikel ini ya).

Oke, aku anggap kalian sudah menginstall XAMPP, aku bakal lanjut ke tutor cara install Wordpressnya ya.
  1. Pastikan service apache dan MySQL dalam keadaan start dan hijau ya.
    Xampp dalam keadaan berjalan / start
    Xampp dalam keadaan berjalan / start
  2. Kemudian letakkan file Wordpress yang sudah diunduh sebelumnya ke folder htdocs. Jika kamu tadi menginstall aplikasi XAMPP di drive C berarti ada di C:\xampp\htdocs.
  3. Kemudian extract file Wordpressnya.
    Extract file Wordpress
    Extract file Wordpress
  4. Setelah di extract muncul folder baru dengan nama wordpress, nama folder ini bisa kamu ubah sesuai keinginan atau tetap dengan nama wordpress. Oke sebagai contoh awal tidak aku ubah. Berikut isi dari folder wordpress
    Isi folder wordpress yang telah di extract
    Isi folder wordpress yang telah di extract
  5. Saatnya membuka aplikasi browser kesayangan kalian, kemudian ketik localhost/wordpress di address bar. Nantinya akan tampil seperti gambar dibawah ini, lalu klik tombol Continue.
    Tampilan awal install wordpress
    Tampilan awal install wordpress
  6. Selanjutnya akan menampilan informasi untuk membuat database
    Tampilan kedua install wordpress
    Tampilan kedua install wordpress
  7. Sebelum klik Let's go, kita buat databasenya dulu dengan cara ketik localhost/phpmyadmin di address bar browser.
  8. Klik buat (lihat kotak hijau di gambar) lalu isi nama database (lihat kotak biru di gambar, aku buat dengan nama wordpress_asha. Kalian bisa buat dengan nama yang berbeda atau mau sama juga tidak apa-apa untuk belajar) dan biasanya aku pilih utf8_general_ci lalu klik Buat.
    Membuat database di phpmyadmin
    Membuat database di phpmyadmin
  9. Nah kalian sudah mempunyai database untuk disambungkan ke wordpress.
    Database sudah dibuat
    Database sudah dibuat
  10. Kita lihat langkah nomor 6, klik Let's go dan akan muncul tampilan seperti gambar dibawah ini
    Tampilan ketiga install wordpress
    Tampilan ketiga install wordpress
    Pada kotak merah isikan nama database yang telah kita buat pada tahap 8 dan 9.
    Pada kotak berwarna kuning isikan username dengan root (standar username dari xampp) dan kosongkan password (karena password standarnya kosong alias tidak ada).
    Pada kotak hijau adalah prefix yang fungsinya menyisipkan karakter di depan nama tabel pada database (misalnya ada nama tabel option, jika prefinya wp_ nantinya akan menjadi wp_option), pada kolom prefix bisa kamu ubah atau dibiarkan. Disarankan untuk diubah agar cracker tidak dapat mengubah atau mengambil data pada database yang kalian miliki.
    Lalu klik Submit.
  11. Kemudian klik Run the installation tunggu sampai ke tahap selanjutnya.
    Tampilan keempat install wordpress
    Tampilan keempat install wordpress
  12. Pada tampilan ini sesuaikan dengan web/blog yang mau kalian buat, contohnya bisa kalian lihat pada gambar dibawah ini
    Tampilan kelima install wordpress
    Tampilan kelima install wordpress
    Untuk kolom username dan password kalau bisa diisi yang benar-benar aman ya, biar orang lain susah menebaknya. Kalau sudah semuanya diisi klik Install Wordpress.
  13. Nantinya ada pesan sukses lalu klik tombol login.
    Tampilan keenam install wordpress
    Tampilan keenam install wordpress
  14. Isi username dan password yang telah kamu buat pada tahap 12, lalu klik Login.
    Tampilan ketujuh install wordpress
    Tampilan ketujuh install wordpress
  15. Setelah login kalian akan akan diberikan tampilan dashboard dari wordpress seperti gambar dibawah ini
    Tampilan dashboard wordpress
    Tampilan dashboard wordpress
    Untuk melihat tampilan frontend atau tampilan depan web dari wordpressnya klik Visit site atau bisa langsung mengakses ke localhost/wordpress di address bar sama seperti pada tahap ke 5.
    Tampilan web wordpress yang sudah dibuat
  16. Untuk kembali mengakses kembali ke halaman dashboard, akses melalui localhost/wordpress/wp-admin.
  17. Selesai deh!
Mungkin buat kalian yang awam memang terasa sulit, tapi kalau kalian mau terus mencoba pasti akan mudah dan mengerti dengan sendirinya. Intinya banyak mencari tahu atau bertanya disini, insya Allah pasti aku jawab semampu dan setahu aku.

Oke cukup sampai disini dulu Cara install Wordpress Offline dengan XAMPP di komputer, sampai bertemu di tutorial selanjutnya. Tetap dirumah aja, jaga kesehatan dan kebersihan agar terhindar dari pademi covid-19 ini.

Poka! Do vstrechi~
Kucing Cantik
    Read more

    Selasa, 17 Oktober 2017

    Mencadangkan database mySQL secara otomatis di cPanel

    Halo, maaf banget aku jarang banget ngeblog sekarang. Tapi banyak draft tutor yang belum di publish, ya masih harus banyak yang direvisi agar yang baca ngerti :)

    Bagi kalian yang ngeblognya pake wordpress, joomla atau CMS (Content Management System) lainnya pasti akan menggunakan web hosting sendiri dan mempunyai database. Kecuali kalian pakai blog yang gratis yang tidak memerlukan web hosting (xxxx.wordpress.com, xxxx.blogspot.com, dll).

    Mencadangkan database mySQL secara otomatis di cPanel

    Untuk mengantisipasi hal-hal yang nantinya bisa merugikan diri sendiri, seperti halnya website/blog diretas, database website di acak-acak aku yakin 80% dari kalian lupa dengan hal ini. Yup, lupa mencadangkan (backup) database website/blog. Bagi yang tidak sepenuhnya dengan dunia blognya bisa saja lupa dengan hal tersebut, lalu bagaimana solusinya? Mudah saja, cadangkan secara otomatis. Setidaknya jika ada sesuatu pada databasenya masih ada cadangan yang tersimpan pada cpanel :)

    Kebetulan aku pakai 3 hosting dan sudah mencobanya (Rumah Web, Idwebhost dan Cloud Kilat).

    Mari kita mulai:
    • Masuk ke dalam cPanel.
      Mencadangkan database mySQL secara otomatis di cPanel
      Cron Job pada cPanel (klik untuk memperbesar)
    • Cari Cron Job yang berada pada kategori Advanced.
    • Konfigurasi Cron Job yang akan kita buat :
      Mencadangkan database mySQL secara otomatis di cPanel
      Konfigurasi Cron Job pada cPanel (Klik untuk memperbesar)
      • Ubah email default dari cron job (email akan memberitahu status cron job berhasil atau tidak).
      • Kemudian konfigurasi waktu mencadangkan databasenya, bisa kalian sesuaikan sendiri. Dibawah ini hanya contoh yang aku pakai (aku lebih merekomendasikan tengah malam agar tidak mengganggu aktifitas di jam ramai pengunjung).
      • Masukkan script berikut pada kolom command.
        /usr/bin/mysqldump -uUserLogincPanel -pPasswordcPanel nama_database > /home/user/public_html/sql/backup_db_fay.sql
    • Simpan Cron Job, selesai~

    Sedikit penjelasan pada script diatas :

    1. UserLogincPanel = Masukan user login cPanel (contoh: -ufaynastasya) jangan berikan spasi diantara -u dan nama user login ya.
    2. PasswordcPanel = Masukkan password cPanel (contoh: -pimajinasiasha) jangan berikan spasi diantara -p dan password login ya.
    3.  nama_database = Ubah dengan nama database yang akan di cadangkan (contoh: faynastasya_blog).
    4. /home/user/public_html/sql/backup_db_fay.sql = /user/ diubah dengan nama hosting yang kita punya, biasanya sih sama seperti user login cPanel (contoh: /home/faynastasya/public_html). Untuk /public_html/sql/ bisa diubah sesuai keinginan, public_html hanyalah sebuah folder yang berada pada root home. Kalian bisa mengubah ke folder yang kalian suka. Kemudian backup_db_fay.sql adalah nama baru database yang ingin dicadangkan, kalian bisa mengubah sesuai keinginan (contoh: db_blog.sql).
    Bila masih ada yang kurang jelas, silahkan bertanya dikolom komentar :)

    Poka! Do vstrechi~
    my lovely cat
    Read more

    Senin, 18 September 2017

    Pentingkah Kotak Pencarian Pada Suatu Situs?

    Tidak dipungkiri lagi, bahwa setiap situs wajib memiliki fitur pencarian. Mengapa? Coba kita bayangkan jika kita menjadi pengunjung di sebuah situs. Kita ingin mencari sebuah data atau sebuah artikel, tetapi di situs tersebut tidak terdapat kotak pencarian. Lalu apa yang harus kita lakukan? mencarinya disetiap page? Mungkin beberapa orang akan melakukan hal tersebut, kalau aku sih cukup close tab situs tersebut hehe :p
    Pentingkah Kotak Pencarian Pada Suatu Situs?

    Bermanfaat untuk pengunjung

    Kotak pencarian tidak hanya untuk pemanis desain pada sebuah situs, tapi juga untuk mempermudah pengunjung baru maupun pengunjung tetap untuk menelusuri sebuah situs. Mungkin bagi pengunjung baru belum begitu memperhatikan fitur dari kotak pencarian. Mengapa? pengunjung baru mengakses situs kita dari mesin pencari google atau lainnya, yang langsung membuka artikel pilihannya pada saat mereka klik judul yang ada pada mesin pencari.

    Bagaimana dengan pengunjung lama pada situs kita? Biasanya pengunjung lama yang bisa dibilang pembaca tetap pada situs kita akan mengakses situs kita dengan langsung mengetik nama situs pada address bar perambannya. Lalu apa masalahnya? Ya pasti masalah dong! Setelah mereka datang terus mau ngapain?! ya pasti mau cari sesuatu kan? Jadi kalau tidak ada kotak pencarian mau cari dimana? *Sebel. Bisa saja karena masalah sepele (gak sepele juga sih) ini pengunjung lama jadi tidak betah dan pergi meninggalkan situs kita selamanya (ih sedih banget).

    Solusinya? Pasang kotak pencari di situs kita pastinya. Nah untuk pengguna setia blogger seperti aku ini, aku punya pilihan kotak pencari yang keren untuk kalian.

    Bermanfaat untuk empunya blog 

    Pengunjung akan sering membuka halaman-halaman pada situs kita, menguntungkan? jelas sekali menguntungkan. Saat pengunjung mencari dan mengunjungi halaman tersebut pasti kita dapat page view di halaman tersebut dong? Mungkin jika pengunjung tersebut belum cocok dengan artikel tersebut dia bisa mencarinya kembali pada kotak pencarian pada situs kita. Wow jadi sering dikunjungi jadi semakin ingat ^_^. Lagi pula widget kotak pencarian juga bisa menjadi analisis situs dan SEO  yang baik :).

    Ingat artikel 7 Tips SEO untuk Blogger? Yang sudah baca pasti ingat dengan spider dong? Yups, perangkat lunak canggih yang menelusuri setiap situs dan mengambil informasi data yang ada pada situs. Setiap keyword yang dimasukkan akan menguji frase untuk memastikan konten mengarah ke sesuatu tempat yang dituju.

    Pasang widget custom kotak pencari pada blogger 

    Blogger memang sudah menyediakan widget standarnya, namun kita bisa mengubahnya dengan selera kita. Aku mempunyai 6 style untuk kalian yang mau mengubah kotak pencarian bawaan blogger.

    Kustomisasi Kotak Pencarian Style 1
    Kustomisasi Kotak Pencarian Style 1

    <style type="text/css">
    #searchbox{background:#d8d8d8;border:4px solid #e8e8e8;padding:20px 10px;width:250px}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input{outline:none}
    #searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG4fBvcPVMdJmin4GduZPcozxkyjIbYAQ_5CvapCzMYBn0VDL904SKImoMWEIuwAXfYFhF-oUTODsnoe0dugxAYPdkiUo2nrgEuptyPViwK9Qap4HoEuXr7Jj6tZPcRDeEaE57hEzel1t/s1600/search-dark.png) no-repeat 10px 6px #fff;border-width:1px;border-style:solid;border-color:#fff;font:bold 12px Arial,Helvetica,Sans-serif;color:#bebebe;width:55%;padding:8px 15px 8px 30px}
    #button-submit{background:#6A6F75;border-width:0;padding:9px 0;width:23%;cursor:pointer;font:bold 12px Arial,Helvetica;color:#fff;text-shadow:0 1px 0 #555}
    #button-submit:hover{background:#4f5356}
    #button-submit:active{background:#5b5d60;outline:none}
    #button-submit::-moz-focus-inner{border:0}
    </style>
    
    <form id="searchbox" method="get" action="/search">
    <input name="q" type="text" size="15" placeholder="Type here..." />
    <input id="button-submit" type="submit" value="Search" /></form>
    
    

    Kustomisasi Kotak Pencarian Style 2
    Kustomisasi Kotak Pencarian Style 2

    <style type="text/css">
    #searchbox{width:240px}
    #searchbox input{outline:none}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input[type="text"]{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDG4fBvcPVMdJmin4GduZPcozxkyjIbYAQ_5CvapCzMYBn0VDL904SKImoMWEIuwAXfYFhF-oUTODsnoe0dugxAYPdkiUo2nrgEuptyPViwK9Qap4HoEuXr7Jj6tZPcRDeEaE57hEzel1t/s1600/search-dark.png) no-repeat 10px 13px #f2f2f2;border:2px solid #f2f2f2;font:bold 12px Arial,Helvetica,Sans-serif;color:#6A6F75;width:160px;padding:14px 17px 12px 30px;-webkit-border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;border-radius:5px 0 0 5px;text-shadow:0 2px 3px #fff;-webkit-transition:all 0.7s ease 0s;-moz-transition:all 0.7s ease 0s;-o-transition:all 0.7s ease 0s;transition:all 0.7s ease 0s}
    #searchbox input[type="text"]:focus{background:#f7f7f7;border:2px solid #f7f7f7;width:200px;padding-left:10px}
    #button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigHuFi4I8GkgUU__kfbKEH64AyfQbZrvUJc-cCqOBX3_6_ojl_1Ce-fj_phH2gw9JKAmcW9Uj3xYsSyEHV-HhtbMJeMVrDYFLAFgF3YuEp5API9eXzukaqUspIpxxLUqWB4-48jojvaxpM/s1600/slider-arrow-right.png) no-repeat;margin-left:-40px;border-width:0;width:43px;height:45px}
    </style>
    
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." />
    <input id="button-submit" type="submit" value=" "/></form>
    
    

    Kustomisasi Kotak Pencarian Style 3
    Kustomisasi Kotak Pencarian Style 3

    <style type="text/css">
    #searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpPxPnPaiqTfCaQPz9vWULwUAikqmFKiUftiEWwwvBcjDv8SmIvVOgmt5fP7cjXTdgnARvHLctHr00Xmai0PDGv5DV6KUMNwy1MBune6MTDXlWSy5Xl9E2IVTfNh2ubBqcf6OH253sAecx/s1600/searchbar.png) no-repeat;width:208px;height:29px}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input{outline:none}
    #searchbox input[type="text"]{background:transparent;margin:3px 0 0 20px;padding:5px 0;border-width:0;font-family:"Arial Narrow",Arial,sans-serif;font-size:12px;color:#828282;width:70%;display:inline-table;vertical-align:top}
    #button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhspUIeXLmy9H-FcDiRRYZBjo5XCzG3_ynW2FlhQ5mz4AgRTeYVmM7964SFQNymtcGMMFD074gn9SqwByzCpbwB9xPB1qcQv6yoP_okYdbngBIC8B8xu_kJ60_Uzvu_Y1UiD8zt7sV-jH51/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-left:10px;margin-top:4px;width:21px;height:22px}
    #button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefxwOLrz6Jt5GZ7Q9f0yrhn87zHSGHbHUafmiRkS06xSJMhJ69N8fHB55dNRFriWPo7PGEPfQHC7098lEg3ppB9Ddz4mPchW00_VwDrpNbmEs07PQOOH3mAydSg08gLrW8DcSnbEYZr7L/s1600/magnifier-hover.png) no-repeat}
    #button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefxwOLrz6Jt5GZ7Q9f0yrhn87zHSGHbHUafmiRkS06xSJMhJ69N8fHB55dNRFriWPo7PGEPfQHC7098lEg3ppB9Ddz4mPchW00_VwDrpNbmEs07PQOOH3mAydSg08gLrW8DcSnbEYZr7L/s1600/magnifier-hover.png) no-repeat;outline:none}
    #button-submit::-moz-focus-inner{border:0}
    </style>
    
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
    
    

    Kustomisasi Kotak Pencarian Style 4
    Kustomisasi Kotak Pencarian Style 4

    <style type="text/css">
    #searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwaSVmqxsVQkRrRG0aGe8Fn32pVpuJOKrEE4Eh8Q8XmA2hUTFPYdyCUlmFORIDU_ETNQ5c1zDBa186fILYnSEK8n3zR-K2nVOPyiKdCbZY_0WTe8j4_yuhFFWarT-lYr34bZYdf-DAy1Ui/s1600/search-box.png) no-repeat;height:27px;width:202px}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input{outline:none}
    #searchbox input[type="text"]{background:transparent;margin:0 0 0 12px;padding:5px 0;border-width:0;font:italic 12px "Arial Narrow",Arial,sans-serif;width:77%;color:#828282;display:inline-table;vertical-align:top}
    #button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkXOUrQqajNETOe2FcFLYC5tn0j6x-jPq9tvq0Xo35JjPToMxaHgkzoeLgDIuTg9ATsQEdpJKiAlsT9uMMj2VRXUrIb5noH7EN7ddrtVUIGIc-QM_efKRcnxo5dQPRyi2HvlneEM3klZQ/s1600/search-button.png) no-repeat;border-width:0;cursor:pointer;width:30px;height:25px}
    #button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEsvtTNvwf9cakGcQpu1wvg_JlZRWb0Vh-2blNMmQ6pt0UnH3_noNYf4ZLIOselO6XZJw9yTkzYwDJJU0EAd5e7orXTcqDhb5WTUTpzbEnfQ3sH0GVE-BYPbmSc8HjcykT203qBB5jgsa3/s1600/search-button-hover.png) no-repeat}
    #button-submit::-moz-focus-inner{border:0}
    </style>
    
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="search..." /><input id="button-submit" type="submit" value="" /></form>
    
    

    Kustomisasi Kotak Pencarian Style 5
    Kustomisasi Kotak Pencarian Style 5

    <style type="text/css">
    #searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMo7g1oEwBsR5IWMgXWPD_S5ElInxX9Mqsx8GgTP0w63bDkMr428NDegdWFUizEwkj-6ScITUZtDRDRNX1o5j4Wfd0cV1zkN_iSRoGQBmSp5vU1LLmKUBljn1GIl9Apwc7sSOBDJrIRHGo/s1600/search-box1.png) no-repeat;width:250px;height:65px}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input{outline:none}
    #searchbox input[type="text"]{background:transparent;padding:2px 0 2px 20px;margin:10px 15px 0 0;border-width:0;font:bold 16px "Brush Script MT",cursive;color:#595959;width:65%;display:inline-table;vertical-align:top}
    #button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-E9l0E0LvnEN_VIWgpcFehZgd9SrJBkIKyCyuvl6YIgjagOq_MBQ2PCafUJUZys-GZMyxliK8RvAUIgvXIIAIrOJn2631TVSPp1eWACy0tadqgaA-u4LnvRiUkiENg5D4-h9vinNu_KcG/s1600/magnifier.png) no-repeat;border-width:0;cursor:pointer;margin-top:10px;width:19px;height:25px}
    #button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXrBTMUJE4rK2qYaXEAeRtBCcNges5QWTcqQ-KWvxr0gOBH3TR4CWcaaF098zQzrqHJn030PRTBEFGT7nE4Gz9ljGe44PQ2FfGA6-3CwZC29yZDA0xX76VekFX4-MG5ks0pjj56Tk8tT7/s1600/magnifier-hover.png) no-repeat}
    #button-submit:active{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXrBTMUJE4rK2qYaXEAeRtBCcNges5QWTcqQ-KWvxr0gOBH3TR4CWcaaF098zQzrqHJn030PRTBEFGT7nE4Gz9ljGe44PQ2FfGA6-3CwZC29yZDA0xX76VekFX4-MG5ks0pjj56Tk8tT7/s1600/magnifier-hover.png) no-repeat;outline:none}
    #button-submit::-moz-focus-inner{border:0}
    </style>
    
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input class="textarea" name="q" type="text" size="15" placeholder="Search here..." /><input id="button-submit" type="submit" value="" /></form>
    
    

    Kustomisasi Kotak Pencarian Style 6
    Kustomisasi Kotak Pencarian Style 6

    <style type="text/css">
    #searchbox{width:280px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLxm0p2OvXnZqxTirK9vAFP8fdz_Srh_g7QM79SiD-7rku-V2qhoYrGXyuG90Tr3J28GxRBPdALTsqACQjUySv9MB7GW9z1ChKnwH2iMYlVb8eC089NfJyMuEeduxKVg67yg_oig72OvI/s1600/search-box.png) no-repeat}
    #searchbox input{outline:none}
    input:focus::-webkit-input-placeholder{color:transparent}
    input:focus:-moz-placeholder{color:transparent}
    input:focus::-moz-placeholder{color:transparent}
    #searchbox input[type="text"]{background:transparent;border:0;font:14px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,"AppleGothic",sans-serif;color:#f2f2f2!important;padding:10px 35px 10px 20px;width:220px}
    #searchbox input[type="text"]:focus{color:#fff}
    #button-submit{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwCVU5quWMMb943bci1GJdJUL8LAl7LRFnliqTJF6S9o836Bk2e7YM89-3OeO73qxcXagQufPnioA4-iStXA8VsG0fvnfAxoJp9z4kDEgfiC7dKJ1nChhDqwh4e7d3WFqxoB-RAeu0dLi4/s1600/search-icon.png) no-repeat;margin-left:-40px;border-width:0;width:40px;height:50px;cursor:pointer}
    #button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1eoKbRd2SBhOq6e7BDL9j8cYPoQV7By3niQQkyrS4b2owvioU5QHw5rsGrbifMhyphenhyphenMt7Za4wWd3gT9AHg7gxB256Ch151IALH0ceGU4I4sfvSeQqOcFMmlHoF1MwIIIy6TGJZ0rL64Wf73/s1600/search-icon-hover.png)}
    </style>
    
    <form id="searchbox" method="get" action="/search" autocomplete="off"><input name="q" type="text" size="15" placeholder="Enter keywords here..." /><input id="button-submit" type="submit" value=" "/></form>
    
    

    Cara pemasangan

    Pemasangan gadget Kotak Pencarian pada blogger
    Pemasangan gadget Kotak Pencarian pada blogger

    1. Masuk ke blogger, pilih menu Layout -> Pilih Add a Gadget pada kolom yang kalian inginkan.
    2. Kemudian pilih HTML/Javascript -> Paste script kotak pencarian yang kalian pilih diatas pada popup yang muncul.
    3. Simpan dan lihat hasilnya~

    Baiklah, aku rasa kalian sudah mengerti manfaat dari pemasangan kotak pencarian pada situs. Apalagi kalian bisa mengubah dengan keinginan sendiri :). Mungkin kedepannya aku akan menambahkan style kotak pencarian yang lain, untuk sekarang hanya 6 yang bisa aku berikan.

    Poka! Do vstrechi~
    Kutjing Tjantik
    Read more