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 goresan pena yang ada di navbar, menyerupai yang tampak pada gambar dibawah ini :

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

Ok...kita pribadi saja ke pokok permasalahannya.

Langkah dan tahapan-tahapannya :

1. Langkah menyerupai 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 episode aba-aba navbar, kurang lebih menyerupai aba-aba 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 aba-aba script nya, maka anda cukup menambahkan sedikit aba-aba script untuk membuat logonya, tambahkan aba-aba script dibawah ini sempurna sebelum aba-aba nama menunya yang saya tandai warna merah menyerupai gambar di atas.
<i class='fa fa-(masukan goresan pena nama logo disini)'/>
5. Cara menambahkannya menyerupai terlihat pola 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 jikalau kurang mengerti.
   
   Catatan :Jangan lupa memberi spasi antara logo dan nama menu(kalau saya cukup 2 spasi saja), jikalau 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 menerima logo sesuai dengan yang anda inginkan, dan di bawah ini aba-aba hasil eksperimen saya.
7. Jika semua langkah sudah anda lakukan, langkah selanjutnya yaitu 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...