Belajar Cara Edit Template Blogger Supaya Keren Part 3

Halo sahabat setia Blog Berguru SEO, akhirnya admin punya waktu luang nih untuk melanjutkan academic berseri ini. Nah untuk Anda yang elum tahu apa aja sih yang kita bahas di educational mengedit template blogger seri sebelumnya. Berikut cuplikan singkat mengenai apa yang sudah kita pelajari pada component-component sebelumnya.

<ul>

Belajar Cara Edit Template Blogger Supaya Keren Part 1

</ul>

Pada element pertama ini kita fokus pada cara menggunakan alat yang akan dipakay untuk mengedit (developers device) dan juga sedikit melakukan goresan pada bagian heading, backgorund body luar, dan

Belajar Cara Edit Template Blogger Supaya Keren Part 2

Untuk component dua, yang kita bahas adalah pengeditan sidebar, meliputi judul widget yang ada di sidebar, border pemisah judu widget dan isi widget. Intinya pada component ini fokus untuk sidebar weblog.

Nah, semenatara untuk tutorial pada part three ini, kita akan fokus pada pembuatan Menu Navigasi dan Menu Bantuan yang berisi About, Contact dan Sitemap.

Dibawah ini adalah penampakan hasil akhir yang akan kita buat.

Menu ini saya buat sesimple mungkin (karena bisanya cuma gitu, hhe) tapi fungsinya akan tetap sama seperti menu menu keren lainnya.

Tanpa perlu basa-basi lagi sekarang saatnya kita mulai tutorialnya.

Tutorial Mengedit Template Blogger Supaya Keren Part three

Sedikit penjelasan, nantinya disini kita akan membuat dua menu, yaitu menu navigasi yang berada di bawah judul dan deskripsi weblog dan satunya lagi menu bantuan yang akan kita letakan diatas judul dan deskripsi weblog kita. Ok, langsung saja berikut langkah-langkahnya.

1. Membuat Menu Navigasi

Pertama kita buat dahulu daftar menu menggunakan kode html ul li. Contoh yang paling sederhana adalah seperti ini. Dan kita bungkus dengan div atau nav (html5) tapi disini saya akan mencontohkan menggunakan div, karena div terdengar lebih acquainted, kalau nav masih liar, hehe.

<div id="navbarsecond">

<ul>

<li><a href="">SEO Lokal</a></li>

<li><a href="">SEO Manca</a></li>

<li><a href="">SEO Tips</a></li>

<li><a href="">SEO Kawe</a></li>

<li><a href="">SEO Sawang</a></li>

<li><a href="">SEO Sumber</a></li>

<li><a href="">SEO Google</a></li>

</ul>

<div>

Pada pemberian nama identity boleh Anda kreasikan, misal menu2 jadi tidak harus navbarsecond.

Dan selanjutnya letakkan dibawah header. Lihat gambar dibawah agar lebih jelas.

Tapi ada yang aneh, menunya kok kebawah (vertikal) kan seharusnya ke samping (horisontal) ? Solusinya cukup Anda tambahkan assets drift: left; untuk membuat menu tersebut mengarah kesamping. Masalah kedua adalah jarak yang terlalu dekat, maka kita gunakan padding untuk mengatur jaraknya. Lalu untuk menghapus bulatannya kita gunakan listing-style-kind: none;. Kode lengkapnya ada di bawah.

#navbarsecond ul li

go with the flow: left;

padding: 10px;

list-fashion-kind: none;

margin-left: 30px;

Masukan selector diatas dengan cara menekan tombol new fashion rule (simbol ) yang ada di pojok kanan atas menu look into element.

Selanjutnya, klik pada div dengan selector navbarsecond, klik tanda , lalu tambahkan kode dibawah ini.

#navbarsecond

border-backside: 1px strong gainsboro;

margin: 0 20px;

margin-pinnacle: -12px;

margin-backside: -10px;

Hasilnya akan seperti gambar dibawah ini.

Membuat Menu Bantuan

Seperti yang saya jelaskan sebelumnya, menu bantuan disini akan terdiri dari approximately, touch, sitemap dan bisa Anda tambahkan sendiri lainnya.

Untuk caranya mudah saja, cukup tambahkan (ctrl c) div menu navigasi yang sudah kita buat tadi, dan letakkan dibawah selector content-outer. Dan jangan lupa tambahkan selektor ul li didalam id navbarfirst. Contoh kode cssnya seperti dibawah ini.

/* CSS Untuk Mengatur DIV */

#navbarfirst

background: white;

padding: 5px;

border: 1px stable gainsboro;

border-bottom: zero;

padding-left: 485px;

/* CSS Untuk Mengatur UL LI ( Menu ) */

#navbarfirst ul li

go with the flow: left;

padding: 10px;

list-fashion-kind: none;

padding-left: 47px;

Untuk lebih jelasnya perhatikan gambar dibawah ini.

Dengan begitu selesai sudah pembuatan Menu Navigasi kita kali ini. Dan juga itu menandakan selesai juga Tutorial Edit Template Blogger Supaya Keren seri ke 3 ini.

Pada Artikel selanjutnya Belajar Cara Edit Template Blogger Supaya Keren Part 4( Final ) kita akan memasukan semua css yang sudah kita buat ke dalam template blogger sesungguhnya (xml). Pastikan Anda tidak melewatkannya, karena itu adalah akhir dari rangkain tutorial berseri ini.

Akhir kata saya ucapkan terimakasih banyak.

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

Share this post