
Cara membuat header baru di template blogger Part 03 - Menambahkan Icon
Daftar Isi
Part Ketiga - Menambahkan Icon
DEMO
Kali ini saya akan melanjutkan Part sebelumnya yang baru sampai pada tahap pemasangan widget gambar / Judul blog dan tentunya menurut saya itu masih terlihat hambar karena header masih menyisakan ruang kosong di bagian sisi kanan, Sebenarnya kamu bisa mengisinya dengan apapun yang kamu mau, misal seperti bawaan Header pada template LinkMagz yaitu di isi dengan icon media sosial atau lainnya.
Nah di artikel kali ini saya hanya akan menambahkan beberapa elemen yang menurut saya penting seperti tombol menu dan tombol pencarian yang mana kedua tombol tersebut sangat penting untuk kemudahan pengunjung untuk meng-eksplorasi halaman-halaman pada blog / website yang dikunjungi, Tapi disiy kamu juga bisa mengubahnya dengan tombol apapun yang kamu mau dengan cara mengganti icon dengan icon yang kamu inginkan.
Menambah Widget Baru
Pertama silahkan tambahkan widget baru pada layout yang sama seperti saat kamu menambahkan widget Halaman Header yaitu dengan cara klik tambah kemudian pilih HTML/JavaScript seperti gambar berikut.
Simpan perubahan dan tinggalkan, sekarang lanjut ke pengaturan tema atau edit template untuk memasuka beberapa Skrip kedalam gadget barusan.
Untuk menampilkan logo atau icon biasanya akan menambahkan gambar dengan format png svg atau lainnya, bisa juga menggunakan FontAwesome yang jauh lebih mudah dalam pemasangannya. tapi disini saya akan menggunakan gambar dengan format SVG untuk iconnya jadi kamu perlu menambahkan beberapa gambar berikut pada template kamu.
Menambahkan Ikon
1. IKON MENU
2. IKON PENCARIAN
3. IKON ADMIN / ABOUT
Jika kamu punya gambar format SVG sendiri dan mau mengubah Icon di atas kamu bisa hapus pada bagian Path sampai penutup nya kemudian ganti dengan gambar punya kamu seperti contoh berikut.
<svg class='newHead' height='20px' id='head3' style='vertical-align: middle;fill:#000000;overflow: hidden;' viewBox='0 0 1024 1024' width='20px'><path d='M703.392304 ......... 264.05997z' stroke-width='2'/></svg>
Hapus pada bagian yang ditandai warna merah kemudian ganti dengan kode gambar punya kamu, untuk cara melihat kode gambar SVG bisa kamu buka menggunakan file manager kemudian buka sebagai file txt maka kodenya akan terlihat, atau bisa ikut cara berikut Cara melihat kode gambar format SVG .
Untuk cara menambahkan file di atas yaitu kamu pergi ke halaman tema kemudian edit HTML lalu pada menu titik 3 di bagian edit html pilih lompat ke widget kemudian klik pada widget yang ada tepat dibawah widget Header 2 dengan judul HTML yang disertai dengan angka seperti pada gambar berikut.
Jika sudah ketemu, paste atau tempel ketiga skrip gambar di atas tepat di antara kode </b:includable> dan </b:widget> seperti gambar berikut.
Tahap selanjutnya masih pada widget tersebut, kamu masukan juga Skrip HTML berikut ini sebagai pemanggil Skrip gambar di atas.
Tempelkan kode tersebut di antara <b:includable id='main'> dan <div class='widget-content'> contohnya hampir sama seperti pada gambar di atas.
Masih di halaman edit HTML selanjutnya cari kode ]]></b:skin> kemudian letakkan skrip CSS berikut tepat diatas kode tersebut.
Jika sudah silahkan simpan tema dan tahap menambahkan Ikon pun selesai, kamu sudah bisa lihat hasilnya. Untuk fungsi dari masing-masing ikon akan akan di bahas pada part berikutnya seperti menampilkan pencarian, tabel menu dan link untuk menuju ke halaman About, jadi silahkan lanjut pada part selanjutnya. Demikian artikel kali ini dan sampai jumpa.
Posting Komentar untuk "Cara membuat header baru di template blogger Part 03 - Menambahkan Icon"