 |
| HTML and CSS for making simple blogger menu |
- Modelnya yang berada dalam bar/frame dapat di scroll dari kanan ke kiri dan sebaliknya membuat dia mampu menampilkan sebanyak banyaknya menu navigasi untuk blog kalian. Terus geser sampai menu lain hilang di tepi halaman dan menu baru muncul dari tepi lain halaman. Tidak ada batas.
- Responsive. Tidak perlu kuatir tidak bisa ditampil pada seceen atau ukuran layar perangkat yang berbeda. Tidak perlu membuat menu dropdown lagi. Mau di layar besar (desktop dan laptop) maupun layar kecil (tablet dan hape) menu tetap berformat horisontal.
- Otomatis hemat ruang.
Kekurangan:
- Kadang orang tidak menyadari bahwa begitu banyak menu yang dapat di geser atau di gulung (di scroll) ke kiri dan ke kanan.
Contoh:
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
Coba Sentuh dengan Jari jika menggunakan hape, atau gunakan mouse untuk mengklik tanda panah dibawah navigasi di ujung bagian bawah kiri dan kanan, dan geser menu yang berjumlah lebih 30 menu di dalam bar berwara biru diatas.
Tampaknya Menu seperti diatas telah diterapkan pada template Textrimnya Mbak Igniel, walau mungkin ditulis dengan cara berbeda karena saya tidak tahu bagaimana cara mbak Igniel membuatnya. Namun dalam kesempatan ini saya mendapatkan kesempatan dari admin editblogtema untuk mengasah dan melatih kemampuan "koding" sederhana melalui blog ini dan Saya berikan contoh penerapannya.
Terapkan pada blogger
Ya karena blogger di tulis berbasis HTML dan kode pembuatan menu diatas adalah HTML (tanpa JavaScript) dan ditambah sekelumit kode CSS yang akan membuat templat blog kalian menjadi sangat kencang. Tidak akan bisa di terapkan ke template Wordpress yang ditulis dari inti kode kode PHP, cara menerapkannya adalah sebagai berikut:
1. Tambahkan HTML
- Masuk kepengaturan Blogger
- Pilih Tema
- Klik Edit HTML
- Pada halaman editor HTML cari kode atau tag penutup </head>
<div class="scrollAnissa">2. Tambahkan CSS
<a href="#home">Menu1</a>
<a href="#news">Menu2</a>
<a href="#contact">Menu3</a>
<a href="#about">Menu4</a>
<a href="#support">Menu5</a>
<a href="#blog">Menu6</a>
<a href="#tools">Menu7</a>
<a href="#base">Menu8</a>
<a href="#custom">Menu9</a>
<a href="#more">Menu10</a>
<a href="#logo">Menu11</a>
<a href="#friends">Menu12</a>
<a href="#partners">Menu13</a>
<a href="#people">Menu14</a>
<a href="#work">Menu16</a>
<a href="#work">Menu17</a>
<a href="#work">Menu18</a>
<a href="#work">Menu19</a>
<a href="#work">Menu20</a>
<a href="#work">Menu21</a>
<a href="#work">Menu22</a>
<a href="#work">Menu23</a>
<a href="#work">Menu24</a>
<a href="#work">Menu25</a>
<a href="#work">Menu26</a>
<a href="#work">Menu27</a>
<a href="#work">Menu28</a>
<a href="#work">Menu29</a>
<a href="#work">Menu30</a>
<a href="#work">Menu31</a>
</div>
Masih di halaman editor HTML, letakan kode CSS berikut di atas kode </head>
<style>Selanjutnya SAVE template. Saya ingin melanjutkan tulisan ini di lain kesempatan dengan tema mempercantik tampilan navigasi blogger menggunakan ikon SVG.
div.scrollAnissa {
background-color: #0000FF;
overflow: auto;
white-space: nowrap;
}
div.scrollAnissa a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollAnissa a:hover {
background-color: #FF0000;
}
</style>
wah keren jg nih, minta tutorial dong min gmna cara buat header blog kyak di blog ini. kyaknya logo blognya bsa keren gitu penempatan nya
BalasHapusPenempatan LOGO tergantung dimensi ukuran LOGO bukan format header. Cobalah membuat suatu LOGO dengan dimensi dan ukuran yang tepat.
HapusSalam dari team kami: editblogtema.
terima kasih berkongsi ilmu
BalasHapus