Belajar Cara Edit Template Blogger Biar Keren Part 3

Senin, 03 Desember 2018

Bagikan :

Tweet

Halo teman akrab setia Blog Berguru SEO, kesudahannya admin punya waktu luang nih untuk melanjutkan tutorial berseri ini. Nah untuk Anda yang elum tahu apa aja sih yang kita bahas di tutorial mengedit template blogger seri sebelumnya. Berikut cuplikan singkat terkena apa yang sudah kita pelajari pada part-part sebelumnya.

• Belajar Teknik Edit Template Blogger Supaya Keren Part 1

  
  Pada part pertama ini kita serius pada cara memakai alat yang akan dipakay untuk mengedit (developers tool) dan juga sedikit melaksanakan ukiran pada bab heading, backgorund body luar, dan
  
  

• Belajar Teknik Edit Template Blogger Supaya Keren Part 2

  
  Untuk part dua, yang kita bahas yakni pengeditan sidebar, meliputi judul widget yang ada di sidebar, border pemisah judu widget dan isi widget. Intinya pada part ini serius untuk sidebar blog.

Nah, semenatara untuk tutorial pada part 3 ini, kita akan serius pada pembuatan Menu Navigasi dan Menu proteksi yang meliputi About, Contact dan Sitemap.

Dibawah ini yakni penampakan hasil tamat yang akan kita buat.

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

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

Tutorial Mengedit Template Blogger Supaya Keren Part 3

Sedikit penjelasan, nantinya disini kita akan membuat dua menu, yaitu sajian navigasi yang berada di bawah judul dan deskripsi blog dan satunya lagi sajian menolongan yang akan kita letakan diatas judul dan deskripsi blog kita. Ok, eksklusif saja diberikut langkah-langkahnya.

1. Membuat Menu Navigasi

   
   Pertama kita buat lampau daftar sajian memakai instruksi html ul li. misal yang paling sederhana yakni menyerupai ini. Dan kita bungkus dengan div atau nav (html5) tapi disini saya akan mencontohkan memakai div, alasannya yakni div terdengar lebih familiar, bila 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 pemdiberian nama id boleh Anda kreasikan, misal menu2 jadi tidak harus navbarsecond.
   
   Dan selanjutnya letakkan dibawah header. Lihat gambar dibawah semoga lebih jelas.
   
   
   
   
   
   
   Tapi ada yang guah, menunya kok kebawah (vertikal) kan seharusnya ke samping (horisontal) ? solusinya cukup Anda menambahkan property float: left; untuk membuat sajian tersebut mengarah kesamping. Masalah kedua yakni jarak yang terlalu dekat, maka kita gunakan padding untuk mengatur jaraknya. Lalu untuk menghapus bulatannya kita gunakan list-style-type: none;. Kode lengkapnya ada di bawah.
   
   

   #navbarsecond ul li {
   float: left;
   padding: 10px;
   list-style-type: none;
   margin-left: 30px;
   }

   
   Masukan selector diatas dengan cara menekan tombol new style rule (simbol +) yang ada di pojok kanan atas sajian inspect element.
   
   
   
   
   
   
   Selanjutnya, klik pada div dengan selector navbarsecond, klik tanda +, kemudian menambahkan instruksi dibawah ini.
   
   

   #navbarsecond {
   border-bottom: 1px solid gainsboro;
   margin: 0 20px;
   margin-top: -12px;
   margin-bottom: -10px;
   }

   
   Hasilnya akan menyerupai gambar dibawah ini.
   
   
   
   
   
   
   

2. Membuat Menu pertolongan

   
   Seperti yang saya jelaskan sebelumnya, sajian menolongan disini akan terdiri dari about, contact, sitemap dan dapat Anda menambahkan sendiri lainnya.
   
   Untuk caranya simpel saja, cukup menambahkan (ctrl + c) div sajian navigasi yang sudah kita buat tadi, dan letakkan dibawah selector content-outer. Dan tidakboleh lupa menambahkan selektor ul li didalam id navbarfirst. misal instruksi cssnya menyerupai dibawah ini.
   
   

   /* CSS Untuk Mengatur DIV */

   #navbarfirst {

   background: white;

   padding: 5px;

   border: 1px solid gainsboro;

   border-bottom: 0;

   padding-left: 485px;

   }

   
   

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

   #navbarfirst ul li {

   float: left;

   padding: 10px;

   list-style-type: none;

   padding-left: 47px;

   }

   
   Untuk lebih jelasnya perhatikan gambar dibawah ini.
   
   
   
   
   

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

Pada Artikel selanjutnya Belajar Teknik Edit Template Blogger Supaya Keren Part 4 ( Final ) kita akan memasukan tiruana css yang sudah kita buat ke dalam template blogger gotong royong (xml). Pastikan Anda tidak melewatkannya, alasannya yakni itu yakni tamat dari rangkain tutorial berseri ini.

Akhir kata saya ucapkan terimakasih banyak.

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

Tag : Blogger Tips