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/AVvXsEjQ98eu0apDEQHbqWqF3L4UJmgAosPiBI-aNsMnKhl8LBbQiVoZhJxv4wn0Lgzi5TCJKo-VTVnJXCWIVUsNW5gEOefJ7frj5DE7GXRerx1I_MvBtOCz8P1GoCObmIHorsrCGvqQpDVi8mg/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/AVvXsEjQ98eu0apDEQHbqWqF3L4UJmgAosPiBI-aNsMnKhl8LBbQiVoZhJxv4wn0Lgzi5TCJKo-VTVnJXCWIVUsNW5gEOefJ7frj5DE7GXRerx1I_MvBtOCz8P1GoCObmIHorsrCGvqQpDVi8mg/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/AVvXsEjQ98eu0apDEQHbqWqF3L4UJmgAosPiBI-aNsMnKhl8LBbQiVoZhJxv4wn0Lgzi5TCJKo-VTVnJXCWIVUsNW5gEOefJ7frj5DE7GXRerx1I_MvBtOCz8P1GoCObmIHorsrCGvqQpDVi8mg/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/AVvXsEjEPZvcU9rR9z2WxDfMgmiEZkA9-Rl3ET2Ms5NaP6h3zhPeB6MiYGI8efUUM9jsmMSiEQPqJYVsMpZMIfXNDmW6eoQI3vLkGGUIW1Veviwv9zAXvNUiEm_-TFbP-ExODrjWoN2yImmcXww/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/AVvXsEjEPZvcU9rR9z2WxDfMgmiEZkA9-Rl3ET2Ms5NaP6h3zhPeB6MiYGI8efUUM9jsmMSiEQPqJYVsMpZMIfXNDmW6eoQI3vLkGGUIW1Veviwv9zAXvNUiEm_-TFbP-ExODrjWoN2yImmcXww/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/AVvXsEjEPZvcU9rR9z2WxDfMgmiEZkA9-Rl3ET2Ms5NaP6h3zhPeB6MiYGI8efUUM9jsmMSiEQPqJYVsMpZMIfXNDmW6eoQI3vLkGGUIW1Veviwv9zAXvNUiEm_-TFbP-ExODrjWoN2yImmcXww/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/AVvXsEhciSFv3_vi2egUvAxXrp9KEL0yy0JnDOcmvPN0x6Ggw9MzWmrRkJlZtfnfmxT4LmB5PsoEM_BzJaeYLonD3sjNjH2XXwGqa7cm0jBYU8l5Szrl10yX2r8QWXHjU8RkhrctFulmIIaDy1Q/s800/z33s2.gif); padding: 8px 0 0 30px; } #z33s2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhciSFv3_vi2egUvAxXrp9KEL0yy0JnDOcmvPN0x6Ggw9MzWmrRkJlZtfnfmxT4LmB5PsoEM_BzJaeYLonD3sjNjH2XXwGqa7cm0jBYU8l5Szrl10yX2r8QWXHjU8RkhrctFulmIIaDy1Q/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/AVvXsEi3EtJWRYzsV1iCilEKwJErxoiQYfPSGTTNQ2K8Ri6uDdTDL6rkohtWulhixiFBlNnHgggwtMR4oo31RH4RXg0I09cIP1cBEghEem7C0gI-Dwrd3FsNNXTVwlSZTKO9DjbQGzRPeOTm9Tw/s800/z33sPink1.gif); padding: 8px 0 0 10px; } #z33sPink1 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3EtJWRYzsV1iCilEKwJErxoiQYfPSGTTNQ2K8Ri6uDdTDL6rkohtWulhixiFBlNnHgggwtMR4oo31RH4RXg0I09cIP1cBEghEem7C0gI-Dwrd3FsNNXTVwlSZTKO9DjbQGzRPeOTm9Tw/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/AVvXsEggAerL4h73-5xodo8kV80xjT_VvJSJg9x2Q5xwQYOx65SuOY_HRSRJUy7KXqHjjNffhrLf0aCK8_f0C8rKKQEEfZstQ_Jc6WAHLZVZZMjEsGrPqV03BxWZReRZYFsaSJBr6xPz7TjhCRc/s800/z33sBL1.gif); padding: 8px 0 0 10px; } #z33sBL1 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggAerL4h73-5xodo8kV80xjT_VvJSJg9x2Q5xwQYOx65SuOY_HRSRJUy7KXqHjjNffhrLf0aCK8_f0C8rKKQEEfZstQ_Jc6WAHLZVZZMjEsGrPqV03BxWZReRZYFsaSJBr6xPz7TjhCRc/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/AVvXsEg7Z-mae5_979OWpCWxIZI2NTh346gcpS_0gDHtNmj3IFs0P7VT7a6Q1q_R3JFiZ32wXpNYUNYnLBDUfel5aFw4b3ychwYedfi12PsVdHowtkL53ojvij9G9p0muhovq5VIBujRTHGIjM0/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/AVvXsEg7Z-mae5_979OWpCWxIZI2NTh346gcpS_0gDHtNmj3IFs0P7VT7a6Q1q_R3JFiZ32wXpNYUNYnLBDUfel5aFw4b3ychwYedfi12PsVdHowtkL53ojvij9G9p0muhovq5VIBujRTHGIjM0/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/AVvXsEjB3G8d_vKoGEM9ksrG694J_OUMOzgkRF6K7_6XKr0NX6hdqALahdx7DQ_hvOGKq32EVxziz-lzURgyrWoaMJrD3r7nPQwv1mHMQUufoi0oQKULn8nfHIppnP4JFYlimP7PAkxVCqg5R-Q/s800/z33sBrown.gif); padding: 8px 0 0 10px; } #z33sBrown li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3G8d_vKoGEM9ksrG694J_OUMOzgkRF6K7_6XKr0NX6hdqALahdx7DQ_hvOGKq32EVxziz-lzURgyrWoaMJrD3r7nPQwv1mHMQUufoi0oQKULn8nfHIppnP4JFYlimP7PAkxVCqg5R-Q/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/AVvXsEhbAPL2atrEdL24kAOIZ8aaTbXhIB8V6k8x-SG-ifuO99PZAaXjKHuczvrK7281MyDceX3J-A0jTT2NvVb0km-EpW7nN6OUfKb9J-o6OcYh6Zb3XUXe3A3Saj9fNGuG7MoEn2gxvrDFOfE/s800/z33sS1.gif); padding: 8px 0 0 30px; } #z33sS1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbAPL2atrEdL24kAOIZ8aaTbXhIB8V6k8x-SG-ifuO99PZAaXjKHuczvrK7281MyDceX3J-A0jTT2NvVb0km-EpW7nN6OUfKb9J-o6OcYh6Zb3XUXe3A3Saj9fNGuG7MoEn2gxvrDFOfE/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/AVvXsEg0-ODuyf3kN9J9B1Ew5hxZJC4Vwt9WnOtVjp3g4TXQIrDziHL-Hiau3pt8wxwDxSsB_oyj5mt1jPi6wQMUF7sLhObgQmsNfuaB669q31ERS6Kp3H5hJsloja_5kwb4rUoQWR_7e9EY9g4/s400/z33sY1.gif); padding: 8px 0 0 25px; } #z33sY1 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0-ODuyf3kN9J9B1Ew5hxZJC4Vwt9WnOtVjp3g4TXQIrDziHL-Hiau3pt8wxwDxSsB_oyj5mt1jPi6wQMUF7sLhObgQmsNfuaB669q31ERS6Kp3H5hJsloja_5kwb4rUoQWR_7e9EY9g4/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/AVvXsEhZ-ITbaKgVRUVdqRlEs3PQz6ZL4K7ey0OjOlbezAcKsjDzdSW2m00f9WHEN7s5MRK2UvyfVh697cZWs-75CVTZfe1tCBcojGFjfo5Ehmq9kxjzjqyabEXQxo-iG5_5odNHc3uCxE80Cy4/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/AVvXsEhZ-ITbaKgVRUVdqRlEs3PQz6ZL4K7ey0OjOlbezAcKsjDzdSW2m00f9WHEN7s5MRK2UvyfVh697cZWs-75CVTZfe1tCBcojGFjfo5Ehmq9kxjzjqyabEXQxo-iG5_5odNHc3uCxE80Cy4/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/AVvXsEhZ-ITbaKgVRUVdqRlEs3PQz6ZL4K7ey0OjOlbezAcKsjDzdSW2m00f9WHEN7s5MRK2UvyfVh697cZWs-75CVTZfe1tCBcojGFjfo5Ehmq9kxjzjqyabEXQxo-iG5_5odNHc3uCxE80Cy4/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/AVvXsEgH38vvvFpYB5un73jcz70FNES5Um1G0BvFkuEg7UY2Vmz2wBoVTsb4PraheS5YD63ngsjltpASnWnQBzZjiZOUaKtKY0ZwvXZ54pXT8VhF2qvWaoogaA3QGTw-TE-QTfGZRx68VNzFNNw/s800/z33sRBT.gif); padding: 10px 0 0 35px; } #z33sRBT li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH38vvvFpYB5un73jcz70FNES5Um1G0BvFkuEg7UY2Vmz2wBoVTsb4PraheS5YD63ngsjltpASnWnQBzZjiZOUaKtKY0ZwvXZ54pXT8VhF2qvWaoogaA3QGTw-TE-QTfGZRx68VNzFNNw/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/AVvXsEh_gv5irV7t89wPmtcoojM-fMKrYGTihCPrneBrRFWmuDU7_XAhSU6xpF6hVra81dHw-xBdhLR_7cSaJvI1u5X2Kx-C0Kffvb9NPuXiZKeSo361M7_08nTdpr_lzvozfeur4d-jrFwNaiY/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/AVvXsEh_gv5irV7t89wPmtcoojM-fMKrYGTihCPrneBrRFWmuDU7_XAhSU6xpF6hVra81dHw-xBdhLR_7cSaJvI1u5X2Kx-C0Kffvb9NPuXiZKeSo361M7_08nTdpr_lzvozfeur4d-jrFwNaiY/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/AVvXsEh_gv5irV7t89wPmtcoojM-fMKrYGTihCPrneBrRFWmuDU7_XAhSU6xpF6hVra81dHw-xBdhLR_7cSaJvI1u5X2Kx-C0Kffvb9NPuXiZKeSo361M7_08nTdpr_lzvozfeur4d-jrFwNaiY/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/AVvXsEiD8hbBkKlczB1NBPUGgWoFSz47RlBAdrj7lUj65ddBAlVkA4GP87MWgLxCTmwJ6rnZrckU5IgwwYzFWH-Js7tBZun1R9NNJha8ub4t1yJQbXOqExWrcz4TU6L5FKCJm-n_aby4GQmPJts/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/AVvXsEiD8hbBkKlczB1NBPUGgWoFSz47RlBAdrj7lUj65ddBAlVkA4GP87MWgLxCTmwJ6rnZrckU5IgwwYzFWH-Js7tBZun1R9NNJha8ub4t1yJQbXOqExWrcz4TU6L5FKCJm-n_aby4GQmPJts/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/AVvXsEiJhPWW7FnuVPTFyPf0ZijiIhpynHdget0IaFqMpooSAOgALkwtYBgzcxnsiNeTbzCfB7P1ToplSKskq6OZGswtFhSuAqT8TaDKSRmEMphj4JkAMj5eMd4IVDk2DlTZbc17PAajXNXZ7wQ/s800/z33sOR.gif); padding: 8px 0 0 10px; } #z33sOR li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJhPWW7FnuVPTFyPf0ZijiIhpynHdget0IaFqMpooSAOgALkwtYBgzcxnsiNeTbzCfB7P1ToplSKskq6OZGswtFhSuAqT8TaDKSRmEMphj4JkAMj5eMd4IVDk2DlTZbc17PAajXNXZ7wQ/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