Cara membuat navigation DropDownMenu Dengan sub-sub menu

sharing kali kita akan coba mambahas cara membuat navigation menudropdown yang bila cursor melintas akan muncul sub-sub menu baru

salah satu cara yang membuat kita tersenyum adalah berbuat kebajikan dengan ikhlas

sharing kali kita akan coba mambahas cara membuat navigation menudropdown yang bila cursor melintas akan muncul sub-sub menu baru

Last Modif at July 8th, 2011

Silakan ikuti url berikut untuk tutorial versi terbaru :

http://www.indaam.net/2011/06/imenu-dropdown-menu-versi-2-for-wordpress-dan-blogspot/

menu dropdown yang kita buat kali ini mungkin lebih baik dari versi-versi sebelumnya, untuk menu navigation dropdown versi sebelumya silakan klik tag menu-menu atau kategory menu-navigation.
mmm, dan basa-basinyanya kepanjangan kali ya? tulisan kali ini saya akan mencoba membuatnya seperti percakapan, semoga saja lebih mudah untuk dimengerti :)

berikut rincian percakapanya, kita asumsikan ada dua blogger yang sedang chat via Gtalk, satu bernama andi sultan dan yang satu bernama rizal coy
andi sultan: sore
rizal coy: sore juga
andi sultan: boleh nanya ngga?
rizal coy: yah, apa?
andi sultan: gini, saya ingin menambahkan menu-menu navigasi scroll di blog saya, caranya gimana ya?
rizal coy: contohnya?
andi sultan : itu loh menu-menu yang bila cursor melintas, maka akan muncul menu-menu lagi.
rizal coy: oh, itu
andi sultan: caranya giman?
rizal coy: versi staticnya dulu ya
andi sultan : ia, caranya?
rizal coy: coba buka program notepad, notepad ++ juga boleh
andi sultan : sudah
rizal coy : coba copy markup serta style berikut

<!DOCTYPE>
<html>
<head>
<title>menu menu drop by indam site</title>
<meta name="author" content="indam" />
<style type="text/css">
#menudrop{
margin:0;
padding:0;
clear:both;
background-color:#151B8D;
}
/*
#menudrop{
width:67%;
}*/
/* #menustyle */
.menustyle{
float:left;
background-color:transparent;
margin:0;
padding:0;
text-transform:capitalize;
text-decoration:none;
font:bold 16px Times New Roman;
}
.menustyle ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
.menustyle li{
float:left;
list-style:none;
margin:0;
padding:0;
min-width:50px;
text-align:center;
}
.menustyle li a,
.menustyle li a:link,
.menustyle li a:visited{
border-left:1px solid #ccc;
color:white;
display:block;
padding:8px 5px;
text-decoration:none;
}
.menustyle li a:hover,
.menustyle li a:active{
text-decoration:none;
background:#555;
color:#f1f1f1}
.menustyle li li a,
.menustyle li li a:link,
.menustyle li li a:visited
{text-align:left;
background:#555;
border-bottom:1px solid #ccc;
width:200px;
color:#ffffff;
padding:10px 5px
}
.menustyle .ketikahoverbuka{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:500px;
background:#555
}
.menustyle .kategorinya{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:700px;
background:#555
}
.menustyle li li a:hover,
.menustyle li li a:active{
text-decoration:none;
background:white;
color:#555}
.menustyle li a.enclose,
.menustyle li a.enclose:visited{
border-top:1px solid #00FFFF
}
.menustyle li ul{
z-index:2;
position:absolute;
left:-10000px;
width:170px;
margin:0;
padding:0
}
.menustyle li ul a{
width:140px
}
.menustyle li ul ul{
margin:-75px 0 0 171px
}
.menustyle li:hover ul ul,
.menustyle li:hover ul ul ul,
.menustyle li.sfhover ul ul,
.menustyle li.sfhover ul ul ul{
text-decoration:none;
left:-10000px}
.menustyle li:hover ul,
.menustyle li li:hover ul,
.menustyle li li li:hover ul,
.menustyle li.sfhover ul,
.menustyle li li.sfhover ul,
.menustyle li li li.sfhover ul{
left:auto
}
.menustyle li:hover,.menustyle li.sfhover{
position:static}
/* --#menustyle -- */
</style>
</head>
<body>
<div id='menudrop'>
<ul class='menustyle'><li><a href='javascript:void(0)' rel='nofollow' >archive</a><ul class="ketikahoverbuka"> <li><a href='http://www.indaam.net/2010/08/' title='August 2010'>August 2010</a></li>
<li><a href='http://www.indaam.net/2010/07/' title='July 2010'>July 2010</a></li>
<li><a href='http://www.indaam.net/2010/06/' title='June 2010'>June 2010</a></li>
<li><a href='http://www.indaam.net/2010/05/' title='May 2010'>May 2010</a></li>
<li><a href='http://www.indaam.net/2010/04/' title='April 2010'>April 2010</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >kategory</a><ul class="kategorinya">
<li class="cat-item cat-item-3"><a href="http://www.indaam.net/category/animation/" title="animasi">animasi</a></li>
<li class="cat-item cat-item-4"><a href="http://www.indaam.net/category/blogspot-tips-and-tutorial/" title="blogspot tips and tutorial">blogspot tips and tutorial</a></li>
<li class="cat-item cat-item-5"><a href="http://www.indaam.net/category/cerita/" title="cerita">cerita</a></li>
<li class="cat-item cat-item-6"><a href="http://www.indaam.net/category/css/" title="css">css</a></li>
<li class="cat-item cat-item-7"><a href="http://www.indaam.net/category/html/" title="html">html</a></li>
<li class="cat-item cat-item-8"><a href="http://www.indaam.net/category/indaam-com/" title="indaam.net/tentang">indaam.net/tentang</a></li>
<li class="cat-item cat-item-42"><a href="http://www.indaam.net/category/indaam-comtentang/" title="indaam.net/tentang">indaam.net/tentang</a></li>
<li class="cat-item cat-item-9"><a href="http://www.indaam.net/category/js-script/" title="javascript">javascript</a></li>
<li class="cat-item cat-item-10"><a href="http://www.indaam.net/category/keamanan/" title="keamanan">keamanan</a></li>
<li class="cat-item cat-item-11"><a href="http://www.indaam.net/category/lainya/" title="lainya">lainya</a></li>
<li class="cat-item cat-item-12"><a href="http://www.indaam.net/category/menu-menu-navigasi/" title="menu navigasi">menu navigasi</a></li>
<li class="cat-item cat-item-43"><a href="http://www.indaam.net/category/menu-navigasi/" title="menu navigasi">menu navigasi</a></li>
<li class="cat-item cat-item-13"><a href="http://www.indaam.net/category/modif-default-themes/" title="modif default themes">modif default themes</a></li>
<li class="cat-item cat-item-14"><a href="http://www.indaam.net/category/plugins/" title="plugins">plugins</a></li>
<li class="cat-item cat-item-15"><a href="http://www.indaam.net/category/seo-tips/" title="seo">seo</a></li>
<li class="cat-item cat-item-16"><a href="http://www.indaam.net/category/source-dan-script-animasi/" title="source dan script animasi">source dan script animasi</a></li>
<li class="cat-item cat-item-17"><a href="http://www.indaam.net/category/teman/" title="teman">teman</a></li>
<li class="cat-item cat-item-18"><a href="http://www.indaam.net/category/theme/" title="theme">theme</a></li>
<li class="cat-item cat-item-19"><a href="http://www.indaam.net/category/for-wordpres-theme/" title="theme-wordress">theme-wordress</a></li>
<li class="cat-item cat-item-20"><a href="http://www.indaam.net/category/widget/" title="widget">widget</a></li>
<li class="cat-item cat-item-21"><a href="http://www.indaam.net/category/script-php-wordpress/" title="wordpress codex">wordpress codex</a></li>
<li class="cat-item cat-item-44"><a href="http://www.indaam.net/category/wordpress-codex/" title="wordpress codex">wordpress codex</a></li>
<li class="cat-item cat-item-22"><a href="http://www.indaam.net/category/wordpress-tips-and-tutorial/" title="wordpress tips and tutorial">wordpress tips and tutorial</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >my acount</a>
<ul class="ketikahoverbuka"><li><a href='javascript:void(0)' rel='nofollow' >my blog</a>
<ul><li><a href='http://indaam.net' target='_blank'>indam belajar wordpress</a></li>
<li><a href='http://indam-bontang.blogspot.com/' target='_blank'>indam bontang</a></li>
<li><a href='http://intheamwhy.blogdetik.com/' target='_blank'>indam blog detik</a></li>
<li><a href='http://intheamwhy.blogspot.com' title='damai itu indah' target='_blank'>damai itu indah </a></li>
</ul></li>
<li><a href='http://facebook.com/indaam' target='_blank'> my facebook </a></li>
<li><a href='http://profiles.frienster.com/indam' target='_blank'>my friendster</a></li>
<li><a href='http://twitter.com/intheamwhy' target='_blank'>my twitter</a></li>
<li><a href='http://www.myspace.com/intheamwhy' target='_blank'>my space</a></li>
</ul></li><li><a href='javascript:void(0)' rel='nofollow' >thanks to</a>
<ul class="ketikahoverbuka"><li><a href='http://salsabeela.com' title='salsabeela' target='_blank'>salsabeela</a></li>
<li><a href='http://twitter.com/salsabeela' title='salsabeela on twitter' target='_blank'>salsabeela on twitter</a></li>
<li><a href='http://facebook.com/salsabeela' title='salsabeela on facebook' target='_blank'>salsabeela on facebook</a></li>
<li><a href='http://kutukutubuku.com' title='kutukutubuku.com' target='_blank'>online book store</a></li>
<li><a href='http://tukusolution.com' title='web consultant' target='_blank'>web consultant</a></li>
<li><a href='http://langsingmulus.com' title='weight loss product retail' target='_blank'>langsingmulus.com</a></li>
<li><a href='http://heartyboutique.com' title='boutique online' target='_blank'>boutique online</a></li>
<li><a href='http://salsabeela.onsugar.com' title='hijab fashion blog' target='_blank'>hijab fashion blog</a></li>
<li><a href='http://unwinged.salsabeela.com' title='marriage life blog' target='_blank'>marriage life blog</a></li>
<li><a href='http://jakartadailyphoto.com' title='jakarta daily photo' target='_blank'>jakarta daily photo</a></li>
</ul></li>
<li><a href="#lainya">lainya</a></li>
<li><a href="#lainyalagi">lainya lagi</a></li>
</ul>
<div style="clear:both"></div>
</div>
</body>
</html>

andi sultan : sudah
rizal coy: paste ke notepad lalu save as dengan nama test-menu.htm dan pada save as type pilih all files
andi sultan sudah
rizal coy: coba jalankan test-menu.htm (double klick)
andi sultan: suda
rizal coy: seperti itu kah?
andi sultan: ya, cara membuatnya di wordpress gimana?
rizal coy: sudah install localhost dan wordpress offline?
andi sultan : sudah
rizal coy: ok, kalau gitu kita coba di localhot dulu ya
andi sultan: caranya?
rizal coy: active-kan localhost dan wp offline
andi sultan: trus?
rizal coy: masuk ke …/wp-content/themes/
andi sultan: lalu
rizal coy: kita coba di Twentyten dulu ya
andi sultan : ok
rizal coy: buka folder twentyten di …/wp-content/themes/…
andi sultan: sudah
rizal coy: buat file baru dengan nama menu-menudrop.php, di didalam folder twentyten dan ingat ekstensi filenya adalah [dot]php
andi sultan : sudah, trus?
rizal coy: edit menu-menudrop.php, kemudian isi dengan script berikut

<div id="menudrop">
<ul class='menustyle'>
<!--// you can edit this code-->
<!-- archive -->
<li><a href='javascript:void(0)' rel='nofollow' >archive</a>
<ul class="ketikahoverbuka"><?php wp_get_archives('type=monthly'); ?></ul>
</li>
<!--// end archives-->
<!--// kategorinya-->
<li><a href='javascript:void(0)' rel='nofollow' >kategori</a>
<ul class="kategorinya"><?php list_cats(1, '', 'name', 'asc', '', 1, 0, 0, 0, 0, 0, 0,'','','','','') ?></ul>
</li>
<!--// end kategorinya-->
<!--// feeds-->
<li><a href="<?php bloginfo('rss2_url'); ?>">feed</a></li>
<!--// end feeds -->
<!--// feds kommnet-->
<li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments feed</a></li>
<!--// end feed commnet-->
<!--// author-->
<li><a href='javascript:void(0)' rel='nofollow' >author</a>
<ul class="ketikahoverbuka">
<?php wp_list_authors('show_fullname=1&optioncount=0'); ?>
</ul>
</li>
<!--// end author-->
<!--// other site-->
<?php /* comment otther site
you can delete this comment and activate nav menu other site
<li><a href='javascript:void(0)' rel='nofollow' >other site</a>
<ul class="ketikahoverbuka">
<li><a href='http://google.com' title='google' target='_blank'>google</a></li>
<li><a href='http://wikipedia.org' title='wikipedia' target='_blank'>wikipedia</a></li>
<li><a href='http://yahoo.com' title='yahoo' target='_blank'>yahoo</a></li>
<li><a href='http://facebook.com' title='facebook' target='_blank'>facebook</a></li>
<li><a href='http://twitter.com' title='twitter' target='_blank'>twitter</a></li>
<li><a href='http://w3.org' title='w3c' target='_blank'>w3c</a></li>
<li><a href='http://blogger.com' title='blogger' target='_blank'>blogger</a></li>
<li><a href='#' title='judul' target='_blank'>mail</a>
<ul>
<li><a href='http://gmail.com' title='google mail' target='_blank'>google mail</a></li>
<li><a href='http://mail.yahoo.com' title='yahoo mail' target='_blank'>yahoo mail</a></li>
<li><a href='http://hotmail.com' title='hotmail' target='_blank'>hotmail</a></li>
</ul>
</li>
<li><a href='http://youtube.com' title='judul' target='_blank'>youtube</a></li>
<li><a href='http://www.indaam.net' title='indam site' target='_blank'>indam site</a></li>
<li><a href='http://salsabeela.com' title='ollie blogs' target='_blank'>ollie blog</a></li>
<li><a href='http://wordpress.com' title='indam site' target='_blank'>wordpress com</a></li>
</ul>
</li> End comment other site*/?>
<!--// end other site-->
<!--// blogroll-->
<li><a href='javascript:void(0)' rel='nofollow' >Blogroll</a>
<ul class="ketikahoverbuka">
<?php wp_list_bookmarks('title_li=&categorize=0'); ?>
</ul>
</li>
<!--// end blogroll
regards www.indaam.net
-->
</ul><div style="clear:both"></div>
</div>

andi sultan: sudah
rizal coy: save
andi sultan: sudah juga
rizal coy : edit style.css lalu tambahan style berikut

#menudrop{
margin:0;
padding:0;
clear:both;
background-color:#151B8D;
}
/*
#menudrop{
width:67%;
}*/
/* #menustyle */
.menustyle{
float:left;
background-color:transparent;
margin:0;
padding:0;
text-transform:capitalize;
text-decoration:none;
font:bold 16px Times New Roman;
}
.menustyle ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
.menustyle li{
float:left;
list-style:none;
margin:0;
padding:0;
min-width:50px;
text-align:center;
}
.menustyle li a,
.menustyle li a:link,
.menustyle li a:visited{
border-left:1px solid #ccc;
color:white;
display:block;
padding:8px 5px;
text-decoration:none;
}
.menustyle li a:hover,
.menustyle li a:active{
text-decoration:none;
background:#555;
color:#f1f1f1}
.menustyle li li a,
.menustyle li li a:link,
.menustyle li li a:visited
{text-align:left;
background:#555;
border-bottom:1px solid #ccc;
width:200px;
color:#ffffff;
padding:10px 5px
}
.menustyle .ketikahoverbuka{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:500px;
background:#555
}
/*
.menustyle .categories{
float:left;
margin:0;
padding:0;
}
.menustyle .ifmouseover li{
float:left;
margin:0;
padding:0
}*/
.menustyle .kategorinya{
z-index:2;
position:absolute;
left:-10000px;
margin:0;
width:700px;
background:#555
}
.menustyle li li a:hover,
.menustyle li li a:active{
text-decoration:none;
background:white;
color:#555}
.menustyle li a.enclose,
.menustyle li a.enclose:visited{
border-top:1px solid #00FFFF
}
.menustyle li ul{
z-index:2;
position:absolute;
left:-10000px;
width:170px;
margin:0;
padding:0
}
.menustyle li ul a{
width:140px
}
.menustyle li ul ul{
margin:-75px 0 0 171px
}
.menustyle li:hover ul ul,
.menustyle li:hover ul ul ul,
.menustyle li.sfhover ul ul,
.menustyle li.sfhover ul ul ul{
text-decoration:none;
left:-10000px}
.menustyle li:hover ul,
.menustyle li li:hover ul,
.menustyle li li li:hover ul,
.menustyle li.sfhover ul,
.menustyle li li.sfhover ul,
.menustyle li li li.sfhover ul{
left:auto
}
.menustyle li:hover,.menustyle li.sfhover{
position:static}
/* --#menustyle -- */

andi sultan: sudah
rizal coy: jangan lupa save, setelah di save edit lagi header.php lalu hapus <div id=”main”> yang ada di line 78, kemudian ganti dengan script ini

<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?><div id="main">

rizal coy: save, sekarang coba activate themes Twentyten
andi sultan: thanks ya
andi sultan: cara menambahkan dithemes lain gimana?
rizal coy: pada intinya ikuti langkah-langkah diatas lalu sesuaikan penempatan script ini

<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?>

contoh, coba pindakan script ini

<?php include (TEMPLATEPATH.'/menu-menudrop.php') ?>

dibawah

<div id="site-description"><?php bloginfo( 'description' ); ?></div>
disini, line 60

andi sultan: kalau mau ubah tampilan menu, misal warna, latar belakang dan family font giman?
rizal coy: edit css yang ditambahkan pada style.css tadi
andi sultan: thanks banget ya
rizal coy: sama-sama, senang bisa membantu
andi sultan: kapan-kapan bisa sharing lagi nggak?
rizal coy: tentu

***

hahaha… semoga lebih mudah untuk dimengerti.

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

16 thoughts on “Cara membuat navigation DropDownMenu Dengan sub-sub menu”

  1. Sandro Yosua says:

    Terima kasih gan uda dijawab pertanyaanku yg lwat fb.

  2. ganda says:

    “active-kan localhost ” -> kalimat yang salah.

  3. indam says:

    sandro,
    iya gan, terima kasih kembali.

    ganda,
    itulah saya, selalu penuh dengan kesalahan.

  4. ardianzzz says:

    itulah saya, selalu penuh dengan kesalahan.

    Ha? lalu?
    Tidak ada yang salah dude, just not good enough.

    Jika ini adalah tutorial saya pikir terlalu bloated. Bukankah sebenarnya kode yang disajikan bisa diminimalkan? Ups, maaf saya mengkritisi gaya menulismu, saya tahu saya tidak berhak mengatur-ngatur seorang blogger & blognya. Yeah, yang saya tahu adalah, kamu dapat melakukan yang lebih baik bro.

    :)

  5. indam says:

    Ardianzzz,
    saya adalah orang yang banyak melakukan kesalahan. saya hanya berusaha agar ilmu saya bermanfaat untuk orang lain.
    kadang saya berpikir apa gunanya ilmu, jika ilmu itu hanya untuk diri kita sendiri?

    iya, sebenarnya si bisa di kuruskan tapi saya bingung jika nantinya ngga di mengerti, sebenernya memperlihatkan source kodenya saja sudah cukup. tapi, yaitu tadi ‘apakah bisa dipahami.

    hohoho, kritik ya, sebenarnya saya senang, karena itu dapat membuat saya berkembang. thanks bro, saya akan berusaha memperbaiki gaya penulisan saya :)

    1. ArdianZzZ says:

      No! Justru yang dikuruskan terutama adalah source code-nya. Kalau memang sourcenya banyak dan penting mendingan dibikin file yang bisa didownload.

      Sederhana saja, saya rasa pengunjung tidak punya cukup waktu untuk menyimak kode di atas satu per satu, baris per baris — lagipula perintahnya untuk menyalin tempelnya saja. Akibatnya halaman posting menjadi tidak enak dipindai, istilahnya noisy.

  6. indam says:

    Ardianzz,
    hehehe, source(terutama cssnya) itu sudah paling kurus, menudrop ini sudah saya gunakan sejak di blogspot. saya suka dgn menudropdown ini karena ngga pakai javascript(lebih ringan) dan kita bisa membuat banyak sub-submenu dan subsubmenu-lagi.

    saya juga berpikir seperti itu, membuat file download, hanya saja keadaan sekarang ngga memungkinkan. sebenarnya agar terlihat lebih rapi bisa pakai tag textarea untuk isi sourcenya, hanya saja di wp itu lebih rumit jika pakai tag textarea.

  7. adin says:

    kalo untuk blog blogspot gimana gan? sama kah?

  8. ganda says:

    Indam,
    Mana ada manusia yang selalu benar? Karena itulah kita akan selalu belajar hingga akhir hayat?

    1. indam says:

      ya, sampai kapanpun itu ‘nggak akan pernah ada manusia yang selalu benrar’. setuju bgt, belajar sampai akhir hayat.

  9. steven says:

    sgt senang bs menemukan web ini. byk p?an yg tertunda seputar dunia pemograman web, tp sy bingung mau nanya sm siapa. cari di buku tdk memuaskan..
    sy may tax, tag meta fungsinya utk apa yach..??

  10. steven says:

    bisa tidak ada penjelasan dari script yg sdh diberikan..?? kl kepanjangan dibuat di file word atau pdf aja..!! maaf sdh merepotkan..

  11. indam says:

    Steven,
    saya sudah pernah menambahkan keterangan di setiap script yg saya tulis, berhubung waktu yg kurang, yaudah seadanya saja. coba klik artikel brhubungan ‘tulisan ini’.

    Untuk meta tag coba baca ini http://www.indaam.net/2010/04/tag-meta-yang-saya-tambahkan-di-indaam-com/

    1. fatiymae says:

      ka, kalo mau bikin tampilan yg Archive, kategori, thanks to dll menurun gimana yaa?? trus kalo udah menurun, pas mouse deketin ke Archive itu muncul Sub menunya ke samping gimanaa?? makasiih.. ^^v

  12. fatiymae says:

    wahh thanks kaka, ini yang lagi saya carii buat bikin web.. hehee
    btw ini bisa buat dimasukin ke dreamweaver gak yaa?? makasiih.. ^^

  13. andre ardi says:

    kak, tu yang di blogger di tambahin di mana kah??

    “” kah?
    “” kah?
    “]]>” ato yang lain??

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-