Belajar Cara Edit Template Blogger Semoga Keren Part 1

Senin, 03 Desember 2018

Bagikan :

Tweet

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 pribadi 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 yaitu alasannya yaitu Ringan dan cukup cepatdangampang bila kita ingin mengedit seluruh bab Template, alasannya yaitu sudah tersedia comment dari pihak Blogger untuk megampangkan kita mengenali setiap bab dari instruksi xml template tersebut.

misal 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 meliputi ribuan instruksi CSS, JS, dan HTML yang akan membuat Anda dan saya resah 7 keliling.

Lalu apa solasinya, *eh solusinya ? praktis 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 yaitu 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 persoalan 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), pola ibarat gambar dibawah ini.
   
   
   
   
   
   
   Lalu lihat sebelah kanan bawah layar Anda, goresan pena Matched CSS Rules, kemudian menambahkan instruksi '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 bahwasanya ada dua cara, yaitu dengan visibility: hidden dan display: none. Bedanya, kalau hidden itu spesialuntuk menyembunyikan, sementara none itu benar-benar menghilangkan. Jika masih resah silahkan Anda coba, dan lihat perbedaanya.
   
   

2. Mangganti Warna Background Template

   
   Teknik kedua ini dapat dibilang yang paling penting ya, alasannya yaitu bila salah dalam memadukan warna, dapat jadi pengunjung akan kabur. Dan langkah untuk Merubah Warna Template ini sama saja ibarat waktu kita ingin menghilangkan Navigasi Bar tadi.
   
   Pertama tentu klik doloe beling pembesarnya, kemudian arahkan ke kawasan yang ingin Anda ganti Backgroundnya, pola 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 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 Teknik diatas, ibarat 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 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. 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' yaitu untuk menghilangkan garis yang bertumpuk antara div yang kita buat dengan content-inner.
   
   Dan hasil selesai akan ibarat gambar dibawah ini.
   
   
   
   
   

Cukup praktis 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

Tag : Blogger Tips