Cara Mudah Membuat Menu Navigasi Pada Blog

Cara Membuat Menu Navigasi di atas Header Blog Super SEO Kang Mousir

Bagikan :
Cara Membuat Menu Navigasi Keren di atas Blog. Sekarang syarat wajib yang harus di penuhi oleh sebuah blog untuk daftar Google Adsense adalah memiliki menu navigasi atau bisa disebut top menu navigasi di atas header blog. Jika anda memkai blog asli bawaan blogger pasti belum di sediakan menu Privacy Policy, menu Disclaimer, menu About Me, menu Sitemaps dan menu Contact.

Untuk cara membuat menu Privacy Policy di Blog, sama dengan membuat membuat menu Sitemaps, Disclamer, About Me, dengan membuat menu navigasi di blog dapat membuat pengunjung lebih yakin dengan blog anda, dan mengetahui tentang penulis blog, kebijakan dan aturan blog serta cara menghubungi admin blog.

Menu Navigasi Blog
Gambar Menu Navigasi dan Judul Blog
LIHAT DEMO

Cara Membuat Menu di Header Blog

1. Masuk ke blog anda terlebih dahulu.
2. Silahkan anda pilih Template lalu pilih Edit HTML

2. Kemudian cari kode script <![CDATA[ atau <b:skin><![CDATA[ atau ]]></b:skin> tekan tombol CTRL+F pada keyboard anda untuk mempermudah pencarian.

4. Selanjutnya letakan kode script dibawah ini tepat di atas salah satu kode yang di cari sebelumnya.

/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 980px;background:#e8e7e7;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 960px;background:#e8e7e7;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}

Silahkan anda ganti :
Tulisan warna Merah untuk mengatur lebar menu sesuai ukuran template anda
Tulisan warna Biru untuk mengatur warna menu background sesuai keinginan anda
Tulisan warna Kuning untuk mengatur warna huruf menu sesuai seelera anda

5. Selanjutnya silahkan anda cari kode <head> atau <body> dan letakan kode dibawah ini tepat di bawah kode tersebut.

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='/' title='Top Menu'>Top Menu </a></li>
<li><a href='http://www.bacaan-gratis.com/p/privacy-policy_4.html' title='Privacy Policy'>Privacy Policy </a></li>
<li><a href='http://www.bacaan-gratis.com/p/terms-of-service.html' title='Disclaimer'>Disclaimer </a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

Silahkan anda ganti
Alamat url menu privacy policy dan alamat url menu privacy policy blog anda
Tambahkan Tom Menu lainnya sesuai keinginan anda

6. Terakhir siilahkan Simpan Template

Selanjutnya bagaimana cara membuat menu di blog dan sub menu dropdown di blog, silahkan anda lihat berikut ini :

Cara Membuat Menu di Blog
Cara Membuat Sub Menu di Blog
Cara Edit Menu di Blog
Cara Mengedit Menu Dropdown di Blog
Menu dropdown

Demikian Tutorialm Blog : cara membuat menu di atas header blog. Terima kasih telah mengunjungi Bacaan-Gratis.Com, Jika anda ingin mengikuti berbagai tutorial blog menarik lainnya, silahkan anda LIKE di fans page facebook LIKE BACAAN GRATIS YA.^_^

http://www.bacaan-gratis.com/2015/06/membuat-menu-navigasi-di-atas-blog.html

Nah, biasanya blogger akan menemukan beberapa Blog SEO memiliki dua menu bar dengan Ikon Sosial Media dan berisi Abaout, Disclaimer, Sitemap ataupun Policy Privacy . Ada yang yang menggunakan Navigasi Top Menu, alias memasang menu di atas header blog. Kemudia ada juga yang memasang navigasi menu yang sama-sama dibawah header blog.

Sekarang bilismera akan share caranya. Begitu mudah, gampang dan simple.

Ikuti tahapan-tahapan berikut:
1. Copy dan paste kode CCS. Buka Edit HTML >>> cari kode dan paste di atas kode ]]</b:skin>

#top{background:#fff;margin:0 auto;padding:0;width:957px}#topnav{background:#FF7F50;height:30px;margin:0;padding:2px 0 1px;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;font-size:11px}.left{float:left}#topnav ul{float:left;list-style:none;margin:0 0 0 1px;padding:0}#topnav .current_page_item{background:#fff}#topnav ul li{list-style:none;margin:0 0 0 5px;padding:0}#topnav li{float:left;list-style:none;margin:0 5px 0 0;padding:0;font-weight:700;text-transform:Capitalize}#topnav li a,#topnav li a:link,#topnav li a:visited{font-weight:700;color:#000000;display:block;margin:0;padding:10px 10px 7px 1px}#topnav li a:hover{color:#FF3300}.right{float:right}right a{color:#999}.iconFacebook,.iconGoogle,.iconTwitter,.iconRSS{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCh6W5Qt5xox2__fP_sXiHbWlPA6Pao3DAC_c8vAkEB0CvcxyPzEZvdE3XJT4R2CvUuq23OMgndGEd9ANg7GREsy_atNMOgJtgMkcOVWrW2s4YStWJp5EpURgrVdv0C-IDb09vKMgYskYA/s1600/socialicons.png) no-repeat 4px 0;border-left:1px solid #fafafa;display:block;float:right;font-size:11px!important;font-weight:700;height:32px;line-height:32px!important;margin:0 0 0 6px;padding:0 6px 0 30px}.iconTwitter{background-position:4px -72px}.iconRSS{background-position:4px -108px;padding-right:0}.iconGoogle{background-position:4px -36px}

2. Kode HTML
Copy & paste kode berikut ini:

a. Jika Navigasi Menu ingin diletakkan di atas header maka Paste di bawah <div class='outer-wrapper'> atau di atas kode <div class='header-wrapper'>
b. Jika Navigasi menu ingin diletakkan di bawah header, maka Copas kode tersebut di bawah kode <div id='content-wrapper'>

<div id='top'>
<div id='topnav'>
<div class='left'>
<b:section id='topmenu' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='TopMenu' type='PageList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='page_item current_page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
<b:else/>
<li class='page_item'><a expr:href='data:link.href' expr:title='data:link.title'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div class='right'>
<a class='iconFacebook' href='https://www.facebook.com/bilismerablog/'>Facebook</a>
<a class='iconTwitter' href='https://www.twitter.com/ariesailer'>Twitter</a>
<a class='iconRSS' href=' https://www.twitter.com'>RSS</a>
<a class='iconGoogle' href='https://plus.google.com/u/0/107444140534543115743'>Google+</a> </div></div></div>

1. 3. Gnati tulisan yang berwarna Merah dengan URL akun social media anda. Kemudia Save Template

2. 4. Setelah berhasil tersimpan, anda buka Tata Letak>>> Top/ButtonMenu>>> kemudian centang Laman atau Page menu sesuai keinginan anda. Jika belum ada laman, maka terlebih dahulu membuat pada kolom Laman>>>Laman Baru.

5. Selesai dan Save Tata Letak. Semoga berhasil…!

Gila Script

Cara Mudah Membuat Menu Navigasi Pada Blog

0 Response to "Cara Mudah Membuat Menu Navigasi Pada Blog"

Post a Comment