Belajar Cara Edit Template Blogger Supaya Keren Part 3

Cara Edit Template Blogspot Keren

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.

    Hasil Akhir Belajar Cara Edit Template Blogger

    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.

    Belajar Cara Edit Template Blogger gambar 1

    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.

    Belajar Cara Edit Template Blogger gambar 2

    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.

    Belajar Cara Edit Template Blogger gambar 3

  • 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.

    Belajar Cara Edit Template Blogger gambar 4

    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

    0 Response to "Belajar Cara Edit Template Blogger Supaya Keren Part 3"

    Post a Comment

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel