Cara Membuat/Menambahkan Icon Gambar Di Samping Tulisan Pada Navbar Blogspot

Cara Menambahkan Gambar Di samping Tulisan Navbar.

Hai....Bertemu lagi bersama saya di kesempatan ini dan di lain pembahasan, pada kesempatan kali ini saya akan mengajak anda untuk membahas bagaimana cara membuat atau menambahkan icon gambar di samping tulisan yang ada di navbar, seperti yang tampak pada gambar dibawah ini :

Jika kita lihat pada gambar di atas, sudah pasti bagi anda para pemula seperti saya ini bertanya-tanya bagaimana caranya bisa seperti itu?? Menurut pengalaman pribadi, Pada awalnya saya juga bingung dan pusing memikirkannya, karena saya orangnya hobby meng utak-atik ketemu deh caranya.

Ok...kita langsung saja ke pokok permasalahannya.

Langkah dan tahapan-tahapannya :

1. Langkah seperti biasanya, Login ke akun blog anda.
2. Setelah masuk ke dashboard blog anda, klik menu Template => edit HTML.
3. setelah masuk ke mode edit HTML, anda cari bagian kode navbar, kurang lebih seperti kode di bawah ini.
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'>Business</a>
<ul class='sub-menu'>
<li><a href='#'>Internet</a></li>
</ul>
</li>
<li><a href='#'>Parent Category</a>
<ul class='sub-menu'>
<li><a href='#'>Child Category 1</a>
<ul class='sub-menu'>
<li><a href='#'>Sub Child Category 1</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Uncategorized</a></li>
</ul>
</div>
4. Setelah ketemu kode script nya, maka anda cukup menambahkan sedikit kode script untuk membuat logonya, tambahkan kode script dibawah ini tepat sebelum kode nama menunya yang saya tandai warna merah seperti gambar di atas.
<i class='fa fa-(masukan tulisan nama logo disini)'/>
5. Cara menambahkannya seperti terlihat contoh di bawah ini.
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'><i class='fa fa-(disini)'/>  Business</a>
<ul class='sub-menu'>
<li><a href='#'><i class='fa fa-(disini)'/>  Internet</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-(disini)'/>  Parent Category</a>
<ul class='sub-menu'>
<li><a href='#'><i class='fa fa-(disini)'/>  Child Category 1</a>
<ul class='sub-menu'>
<li><a href='#'><i class='fa fa-(disini)'/>  Sub Child Category 1</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-(disini)'/>  Child Category 2</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-(disini)'/>  Featured</a></li>
<li><a href='#'><i class='fa fa-(disini)'/>  Uncategorized</a></li>
</ul>
</div>
6. lihat pada gambar di bawah ini jika kurang mengerti.
   
   Catatan :Jangan lupa memberi spasi antara logo dan nama menu(kalau saya cukup 2 spasi saja), jika tidak di beri spasi nantinya logo dan nama menu akan nampak rapat.
   
   Pada gambar di atas saya menggunakan nama logo hasil eksperimen sendiri, untuk anda silahkan bereksperimenlah untuk mendapatkan logo sesuai dengan yang anda inginkan, dan di bawah ini kode hasil eksperimen saya.
7. Jika semua langkah sudah anda lakukan, langkah selanjutnya adalah klik save atau simpan template dan lihat lah hasilnya, di gambar bawah ini hasil saya.
   

Nah....Bagaimana??berminat untuk mencobanya dan sudah siap untuk bereksperimen?itu tergantung dari pilihan anda. Dan saya rasa cukup sekian dulu dan saya ucapkan terimakasih...selamat mencoba...