Rabu, 23 Februari 2011

Cinta itu ilmiah, kata ilmuwan

Cinta itu ilmiah, kata ilmuwan

Cinta itu ilmiah, kata ilmuwan
Peneliti dari Syracuse University, Profesor Stephanie Ortigue, menemukan ada 12 area pada otak yang bekerja pada saat seseorang jatuh cinta. Kedua belas area itu menghasilkan bahan kimia, seperti dopamine, oxytocin, adrenalin, dan vasopression, yang berujung pada euforia. Rasa cinta juga memengaruhi fungsi psikologi, metafora, dan penilaian fisik.

Jadi, cinta itu berasal dari hati atau otak? "Pertanyaan yang selalu sulit dijawab. Saya berpendapat asalnya dari otak," kata Ortigue. "Contohnya, suatu proses di otak kita bisa menstimulasi hati. Beberapa perasaan dalam hati kita sebetulnya merupakan gejala atas proses yang terjadi di otak."

Penelitian lain mendapati peningkatan jumlah darah dalam faktor penumbuh untuk syaraf yang memegang peranan penting dalam cara orang bersosialisasi. Hal ini menghadirkan fenomena yang disebut dengan "cinta pada pandangan pertama". Hal ini dikonfirmasi oleh temuan Ortigue yang menyebutkan kalau cinta bisa hadir dalam waktu seperlima detik.

Ortigue menjelaskan dengan memahami cara orang jatuh cinta dan putus cinta, para peneliti bisa mengembangkan terapi baru. "Kita bisa mengerti penyakit putus cinta," kata Ortigue.

Studi Ortigue juga mendapati ada bagian otak yang berbeda untuk tipe cinta yang berbeda. Cinta tanpa syarat, contohnya cinta seorang ibu pada anaknya, dipicu oleh aktivitas otak di bagian umum dan pada tempat yang berbeda-beda, termasuk otak tengah. Cinta yang bergairah antara kekasih melibatkan area kognitif, bagian yang mengharapkan imbalan, dan penilaian fisik.

Kamis, 17 Februari 2011

KOLEKSI LAGU-LAGU MANCANEGARA TOP DAN HITS MULAI DARI ERA 70AN

Silahkan download free koleksi lagu-lagu lawas (Oldies Songs) yang pernah top dan masih enak tuk didengerin sampe sekarang. Lagu-lagu berikut ini berasal dari berbagai belahan penjuru dunia dan berbagai aliran musik mulai dari blues, slow rock, ballads rock, pop, dan lain-lain. Semoga lagu-lagu berikut ini bisa bermanfaat.
  1. abba – dancing queen download
  2. aerosmith – i don’t want to miss a thing download
  3. aerosmith – jaded (acoustic) download
  4. air supply – good bye download
  5. akon – lonely download
  6. alias – more than words can say download
  7. alien ant farm – smooth criminal download
  8. alter bridge – open your eyes download
  9. angels & air waves – do it for me now download
  10. angels & airwaves – distraction download
  11. angels & airwaves – the adventure download
  12. angels & airwaves – valkyrie missile download
  13. arkarna – so little time download
  14. arkarna – the future’s overrated download
  15. avril lavigne – complicated ( accoustic ) download
  16. avril lavigne – i’m with you download
  17. Avril Lavigne – knockin on heavens door download
  18. avril lavigne & goo goo dolls – iris (live fashion rocks) download
  19. backstreet boys – as long as you love me download
  20. backstreet boys – incomplete download
  21. backstreet boys – show me the meaning of being lonely download
  22. bad company – ready for love download
  23. bad english – when i see you smile download
  24. barbie’s cradle – how long download
  25. beyonce ft. jay z – crazy in love download
  26. black eyed peas – where is the love download
  27. black sabbath – changes download
  28. black sabbath – odin’s court download
  29. blink 182 – i’m lost without you download
  30. bosson – one in a million download
  31. bounty killer – smoke the ganja download
  32. britney spears – boys co ed download
  33. britney spears – monalisa download
  34. britney spears – oops i did it again download
  35. britney spears – overprotected download
  36. britney spears – toxic download
  37. buttons – pussy cat ft snoop dogg download
  38. cake – i will survive download
  39. candlelight – heaven download
  40. celine dion – a new day has come download
  41. celine dion – because you love me download
  42. celine dion-i drove all night download
  43. chantal kreviazuk – leaving on a jet plane download
  44. chayane – yo te amo download
  45. chobits – let me be with you (opening) download
  46. christian bautista – everything you do download
  47. chumbawamba – tubthumping download
  48. cinderella – nobody’s fool download
  49. cold play – trouble download
  50. cold play – yellow (acoustic) download
  51. cold play – in my place download
  52. colective soul – run download
  53. colective soul – the world i know download
  54. color me badd – close to heaven download
  55. counting crows – accidentally in love download
  56. counting crows – big yellow taxi download
  57. craig david – fill me in download
  58. creed – one last breath download
  59. creep – radiohead download
  60. damn yankees – where you goin’ now download
  61. daniel beddingfield – if you’re not the one download
  62. daniel beddingfield – if you’re not the one (acoustic) download
  63. deep purple – child in time download
  64. deep purple – smoke on the water download
  65. deep purple – soldier of fortune download
  66. def leppard – two steps behind download
  67. destiny’s child – bootylicious download
  68. dhoom dhoom – tata young download
  69. diana king – hey jude download
  70. dido – all about us download
  71. dido – thank you download
  72. dido – white flag download
  73. dido – life for rent download
  74. disturbed – down with the sickness download
  75. dream theater – the spirit carries on download
  76. eminem – like toy soldier download
  77. eminem – lose ur self download
  78. eminem – mocking bird download
  79. eminem – when i’m gone download
  80. eminem feat. dido – stan download
  81. en aranjuez con tu amor download
  82. europe – carrie download
  83. exodus – utada hikaru download
  84. extreme – more than words download
  85. faith hill – this kiss download
  86. faith no more – i started a joke download
  87. fastball – the way download
  88. fat joe ft. ashanti – what’s luv download
  89. fergie fergalicious – (radio edit)-osk download
  90. five for fighting – 100 year download
  91. five for fighting – angel and girlfriends download
  92. five for fighting – superman download
  93. five for fighting – the riddle (you and i) download
  94. flyleaf – im so sick download
  95. foo fighters – everlong (acoustic) download
  96. foo fighters – walkin after you download
  97. foreigner – waiting for a girl like you download
  98. forever and for always download
  99. frente – bizzare love triangle download
  100. gary moore – empty room download
  101. gary moore – still got the blues download
  102. gloria gaynor – i will survive download
  103. goo goo dolls – iris download
  104. gorillaz – feel good inc download
  105. green day - boulevard of the broken dreams download
  106. green day – wake me up when september ends download
  107. gypsy king – volare download
  108. halloween – forever & one download
  109. halloween – power download
  110. heart – alone download
  111. hilary duff – come clean download
  112. hilary duff – someone’s watching over me download
  113. hilary duff ft slim thug – with love download
  114. hoobastank – the reason (acoustic) download
  115. house of pain – jump around download
  116. house of pain – shamrocks and shenanigans download
  117. human natureall – out of love download
  118. initial d – suteki da ne download
  119. iron maiden – rainmaker download
  120. ja rule ft. ashanti-always on time download
  121. jagged edge – where th e party at (feat. nelly) download
  122. james blunt – you are beautiful download
  123. jang na ra – sweet dream download
  124. jessica simpson – sweetest sin download
  125. jhon mayer – bigger than my body download
  126. jhon mayer – your body is wonderland download
  127. jimi hendrix – foxy lady download
  128. jimi hendrix – voodo child ( slight return) download
  129. j-lo – alive download
  130. j-lo-baby i love u download
  131. joan jett – have you ever seen the rain download
  132. john lennon – imagine download
  133. josh groban – u raise me up download
  134. justin timberlake – senorita download
  135. kansas – dust in the wind download
  136. kelly clarkson – breakaway – behind these hazel eyes download
  137. kid rock – only god knows why download
  138. kiroro – mirai e download
  139. kiss – god gave rock & roll to you download
  140. kitaro – lady of dreams download
  141. lagwagon – e dagger download
  142. layla kaylif – shakespeare in love download
  143. led zeppelin - stairway to heaven download
  144. led zeppelin – since i’ve been loving you download
  145. led zeppelin – tangerine download
  146. lenny kravitz – again download
  147. let her cry – hootie & the blowfish download
  148. lifehouse – you and me download
  149. limp bizkit – home sweet home – bittersweet symphony –osk download
  150. linkin park ft jay z – big pimpin download
  151. m2m – dont say you love me (acoustic) download
  152. m2m – prety boy (acoustic) download
  153. madona – you’ll see download
  154. madonna – die another day download
  155. madonna – frozen download
  156. mandy moore – moon shadow download
  157. mandy moore – someday we’ll know download
  158. Mariah Carey – Hero download
  159. mary j blige ft. u2 – one download
  160. marylin manson – is the new shit download
  161. maywood – mother how are you today download
  162. mclachlan, sarah – i will remember you download
  163. meat loaf – i’d do anything for love download
  164. melody club – electric download
  165. michael schenker – nightmare download
  166. micheal jackson – heal the world download
  167. michelle branch – all u wanted download
  168. michelle branch – are u happy now download
  169. michelle branch – breathe (album version) download
  170. michelle branch – everywhere (acoustic) download
  171. michelle branch – goodbye to u download
  172. missy eliot – gossip folks download
  173. missy eliot – work it download
  174. motley crue – home sweet home download
  175. muse – a sing for absolution download
  176. muse – can’t take my eyes off of you download
  177. muse – hysteria download
  178. muse – unintended accoustic download
  179. my chemical romance - i’m not okay download
  180. my chemical romance - the ghost of you download
  181. smxpx – scooby doo, where are you download
  182. natalie imbruglia – shiver download
  183. nazareth – love hurts download
  184. nazley young – another gril download
  185. nelly & p.diddy – shake ya tailfeather download
  186. nelly furtado – dilemma download
  187. nelly furtado – i’m like a bird (mixing dj dav) download
  188. nerd – provider download
  189. new radicals – you get what you give download
  190. no doubt – don’t speak download
  191. no doubt – dont speak (acoustic) download
  192. no doubt – close my life download
  193. nofx – nofx rancid – radio download
  194. non blonde – what’s up download
  195. norah jones-don’t know why download
  196. offspring – prety fly download
  197. offspring – tender download
  198. o-town-these are the days download
  199. out cast – hey ya! download
  200. p.diddy-i need a girl part 1 download
  201. p.didy feat usher – i need the girl download
  202. p.o.d. – sleeping awake download
  203. p.o.d-youth of the nation download
  204. paris hilton – stars are blind download
  205. pearl jam – i am mine download
  206. pearl jam – last kiss download
  207. phantom planet – california download
  208. phill collins – the least you can do download
  209. phoebe one – knocking on heavens door download
  210. pink – get the party started download
  211. poison – every rose has its thorn download
  212. poison – something to believe in download
  213. pussycat dolls – sway download
  214. radiohead – creep download
  215. rainbow – since you’ve been gone download
  216. rainbow – temple of the king download
  217. red hot chili pepper – the zephyr song download
  218. red hot chilli paper – misery download
  219. rem – everybody hurts download
  220. rem – imitation of life download
  221. rem – losing my religion download
  222. return to the tree – diliquent habil download
  223. richard mark – now and forever download
  224. richard mark – right here waiting for you download
  225. ricky martin – jaleo download
  226. robbie williams – better man download
  227. robbie williams – beyond the sea download
  228. robbie williams – eternity download
  229. robbie williams – feel download
  230. rod stewart – sailing download
  231. rolling stones – honky tonk woman download
  232. roxette – it’s must to be love download
  233. s club 7 – don’t stop movin (jewel & stone mix) download
  234. sade – by your side download
  235. safri duo – played a live (radio edit) download
  236. safri duo feat michael mcdonald-sweet freedom download
  237. saigon kick – i love you download
  238. saigon kick – love is on the way download
  239. samantha mumba – i’m right were download
  240. santana - black magic woman gypsy queen aaf download
  241. santana – corazon espinado download
  242. santana – europa download
  243. santana – migra download
  244. santana – samba pa ti download
  245. santana ft.rob thomas – smooth download
  246. sarah mclachlan – angel download
  247. sarah mclachlan – blackbird (i am sam) download
  248. sarah mclachlan – i will remember you download
  249. savage garden – truly madly deeply download
  250. saybia – the second you sleep download
  251. scorpions – holiday download
  252. scorpions – love of my life download
  253. scorpions – when the smoke is going down download
  254. seal – kiss from a rose (acoustic) download
  255. seether feat amy lee – the punisher ost – broken download
  256. shades apart – stranger by the day download
  257. shaggy – angel download
  258. shakira – whenever wherever download
  259. shania twain – forever & for always download
  260. shania twain – from this moment download
  261. shania twain – ka-ching download
  262. shania twain – that don’t impress me much download
  263. shania twain – when u kiss me download
  264. shania twain – you’re still the one download
  265. she’s not just a pretty face download
  266. sixpence none the richer – dancing queen download
  267. sixpence none the richer – kiss me download
  268. skid row – and life download
  269. skid row – i remember you download
  270. smashing pumpkins – ma belle download
  271. smashmouth – you are my number one download
  272. spice girl – viva forever download
  273. stacie orrico – stuck download
  274. staind – outside download
  275. staind – so far away download
  276. steelheart – mama don’t you cry download
  277. steelheart – she’s gone download
  278. steve vai – liberty download
  279. steven & the coconuttreez – welcome to my paradise download
  280. stevie b – dream about you download
  281. stevie b – waiting for your love download
  282. sugar ray – someday (live) download
  283. sum 41 – still waiting download
  284. sunday morning download
  285. the blowers daughter – damien rice download
  286. the calling – for u download
  287. the calling – our lives download
  288. the calling – wherever you will go download
  289. the corrs – all the love in the world download
  290. the corrs – breathless download
  291. the corrs – life’s go on-leann rimes download
  292. the corrs – only when i sleep download
  293. the corrs – runaway download
  294. the cure – boys don’t cry download
  295. the killers – when you were young download
  296. the police – roxanne download
  297. the pretenders – stand by you download
  298. the rasmus – no fear download
  299. the real thing – you to me are everything download
  300. the servant – liquefy download
  301. the vines – ms jakson download
  302. third eye blind – deep inside of you download
  303. tony braxton – unbreak my heart download
  304. trapt – stand up download
  305. travis – quicksand download
  306. trisha yearwood – how do i live download
  307. twisted sister – the price download
  308. u2 – staring at the sun download
  309. u2 – who’s gonna ride your wild horses download
  310. ub40 – red red wine download
  311. ufo – high flyer download
  312. ufo – lipstick traces download
  313. ugly kid joe – cats in the cradle download
  314. ugly kid joe – everything about you download
  315. uriah heep – lady in black download
  316. usher – yeah download
  317. venessa carlton – a thousand miles download
  318. vertical horizon – best i ever had download
  319. wakefield – cmon baby download
  320. westlife – soledad download
  321. westlife ft. boa – flying without wings download
  322. white lion – till death do us part download
  323. white lion – when the children cry download
  324. white snake – here i go again download
  325. white snake – is this love download
  326. yes – amazing grace download
  327. yngwie malmsteen – carry on wayward son download
  328. yngwie malmsteen – dreaming (tell me) download
  329. yngwie malmsteen – like an angel (for april) download
  330. yngwie malmsteen – i’m my own enemy download
  331. yngwie malmsteen – like an angel download
  332. yngwie malmsteen – save our love download

30+ Menu Navigasi Horizontal dengan CSS dan kode HTML

Pada postingan sebelumnya saya sudah mengetengahkan cara Membuat Tab Menu Horizontal dengan cara yang simpel gampang alias mudah. Pada kesempatan ini lagi lagi saya akan mengetengahkan 30 Menu Navigasi Horizontal dengan CSS dan Kode HTML, Waaah sudah terbayang yaa sampai 30 macam menu kali ini saya ketengahkan untuk sobat semua (biar puasss), tinggal sobat pilih-pilih sesuai selera masing masing hehe, selain banyak pilihan proses pembuatannyapun sangat gampang alis simpel. postingan ini saya kutip dari salah satu ahli blogger yaitu bdlab.blogspot.com.

Bila sobat kurang puas atau ingin lihat contoh contoh dari menu yang kita bahas kali ini di bawah ini gambar dari kumpulan-kumpulan menunya:



OK gimana sob tertarik?? OK kalau tertarik kita lanjutkan perjalanan kita

Cara untuk membuatnya sangat simpel tinggal sobat patuhi aja langkah-langkah berikut :
  1. Login ke blogger sobat.
  2. Silahkan tuju ke Tata Letak.
  3. Klik tab Elemen Halaman (bagian atas atau di bawah header).
  4. Tambah Gadget (Add Gadget) -> pilih yang HTML/Javascript.
  5. Kemudian pilih kode-kode di bawah sesuai pilihan sobat:
  6. Setelah itu klik tombol Simpan/Save


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil76jip81oUtZQakE7vDz7c-xz624uvTey9rmJpCGhyphenhyphenoWkpeJ-j_37DthHzggDn-HtlQmsC988_sQHosQkwhAITDTiVuB_Nv07XD_LmFKn0YaZe6BWqUgfdRkdS1sYyI4HlDGJZvxPdaQ/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsajpDeICrIhfFjfwuopv_EKyjr-9AFOYEOcEgkxYxW6h7AB6kTVoDx1obcVYIANUVQmX9-LmkGas-D6eIGrY_dQU-_0fpLKo_w6gz9OogvyjT3Gr2rZJh7bMPkpO2_rjpPlOwoEav4w/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpx-7HOmikqfFf5_9ToFqc8SRjBAADx2vfpZKUTQS-e7MAZkHvVUijhB30ZAi6vjzNBxDt-Awdb2fp6NkVjpyf-pOhTkckHYrOPZOLBeD0VGyI-5p7aE1PmQi52oLX7cnRIV8Z5GOKbQ/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAAU9-91cPLjAQrUPFL9rPwjJZPzsOE2kI6dNgEx1hmOwFbz4kMWPjP-xM5a-RHX01YN9H4I_EAtgujnFAcIa86OZLI5cjYmH5YRQItFgAoEyLbOgKKF9Ly-LPMAyDdJujgXZWpF4hGY/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCN1ulrDufx0jITmQHJTxBJqaoVXkMx1X93MqK_-yEg6iWhFDmZhxhEiEZLK4R_tMS5VpBlpHvgVJkPhlW5q8f6aigjgmx9chO-312bXxXz6Db57y6w6y1i8k_6ENSeRgQ1rhuDKos0A/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDibd88LdYFT1cx6DRR4uKeGbG6qjAY0aKVqP-QRlTdbmu3cgsUDT9p1U3c3zvxwlO6EAhwL2YnryyAvvdWo1BJDqaB6CpxRHaJGblq28Kx1CMaTH0l5P9VqI1PG5RRENr5vEq1Zg_f9g/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn23AFAfLVJYxFCwozdnt3vmtWG5YxfjsTiq8ZrehE5IvKuhhysJ0SSYXBj8hMEgGlolpQf74QvWtgu7nIGP_KefY4Ai7K2qLoIB2MFaFevcLlypjHmVp3l04B7cue3_DVNczNL0GbwoE/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZh-Z3HLI3ZGWY7kWbthHISgcFan-IiO9AeyejGyNA4AoFXhSguALXc24RC9v_cOSmyhv5XeCdZFsvu41fu4TIORpccFknSUT9nUncsnuO4O9jXEaZubEp0fbwhHxlTTcX1kew22ZfG-8/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ouNya0lWLr9JAckDrOhrSIl0v2yMsbyvXdUR2xZY_zVd23Ysg1FvOIPfvG-APsura9ztFqyQTnn4l-XHsB6K51IIIkRIVPnHXywM9tihhRvA0sSun5cMVUTk_9I3XRzh-iYqKtOz5W8/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1_3WPEcRmiJvZFZGFa_-VPaa_6FD8F7bVeFO7NeKhl7yUx2PFbGIHM5dncdpGbN2511PT4T8_kZ3k9mthilL7b7XSNytQGCCTBB-53846BdPM4psuk3lrnAncdGABM283bziC0XbD1g/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIC_cKRs5x-ayiT9s9DC39KIUe-QR1K857L7-msFle7WITdSM5RqOJqamOdcL-0uGfNlbOcVPfU8ibE1Qy7EsucUupfFVh-kLaKy-tW_B3lUOtwmtsFamISdWed_phqrF88ON31B4Cmfg/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjWFB08lJLwUzv3n0-FqjMrhIKLyRjskY16MKmUFZrzXrXRAKzGYMpNMRJJl_c0tl1kxSncPFLOQH8XSWDZ-dGEDJRNNshRNGbXOijYk8op4G0GD5hDXjha-uijdWeBZI3STMlXPP6wQ8/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-YOSdds8wCWl82Enawx0T8-GXWIHIuaRWFvP4EZZSLL0IKy9aUiHkfn0YJlpgATVxS7tSIodaRoueMfKT8sscJW17CLxysx6EGDOkqBuqyiRHkcucd1n8pgnwQ1BSgJcQ7Y3YrY7SzI/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dm-Z8c85Nmax4ZIljOU4XgWjN3bvipp7h5_uWPF_qjpCWYbO0SYTQbP2vEh52kN6Sddl0iu8JqDvqu_JXiugssFKZ78uiS121KmUho0oK_-hu6ilo3UXc1yRVAw1jqOrML-XXrkXDB0/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNrrXi84IeCdNsYEWE1d8opeN-ZemOy4MXggiJAB6KAHyxrHHjZX0rv2bPNUWpjDGnTera6YRq_GETClV0836NoFY4epuByBtMIJpDnAOYcfChREzbypkY94_Sj04x_o6J9WMF2hZQD8/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXMZ4wEnIwOAouVvT4O2Fcg2LA2rddY8q7iQaK4PF40nqr34mHvGY1-YrOX2aCcvKOYFf0bX3QQFTkstBpYD-EBV5Zx5rU93YJat_T7VlAxJz4OTWP0mOso2QRH1BOAtBkNiWTPiEQiM/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMMReq5_XoVyotAojS213G7NqltYhb1Kh7Na-fry4df36KEitG7OyzuqUnnn9LOiIyhtmJc1d0YZxKobZlGtcbx4w8l_d_o5HinWVUjl-JKg-bzTXTFfTD3prLlHENSyMhWOM9lvVVDc/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucODuJzs9ZMl39LQaxGXMYztwsNfcy_MV1h4sTh_JpnbzWPcAcEd2KVbdiCzRtWRtZZUosOvamLONaiue_iXkOVCW1DTsEJB8bvgNFgIdhJHmYk0zrSZ6Q0Y-txH4oRqRrHP1QErZ5QY/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJGsBTJlXSfsDlVUBYBdO4WiGLYZHKsfOthOLUXcpPQR5Hs3-dcBYj6fD-rnoa76sjx1AMDWdnO_o0w2-Nr-Rz40tSWiz4sfoxZcy7odhcRu4eQUFNcHv8wClPOHIjEERZ4N-L0N6_oU/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_3ogNNFkACFub0jp2Auyww9lk3PffmGj9vlF0o1xn6A_ubxhUONHkc2hwy1aU2bJzmIYtbH3JQLXC1xPWWEk0QIHOHgSnLicGyRASvC8TqIy778t_yIskEoywlQ46UXwdSNhGVjtdFGg/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbMUKxtkjmI4zhK_jiGujhM7OAtnAjTQjH8zW1kaAMGLNrkpGrh6RbNEG3Dh5TLas-FX6VCOQPlw4A_7fwLh0_OwM2nQYfLRuinVt33PnT_a3ruDGmTzNwUr7SverhIPJaJ6I2SqtR6o/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_AQVdmqLu9usLlHqLJ7kKOQfxu1K6_i9ugUbT6pBeXz798jogvqF2JaZO0nzIKweSxwkVfggI0y1hYdAH-VD6NnmAZQCo_UOOoclO_mBcC_ytET6WymAp9lND_VGnm1yXbxYUfYg7Pk/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXYlmM9rllAliUS_w5J4K-Om5R-jigeCoFkuqNlfJAyGKy5mtoGtbdcZibXO3iySVdznaZmnniH-3_6PFtf99fsf3CJjetm78B5-QeHdltpeqC9Exos-odUGpG53gUlN_iy7xXwVHNGg/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFMhtiIwTEM5xV68g5jSihbVD7BBwcJpHM-xBN1hzJAoRqnkASZd-hR6Lv13Cq93pBesKS2volrZdfSHm5DqAO3rNd2fjkOBfLK8B0Cw5cRy9JLdgYrRr2oKpZlIwD1Th9aeVghuvI_-E/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SyC3QNWODsCnGZem8O8F7PRWd7u2VOrSM8wNxjx_SIfFcnbEuekpiqotb7Rq3Tb36WVWa2rTtB_H_sgty5e1c-bdUyO_ybwJyRRuR5r5XghVMb3V6PY81Kc-iJbwE0KXZmtOtdfS01w/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4gBE8k14Eq8XRPmDXKfl25ASoVk2ljbGZJNrMtml3-79oI1iYyQjsCa7dm8y-th2E4kQcaZ9WCCw00Pq7Kshjc0uiQ06yYeS_KbFYE1mVR-IJrZYM-2y6EcFzGr1fclLdiWQeCuyS4Q/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF44vSCLGHhYvF9kUMX4teBGZS-FqIKaUPSG8rzIQyoYbfdclP3jzL_Cp1659swVRIHqSa75nskSnEvFookB1CUSJ6XD7XS0OSM_IrN-VJt3AcjmwdQPVUBmDP85nXeE_uH_FUUamh88Y/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :

Kodenya ini :
<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6z8Zls5a-q0PmujoXhA6Qv613ZaVx0-5P0oR2NTzzhPEoaQU5XvD2N-d2mvJUru5Yrq1c0m7UwkutqAxe8BpAzdrV3SEYcgNkFdJcrkCjDO7UJOeunQzogP5boGvKjfp6WUdHxFmRp0/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv1vQss7ZAnA3iJcrICRwPK4EFRFj0iIsW3F5SFk7Hm43Ijvrmk4P-U0VG5wn12p5iOWvXX9grXBKSA8BBn6OvbIuwYQz6HYt80ig8H4k0g8fPuoDhB0D8I5x5RxTZDDR_sUOfn65e1E/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4nmsB3kCGAUx5o7Jpz2VOQh3oXIi_HkaIk2al0gaAIcubrU60pgvUkzthxwfjNBLfrjK0HmjTQRo9ll7diaAPpfUmo_GH5wcJJGIKqKKPMaKtS6IhDHxtTRHtFQPHMzPwmVmdokahuYo/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_t1zAXXLG5nVQUdsLdeqavC7bk2GGFc6dUVRHETKKX5Xt_MOWaY_95BhfTjihHDNhDiz-RrQOwsD4Ce5wZGQJECWBgLvHqmI0ueEJgvQ3hh53frLNMfRFZZVBdM87GTmpu-AjNXlS0C8/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3PvTXXAKFCnh4rm6CUcrs9VQXJxTuLCJZZ7XOciIkisLt51asXLhFVnwMWj2uaOQ9f5mqZcmKkH7pUUB7TkyKxtxy_VpVg-TU-l6joatRHVqKZwEkMUShBIzGwH99d0VJr0omR8MoxY/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDjYY84SLmz8w3te4QT6MntoEKaF-zFRSnUDWtvgOVozVZfSPNHotkdKUo5beaQTViklaWVPcL0AvPldw8Uix9A0r77zDkPYzBkjr3TLEM4Ppc1gEzf7OiN6fOvyT0muxGv_FwZhN24M/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7Hh4hS4oyABetDdgz1DR1nrpGWqmmyaJTR9ySRLeDJ8qzBSm4aymDlasY3R7L-xez-oY4pDsz2b-lQcAQi1hdYuW2imSoP87IiNlPZ8SBy7wUYQrMsJhPTnQUI8hgZLzSRIazLs6k9o/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2nroSFVpKMICxOQO5iCMwRphuw_3ME-LrreGB7URw037rzudoY7PtQ3dlEMtESWrRCqmJ9cy3dlcJLWoRLhNiLe3mpi9-1Iu8npNzQaAYfuDVelbeVUzYLLt1E_eCDC9P1zP03pTxgI/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjylol08l874jwp5efEQVZLgBxN54uyKAbU3oxBL5pmENLVz8FfDw-EmT1qaFsfrY_S-xfcE6BDCgjTtNb21l9EVX0JOi3xxZBt19rbySbnHYlfYGThTseDUqoOC4-GmPBnM7JpJ0guzI/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLceF-yAzAslDH99Sl95oJuGr4V1CT4fL9PcCmQg9MtGo9IT-ZMWJhf6Ecccl82fBdOejAyAoNvJjXzNGb2gkb0OWMTcvFztltxgNj0p5NQ5h-Ox7QfEiCb76NNBSQ2DQyMZpd7bDKFo/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIX080b_g9InLeIB2YdxOQBMpB90qWlSd-Jrofx6rLR2r9q5PKkSjDRm1wtReQAS2wLlYmR8F7tDEj2aJpQYoqmgRN0P2nRAWhl2KKi9jI15JEabbB6ny7gqSAyUxNbq0owc0luuNCmg/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5RcuuYOzmFTlzJebe8ht7MZ4Izbr0Pzjw29nr7liMqm4tWAAZ99nmNj2xxQAkTsxHPmZje2LJJ4apKY_O-Pihtkbqd-YLrUOVPsLl5v_jqUyrdZd4ifSIOxfhNvaCY_fVDoLqVxHYrlE/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmL72LnUG1Sg-C4kmV1KfUpuIaGtYbClJZevMMdG9PABXZ_d6r0NZgtOAwNsc-5MDlZDylsi3YhfG0RpsfNv4x87qmjOwZOWVpY_8GQuCyGwaRma7fbTQODaLwZ1yeUt2V3LvOgHEY8U/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6TK-sCl_sJMjzE_qZURA5rvC6BsPMj_8tfC3fO8RJWwF9OB7YRCv9lpuKZ4xSqf0o2d5iQEwhrbALIbhedqSzIqyKWVslJ_7PCCJVPXI3qpCoJ_iHGZAlgKd6RbSYYKJh-zVELfCxtEE/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6UBXzxrCPh6MDAnRoVbpALkHXf3FIwaW87ABp-fjX3HEMPi9rQjYN016CTE3LMkqp55iMLDeR7hl5alNjpkkyhPMG2avvkFLQK2UVgCLg2PKHjOGmU1gfCwgHZVxGilgTAbkGAyVDxqQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5Fp07W-yYZIbIJS7rKSejhJ6UIgI0jvDreQR1aYbulSGxau8cQomtn5Vd3dx_NqXjRdvi7HNlSbrpcUc18HNEJz7cPssYytLn1iVoheCf0LEOnvddJvNsCK2kV6cQUT-sHJi0WI3_Yc/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqP5muYaAudrx861nHhGIxuAQXxppxuno9SNnlEAdmdkVMGhNxkPPOEkAwXG246FWzBj_cs-Kfs2I243EjH83aIwEp_pEuJF9Ut_IVamJ7HKFqBt-RFEHrrL7WtcDNMqTb0ACmm_NWiQA/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8-pH3oT3HYEFlPprJBKLOnS3nq-hk-ryT28KspNu9WeeY8Eljqzvj-PGSXpF3CgEhAouJqzAS863kNIxMtKSIgTCw3iGTteuvertpnZjZmy5fHjYviD0OJoyJLkJuZ6uXDw-jcjybTM/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


PENTING
Cari kode seperti ini <li><a href="#" ><span>Link 1</span></a></li> kode yang bertuliskan # (tanda pagar) ganti dengan alamat link sobat misalnya http://ade-tea.blogspot.com, kemudian tulisan Link 1, Link 2 dan seterusnya ganti dengan nama link tersebut misalnya Kang Fatur.


Terus untuk menambah dan mengurang jumlah menu cukup sobat tambah atau kurang kode seperti ini <li><a href="#" ><span>Link 1</span></a></li>.


Selamat memilih dan mencoba semoga berhasil dan bermanfaat.Pada postingan sebelumnya saya sudah mengetengahkan cara Membuat Tab Menu Horizontal dengan cara yang simpel gampang alias mudah. Pada kesempatan ini lagi lagi saya akan mengetengahkan 30 Menu Navigasi Horizontal dengan CSS dan Kode HTML, Waaah sudah terbayang yaa sampai 30 macam menu kali ini saya ketengahkan untuk sobat semua (biar puasss), tinggal sobat pilih-pilih sesuai selera masing masing hehe, selain banyak pilihan proses pembuatannyapun sangat gampang alis simpel. postingan ini saya kutip dari salah satu ahli blogger yaitu bdlab.blogspot.com.

Bila sobat kurang puas atau ingin lihat contoh contoh dari menu yang kita bahas kali ini di bawah ini gambar dari kumpulan-kumpulan menunya:



OK gimana sob tertarik?? OK kalau tertarik kita lanjutkan perjalanan kita

Cara untuk membuatnya sangat simpel tinggal sobat patuhi aja langkah-langkah berikut :
  1. Login ke blogger sobat.
  2. Silahkan tuju ke Tata Letak.
  3. Klik tab Elemen Halaman (bagian atas atau di bawah header).
  4. Tambah Gadget (Add Gadget) -> pilih yang HTML/Javascript.
  5. Kemudian pilih kode-kode di bawah sesuai pilihan sobat:
  6. Setelah itu klik tombol Simpan/Save


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #fff; background-color: #FE9C54; } </style> <div id="navcontainer"> <ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; } #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 30px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 78px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil76jip81oUtZQakE7vDz7c-xz624uvTey9rmJpCGhyphenhyphenoWkpeJ-j_37DthHzggDn-HtlQmsC988_sQHosQkwhAITDTiVuB_Nv07XD_LmFKn0YaZe6BWqUgfdRkdS1sYyI4HlDGJZvxPdaQ/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTsajpDeICrIhfFjfwuopv_EKyjr-9AFOYEOcEgkxYxW6h7AB6kTVoDx1obcVYIANUVQmX9-LmkGas-D6eIGrY_dQU-_0fpLKo_w6gz9OogvyjT3Gr2rZJh7bMPkpO2_rjpPlOwoEav4w/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMpx-7HOmikqfFf5_9ToFqc8SRjBAADx2vfpZKUTQS-e7MAZkHvVUijhB30ZAi6vjzNBxDt-Awdb2fp6NkVjpyf-pOhTkckHYrOPZOLBeD0VGyI-5p7aE1PmQi52oLX7cnRIV8Z5GOKbQ/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsG { float:left; width:100%; background:#666; font: bold 7.5pt Verdana; line-height:normal; } #tabsG ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsG li { display:inline; margin:0; padding:0; } #tabsG a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlAAU9-91cPLjAQrUPFL9rPwjJZPzsOE2kI6dNgEx1hmOwFbz4kMWPjP-xM5a-RHX01YN9H4I_EAtgujnFAcIa86OZLI5cjYmH5YRQItFgAoEyLbOgKKF9Ly-LPMAyDdJujgXZWpF4hGY/s1600/tableftG.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsG a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPCN1ulrDufx0jITmQHJTxBJqaoVXkMx1X93MqK_-yEg6iWhFDmZhxhEiEZLK4R_tMS5VpBlpHvgVJkPhlW5q8f6aigjgmx9chO-312bXxXz6Db57y6w6y1i8k_6ENSeRgQ1rhuDKos0A/s1600/tabrightG.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsG a span {float:none;} /* End IE5-Mac hack */ #tabsG a:hover span { color:#FFF; } #tabsG a:hover { background-position:0% -42px; } #tabsG a:hover span { background-position:100% -42px; } </style> <div id="tabsG"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDibd88LdYFT1cx6DRR4uKeGbG6qjAY0aKVqP-QRlTdbmu3cgsUDT9p1U3c3zvxwlO6EAhwL2YnryyAvvdWo1BJDqaB6CpxRHaJGblq28Kx1CMaTH0l5P9VqI1PG5RRENr5vEq1Zg_f9g/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn23AFAfLVJYxFCwozdnt3vmtWG5YxfjsTiq8ZrehE5IvKuhhysJ0SSYXBj8hMEgGlolpQf74QvWtgu7nIGP_KefY4Ai7K2qLoIB2MFaFevcLlypjHmVp3l04B7cue3_DVNczNL0GbwoE/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>



Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZh-Z3HLI3ZGWY7kWbthHISgcFan-IiO9AeyejGyNA4AoFXhSguALXc24RC9v_cOSmyhv5XeCdZFsvu41fu4TIORpccFknSUT9nUncsnuO4O9jXEaZubEp0fbwhHxlTTcX1kew22ZfG-8/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6ouNya0lWLr9JAckDrOhrSIl0v2yMsbyvXdUR2xZY_zVd23Ysg1FvOIPfvG-APsura9ztFqyQTnn4l-XHsB6K51IIIkRIVPnHXywM9tihhRvA0sSun5cMVUTk_9I3XRzh-iYqKtOz5W8/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij1_3WPEcRmiJvZFZGFa_-VPaa_6FD8F7bVeFO7NeKhl7yUx2PFbGIHM5dncdpGbN2511PT4T8_kZ3k9mthilL7b7XSNytQGCCTBB-53846BdPM4psuk3lrnAncdGABM283bziC0XbD1g/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIC_cKRs5x-ayiT9s9DC39KIUe-QR1K857L7-msFle7WITdSM5RqOJqamOdcL-0uGfNlbOcVPfU8ibE1Qy7EsucUupfFVh-kLaKy-tW_B3lUOtwmtsFamISdWed_phqrF88ON31B4Cmfg/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs12 img { border: none; } #tabs12 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs12 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs12 li { display:inline; margin:0; padding:0; } #tabs12 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjWFB08lJLwUzv3n0-FqjMrhIKLyRjskY16MKmUFZrzXrXRAKzGYMpNMRJJl_c0tl1kxSncPFLOQH8XSWDZ-dGEDJRNNshRNGbXOijYk8op4G0GD5hDXjha-uijdWeBZI3STMlXPP6wQ8/s1600/tableft12.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs12 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-YOSdds8wCWl82Enawx0T8-GXWIHIuaRWFvP4EZZSLL0IKy9aUiHkfn0YJlpgATVxS7tSIodaRoueMfKT8sscJW17CLxysx6EGDOkqBuqyiRHkcucd1n8pgnwQ1BSgJcQ7Y3YrY7SzI/s1600/tabright12.png) no-repeat right top; padding:5px 15px 4px 6px; color:#E4D6CD; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs12 a span {float:none;} /* End IE5-Mac hack */ #tabs12 a:hover span { color:#FFF; } #tabs12 a:hover { background-position:0% -42px; } #tabs12 a:hover span { background-position:100% -42px; } #tabs12 #current a { background-position:0% -42px; } #tabs12 #current a span { background-position:100% -42px; } </style> <div id="tabs12"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs11 img { border: none; } #tabs11 { float:left; width:100%; background:#F9F7F3; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #C2BDAE; } #tabs11 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs11 li { display:inline; margin:0; padding:0; } #tabs11 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9dm-Z8c85Nmax4ZIljOU4XgWjN3bvipp7h5_uWPF_qjpCWYbO0SYTQbP2vEh52kN6Sddl0iu8JqDvqu_JXiugssFKZ78uiS121KmUho0oK_-hu6ilo3UXc1yRVAw1jqOrML-XXrkXDB0/s1600/tableft11.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs11 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNrrXi84IeCdNsYEWE1d8opeN-ZemOy4MXggiJAB6KAHyxrHHjZX0rv2bPNUWpjDGnTera6YRq_GETClV0836NoFY4epuByBtMIJpDnAOYcfChREzbypkY94_Sj04x_o6J9WMF2hZQD8/s1600/tabright11.png) no-repeat right top; padding:5px 15px 4px 6px; color:#9F9584; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs11 a span {float:none;} /* End IE5-Mac hack */ #tabs11 a:hover span { color:#FFF; } #tabs11 a:hover { background-position:0% -42px; } #tabs11 a:hover span { background-position:100% -42px; } #tabs11 #current a { background-position:0% -42px; } #tabs11 #current a span { background-position:100% -42px; } </style> <div id="tabs11"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs10 img { border: none; } #tabs10 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #2763A5; line-height:normal; } #tabs10 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs10 li { display:inline; margin:0; padding:0; } #tabs10 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXMZ4wEnIwOAouVvT4O2Fcg2LA2rddY8q7iQaK4PF40nqr34mHvGY1-YrOX2aCcvKOYFf0bX3QQFTkstBpYD-EBV5Zx5rU93YJat_T7VlAxJz4OTWP0mOso2QRH1BOAtBkNiWTPiEQiM/s1600/tableft10.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs10 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMMReq5_XoVyotAojS213G7NqltYhb1Kh7Na-fry4df36KEitG7OyzuqUnnn9LOiIyhtmJc1d0YZxKobZlGtcbx4w8l_d_o5HinWVUjl-JKg-bzTXTFfTD3prLlHENSyMhWOM9lvVVDc/s1600/tabright10.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs10 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs10 a:hover { background-position:0% -42px; } #tabs10 a:hover span { background-position:100% -42px; } #tabs10 #current a { background-position:0% -42px; } #tabs10 #current a span { background-position:100% -42px; } </style> <div id="tabs10"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs9 img { border: none; } #tabs9 { float:left; width:100%; font: bold 7.5pt Verdana; border-bottom:1px solid #F45551; line-height:normal; } #tabs9 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs9 li { display:inline; margin:0; padding:0; } #tabs9 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiucODuJzs9ZMl39LQaxGXMYztwsNfcy_MV1h4sTh_JpnbzWPcAcEd2KVbdiCzRtWRtZZUosOvamLONaiue_iXkOVCW1DTsEJB8bvgNFgIdhJHmYk0zrSZ6Q0Y-txH4oRqRrHP1QErZ5QY/s1600/tableft9.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs9 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizJGsBTJlXSfsDlVUBYBdO4WiGLYZHKsfOthOLUXcpPQR5Hs3-dcBYj6fD-rnoa76sjx1AMDWdnO_o0w2-Nr-Rz40tSWiz4sfoxZcy7odhcRu4eQUFNcHv8wClPOHIjEERZ4N-L0N6_oU/s1600/tabright9.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs9 a span {float:none;} /* End IE5-Mac hack */ #tabs9 a:hover span { color:#FFF; } #tabs9 a:hover { background-position:0% -42px; } #tabs9 a:hover span { background-position:100% -42px; } #tabs9 #current a { background-position:0% -42px; } #tabs9 #current a span { background-position:100% -42px; } </style> <div id="tabs9"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_3ogNNFkACFub0jp2Auyww9lk3PffmGj9vlF0o1xn6A_ubxhUONHkc2hwy1aU2bJzmIYtbH3JQLXC1xPWWEk0QIHOHgSnLicGyRASvC8TqIy778t_yIskEoywlQ46UXwdSNhGVjtdFGg/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfbMUKxtkjmI4zhK_jiGujhM7OAtnAjTQjH8zW1kaAMGLNrkpGrh6RbNEG3Dh5TLas-FX6VCOQPlw4A_7fwLh0_OwM2nQYfLRuinVt33PnT_a3ruDGmTzNwUr7SverhIPJaJ6I2SqtR6o/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs8 img { border: none; } #tabs8 { float:left; width:100%; background:#FCF1F6; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #E276A7; } #tabs8 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs8 li { display:inline; margin:0; padding:0; } #tabs8 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq_AQVdmqLu9usLlHqLJ7kKOQfxu1K6_i9ugUbT6pBeXz798jogvqF2JaZO0nzIKweSxwkVfggI0y1hYdAH-VD6NnmAZQCo_UOOoclO_mBcC_ytET6WymAp9lND_VGnm1yXbxYUfYg7Pk/s1600/tableft8.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs8 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiXYlmM9rllAliUS_w5J4K-Om5R-jigeCoFkuqNlfJAyGKy5mtoGtbdcZibXO3iySVdznaZmnniH-3_6PFtf99fsf3CJjetm78B5-QeHdltpeqC9Exos-odUGpG53gUlN_iy7xXwVHNGg/s1600/tabright8.png) no-repeat right top; padding:5px 15px 4px 6px; color:#333; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs8 a span {float:none;} /* End IE5-Mac hack */ #tabs8 a:hover span { color:#591333; } #tabs8 a:hover { background-position:0% -42px; } #tabs8 a:hover span { background-position:100% -42px; } #tabs8 #current a { background-position:0% -42px; } #tabs8 #current a span { background-position:100% -42px; } </style> <div id="tabs8"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs7 img { border: none; } #tabs7 { float:left; width:100%; background:#D4DAE7; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #333B66; } #tabs7 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs7 li { display:inline; margin:0; padding:0; } #tabs7 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFMhtiIwTEM5xV68g5jSihbVD7BBwcJpHM-xBN1hzJAoRqnkASZd-hR6Lv13Cq93pBesKS2volrZdfSHm5DqAO3rNd2fjkOBfLK8B0Cw5cRy9JLdgYrRr2oKpZlIwD1Th9aeVghuvI_-E/s1600/tableft7.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs7 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-SyC3QNWODsCnGZem8O8F7PRWd7u2VOrSM8wNxjx_SIfFcnbEuekpiqotb7Rq3Tb36WVWa2rTtB_H_sgty5e1c-bdUyO_ybwJyRRuR5r5XghVMb3V6PY81Kc-iJbwE0KXZmtOtdfS01w/s1600/tabright7.png) no-repeat right top; padding:5px 15px 4px 6px; color:#999; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs7 a span {float:none;} /* End IE5-Mac hack */ #tabs7 a:hover span { color:#ECB546; } #tabs7 a:hover { background-position:0% -42px; } #tabs7 a:hover span { background-position:100% -42px; } #tabs7 #current a { background-position:0% -42px; } #tabs7 #current a span { background-position:100% -42px; } </style> <div id="tabs7"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsK { float:left; width:100%; background:#E7E5E2; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #54545C; } #tabsK ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsK li { display:inline; margin:0; padding:0; } #tabsK a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB4gBE8k14Eq8XRPmDXKfl25ASoVk2ljbGZJNrMtml3-79oI1iYyQjsCa7dm8y-th2E4kQcaZ9WCCw00Pq7Kshjc0uiQ06yYeS_KbFYE1mVR-IJrZYM-2y6EcFzGr1fclLdiWQeCuyS4Q/s1600/tableftK.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsK a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF44vSCLGHhYvF9kUMX4teBGZS-FqIKaUPSG8rzIQyoYbfdclP3jzL_Cp1659swVRIHqSa75nskSnEvFookB1CUSJ6XD7XS0OSM_IrN-VJt3AcjmwdQPVUBmDP85nXeE_uH_FUUamh88Y/s1600/tabrightK.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsK a span {float:none;} /* End IE5-Mac hack */ #tabsK a:hover span { color:#FFF; background-position:100% -42px; } #tabsK a:hover { background-position:0% -42px; } #tabsK a:hover span { background-position:100% -42px; } </style> <div id="tabsK"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :

Kodenya ini :
<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA6z8Zls5a-q0PmujoXhA6Qv613ZaVx0-5P0oR2NTzzhPEoaQU5XvD2N-d2mvJUru5Yrq1c0m7UwkutqAxe8BpAzdrV3SEYcgNkFdJcrkCjDO7UJOeunQzogP5boGvKjfp6WUdHxFmRp0/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbv1vQss7ZAnA3iJcrICRwPK4EFRFj0iIsW3F5SFk7Hm43Ijvrmk4P-U0VG5wn12p5iOWvXX9grXBKSA8BBn6OvbIuwYQz6HYt80ig8H4k0g8fPuoDhB0D8I5x5RxTZDDR_sUOfn65e1E/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4nmsB3kCGAUx5o7Jpz2VOQh3oXIi_HkaIk2al0gaAIcubrU60pgvUkzthxwfjNBLfrjK0HmjTQRo9ll7diaAPpfUmo_GH5wcJJGIKqKKPMaKtS6IhDHxtTRHtFQPHMzPwmVmdokahuYo/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_t1zAXXLG5nVQUdsLdeqavC7bk2GGFc6dUVRHETKKX5Xt_MOWaY_95BhfTjihHDNhDiz-RrQOwsD4Ce5wZGQJECWBgLvHqmI0ueEJgvQ3hh53frLNMfRFZZVBdM87GTmpu-AjNXlS0C8/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU3PvTXXAKFCnh4rm6CUcrs9VQXJxTuLCJZZ7XOciIkisLt51asXLhFVnwMWj2uaOQ9f5mqZcmKkH7pUUB7TkyKxtxy_VpVg-TU-l6joatRHVqKZwEkMUShBIzGwH99d0VJr0omR8MoxY/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpDjYY84SLmz8w3te4QT6MntoEKaF-zFRSnUDWtvgOVozVZfSPNHotkdKUo5beaQTViklaWVPcL0AvPldw8Uix9A0r77zDkPYzBkjr3TLEM4Ppc1gEzf7OiN6fOvyT0muxGv_FwZhN24M/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


Untuk Menu jenis ini :


Kodenya ini :
<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Liddddnk 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Linddddkdd 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Linddddk 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7Hh4hS4oyABetDdgz1DR1nrpGWqmmyaJTR9ySRLeDJ8qzBSm4aymDlasY3R7L-xez-oY4pDsz2b-lQcAQi1hdYuW2imSoP87IiNlPZ8SBy7wUYQrMsJhPTnQUI8hgZLzSRIazLs6k9o/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ2nroSFVpKMICxOQO5iCMwRphuw_3ME-LrreGB7URw037rzudoY7PtQ3dlEMtESWrRCqmJ9cy3dlcJLWoRLhNiLe3mpi9-1Iu8npNzQaAYfuDVelbeVUzYLLt1E_eCDC9P1zP03pTxgI/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjylol08l874jwp5efEQVZLgBxN54uyKAbU3oxBL5pmENLVz8FfDw-EmT1qaFsfrY_S-xfcE6BDCgjTtNb21l9EVX0JOi3xxZBt19rbySbnHYlfYGThTseDUqoOC4-GmPBnM7JpJ0guzI/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwLceF-yAzAslDH99Sl95oJuGr4V1CT4fL9PcCmQg9MtGo9IT-ZMWJhf6Ecccl82fBdOejAyAoNvJjXzNGb2gkb0OWMTcvFztltxgNj0p5NQ5h-Ox7QfEiCb76NNBSQ2DQyMZpd7bDKFo/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIX080b_g9InLeIB2YdxOQBMpB90qWlSd-Jrofx6rLR2r9q5PKkSjDRm1wtReQAS2wLlYmR8F7tDEj2aJpQYoqmgRN0P2nRAWhl2KKi9jI15JEabbB6ny7gqSAyUxNbq0owc0luuNCmg/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5RcuuYOzmFTlzJebe8ht7MZ4Izbr0Pzjw29nr7liMqm4tWAAZ99nmNj2xxQAkTsxHPmZje2LJJ4apKY_O-Pihtkbqd-YLrUOVPsLl5v_jqUyrdZd4ifSIOxfhNvaCY_fVDoLqVxHYrlE/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQmL72LnUG1Sg-C4kmV1KfUpuIaGtYbClJZevMMdG9PABXZ_d6r0NZgtOAwNsc-5MDlZDylsi3YhfG0RpsfNv4x87qmjOwZOWVpY_8GQuCyGwaRma7fbTQODaLwZ1yeUt2V3LvOgHEY8U/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6TK-sCl_sJMjzE_qZURA5rvC6BsPMj_8tfC3fO8RJWwF9OB7YRCv9lpuKZ4xSqf0o2d5iQEwhrbALIbhedqSzIqyKWVslJ_7PCCJVPXI3qpCoJ_iHGZAlgKd6RbSYYKJh-zVELfCxtEE/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6UBXzxrCPh6MDAnRoVbpALkHXf3FIwaW87ABp-fjX3HEMPi9rQjYN016CTE3LMkqp55iMLDeR7hl5alNjpkkyhPMG2avvkFLQK2UVgCLg2PKHjOGmU1gfCwgHZVxGilgTAbkGAyVDxqQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH5Fp07W-yYZIbIJS7rKSejhJ6UIgI0jvDreQR1aYbulSGxau8cQomtn5Vd3dx_NqXjRdvi7HNlSbrpcUc18HNEJz7cPssYytLn1iVoheCf0LEOnvddJvNsCK2kV6cQUT-sHJi0WI3_Yc/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Untuk Menu jenis ini :


Kodenya ini :
<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqP5muYaAudrx861nHhGIxuAQXxppxuno9SNnlEAdmdkVMGhNxkPPOEkAwXG246FWzBj_cs-Kfs2I243EjH83aIwEp_pEuJF9Ut_IVamJ7HKFqBt-RFEHrrL7WtcDNMqTb0ACmm_NWiQA/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8-pH3oT3HYEFlPprJBKLOnS3nq-hk-ryT28KspNu9WeeY8Eljqzvj-PGSXpF3CgEhAouJqzAS863kNIxMtKSIgTCw3iGTteuvertpnZjZmy5fHjYviD0OJoyJLkJuZ6uXDw-jcjybTM/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>


PENTING
Cari kode seperti ini <li><a href="#" ><span>Link 1</span></a></li> kode yang bertuliskan # (tanda pagar) ganti dengan alamat link sobat misalnya http://ade-tea.blogspot.com, kemudian tulisan Link 1, Link 2 dan seterusnya ganti dengan nama link tersebut misalnya Kang Fatur.


Terus untuk menambah dan mengurang jumlah menu cukup sobat tambah atau kurang kode seperti ini <li><a href="#" ><span>Link 1</span></a></li>.


Selamat memilih dan mencoba semoga berhasil dan bermanfaat.