Belajar Cara Edit Template Blogger Semoga Keren Part 1

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

Baik. tanpa perlu berlama-lama, kini eksklusif saja kita mulai pembahasan Teknik 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 ialah Ringan dan cukup cepatdangampang kalau kita ingin mengedit seluruh bab Template, alasannya ialah sudah tersedia comment dari pihak Blogger untuk megampangkan kita mengenali setiap bab dari arahan xml template tersebut.

misal comment :

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

• /* Header ------------*/ ( menerangkan arahan kode css yang ada dibawahnya untuk mengatur tampilan atas template, menyerupai contohnya judul blog )

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

Lalu apa solasinya, *eh solusinya ? simpel 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 ialah 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 pertama kita akan merombak tampilan depan, yang jadi duduk kasus ada Navigasi Bar yang (menurut aku) sedikit membingungkan kita ketika ingin melaksanakan pengeditan template. Untuk itu kita akan menghilangkannya.
   
   Tekniknya, 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 tiruana tertutupi dengan warna biru), teladan menyerupai gambar dibawah ini.
   
   
   
   
   
   
   Lalu lihat sebelah kanan bawah layar Anda, goresan pena Matched CSS Rules, kemudian menambahkan arahan 'display: none;' tanpa tanda kutip. Teknik menambahkannya klik pada simbol '}' kemudian tinggal Anda ketikkan perintah 'display: none;' dan lenyap sudah Navigasi Bar tersebut.
   
   Catatan : Untuk menghilangkan Navigasi Bar tersebut gotong royong ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu spesialuntuk menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih galau silahkan Anda coba, dan lihat perbedaanya.
   
   

2. Mangganti Warna Background Template

   
   Teknik kedua ini dapat dibilang yang paling penting ya, alasannya ialah kalau salah dalam memadukan warna, dapat jadi pengunjung akan kabur. Dan langkah untuk Merubah Warna Template ini sama saja menyerupai waktu kita ingin menghilangkan Navigasi Bar tadi.
   
   Pertama tentu klik doloe beling pembesarnya, kemudian arahkan ke daerah yang ingin Anda ganti Backgroundnya, teladan saya ingin mengganti warna background spesialuntuk 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 menambahkan arahan 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 Teknik diatas, menyerupai biasa Anda arahkan lampau pada bab yang ingin Anda tebali dengan garis (border).
   
   misal saya ingin memdiberi border pada pembatas sisi kiri dan kanan, caranya tinnggal saya menambahkan 'border: 1px solid gainsboro;' ini ialah selektor bertingkat ya, jadi border akan berwarna abu-abu (gainsboro menyerupai gray).], mempunyai garis yang padat (tidak putus-putus) dan mmemiliki ketebalan 1px.
   
   Hasilnya menyerupai gambar dibawah ini.
   
   
   
   
   
   
   Lanjut semisal kita ingin menambahkan ruang diatas judul, semisal untuk penempatan iklan. Tekniknya cukup kita menambahkan '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 final akan menyerupai gambar dibawah ini.
   
   
   
   
   

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

Akhir kata saya ucapkan terimakasih dan selamat Belajar.

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