Cara Mengedit Menu Navigasi Evo Magz Cara Mengedit Menu Navigasi Evo Magz - mizipediacom mizipediacom: Cara Mengedit Menu Navigasi Evo Magz










KATEGORI

LIVE TV

Iklan Semua Halaman

Cara Mengedit Menu Navigasi Evo Magz

Senin, 13 Maret 2017



Cara Mengedit Menu Navigasi Evo Magz

Jika anda baru saja menggantikan template bawaan blogger ke template Evo Magz ala mas sugeng, wajib untuk mengedit isi dalam code html nya. saya rasa jika anda seorang blogger yang sudah lama mengenal blogger pasti sudah tidak merasa kesulitan untuk mengedit code-code yang terdapat di dalam template Evo Magz, bagi yang masih Newbie mungkin tidak mudah untuk melakukan hal dari penjelasan saya ini.

Tetapi anda yang masih Newbie tenang saja saya akan menjelaskan sebaik mungkin, agar anda mudah memahami cara-cara edit code tersebut.

Nah pada template Evo Magz ada terdapat Tiga macam menu navigasi. 

1. Dua macam menu navigasi untuk versi desktop 
2. menu navigasi untuk versi seluler.
Apabila anda tidak ingin mengaktifkan fitur versi seluler, maka anda hanya perlu mengedit menu navigasi versi desktop saja.

Jadi anda bisa ikuti langkah-langkah di bawah ini:

1. Menu Navigasi Desktop Di Atas Header
Cara nya untuk mengedit menu navigasi versi desktop pada bagian atas header cukup anda carikan kode seperti contoh di bawah ini:
<!-- primary navigation menu start -->
<ul class='nav-menu'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact Us</a></li>
  <li><a href='#'>Privacy Policy</a></li>
  <li><a href='#'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->

Kemudian anda Edit text dengan background berwarna Hijau dengan URL tujuan dan warna hijau dengan nama menu yang anda diinginkan.

Di bawah ini contoh code yang sudah selesai di Edit
<!-- primary navigation menu start -->
<ul class='nav-menu'>
  <li><a href='http://mizipedia.com/p/tentang.html'>Tentang Saya</a></li>
  <li><a href='http://mizipedia.com/p/kontak.html'>Kotak</a></li>
  <li><a href='http://mizipedia.com/p/privacy.html'>Privacy Policy</a></li>
  <li><a href='http://mizipedia.com/p/disclaimer.html'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->

2. Menu Navigasi Deskstop Di Bawah Header
 Silahkan anda cari kode menu navigasi di bawah header seperti berikut  ini:
<!-- secondary navigation menu start -->
<ul class='nav nav-menu2'>
 <li><a class='active' href='/'><i class='fa fa-home'/> Home</a></li>
 <li><a href='#'>Menu 1</a>
  <ul>
  <li><a href='#'>SubMenu 1</a></li>
  <li><a href='#'>SubMenu 2</a></li>
  <li><a href='#'>SubMenu 3</a></li>
  </ul>
 </li>
 <li><a href='#'>Menu 2</a>
  <ul>
  <li><a href='#'>SubMenu 1</a></li>
  <li><a href='#'>SubMenu 1</a></li>
  <li><a href='#'>SubMenu 3</a></li>
  </ul>
 </li>
 <li><a href='#'>Menu 3</a></li>
 <li><a href='#'>Menu 4</a></li>
</ul>
<!-- secondary navigation menu end -->

Dan anda Edit text dengan background yang  berwarna Hijau  dengan URL tujuan dan yang berwarna hijau dengan nama menu yang sesuai dengan keinginan anda.

3. Menu Navigasi Versi Seluler
Jika anda ingin  mengaktifkan fitur template versi seluler Menu navigasi ini perlu di Edit.
Untuk mengedit pada menu navigasi versi seluler silahkan anda cari kode ini:
<!-- mobile navigation menu start -->
<div id='mobile-nav'>
 <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#183; 
 <span><a href='#'>mizipedia</a></span> &#183; 
 <span><a href='#'>tutorial</a></span> &#183; 
 <span><a href='#'>style</a></span> &#183; 
 <span><a href='#'>Kesehatan</a></span>
</div>
<!-- mobile navigation menu end -->

Cara edit nya sama juga seperti yang di atas ya, cukup edit yang berwarna Hijau dengan URL tujuan dan yang berwarna hijau dengan nama menu yang anda inginkan.

Tombol Media Sosial

Yang Terakhir  di edit yaitu tombol social media letaknya di sebelah kanan menu navigasi atas. Silahkan anda cukup cari kode seperti di bawah  ini:
<!-- social media button start -->
<ul class='nav-social'>
  <li><a class='fcb' href='https://www.facebook.com/' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
  </li>  
  <li><a class='gpl' href='https://plus.google.com/' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
  </li>
  <li><a class='twt' href='https://twitter.com/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a> 
  </li>
  <li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a> 
  </li>
</ul>
<!-- social media button end -->

Anda cukup rubah saja URL yang bertanda hijau dan Biru di atas dengan URL milik sobat.

#Modifikasi Tampilan Template

Untuk anda yang mungkin ingin memodifikasi template ini agar sedikit berbeda dari aslinya, anda bisa menggunakan fitur perancang template yang ada di blogger. dan anda dapat dengan mudah mengganti warna, background, serta juga font pada template ini.

Ini caranya sangatlah mudah, silahkan anda masuk ke akun blog anda, terlebih dan anda masuk ke Dashboard blogger > Template > Sesuaikan > Setelah itu klik “Tingkat Lanjut
Perancang template

Pengaturan Komentar Facebook

Tanpa kita  melakukan pengaturan ini sebenernya facebook comment akan otomatis tampil, dan dapat digunakan secara normal. Tetapi, agar anda dapat melakukan moderasi terhadap komentar-komentar yang masuk nantinya, jadi di perlu kan sedikit konfigurasi.

Cukup anda cari kode di bawah ini di dalam template:

<meta content='YOUR_FACEBOOK_USER_ID' property='fb:admins'/>

Maka anda ganti kan yang berwarna hijau dengan ID profil facebook anda.
Nah Untuk mengetahui ID profil facebook milik sobat, silakan masuk ke http://findmyfbid.com/

Pengaturan Form Berlangganan

Untuk mengedit form berlangganan feedburner di bawah postingan, maka silahkan anda cari kode di bawah ini:
<div class='berlangganan-box'>
 <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=mizipedia&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
 <p>Subscribe to receive free email updates:</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='mizipedia'/>
 <input name='loc' type='hidden' value='en_US'/>
 <p><input class='submit-email' type='submit' value='Subscribe'/></p>
 </form>
</div>

Anda ganti text dengan background berwarna hijau dengan ID FeedBurner milik anda. Untuk mengetahui ID feedburner silakan KLIK DISINI

SEO

Nah untuk masalah SEO pada template ini sudah di setting ole Mas sugeng dengan semaksimal mungkin. Jadi anda tidak perlu melakukan modifikasi apapun pada template ini.
Nah selesai sudah penjelasan saya pada hari, semoga bermanfaat untuk anda.
Lihat Juga