MAN Sengkol: Cara Mudah Membuat Menu Navigasi pada Blogspot

Untuk Melihat Selengkapnya?

Menu Navigasi adalah sebuah aksesoris/widget yang mutlak harus ada dalam sebuah website/blog entah apapun bentuknya, karena menu navigasi selain mempercantik tampilan website/blog juga merupakan alat bagi pemilik maupun pengunjung untuk menjelejahi isi website/blog dengan mudah.

Beberapa waktu lalu Saya ingin membuat menu navigasi horizontal yang berada di bawah header. Berbagai sumber dan tutorial tentang cara membuat menu horizontal telah saya pelajari, tetapi ternyata ketika diterapkan hasilnya tidak ada yang bagus bahkan bikin tampilan template blog saya menjadi acak-acakan. Namun demikian saya tidak pernah menyerah dan dengan modaldari bermacam-macam tutorial yang telah saya pelajari, akhirnya saya bisa membuat menu navigasi seperti yang terlihat pada blog ini.

Membuat menu navigasi seperti pada blog ini tidak sesulit apa yang saya bayangkan sebelumnya, ternyata cukup memanfaatkan fasilitas yang ada pada http://www.mycssmenu.com/ dan dengan memanfaatkan fasilitas dari website tersebut, selain gratis juga telah tersedia code HTML dan CSS yang sudah siap pakai, namun jika tampilannya ingin sesuai dengan selera kita tinggal mengeditnya saja dan disitu pun telah disediakan fasilitas untuk mengedit tampilan menu yang akan kita gunakan.

Baiklah sekarang saya akan langsung memberikan Cara Mudah Membuat Menu Navigasi Pada Blogspot sesuai dengan pengalaman saya, berikut ini caranya:

Kunjungi dulu http://www.mycssmenu.com/ dan Anda akan dihadapkan pada halaman seperti di bawah ini:
Pada halaman itu seperti pada gambar di atas, Anda bisa memilih bentuk menu navigasi horizontal atau menu navigasi vertical dan jika ingin melihat dahulu tampilannya Anda bisa klik tulisan Demo, namun jika sudah menemukan menu yang sesuai selera, Anda bisa langsung klik Customize yang berada dibawah gambar seperti yang saya tunjukan dengan tanda anak panah, selanjutnya akan terbuka windows baru atau halaman baru seperti pada gambar di bawah ini :
Silahkan copy paste code HTML dan CSS-nya pada notepad atau MS Word Anda dengan cara klik tulisan HTML dan CSS seperti yang saya tunjukkan dengan tanda lingkaran pada gambar di atas. Kira-kira kodenya seperti pada kotak di bawah ini:

Contoh Code CSS


<style type="text/css">

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}

/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/

/* MyCSSMenu 0 */

/*"""""""" (MAIN) Container""""""""*/
#qm0
{
background-color:transparent;
}

/*"""""""" (MAIN) Items""""""""*/
#qm0 a
{
padding:5px 15px 5px 20px;
color:#6585B9;
font-family:Arial;
font-size:12px;
text-decoration:none;
font-weight:bold;
}

/*"""""""" (MAIN) Parent Items""""""""*/
#qm0 .qmparent
{
background-image:url("images/plus_main.gif");
background-repeat:no-repeat;
background-position:9px 10px;
}

/*"""""""" (MAIN) Active State""""""""*/
body #qm0 .qmactive, body #qm0 .qmactive:hover
{
color:#C7C7C7;
text-decoration:underline;
}

/*"""""""" (SUB) Container""""""""*/
#qm0 div, #qm0 ul
{
padding:5px;
margin:-2px 0px 0px -6px;
background-color:transparent;
border-width:1px;
border-style:none;
border-color:#A6A6A6;
}

/*"""""""" (SUB) Items""""""""*/
#qm0 div a, #qm0 ul a
{
padding:5px 50px 5px 20px;
background-color:transparent;
color:#F5F5F5;
font-size:11px;
font-weight:bold;
border-width:0px;
border-style:none;
border-color:#000000;
}

/*"""""""" (SUB) Hover State""""""""*/
#qm0 div a:hover, #qm0 ul a:hover
{
color:#3F3F3F;
text-decoration:none;
}

/*"""""""" (SUB) Parent Items""""""""*/
#qm0 div .qmparent
{
background-image:url("images/plus_sub.gif");
}

/*"""""""" (SUB) Parent Hover State""""""""*/
#qm0 div .qmparent:hover
{
background-image:url("images/plus_sub_hover.gif");
}

/*"""""""" (SUB) Active State""""""""*/
body #qm0 div .qmactive, body #qm0 div .qmactive:hover
{
background-color:#747A86;
background-image:url("images/minus_sub.gif");
color:#EEEEEE;
}

/*"""""""" (main) Rounded Items""""""""*/
#qm0 .qmritem span
{
border-color:#A6A6A6;
background-color:#3F3F3F;
background-image:url("images/minus_main.gif");
background-repeat:no-repeat;
background-position:9px 5px;
}

/*"""""""" (main) Rounded Items Content""""""""*/
#qm0 .qmritemcontent
{
padding:0px 0px 0px 20px;
}

/*"""""""" (sub) Rounded Items""""""""*/
#qm0 div .qmritem span
{
border-color:#666666;
background-color:#EEEEEE;
}

/*"""""""" (sub) Rounded Items Content""""""""*/
#qm0 div .qmritemcontent
{
padding:0px 0px 0px 4px;
}

/*"""""""" Sub Hover Fill Items [Static]""""""""*/
#qm0 div .qmhoverfill
{
background-color:#C0CAE3;
}

/*"""""""" Custom Rule""""""""*/
div#qm0 div div
{
margin:0px 0px 0px -6px;
}

</style>

Contoh Code HTML

<ul id="qm0" class="qmmc">

<li><a class="qmparent" href="javascript:void(0)">Tech Divisions</a>

<ul>
<li><a href="javascript:void(0)">Management</a></li>
<li><a class="qmparent" href="javascript:void(0)">Global Sites</a>

<ul>
<li><a href="javascript:void(0)">Asia</a></li>
<li><a href="javascript:void(0)">South America</a></li>
<li><a href="javascript:void(0)">Australia</a></li>
<li><a href="javascript:void(0)">North America</a></li>
<li><a href="javascript:void(0)">Europe654</a></li>
<li><a href="javascript:void(0)">Africa</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Investors</a>

<ul>
<li><a href="javascript:void(0)">Sony</a></li>
<li><a href="javascript:void(0)">Fed-Ex</a></li>
<li><a href="javascript:void(0)">Corp. A and B</a></li>
<li><a href="javascript:void(0)">Smuckers</a></li>
<li><a href="javascript:void(0)">Phillips</a></li>
<li><a href="javascript:void(0)">Slats Brewery</a></li>
</ul></li>

<li><a href="javascript:void(0)">Worldwide</a></li>
<li><a href="javascript:void(0)">Product Overview</a></li>
<li><a href="javascript:void(0)">Publicity</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Advancement</a>

<ul>
<li><a href="javascript:void(0)">Satisfaction</a></li>
<li><a class="qmparent" href="javascript:void(0)">Our Goals</a>

<ul>
<li><a href="javascript:void(0);">Customer Satisfaction</a></li>
<li><a href="javascript:void(0);">Sales Forcast</a></li>
<li><a href="javascript:void(0);">Projections</a></li>
<li><a href="javascript:void(0);">Advanced Products</a></li>
<li><a href="javascript:void(0);">Employee Commitment</a></li>
<li><a href="javascript:void(0);">Environmental</a></li>
<li><a href="javascript:void(0);">Law Suit Avoidence</a></li>
<li><a href="javascript:void(0);">Free Ice Cream</a></li>
</ul></li>

<li><a href="javascript:void(0)">Product Warranty</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">Product Quality</a></li>
<li><a href="javascript:void(0)">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Our Investors</a>

<ul>
<li><a href="javascript:void(0)">Annual Meetings</a></li>
<li><a href="javascript:void(0)">Financial Reports</a></li>
<li><a href="javascript:void(0)">Nasdaq Quoting</a></li>
<li><a href="javascript:void(0)">Dividend Information</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">CEO Announcements</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0)">Relations</a>

<ul>
<li><a href="javascript:void(0)">Satisfaction</a></li>
<li><a href="javascript:void(0)">Our Goals</a></li>
<li><a href="javascript:void(0)">Product Warranty</a></li>
<li><a href="javascript:void(0)">Future Outlook</a></li>
<li><a href="javascript:void(0)">Product Quality</a></li>
<li><a href="javascript:void(0)">Continued Support</a></li>
</ul></li>

<li><a class="qmparent" href="javascript:void(0);">Propulsion</a>

<ul>
<li><a href="javascript:void(0);">Advanced Science</a></li>
<li><a href="javascript:void(0);">Biological Impact</a></li>
<li><a href="javascript:void(0);">Trajectories</a></li>
<li><a href="javascript:void(0);">Gravity Boosting</a></li>
<li><a href="javascript:void(0);">Clean Fuels</a></li>
</ul></li>

<li class="qmclear"> </li></ul>


<script type="text/javascript">qm_create(0,false,0,500,'lev2',false,false,false,true);</script>
Selanjutnya cara pasang code menu navigasi tersebut pada blog, seperti biasa Anda harus masuk dulu ke dashbord blogspot Anda, lalu klik layout dan klik Edit HTML jangan lupa centang kotak expand template dan sebaiknya terlebih dahulu download template anda.
Sekarang cara memasukan kode dari http://www.mycssmenu.com/ ke dalam tempat Anda, caranya cari kode </b:skin> lalu masukan kode CSS Anda di atas kode </b:skin>, tetapi sebelumnya harus dihapus dulu tulisan <style type="text/css"> yang ada diawal kode CSS dan tulisan </style> yang ada diakhir kode CSS Anda.
Sebelum memasukan kode HTML Anda ke dalam template, sebaiknya ganti dulu alamat/link serta judul pada kode HTML tersebut dengan link dan judul link Anda, jika sudah sekarang masukan kode HTML Anda di bawah code berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>
Simpan/Save Template dan lihat hasilnya.