Oncom Hack Blogger: 16 Style Vertical Menu For Blogger

Kode :

<style>#z33sPR ul { list-style: none; margin: 0; padding: 0; } #z33sPR img { border: none; } #z33sPR { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #z33sPR li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sPR li a:link, #z33sPR li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLWMvHl2zPQUXvamx_lowUZB1X3vCqdGQHE0i0E_WUL3fiMkXAEIaA8Fx5XVm_2uja0TeBbJ0tGcBJuO8mO1VaXYsZQ9Zsd4zlkDQWYoWK3lYYI7WL0g_C-qCGLp2l3jIklOYADUZMq0/s800/z33sPR.gif); padding: 8px 0 0 10px; } #z33sPR li a:hover, #z33sPR li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLWMvHl2zPQUXvamx_lowUZB1X3vCqdGQHE0i0E_WUL3fiMkXAEIaA8Fx5XVm_2uja0TeBbJ0tGcBJuO8mO1VaXYsZQ9Zsd4zlkDQWYoWK3lYYI7WL0g_C-qCGLp2l3jIklOYADUZMq0/s800/z33sPR.gif) 0 -32px; padding: 8px 0 0 10px; } #z33sPR li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCLWMvHl2zPQUXvamx_lowUZB1X3vCqdGQHE0i0E_WUL3fiMkXAEIaA8Fx5XVm_2uja0TeBbJ0tGcBJuO8mO1VaXYsZQ9Zsd4zlkDQWYoWK3lYYI7WL0g_C-qCGLp2l3jIklOYADUZMq0/s800/z33sPR.gif) 0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sPR"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sG1 ul { list-style: none; margin: 0; padding: 0; } #z33sG1 img { border: none; } #z33sG1 { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #z33sG1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sG1 li a:link, #z33sG1 li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1yDdWAHelWSOlu0Dk9Opj_PxeYOUFxhmDlxN3Y6XltXg9Kx3wofHcFxKJJPLIqAUhhTFba-fvl9RS051o0JsbEB_sv1s-XDDIeL1y22bPfWJRkWqhLyNbYVQPGz4XeaQhHlTQOWhhko/s800/z33sG11.gif); padding: 8px 0 0 10px; } #z33sG1 li a:hover, #z33sG1 li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1yDdWAHelWSOlu0Dk9Opj_PxeYOUFxhmDlxN3Y6XltXg9Kx3wofHcFxKJJPLIqAUhhTFba-fvl9RS051o0JsbEB_sv1s-XDDIeL1y22bPfWJRkWqhLyNbYVQPGz4XeaQhHlTQOWhhko/s800/z33sG11.gif) 0 -32px; padding: 8px 0 0 10px; } #z33sG1 li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW1yDdWAHelWSOlu0Dk9Opj_PxeYOUFxhmDlxN3Y6XltXg9Kx3wofHcFxKJJPLIqAUhhTFba-fvl9RS051o0JsbEB_sv1s-XDDIeL1y22bPfWJRkWqhLyNbYVQPGz4XeaQhHlTQOWhhko/s800/z33sG11.gif) 0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sG1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li><li><a href="#5">Link5</a></li></ul></div>

Kode :

<style>#z33s2 ul { list-style: none; margin: 0; padding: 0; } #z33s2 img { border: none; } #z33s2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #z33s2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33s2 li a:link, #z33s2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5oDgsFXKmzmHncnQbxeKWPAcolTcaPj1V-XzwpgxcqeH0JYmeGXnBScRebHqacmtEPYrYLFzv0TBLkcxjl70Qv2XdHdkh7mgYAi9dNrYSOsqcZYlBIQF-zGmPbtiaX6OaXCFgGzsyeU/s800/z33s2.gif); padding: 8px 0 0 30px; } #z33s2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl5oDgsFXKmzmHncnQbxeKWPAcolTcaPj1V-XzwpgxcqeH0JYmeGXnBScRebHqacmtEPYrYLFzv0TBLkcxjl70Qv2XdHdkh7mgYAi9dNrYSOsqcZYlBIQF-zGmPbtiaX6OaXCFgGzsyeU/s800/z33s2.gif) 0 -32px; padding: 8px 0 0 32px; }</style><div id="z33s2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sPink1 ul { list-style: none; margin: 0; padding: 0; } #z33sPink1 img { border: none; } #z33sPink1 { width: 200px; margin: 10px; } #z33sPink1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sPink1 li a:link, #z33sPink1 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5Nr7R685r-a7uvYDcsw4E5Pwu104n8Hu9EXhyTghZTAuga3nkR6aOL9RUUL9yzStr9wpkTke3eC3zRb_zq-1uAqQSN0DKDW6doJWhIhg2R4XIC2BiT2H8tI4CVgvgLiwD_tFaBkME0U/s800/z33sPink1.gif); padding: 8px 0 0 10px; } #z33sPink1 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5Nr7R685r-a7uvYDcsw4E5Pwu104n8Hu9EXhyTghZTAuga3nkR6aOL9RUUL9yzStr9wpkTke3eC3zRb_zq-1uAqQSN0DKDW6doJWhIhg2R4XIC2BiT2H8tI4CVgvgLiwD_tFaBkME0U/s800/z33sPink1.gif) 0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sPink1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sVr{border-bottom-width: 0;}#z33sVr ul{margin: 0;padding: 0;font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}#z33sVr a{display: block;padding: 3px 0;padding-left: 9px;width: 200px;text-decoration: none;color: #333222;border-right:1px solid #000000;background-color: #FBEC04;border-bottom: 1px solid #6A6731;border-left: 7px solid #918C3B;}#z33sVr a:hover {background-color: #FAF6B9;border-left: 12px solid #918C3B;width: 195px;}#z33sVr div.JudulNa{color: white;border-bottom: 1px solid #053E66;padding: 5px 3px 5px 13px;background-color: black;width: 201px;font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;}</style><br /><div id="z33sVr"><div class="JudulNa">Contoh 1</div><ul><a href="#">Home</a><a href="#">Link 1</a><a href="#">Link 2</a></ul><div class="JudulNa">Contoh 2</div><ul><a href="#">Link 3</a><a href="#">Link 4</a><a href="#">Link 5</a><a href="#">Link 6</a></ul></div>

Kode :

<style>#z33sBL1 ul { list-style: none; margin: 0; padding: 0; } #z33sBL1 img { border: none; } #z33sBL1 { width: 200px; margin: 10px; } #z33sBL1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sBL1 li a:link, #z33sBL1 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7_Y29pn4DOWZd628C8yldLUEASlMB5My1SiDA8V-6C6U4GpTRiwjGsM2uz91wdfHWXguXG4tkNcLnRDvvgL7aYB3mwrudEI-0HyqZ4NfvY7nvy0VWDFV5NMK23pf89Kyz-oKI0RPY_M/s800/z33sBL1.gif); padding: 8px 0 0 10px; } #z33sBL1 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7_Y29pn4DOWZd628C8yldLUEASlMB5My1SiDA8V-6C6U4GpTRiwjGsM2uz91wdfHWXguXG4tkNcLnRDvvgL7aYB3mwrudEI-0HyqZ4NfvY7nvy0VWDFV5NMK23pf89Kyz-oKI0RPY_M/s800/z33sBL1.gif) 0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sBL1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sBL2 ul { list-style: none; margin: 0; padding: 0; } #z33sBL2 img { border: none; } #z33sBL2 { width: 200px; margin: 10px; } #z33sBL2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sBL2 li a:link, #z33sBL2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGphtHsi3krb4wJeFL83hlGn06PP1fofRoQotqXrVPDNj-uAW8A8UI71n9-8S0yDSV2baip2C3JQnhMhJhQMP2ZN_Os2Jk4Lzo64D1-Qzg7QU_YI80t7mCELkpSV1kL747jdXOB1ze3s/s800/z33sBL2.gif) 0 -32px; padding: 8px 0 0 10px; } #z33sBL2 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSGphtHsi3krb4wJeFL83hlGn06PP1fofRoQotqXrVPDNj-uAW8A8UI71n9-8S0yDSV2baip2C3JQnhMhJhQMP2ZN_Os2Jk4Lzo64D1-Qzg7QU_YI80t7mCELkpSV1kL747jdXOB1ze3s/s800/z33sBL2.gif); padding: 8px 0 0 10px; }</style><div id="z33sBL2"><br /><ul><br /><li><a href="#1">Link 1</a></li><br /><li><a href="#2">Link 2</a></li><br /><li><a href="#3">Link 3</a></li><br /><li><a href="#4">Link 4</a></li><br /><li><a href="#5">Link5</a></li><br /></ul><br /></div><br />

Kode :

<style>#z33sBrown ul { list-style: none; margin: 0; padding: 0; } #z33sBrown img { border: none; } #z33sBrown { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #z33sBrown li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sBrown li a:link, #z33sBrown li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyUGsSlAjSmo3uUju0dd1HSHTxJNfFyd4S3xtNpmpdB8dEcMxfr5cqz3cq_nk5u3NEXHvwAMwBddxxuZb0EEugjxThTVQaKtknF2uwR_bczoaWYsq_JhjgmwSqGuQvs8Ox4yfVnZvtGk/s800/z33sBrown.gif); padding: 8px 0 0 10px; } #z33sBrown li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAyUGsSlAjSmo3uUju0dd1HSHTxJNfFyd4S3xtNpmpdB8dEcMxfr5cqz3cq_nk5u3NEXHvwAMwBddxxuZb0EEugjxThTVQaKtknF2uwR_bczoaWYsq_JhjgmwSqGuQvs8Ox4yfVnZvtGk/s800/z33sBrown.gif) 0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sBrown"><br /><ul><br /><li><a href="#1">Link 1</a></li><br /><li><a href="#2">Link 2</a></li><br /><li><a href="#3">Link 3</a></li><br /><li><a href="#4">Link 4</a></li><br /><li><a href="#5">Link5</a></li><br /></ul><br /></div><br />

Kode :

<style>#z33sS1 ul { list-style: none; margin: 0; padding: 0; } #z33sS1 img { border: none; } #z33sS1 { width: 200px; margin: 10px; } #z33sS1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sS1 li a:link, #z33sS1 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho0i2yyNzyRAmP2aJKQzIuLneKJ7a7cdhhF0AXMPwVffLfqIRzVgeVeMhSU_ZTgpEGghsRyLdNmqdCvLDOQB8KXHUqef3IN511cBMmFHY-HsTk3IS6rQZ_YT1Mk_W4ytQSqbptNfDaFCo/s800/z33sS1.gif); padding: 8px 0 0 30px; } #z33sS1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho0i2yyNzyRAmP2aJKQzIuLneKJ7a7cdhhF0AXMPwVffLfqIRzVgeVeMhSU_ZTgpEGghsRyLdNmqdCvLDOQB8KXHUqef3IN511cBMmFHY-HsTk3IS6rQZ_YT1Mk_W4ytQSqbptNfDaFCo/s800/z33sS1.gif) 0 -32px; padding: 8px 0 0 30px; }</style><div id="z33sS1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sY1 ul { list-style: none; margin: 0; padding: 0; } #z33sY1 img { border: none; } #z33sY1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #z33sY1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sY1 li a:link, #z33sY1 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1O0MLqs30kXGz1uHvUeVDqReXkEvK9xjaGrkexm9ayH8HrEiXj_N9iiDWB_RnEbL6xdEbKpSVvRTkl5Uh4s8aLYVQUqtmXjZIsbh-hPGuLH8N7kFxPOZRLlRxMPdK65qPnocBrJGczQ/s400/z33sY1.gif); padding: 8px 0 0 25px; } #z33sY1 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy1O0MLqs30kXGz1uHvUeVDqReXkEvK9xjaGrkexm9ayH8HrEiXj_N9iiDWB_RnEbL6xdEbKpSVvRTkl5Uh4s8aLYVQUqtmXjZIsbh-hPGuLH8N7kFxPOZRLlRxMPdK65qPnocBrJGczQ/s400/z33sY1.gif) 0 -32px; padding: 8px 0 0 27px; }</style><div id="z33sY1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sB9 ul { list-style: none; margin: 0; padding: 0; } #z33sB9 img { border: none; } #z33sB9 { width: 200px; margin-top: 10px; } #z33sB9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sB9 li a:link, #z33sB9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuBhioUcp-bPNqRwDaWrWKNltG4PVMT9qePRk2f69bi4kTpud07pfXexBTGTKd1SV-AaSUYoRlveRXW8NOoQYaCC5DMhugB5hYLtk5NsYWBbtp9dDtSr-B4UOBj9EpEr5fbAhiD5HW1E/s800/z33sB9.gif); padding: 8px 0 0 10px; } #z33sB9 li a:hover, #z33sB9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuBhioUcp-bPNqRwDaWrWKNltG4PVMT9qePRk2f69bi4kTpud07pfXexBTGTKd1SV-AaSUYoRlveRXW8NOoQYaCC5DMhugB5hYLtk5NsYWBbtp9dDtSr-B4UOBj9EpEr5fbAhiD5HW1E/s800/z33sB9.gif) 0 -32px; padding: 8px 0 0 10px; } #z33sB9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinuBhioUcp-bPNqRwDaWrWKNltG4PVMT9qePRk2f69bi4kTpud07pfXexBTGTKd1SV-AaSUYoRlveRXW8NOoQYaCC5DMhugB5hYLtk5NsYWBbtp9dDtSr-B4UOBj9EpEr5fbAhiD5HW1E/s800/z33sB9.gif) 0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sB9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sRBT ul { list-style: none; margin: 0; padding: 0; } #z33sRBT img { border: none; } #z33sRBT { width: 200px; margin: 10px; } #z33sRBT li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #z33sRBT li a:link, #z33sRBT li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWRUlXcXcCe4m6DRipUv-qQnw6HZkibiJahUg1YKiibP10uVA2OxR0rB1aFi2w2mrNHfODwm5veVE6bjr_rer5xP-cKMNs8bNClcaqmp7QyVRZ1qepAAiaLn9xyNxyNZRelllhFv1lf3Q/s800/z33sRBT.gif); padding: 10px 0 0 35px; } #z33sRBT li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWRUlXcXcCe4m6DRipUv-qQnw6HZkibiJahUg1YKiibP10uVA2OxR0rB1aFi2w2mrNHfODwm5veVE6bjr_rer5xP-cKMNs8bNClcaqmp7QyVRZ1qepAAiaLn9xyNxyNZRelllhFv1lf3Q/s800/z33sRBT.gif) 0 -32px; padding: 10px 0 0 35px; }</style><div id="z33sRBT"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33s5 ul { list-style: none; margin: 0; padding: 0; } #z33s5 img { border: none; } #z33s5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #z33s5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33s5 li a:link, #z33s5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSg1xkh9Edcq_geQ_x3IQno0vW4FMkMnsZ7H0Ipp0xUGzKQj9k3m6C7C0RTuaym3dV47TT9oVMjeqgBS85Oy0S63nLRX684roMnD5V4Fl2dnli1xDuSsnO3Zl2ysB5Eh2mjUksHevaAA4/s800/z33s5.gif); padding: 8px 25px 0 10px; text-align: right; } #z33s5 li a:hover, #z33s5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSg1xkh9Edcq_geQ_x3IQno0vW4FMkMnsZ7H0Ipp0xUGzKQj9k3m6C7C0RTuaym3dV47TT9oVMjeqgBS85Oy0S63nLRX684roMnD5V4Fl2dnli1xDuSsnO3Zl2ysB5Eh2mjUksHevaAA4/s800/z33s5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #z33s5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSg1xkh9Edcq_geQ_x3IQno0vW4FMkMnsZ7H0Ipp0xUGzKQj9k3m6C7C0RTuaym3dV47TT9oVMjeqgBS85Oy0S63nLRX684roMnD5V4Fl2dnli1xDuSsnO3Zl2ysB5Eh2mjUksHevaAA4/s800/z33s5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }</style><div id="z33s5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sBRSide ul { list-style: none; margin: 0; padding: 0; } #z33sBRSide img { border: none; } #z33sBRSide { width: 200px; margin: 10px; } #z33sBRSide li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sBRSide li a:link, #z33sBRSide li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOOTxUBIXXpAFch4xiEKVnkx1CD5raIR0lhhDbQwHKjFeEWdd08NEUVaUcFHaKckX6JNNdkouSwmTzxHGm-dOvOW0zX1Trb1iCxiYWzO5xKqcTYbHglV7LBZEphvUSqBIGDFbCiBJidk/s800/z33sBRSide.gif); padding: 8px 0 0 10px; } #z33sBRSide li a:hover, #z33sBRSide li #current, #z33sBRSide li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimOOTxUBIXXpAFch4xiEKVnkx1CD5raIR0lhhDbQwHKjFeEWdd08NEUVaUcFHaKckX6JNNdkouSwmTzxHGm-dOvOW0zX1Trb1iCxiYWzO5xKqcTYbHglV7LBZEphvUSqBIGDFbCiBJidk/s800/z33sBRSide.gif) 0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sBRSide"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sOR ul { list-style: none; margin: 0; padding: 0; } #z33sOR img { border: none; } #z33sOR { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #z33sOR li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #z33sOR li a:link, #z33sOR li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQ6DncWdQd0lCCHL1rHZWIMIiJ5XQpj97h2MIQ4FYGP_cKQM88hTzIlH9u11b4r6ZtDZgoj-iuW9hM7fA74-fnD5HIeDiHtY4zFlK_SgHDA7sN0ajY_IlCDpLdAuKaTA0Qa9yQs1ZIW4/s800/z33sOR.gif); padding: 8px 0 0 10px; } #z33sOR li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuQ6DncWdQd0lCCHL1rHZWIMIiJ5XQpj97h2MIQ4FYGP_cKQM88hTzIlH9u11b4r6ZtDZgoj-iuW9hM7fA74-fnD5HIeDiHtY4zFlK_SgHDA7sN0ajY_IlCDpLdAuKaTA0Qa9yQs1ZIW4/s800/z33sOR.gif) 0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sOR"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Kode :

Silahkan KLIK DISINI

Oncom Hack Blogger

Labels

ABOUT ME

Blog Archive

Jumat, 15 Oktober 2010

16 Style Vertical Menu For Blogger

No comments yet