Berjumpa kembali dengan blog ini :v..Oke,,waktu kemarin admin telah buat tutorial Ngoding mulai dari membuat website sederhana,Form,dan responsivibility ,
Karena admin sering denger keluhan di forum / grup Facebook, tentang Bagaimana Modifikasi Template Blog yang sudah premium (yang udah kamu beli lah pokoknya) / tidak alias gratis
Entah itu Mengubah Warna di Navigasi , Mengubah item navigasinya ,Menjadikan Blog Mobile Friendly dan lain lain,
Karena jika kamu hanya menggunakan template seadanya (bawaan google), tentu juga tidak menarik bagi visitor / pengunjung, pengunjung juga tidak dipermudah melihat artikel anda yang lain (Mungkin karena tidak ada thumbnail, jadinya agak gak menarik dan malas untuk dibaca)
Nah dengan menggunakan template eksternal yang kita dapat dari beli / gratis , tentunya blogpun akan menjadi menarik dan informatif . Namun agan harus modifikasi lagi nih elemen - elemen di blog agan yang masih bawaan dari web developer / penjual template agan,
Nah admin telah merangkum apa saja keluhan tersebut dan akan admin kasih Tutorialnya sesuai Judul Blognya yah wwkwkwk
MENGUBAH ITEM PADA BAGIAN NAVIGASI
Navigasi adalah menu di blog / website yang mempermudah pengguna untuk diarahkan ke sebuah daftar / list yang sudah 'dikelompokan' , dikelompokan disini berarti Item navigasinya.
Contoh :
Nah, ini adalah paling penting bagi anda jika anda baru memasang template , Navigasi tentu berpengaruh besar dalam SEO sebuah blog , Pengunjung akan kebingungan jika navigasinya tidak jelas/masih acak adul . Akhirnya malah si pengunjung mendatangi blog agan cuma 1 halaman saja, Ga jalan - jalan dulu tuh di artikel agan lewat media navigasi , Ini yang membuat blog tidak ramai pengunjung , jadi 1 visitor 1 halaman
1. Buka bagian Tema / Template dan pergi kemenu "EDIT HTML" di blog agan
2. Cari nama item yang agan mau ubah , Misalnya Saya ingin merubah "Web Development" Menjadi "Web" ,Cari dengan menggunakan shortcut "CTRL + F" Lalu tekan enter
A. Untuk mengubah link yang agan mau tuju, Kalo menu Dropdown (Item Navigasi yang menyimpan subitem) biasanya "A" ngga diisi karena hanya untuk mengelompokan Subitem dalam Satu item
B. isi untuk mengubah Nama itemnya , Disini saya mengubah "Web Development" Menjadi "Web"
Jika ingin mengubah Sub-item ,Lakukan yang sama . pun demikian juga dengan mengubah nama / judul elemen.
LIHAT JUGA Cara Membuat Website Responsive dengan CSS
MENGUBAH WARNA SUATU ELEMEN
Nah, Warna pada suatu elemen di blog agan juga penting nih, agar terkesan lebih simple, dan tidak semprawut atau terlalu ramai akan warna alias tidak norak.
Disini saya ambil contoh gampang aja, yaitu mengubah warna elemen navigasi
1. Buka Blog agan,Kemudian arahkan kursor / pointer agan ke Navigasinya, Lalu Klik kanan pilih Inspect Element . Pastikan mucul seperti ini
Inilah yang namanya navigasi, Copy isi dari <nav id> yaitu "nav" ,dan ingat - ingat kode hexcolornya (#333).
2. Balik lagi Template / Tema dan pergi kemenu "EDIT HTML" cari dengan pencet "CTRL + F" lalu ketikan "nav"
lihat disetiap selektor berbau nav ,dan edit juga warna yang berbau "#333", Disini saya akan mengeditnya menjadi Merah ,tepatnya "#DB3535" ,edit selektor "Search Form" nya juga untuk mengubah warna background kolom pencarian.
3. Simpan Temanya ,Kemudian Refresh blog agan..dan warnanya akan berubah merah (#DB3535)
Begitu juga,Jika agan ingin merubah warna elemen lainya...
LIHAT JUGA Belajar HTML5 Bagi Pemula
MEMBUAT BLOG MOBILE FRIENDLY
Indonesia adalah negara dengan pengguna Smartphone yang banyak juga, Tentu ini menuntut agan untuk membuat Blog agan menjadi nyaman digunakan di platform manapun entah itu Smartphone ,Tablet , Laptop sampai Hybrid PC.
Nah, disini admin akan bagikan tutorial membuat Blog / Website,mu lebih Responsive lagi khususnya di Smartphone
Apa sih Responsive itu? Responsive berarti sebuah layout web akan mengikuti / menyesuaikan lebar web browser yang digunakan oleh si user
Jika kalian menggunakan Tampilan template seluler bawaan blogger, Misalnya saya menggunakan Default ,maka akan keluar di smartphone agan seperti ini
Nah,buat kalian yang sudah install template dari beli / download gratis , Berikut Caranya
1. Masuk ke menu Template / Tema lalu pilih "EDIT HTML SELULER"
Nah jika keluar popup / jendela seperti berikut
Pilih "Tidak. Tampilan tema desktop diperangkat seluler".
Maka akan menghasilkan sebagai berikut
Gambar diatas merupakan tampilan blog di smartphone dengan lebar minimal 150px dan lebar maximal 600.
Gimana?? Sangat Mudah Bukan?
Oke..segitu saja mungkin dari Zracoder..Jika admin ada yang salah ,admin siap dikasih kritik di kolom komentar..dan jika masih ada yang bingung,,agan-agan bisa bertanya juga
Sekian,dan Terimakasih
Semoga Bermanfaat :)
EmoticonEmoticon