Belajar Cara Edit Template Blogger Biar Keren Part 1

Mengedit Template yang ada di Blogspot memang saya akui bukan pekerjaan yang mudah, dimana kita tidak diberi ruang yang bebas dalam melaksanakan pengeditan. Walaupun tidak seluasa ketika kita Membuat Website, namun jangan khawatir dengan kreatifitas yang Anda miliki, kita dapat 'menembus' batasan tersebut.

Baik. tanpa perlu berlama-lama, kini pribadi saja kita mulai pembahasan Cara Edit Template Blogger milik Anda supaya menjadi lebih keren.

Catatan : Disini saya akan mengedit Template Sederhana bawaan Blogger yang ada di urutan 1.

Alasan utama saya menentukan Template ini ialah alasannya Ringan dan cukup Praktis kalau kita ingin mengedit seluruh bab Template, alasannya sudah tersedia comment dari pihak Blogger untuk memudahkan kita mengenali setiap bab dari instruksi xml template tersebut.

Contoh comment :

•  /* Content ------------ */ ( mengambarkan instruksi kode css yang ada dibawahnya untuk mengatur tampilan isi )

• /* Header ------------*/ ( mengambarkan instruksi kode css yang ada dibawahnya untuk mengatur tampilan atas template, ibarat contohnya judul blog )

Lalu kapan kita mulai mengedit Template Blogspotnya ? sebentar, dalam mengedit sebuah tampilan sebuah blog, kita tidak wajib untuk terjun pribadi kedalam sourcenya. Yang pastinya itu akan berisi ribuan instruksi CSS, JS, dan HTML yang akan menciptakan Anda dan saya galau 7 keliling.

Lalu apa solasinya, *eh solusinya ? gampang saja kita dapat memakai beberapa Tool yang sudah dibundling oleh Browser kita, misal di Chrome ada Developer Tool, dan di Mozilla juga ada tool berjulukan Web Developer, keduanya mempunyai fungsi yang sama tentunya. (namun saya lebih menentukan punyanya Chrome alasannya lebih simple tampilannya).

Langkah Mengedit Template Blogger Supaya Keren

Saya ingatkan sekali lagi, untuk alatnya saya memakai Chrome Developer Tool dan untuk bahannya saya memakai Template Sederhana Blogger.

1. Menghilangkan Navigasi Bar Template

   
   Langkah awal kita akan merombak tampilan depan, yang jadi dilema ada Navigasi Bar yang (menurut saya) sedikit membingungkan kita ketika ingin melaksanakan pengeditan template. Untuk itu kita akan menghilangkannya.
   
   Caranya, klik kanan dimana saja, kemudian pilih Inspect Element. Selanjutnya kita akan sedikit bermain-main dengan alat yang mempunyai ikon beling pembesar atau sering disebut selector.
   
   
   
   
   
   
   Sekarang arahkan kursor Anda sempurna dipojok kiri bawah Navigasi Bar tersebut (intinya sampai semua tertutupi dengan warna biru), teladan ibarat gambar dibawah ini.
   
   
   
   
   
   
   Lalu lihat sebelah kanan bawah layar Anda, goresan pena Matched CSS Rules, kemudian tambahkan instruksi 'display: none;' tanpa tanda kutip. Cara menambahkannya klik pada simbol '}' kemudian tinggal Anda ketikkan perintah 'display: none;' dan lenyap sudah Navigasi Bar tersebut.
   
   Catatan : Untuk menghilangkan Navigasi Bar tersebut bahwasanya ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu hanya menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih galau silahkan Anda coba, dan lihat perbedaanya.
   
   

2. Mangganti Warna Background Template

   
   Cara kedua ini dapat dibilang yang paling penting ya, alasannya kalau salah dalam memadukan warna, dapat jadi pengunjung akan kabur. Dan langkah untuk Mengganti Warna Template ini sama saja ibarat waktu kita ingin menghilangkan Navigasi Bar tadi.
   
   Pertama tentu klik dulu beling pembesarnya, kemudian arahkan ke daerah yang ingin Anda ganti Backgroundnya, teladan saya ingin mengganti warna background hanya dibagian sisi kanan dan sisi kiri, maka akan saya arahkan ke sebelah kiri template. Lalu saya ingin mengubahnya menjadi warna abu-abu muda, ya tinggal saya tambahkan instruksi css 'backgorund-color: #f2f2f2'.
   
   Lihat gambar dibawah ini biar tidak bingung.
   
   
   
   
   
   
   

3. Menambahkan Border Pada Sisi Template Tertentu

   
   Yah, sekali lagi tak jauh beda dengan 2 Cara diatas, ibarat biasa Anda arahkan dahulu pada bab yang ingin Anda tebali dengan garis (border).
   
   Contoh saya ingin memberi border pada pembatas sisi kiri dan kanan, caranya tinnggal saya tambahkan 'border: 1px solid gainsboro;' ini merupakan selektor bertingkat ya, jadi border akan berwarna abu-abu (gainsboro ibarat gray).], mempunyai garis yang padat (tidak putus-putus) dan mmemiliki ketebalan 1px.
   
   Hasilnya ibarat gambar dibawah ini.
   
   
   
   
   
   
   Lanjut semisal kita ingin menambahkan ruang diatas judul, semisal untuk penempatan iklan. Caranya cukup kita tambahkan 'div' dibawah class='content-cap-top cap-top' Lalu edit css divnya dengan value :
   
   

   border: 1px solid gainsboro;
   height: 40px;
   background-color: #FDF5F5;
   border-bottom: 0;
   padding-top: 20px;
   font-size: 20px;
   text-align: center;

   
   Alasan saya menuliskan 'border-bottom: 0' ialah untuk menghilangkan garis yang bertumpuk antara div yang kita buat dengan content-inner.
   
   Dan hasil selesai akan ibarat gambar dibawah ini.
   
   
   
   
   

Cukup gampang bukan Tutorial Pertama Edit Template Blogger kali ini. Nah, untuk Tutorial Mengedit Template selanjutnya kita akan fokus pada pengeditan Sidebar dan tapilan Artikel. Selengkapnya dapat Anda baca di Belajar Cara Edit Template Blogger Supaya Keren Part 2.

Akhir kata saya ucapkan terimakasih dan selamat Belajar.

[ Index ] Belajar Cara Edit Template Blogger Supaya Keren : Part 1 - Part 2 - Part 3 - Part 4