SS Setelah sebelumnya kita membahas CSS My Opera pada komentar dan atribut-atributnya, kini penulis mencoba memberikan pengetahuannya tentang CSS My Opera pada MENU. Namun di sini yang akan dibahas hanyalah dasar-dasarnya saja dan untuk itu pembaca bisa berimprovisasi sendiri.
Dan ini adalah kode-kode CSS pada MENU di blog My Opera:
Kode #menu {height:30px;} ini berfungsi untuk mengatur tinggi kolom menu yang anda inginkan. Sedangkan kode #menu {background:#B2A0A0; text-align:center;} berfungsi untuk mengatur warna dan text pada tiap-tiap menu.
Kode lapisan ke dua atau untuk perkolom MENU adalah:
#menu ul { margin:0 0 0 20px; } #menu ul { margin-center:15px; } #menu li { float:left; list-style:none; line-height:30px; font-size:1.3em;}
Ini untuk mengatur masing-masing kolom MENU dengan margin, text-align dan float. Pada #menu { ... } anda dapat juga menambahkan background dengan gambar. Caranya masukkan saja url gambar yang hendak dimasukkan.
Ini berfungsi untuk mengatur link menu, hover menu dan actived menu. Dan di sini anda dapat menambahkan background gambar seperti pada #menu, bedanya ini untuk masing-masing kolom. Namun bila anda menginginkan link MENU berbeda dengan yang lain, bisa juga ditambahkan kode seperti ini:
#menu_blog a {content:"text";} #menu_archive a {content:"text";} #menu_Favorites a {content:"text";} #menu_Albums a {content:"text";} #menu_friends a {content:"text";} #menu_links a {content:"text";} #menu_unite a {content:"text";} #menu_about a {content: "text";}
Pada {content:"text";} dapat anda ganti dengan kata yang sesuai dengan keinginan anda dan usahakan pula sesuai dengan kata yang diganti. Misalnya kata about diganti dengan tentang, atau nama anda. Bisa pula kata friends diganti dengan temanku dan sebagainya.
Bagaimana, mudah bukan? Sekarang anda dapat berimprovisasi sendiri dengan menambahkan border, mengubah margin atau mengganti background dengan gambar yang sekiranya menarik bagi anda.
Selamat mencoba dan semoga berhasil dengan eksperimennya. Dan penulis sangat mengharapkam masukan dari para pembaca yang sekirannya lebih paham tentang CSS di My Opera.
klu jatuh cinta keras pun tak terasa sakit koq....
upst!!! cm bercanda lho mbah jgn masukin hati... masukin kolong sj,,,hehehe. btw... aq coba baca dan cermati itu css koq byk bgt hrs di tulis semua ya mbah.....????? ntr jari2q bisa kriting kya mie goreng dunk....
Mbah vespa bukan hanya sebutan nya simbah kok, pada hakekat memang sdh sepuh usianya, umur mbah-vespa sdh 61 thn kok, gak mungkin lah mau macam2. Ini hanya ngikuti jaman, di jaman mbsh msh muda dulu belum ada internet seperti ini e,
Aisya..bkn takut jatuh cinta, justru mbah dah tua, aisya.. takut tidak sopan... ngapunten njih mbah umpami wonten gegojek'ane aisya ingkang mboten remen ing manah'e panjenengan...
Sbnrnya usia bkn masalah yg pnting bgi aisya...bisa menempatkn diri dimna kita berada,,, soal css ntr klu ada wktu di coba copas njih mbah... asal to???
My Opera
You must be 
« Previous
Next »
Comments
{ntah-lah,} 【216534】mbah-pesva # Monday, August 22, 2011 2:01:07 AM
Setelah sebelumnya kita membahas CSS My Opera pada komentar dan atribut-atributnya, kini penulis mencoba memberikan pengetahuannya tentang CSS My Opera pada MENU. Namun di sini yang akan dibahas hanyalah dasar-dasarnya saja dan untuk itu pembaca bisa berimprovisasi sendiri.
Dan ini adalah kode-kode CSS pada MENU di blog My Opera:
#menu { height:40px; }
#menu { background:#B2A0A0 ; text-align:center;}
#menu ul { margin:0 0 0 20px; }
#menu ul { margin-center:15px; }
#menu li { float:left; list-style:none; line-height:30px; font-size:1.3em;}
#menu a:link, #menu a:visited, #menu a:active {background:#F28686 ; color:#fff;}
#menu a:link, #menu a:visited, #menu a:active { display:block; padding:0 19px; text-decoration:none;}
#menu a:hover, #menu #selected:link, #menu #selected:visited { background-color:#FF6A6A;}
#top #menu a:hover, #menu #selected:link, #menu #selected:visited { background-position:0 -28px;}
Perhatikan kode CSS lapisan pertama pada MENU:
#menu { height:30px; }
#menu { background:#B2A0A0; text-align:center;}
Kode #menu {height:30px;} ini berfungsi untuk mengatur tinggi kolom menu yang anda inginkan. Sedangkan kode #menu {background:#B2A0A0; text-align:center;} berfungsi untuk mengatur warna dan text pada tiap-tiap menu.
Kode lapisan ke dua atau untuk perkolom MENU adalah:
#menu ul { margin:0 0 0 20px; }
#menu ul { margin-center:15px; }
#menu li { float:left; list-style:none; line-height:30px; font-size:1.3em;}
Ini untuk mengatur masing-masing kolom MENU dengan margin, text-align
dan float. Pada #menu { ... } anda dapat juga menambahkan background dengan gambar. Caranya masukkan saja url gambar yang hendak dimasukkan.
#menu a:link, #menu a:visited, #menu a:active {background:#F28686; color:#fff;}
#menu a:link, #menu a:visited, #menu a:active { display:block; padding:0 19px; text-decoration:none;}
#menu a:hover, #menu #selected:link, #menu #selected:visited { background-color:#FF6A6A;}
#top #menu a:hover, #menu #selected:link, #menu #selected:visited { background-position:0 -28px;}
Ini berfungsi untuk mengatur link menu, hover menu dan actived menu. Dan di sini anda dapat menambahkan background gambar seperti pada #menu, bedanya ini untuk masing-masing kolom. Namun bila anda menginginkan link MENU berbeda dengan yang lain, bisa juga ditambahkan kode seperti ini:
#menu_blog a {content:"text";}
#menu_archive a {content:"text";}
#menu_Favorites a {content:"text";}
#menu_Albums a {content:"text";}
#menu_friends a {content:"text";}
#menu_links a {content:"text";}
#menu_unite a {content:"text";}
#menu_about a {content: "text";}
Pada {content:"text";} dapat anda ganti dengan kata yang sesuai dengan keinginan anda dan usahakan pula sesuai dengan kata yang diganti. Misalnya kata about diganti dengan tentang, atau nama anda. Bisa pula kata friends diganti dengan temanku dan sebagainya.
Bagaimana, mudah bukan? Sekarang anda dapat berimprovisasi sendiri dengan menambahkan border, mengubah margin atau mengganti background dengan gambar yang sekiranya menarik bagi anda.
Selamat mencoba dan semoga berhasil dengan eksperimennya. Dan penulis sangat mengharapkam masukan dari para pembaca yang sekirannya lebih paham tentang CSS di My Opera.
{ntah-lah,} 【216534】mbah-pesva # Friday, August 26, 2011 3:25:40 PM
{ntah-lah,} 【216534】mbah-pesva # Saturday, September 24, 2011 10:59:41 PM
#top2 , #top {height:0px; padding-left:0px; background:#8b5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)top center repeat;}
#top h1 {font-family:"title";font-size:30px;} body {background:#8B5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;background-attachment:fixed;}
#wrap3 { BORDER-RIGHT:red 0px solid;
BORDER-TOP: red 3px solid;
PADDING-BOTTOM: 80px;
MARGIN: 0px auto;
BORDER-LEFT:black 1px solid;
BORDER-BOTTOM:black 1px solid; }
#menu a:link {text-style;color:#ccc;}
#menu li {float:right}
#myo2 , #header , #wrap2 , #wrap4 , #menu , #footer ,#wrap0 , #user-top {background:#8B5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;background-attachment:fixed:}
#operatxtad a:link {content:"Get Opera for your PC/Mobile";}
{position:fixed !important;}
.post {border: 2px solid #ffffff;margin: 5px 0;overflow: auto; color:none; font-size:15px;}
.postdate {color:#8B5413;text-shadow:-2px -2px -1px black;}
.comments .text {margin:0 0 0 58px;color:none;text-shadow:-1px -1px 2px orange;url(http//tamejo.xtgem.com/bg/10.jpg);}
.comments .text a:link {color:#996600;text-shadow:0px 1px 0px silver;}
.ownercomment .text {margin:0 0 0 58px;color:none;text-shadow:-1px -2px -1px #CC0000;}
.comment-date, .comment-date .permalink:link {color:#005500;text-shadow:-2px -2px -1px red;}
.comment-by a:link {background:000000;color:red;text-shadow:-1px -1px -1px silver}
comment-by a:link {background:none;color:#005500;text-shadow:0px 1px 0px #e5e5ee, 3px 3px silver, 3px -3px silver, -3px -3px silver, -3px 3px silver, 0px -3px silver, 0px 3px silver, -3px 0px silver, 3px 0px silver, 2px 2px silver, 2px -2px silver, -2px -2px silver, -2px 2px silver, 0px -2px silver, 0px 2px silver, -2px 0px silver, 2px 0px silver;}
#newcomment h3 {content:"TULIS KOMETAR NYA DI SINI";color:red;text-shadow:0px -1px #fff, 0px 1px #333, 3px 3px gray, 3px -3px gray, -3px -3px gray, -3px 3px gray, 0px -3px gray, 0px 3px gray, -3px 0px gray, 3px 0px gray, 2px 2px gray, 2px -2px gray, -2px -2px gray, -2px 2px gray, 0px -2px gray, 0px 2px gray, -2px 0px gray, 2px 0px gray;}
.comment1, .comment2 {background:(http://files.myopera.com/gilang-arlingga/Aplikasi/6.jpg) repeat;border: 1px solid #005500;margin: 15px 0;overflow: auto; color:none;}
.avatar , #newcomment .submit {background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;}
#comment {background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;}
mainwrap:after {content:"Terima kasih atas kunjungannya,tapi mohon maaf komentar disable dulu." ;color:#996600;background:url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg) repeat;border:1px solid #FF000000;margin-bottom:15px;margin-right:210px;text-align:center;text-shadow:-1px -1px 0px #FF0000;width:296px;display:block;}
#calendar{background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/image_6.jpg)repeat;}
#prevmonth a:link {color:#8B5413;text-shadow:-1px -1px -1px white;}
#nextmonth a:link {color:#8B5413;text-shadow:-1px -1px -1px white;}
#calendar a:link {color:#8b5413;text-shadow:-1px -1px -1px white}
#top h1 {margin:0;width:100%;overflow:hidden;font-size:45px;font-family: 'veranda', veranda, veranda;color:white;line-height:normal;text-align:center;text-shadow:-2px -2px 2px silver;padding-left:0}
#subtitle {width:100%;overflow:hidden;font-size:20px;font-family: 'veranda', veranda, veranda;color:#E637AC;text-align:center;text-shadow:5px 4px 8px#FF00CC;padding-left:0}
#blogsearch label {content:"Cari disini";}
aisya zaniq aisyazaniq # Friday, August 3, 2012 4:43:44 AM
{ntah-lah,} 【216534】mbah-pesva # Saturday, August 4, 2012 2:50:13 AM
aisya zaniq aisyazaniq # Saturday, August 4, 2012 5:27:35 AM
{ntah-lah,} 【216534】mbah-pesva # Saturday, August 4, 2012 6:26:13 AM
aisya zaniq aisyazaniq # Saturday, August 4, 2012 11:44:09 AM
{ntah-lah,} 【216534】mbah-pesva # Saturday, August 4, 2012 12:47:51 PM
aisya zaniq aisyazaniq # Saturday, August 4, 2012 1:17:44 PM
{ntah-lah,} 【216534】mbah-pesva # Saturday, August 4, 2012 3:00:47 PM
aisya zaniq aisyazaniq # Saturday, August 4, 2012 7:39:23 PM
{ntah-lah,} 【216534】mbah-pesva # Saturday, August 4, 2012 8:22:20 PM
aisya zaniq aisyazaniq # Sunday, August 5, 2012 5:00:12 AM
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 4:57:16 AM
aisya zaniq aisyazaniq # Monday, August 6, 2012 6:14:35 AM
upst!!! cm bercanda lho mbah jgn masukin hati... masukin kolong sj,,,hehehe. btw... aq coba baca dan cermati itu css koq byk bgt hrs di tulis semua ya mbah.....????? ntr jari2q bisa kriting kya mie goreng dunk....
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 7:29:35 AM
Mbah vespa bukan hanya sebutan nya simbah kok, pada hakekat memang sdh sepuh usianya, umur mbah-vespa sdh 61 thn kok, gak mungkin lah mau macam2. Ini hanya ngikuti jaman, di jaman mbsh msh muda dulu belum ada internet seperti ini e,
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 7:31:40 AM
aisya zaniq aisyazaniq # Monday, August 6, 2012 12:48:23 PM
Sbnrnya usia bkn masalah yg pnting bgi aisya...bisa menempatkn diri dimna kita berada,,, soal css ntr klu ada wktu di coba copas njih mbah... asal to???
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 12:53:57 PM
Temen2 mbah di myo hampir semua sdh tau kalaw mbah emang sdh sepuh kok,
aisya zaniq aisyazaniq # Monday, August 6, 2012 1:05:59 PM
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 2:09:32 PM
aisya zaniq aisyazaniq # Monday, August 6, 2012 3:33:19 PM
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 3:43:55 PM
aisya zaniq aisyazaniq # Monday, August 6, 2012 3:57:21 PM
{ntah-lah,} 【216534】mbah-pesva # Monday, August 6, 2012 4:42:03 PM
aisya zaniq aisyazaniq # Tuesday, August 7, 2012 12:48:44 AM
{ntah-lah,} 【216534】mbah-pesva # Tuesday, August 7, 2012 12:58:27 PM
aisya zaniq aisyazaniq # Tuesday, August 7, 2012 3:28:26 PM
{ntah-lah,} 【216534】mbah-pesva # Sunday, September 16, 2012 5:03:48 AM
#top2 , #top {height:0px; padding-left:0px; background:#8b5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)top center repeat;}
#top h1 {font-family:"title";font-size:30px;} body {background:#8B5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;background-attachment:fixed;}
#wrap3 { BORDER-RIGHT:red 0px solid;
BORDER-TOP: red 3px solid;
PADDING-BOTTOM: 80px;
MARGIN: 0px auto;
BORDER-LEFT:black 1px solid;
BORDER-BOTTOM:black 1px solid; }
#menu a:link {text-style;color:#ccc;}
#menu li {float:right}
#myo2 , #header , #wrap2 , #wrap4 , #menu , #footer ,#wrap0 , #user-top {background:#8B5413 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;background-attachment:fixed:}
#operatxtad a:link {content:"Get Opera for your PC/Mobile";}
{position:fixed !important;}
.post {border: 2px solid #ffffff;margin: 5px 0;overflow: auto; color:none; font-size:15px;}
.postdate {color:#8B5413;text-shadow:-2px -2px -1px black;}
.comments .text {margin:0 0 0 58px;color:none;text-shadow:-1px -1px 2px orange;url(http//tamejo.xtgem.com/bg/10.jpg);}
.comments .text a:link {color:#996600;text-shadow:0px 1px 0px silver;}
.ownercomment .text {margin:0 0 0 58px;color:none;text-shadow:-1px -2px -1px #CC0000;}
.comment-date, .comment-date .permalink:link {color:#005500;text-shadow:-2px -2px -1px red;}
.comment-by a:link {background:000000;color:red;text-shadow:-1px -1px -1px silver}
comment-by a:link {background:none;color:#005500;text-shadow:0px 1px 0px #e5e5ee, 3px 3px silver, 3px -3px silver, -3px -3px silver, -3px 3px silver, 0px -3px silver, 0px 3px silver, -3px 0px silver, 3px 0px silver, 2px 2px silver, 2px -2px silver, -2px -2px silver, -2px 2px silver, 0px -2px silver, 0px 2px silver, -2px 0px silver, 2px 0px silver;}
#newcomment h3 {content:"TULIS KOMETAR NYA DI SINI";color:red;text-shadow:0px -1px #fff, 0px 1px #333, 3px 3px gray, 3px -3px gray, -3px -3px gray, -3px 3px gray, 0px -3px gray, 0px 3px gray, -3px 0px gray, 3px 0px gray, 2px 2px gray, 2px -2px gray, -2px -2px gray, -2px 2px gray, 0px -2px gray, 0px 2px gray, -2px 0px gray, 2px 0px gray;}
.comment1, .comment2 {background:(http://files.myopera.com/gilang-arlingga/Aplikasi/6.jpg) repeat;border: 1px solid #005500;margin: 15px 0;overflow: auto; color:none;}
.avatar , #newcomment .submit {background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;}
#comment {background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg)repeat;}
mainwrap:after {content:"Terima kasih atas kunjungannya,tapi mohon maaf komentar disable dulu." ;color:#996600;background:url(http://files.myopera.com/gilang-arlingga/Aplikasi/6_fixed.jpg) repeat;border:1px solid #FF000000;margin-bottom:15px;margin-right:210px;text-align:center;text-shadow:-1px -1px 0px #FF0000;width:296px;display:block;}
#calendar{background:#111 url(http://files.myopera.com/gilang-arlingga/Aplikasi/image_6.jpg)repeat;}
#prevmonth a:link {color:#8B5413;text-shadow:-1px -1px -1px white;}
#nextmonth a:link {color:#8B5413;text-shadow:-1px -1px -1px white;}
#calendar a:link {color:#8b5413;text-shadow:-1px -1px -1px white}
#top h1 {margin:0;width:100%;overflow:hidden;font-size:45px;font-family: 'veranda', veranda, veranda;color:white;line-height:normal;text-align:center;text-shadow:-2px -2px 2px silver;padding-left:0}
#subtitle {width:100%;overflow:hidden;font-size:20px;font-family: 'veranda', veranda, veranda;color:#E637AC;text-align:center;text-shadow:5px 4px 8px#FF00CC;padding-left:0}
#blogsearch label {content:"Cari disini";}
aisya zaniq aisyazaniq # Sunday, September 16, 2012 7:53:25 AM
{ntah-lah,} 【216534】mbah-pesva # Sunday, September 16, 2012 8:25:59 AM
aisya zaniq aisyazaniq # Sunday, September 16, 2012 11:39:35 AM
{ntah-lah,} 【216534】mbah-pesva # Sunday, September 16, 2012 12:05:37 PM
aisya zaniq aisyazaniq # Sunday, September 16, 2012 12:33:26 PM
{ntah-lah,} 【216534】mbah-pesva # Tuesday, December 18, 2012 5:39:42 AM