Cara Membuat Icon Di Menu Navigasi Blogger

Blogger Tutorial

Banyak sekali blogger pemula yang mencari cara untuk mendatangkan pengunjung ke blog mereka. Mulai dari membuat artikel yang menarik, belajar tentang SEO hingga membagikan hasil postingan ke media sosial seperti facebook demi menarik pengunjung. Setelah banyak pengunjung yang datang ke blog anda, selain membaca artikel yang anda buat pengunjung juga secara tidak langsung menilai tampilan blog anda.

Namun banyak juga blogger pemula yang tidak memperhatikan tampilan blog mereka. Padahal tampilan blog yang menarik mampu membuat pengunjung betah berada di blog Anda. Salah satu cara mempercantik blog anda adalah dengan menambahkan icon-icon pada sebuah menu navigasi. Selain terlihat menarik, pengunjung juga akan menilai bahwa anda bersungguh-sungguh dalam membuat blog sehingga ada kemungkinan para pengunjung itu akan kembali lagi ke blog anda pada lain waktu. 

Nah, kali ini saya akan membagikan tutorial Cara Membuat Icon di Menu Navigasi Blogger. Cara ini sangat sederhana dan bahkan blogger pemula seperti saya pun sangat cepat memahaminya. Untuk penjelasan nya simak tutorial di bawah ini. :D

• Misalkan Anda ingin membuat tampilan navigasi Follow Me seperti dibawah ini

Maka yang harus anda Lakukan adalah dengan mengedit tempalte Blogger anda. Caranya yaitu:

Masuk ke Blogger → Tema → kemudian Pilih  Edit HTML. Edit HTML template anda seperti script berikut ini :

<li><a class='prett' href='#'><i class='fa fa-star'/> Follow Me</a>

<ul class='menus'>

  <li><a href='http://www.facebook.com/tonny.hardyanto'><i class='fa fa-facebook'/> Facebook</a></li>

  <li><a href='http://www.instagram.com/tonny_hrdy'><i class='fa fa-instagram'/> Instagram</a></li>

  <li><a href='http://www.plus.google.com/'><i class='fa fa-google-plus'/> Google+</a></li>

</ul>

</li>

Keterangan :
Warna Biru : Ganti dengan URL link Anda
Warna Merah : Ganti dengan Icon yang ingin Anda gunakan pada menu navigasi

Catatan:

Untuk mengubah Icon Navigasi seperti yang anda inginkan, maka ubah lah tulisan warna merah sesuai dengan Icon yang ingin anda tampilkan. Untuk nama-nama icon nya, anda bisa menggunakan logika atau bisa cari sendiri di Google.

Atau Jika Anda ingin membuat tampilan menu navigasi seperti yang ada diblog ini, Anda bisa menggunakan script HTML dibawah ini

Sebelum nya Backup terlebih dahulu template anda untuk menjaga hal yang tidak diinginkan yang disebabkan oleh ketidakpahaman anda dengan tutorial ini.

<ul>
  <li><a href='/'><i class='fa fa-home'/> Home</a></li>
  <li><a class='prett' href='#'><i class='fa fa-star'/> Follow Me</a>
<ul class='menus'>
  <li><a href='http://www.facebook.com/'><i class='fa fa-facebook'/> Facebook</a></li>
  <li><a href='http://www.instagram.com/'><i class='fa fa-instagram'/> Instagram</a></li>
  <li><a href='http://www.plus.google.com/'><i class='fa fa-google-plus'/> Google+</a></li>
</ul>
</li>
  <li><a href='/search/label/Teknologi'><i class='fa fa-laptop'/> Teknologi</a></li>
  <li><a href='/search/label/Tutorial'><i class='fa fa-gear'/> Tutorial</a></li>
  <li><a href='/search/label/Kesehatan'><i class='fa fa-heart'/> Kesehatan</a></li>
</ul>

Kurang Lebih Hasilnya adalah seperti ini, Untuk navigasi yang lain bisa anda tambahkan sendiri.

Demikian lah tadi tutorial mengenai Cara Membuat Icon Menu Navigasi Di Blogger. Silahkan bagikan artikel ini agar bermanfaat, dan jangan lupa tinggaalkan komentar anda di bawah. Terima Kasih.

Bagikan

Jangan lewatkan

Cara Membuat Icon Di Menu Navigasi Blogger

4/ 5

Oleh Tonny

Tonny Komentar