Belajar Cara Edit Template Blogger Semoga Keren Part 2

Belajar Edit Template Blogger Part 2

Melanjutkan tutorial Belajar Teknik Edit Template Blogger Part 1 kemarin, maka kali ini Blog Berguru SEO akan melanjutkan seri ke duanya.

Oke, ibarat biasa pertama siapkan doloe Alat dan Bahan 'memasaknya'

• Untuk baspesialuntuk, siapkan doloe sebuah Blog yang akan kita 'racik'

• Sementara untuk alatnya yaitu Google Chrome Developers Tool

Jika tiruana Alat dan Bahan sudah terseida, kini saatnya memulainya.

Ohya, tema dari Template yang akan kita buat ini saya namakan Superficial Simple Silver Template, yang artinya Template yang berwarna Abu-abu dengan desain Simple dan Datar.

Hasil tamat pada Tahap ke 2 ini akan ibarat gambar dibawah ini.

Saya rasa cukup basa-basinya, mari kita mulai mengedit.

Langkah Mengedit Template Blogger Supaya Keren Part 2

Pada tahap kedua ini kita akan serius mengedit tampilan Content dan Sidebar.

1. Edit Tampilan Sidebar Template

   Yang pertama kita edit yaitu Sidebarnya, maka sama ibarat pada tutorial kemarin, klik kanan dimana saja, pilih inspector, kemudian arahkan ke kepingan Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar biar dibawah biar lebih jelas. "
   
   
   
   
   
   Jika sudah terklik selector aside, kini lanjutkan dengan mengisi Element Stylenya dengan instruksi css (property) di bawah ini.
   
   

   border: 1px solid gainsboro;
   border-radius: 6px;
   padding-top: 10px;
   padding-bottom: 10px;
   margin-left: 10px;
   width: 280px;

   
   Maka akan muncul garis tepi melengkung setebal 1pixel dan berwarna abu-abu muda. Garis melengkung disebabkan oleh property border-radius.
   
   

2. Edit Judul Sidebar Template

   Kita Lanjutkan mengedit kepingan Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memdiberi garis tepi bawah.
   
   Tekniknya masih sama ibarat cara diatas, pertama arahkan inspector sempurna di kepingan judul.
   
   Maka kita akan menemui selector h2, bila kita eksklusif memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh kepingan isi template. Disini kan, kita spesialuntuk ingin mengubah h2 yang ada di kepingan Sidebar bukan ? solusinya, tambahakan #sidebar-right-1 di samping selector h2.
   
   Perhatikan gambar dibawah ini, untuk lebih jelasnya.
   
   
   
   
   Lalu fungsinya menambahkan #sidebar-right-1 ini untuk apa ? itu yaitu selector bertingkat, pada dasarnya untuk merubah tampilan css secara spesifik, lebih jelasnya dapat Anda googling.
   
   Lanjut, menambahkan property dibawah ini untuk mengubah ukuran font dan memdiberi garis tepi dibagian bawah Sidebar.
   
   

   border-bottom: 1px solid gainsboro;
   padding: 10px;
   text-align: center;
   font-size: 16px;

   
   Dan judul yang ada di sidebar pun akan terlihat sedikit menarikdanunik.
   
   

3. Edit Tampilan Artikel dan Background Tanggal Template

   Seperti yang sudah-sudah arahkan kursor pada kepingan outer isi artikel, kemudian pada Matched CSS Ruler menambahkan property dibawah ini.
   
   border: 1px solid gainsboro;
   border-radius: 6px;
   
   Jangan lupa untuk menghapus property width:100%, biar kepingan Sidebar tidak bergeser kebawah.
   
   Selanjutnya pada kepingan Tanggal yang memiliki selector date-header, masukan property dibawah ini.
   
   

   background-color: #FFFFFF;
   color: #747474;
   padding: 0.4em;
   letter-spacing: 3px;
   margin: inherit;
   border: 1px solid gainsboro;
   border-radius: 6px;
   font-weight: normal;

   
   Dan walaa, Background Artikel dan Tanggal akan berubah wujud menjadi ibarat gambar dibawah ini.
   
   
   
   
   

4. Edit Tampilan Judul Blog

   Disini kita akan memindahkan Judul Blog kita dibagian tengan, dan memdiberi batasan border dibagian bawah.
   
   Tekniknya klik judul blog dengan inspector, pastikan selectornya yaitu header-inner kemudian masukan property css dibawah ini.
   
   

   overflow: hidden;
   text-align: center;
   border-bottom: 1px solid gainsboro;

   
   Maka tampilan blog kita akan terlihat lebih kece badai.
   
   
   
   
   

Yap saya rasa untuk tutorial Belajar Teknik Edit Template Blogger Supaya Keren Part 2 ckup hingga disini doloe, dan besok kita akan lanjutkan Bagaimana Teknik Menambahkan Navigasi Menu di Template.

Akhir kata saya ucapkan terimakasih sudah membaca tutorial cupu dan berkenan berkunjung di Blog yang alakadarnya ini.

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