 |
| 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, menyerupai biasa pertama siapkan doloe Alat dan Bahan 'memasaknya'
- Untuk baspesialuntuk, siapkan doloe sebuah Blog yang akan kita 'racik'
- Sementara untuk alatnya ialah 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 simpulan pada Tahap ke 2 ini akan menyerupai gambar dibawah ini.
Langkah Mengedit Template Blogger Supaya Keren Part 2
Pada tahap kedua ini kita akan serius mengedit tampilan Content dan Sidebar.
Edit Tampilan Sidebar Template
Yang pertama kita edit ialah Sidebarnya, maka sama menyerupai pada tutorial kemarin, klik kanan dimana saja, pilih inspector, kemudian arahkan ke pecahan Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar semoga dibawah semoga 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.
Edit Judul Sidebar Template
Kita Lanjutkan mengedit pecahan Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memdiberi garis tepi bawah.
Tekniknya masih sama menyerupai cara diatas, pertama arahkan inspector sempurna di pecahan judul.
Maka kita akan menemui selector h2, kalau kita eksklusif memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh pecahan isi template. Disini kan, kita spesialuntuk ingin mengubah h2 yang ada di pecahan 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 ialah 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.
Edit Tampilan Artikel dan Background Tanggal Template
Seperti yang sudah-sudah arahkan kursor pada pecahan 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%, semoga pecahan Sidebar tidak bergeser kebawah.
Selanjutnya pada pecahan 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 menyerupai gambar dibawah ini.
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 ialah 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.
Tag :
Blogger Tips
0 Komentar untuk "Belajar Cara Edit Template Blogger Biar Keren Part 2"