 |
| Belajar Edit Template Blogger Part 2 |
Melanjutkan tutorial Belajar Cara Edit Template Blogger Part 1 kemarin, maka kali ini Blog Berguru SEO akan melanjutkan seri ke duanya.
Oke, seperti biasa pertama siapkan dulu Alat dan Bahan 'memasaknya'
- Untuk bahanya, siapkan dulu sebuah Blog yang akan kita 'racik'
- Sementara untuk alatnya adalah Google Chrome Developers Tool
Jika semua Alat dan Bahan sudah terseida, sekarang 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 akhir pada Tahap ke 2 ini akan seperti gambar dibawah ini.
Langkah Mengedit Template Blogger Supaya Keren Part 2
Pada tahap kedua ini kita akan fokus mengedit tampilan Content dan Sidebar.
Edit Tampilan Sidebar Template
Yang pertama kita edit adalah Sidebarnya, maka sama seperti pada tutorial kemarin, klik kanan dimana saja, pilih inspector, lalu arahkan ke bagian Sidebar Template kalian. " pastikan kita berada di selector 'aside' lihat gambar agar dibawah agar lebih jelas. "
Jika sudah terklik selector aside, sekarang lanjutkan dengan mengisi Element Stylenya dengan kode 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 bagian Juduln Sidebarya, defaultnya kan sangat kecil ukurannya maka kita akan sedikit membesarkannya dan memberi garis tepi bawah.
Caranya masih sama seperti cara diatas, pertama arahkan inspector tepat di bagian judul.
Maka kita akan menemui selector h2, jika kita langsung memperbesar fontnya dengan font-size maka iitu nanti akan mengubah seluruh bagian isi template. Disini kan, kita hanya ingin mengubah h2 yang ada di bagian 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 adalah selector bertingkat, intinya untuk merubah tampilan css secara spesifik, lebih jelasnya bisa Anda googling.
Lanjut, tambahkan property dibawah ini untuk mengubah ukuran font dan memberi 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 menarik.Edit Tampilan Artikel dan Background Tanggal Template
Seperti yang sudah-sudah arahkan kursor pada bagian outer isi artikel, lalu pada Matched CSS Ruler tambahkan property dibawah ini.
border: 1px solid gainsboro;
border-radius: 6px;
Jangan lupa untuk menghapus property width:100%, agar bagian Sidebar tidak bergeser kebawah.
Selanjutnya pada bagian Tanggal yang mempunyai 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 seperti gambar dibawah ini.
Edit Tampilan Judul Blog
Disini kita akan memindahkan Judul Blog kita dibagian tengan, dan memberi batasan border dibagian bawah.
Caranya klik judul blog dengan inspector, pastikan selectornya adalah header-inner lalu 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 Cara Edit Template Blogger Supaya Keren Part 2 ckup sampai disini dulu, dan besok kita akan lanjutkan Bagaimana Cara Menambahkan Navigasi Menu di Template.
Akhir kata saya ucapkan terimakasih sudah membaca tutorial cupu dan berkenan berkunjung di Blog yang alakadarnya ini.
Terima kasih telah membaca artikel tentang Belajar Cara Edit Template Blogger Supaya Keren Part 2 di blog Tutorial Masa Kini jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.