Cara Membuat Menu Navigasi Dasar dan Mengedit Halaman Tab

Cara Membuat Menu Navigasi Dasar dan Mengedit Halaman Tab - Banyak blog hari ini terdiri dari dua atau lebih topik, pakan rumah Anda bisa menjadi campuran dari beberapa hal yang berbeda. Untuk memudahkan pembaca untuk menemukan apa yang mereka cari, penting untuk memiliki sistem navigasi. Posting Todays akan menunjukkan cara untuk membuat bar navigasi dasar untuk topik blog terpisah menggunakan styling standar dari tab Blogger dan mengubahnya. Anda juga dapat menggunakan ini untuk mengedit tampilan tab menggunakan halaman gadget. Periksa posting terkait di bawah ini untuk pilihan yang lebih menarik.

Download cadangan dari template Anda sebelum mengedit kode apapun

Buat bar navigasi dasar

1. Hal pertama yang perlu Anda lakukan adalah mengatur Anda label blog / kategori / tag. Membagi blog Anda ke dalam kategori dan sub-kategori, membuat label untuk masing-masing. Ketika Anda menulis posting baru, menerapkan label yang benar. Gunakan URL setiap label sebagai link URL Anda di bawah ini.
2. Pada tab Layout, paste kode berikut di HTML / Javascript gadget dan masukkan link Anda sendiri & judul. Saya lebih suka melakukan hal ini selama menggunakan halaman atau gadget label, karena itu memberi saya lebih banyak pilihan.

<!-- start navmenu --> <div id="navigationbar"> <ul> <li><a title="home" href="LINK">Home</a></li> <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> <li><a title="TITLE" href="LINK">PAGE TITLE</a></li> <li><a title="TITLE" href="LINK">TOPIC</a></li> <li><a title="TITLE" href="LINK">TOPIC</a></li> </ul> </div> <!-- end navmenu --> 

Mengedit Navigasi tab bar dan halaman

3. Pergi ke Template> Sesuaikan> lanjutan dan edit "Tab" elemen. Hal ini dapat mengubah perbatasan, latar belakang dan warna.
4. Sekarang pergi ke Template> Edit HTML. Dalam bagian CSS ( <b:skin> ... </b:skin> ) Anda akan melihat bagian tab yang, tergantung pada template Anda, mungkin terlihat seperti ini. Jika Anda merasa nyaman dengan CSS dan Blogger, Anda dapat sepenuhnya menyesuaikan tab Anda di sini. Jika tidak, langkah berikutnya akan menunjukkan kepada Anda bagaimana dan apa yang harus diedit.

 /* Tabs ----------------------------------------------- */ .tabs-inner .section:first-child { border-top: 1px solid #eeeeee; } .tabs-inner .section:first-child ul { margin-top: -1px; border-top: 1px solid #eeeeee; border-left: 0 solid #eeeeee; border-right: 0 solid #eeeeee; } .tabs-inner .widget ul { background: #666666 url(//www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px; _background-image: none; border-bottom: 1px solid #eeeeee; margin-top: 0; margin-left: -30px; margin-right: -30px; } .tabs-inner .widget li a { display: inline-block; padding: .6em 1em; font: normal normal 14px Arvo; color: #666666; border-left: 1px solid #ffffff; border-right: 1px solid #eeeeee; } .tabs-inner .widget li:first-child a { border-left: none; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #999999; background-color: #ffffff; text-decoration: none; } 

5. Jika Anda tidak nyaman dengan mengedit kode di atas sendiri, berikut adalah bidang utama bahwa orang-orang ingin mengubah. Pergi ke Template> Edit HTML dan menambahkan kode sebelum
</b:skin>

 /* Spacing & Border of First Link in Navigation */ .tabs-inner .section:first-child ul { margin-top: 0px; border: 0 solid #eeeeee; } /* Background & Border of Navigation */ .tabs-inner .widget ul { background: #999999; border: 0px solid #eeeeee; text-align: center !important; } /* Font, Colour & Border of Links */ .tabs-inner .widget li a { font: normal normal 14px Arvo; color: #333333; border: 0px solid #ffffff; } /* Font & Colour of Rollover Links */ .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { color: #eeeeee; background-color: #ffffff; text-decoration: none; } /* Centre Navigation */ .tabs .widget li, .tabs .widget li{ display: inline; float: none;} 

Hapus Borders
Memeriksa posting ini pada cara untuk menghapus batas dari tab halaman .

Menampilkan dalam daftar bullet ...

Karena tutorial ini menggunakan styling default untuk Blogger tab / halaman, perlu menjadi daerah kanan template untuk mengambil CSS. Pada tab tata letak tarik header, navigasi dan gadget lainnya turun sedikit. Ini akan melompat ke tingkat kedua, ini seharusnya tidak mempengaruhi tampilan blog Anda, tetapi itu akan menambahkan styling default yang kemudian dapat disesuaikan. Gambar ini diharapkan akan menjelaskan bahwa lebih baik.


Itu tidak berarti kita tidak bisa membuatnya tetap sementara bergulir atau muncul di atas header atau unsur-unsur lain. Tutorial di bawah ini akan menunjukkan cara untuk melakukan hal-hal.