misther-junett: 03/01/11

Tutorial Blog
Link
Others
TOURING
- Semarang
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Kendal
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
- Grobogan
  - 2a
    - 1
    - 2
  - 2b
    - 1
    - 2
RSS

Selasa, 01 Maret 2011

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.

Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7no1vU2RjWqUdnAAXIFmfFrm7FNsetGAYKvjDRbs8CJ75rs5C7TPDIae20E8lQbTPLqVuTGPwoTqQCbJjg3vMhg85XINgZtVg1HyE88Z1c-Fvu2B2SosBwna4j_cKb1Hnnn2eoE9iTF8Y//) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:

Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:

background: #1c426d url(http://url-gambar);

4. Setelah itu cari kode seperti dibawah ini

Cari kode di template anda yang paling mendekati dengan kode diatas

5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.

6. Sehingga susunannya menjadi seperti ini:

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>

</b:section>

</div>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<b:if cond='data:title'/>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

7. Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.

Cara Mudah Membuat Menu Navigasi pada Blogspot

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.

Halaman

Selasa, 01 Maret 2011

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Cara Mudah Membuat Menu Navigasi pada Blogspot