16 Style Vertical Menu For Blogger

Diposting oleh rizalfauzan's blog di 16.15

Berikut ini adalah 16 Style Vertical Menu

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/AVvXsEhNUZCHXAMioU_dxafMLL6xwb_LR9drC_XsB4YH2lmEMJTQ3YTHdWz0bGw4GoAzUE5-f_z35UAVCLsq4_Nznxve_xvLAgeXHIFB1MT4NfxM4Dg_ipDannnJo-J48UiDD3GEYl7SbKXoVaM/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/AVvXsEhNUZCHXAMioU_dxafMLL6xwb_LR9drC_XsB4YH2lmEMJTQ3YTHdWz0bGw4GoAzUE5-f_z35UAVCLsq4_Nznxve_xvLAgeXHIFB1MT4NfxM4Dg_ipDannnJo-J48UiDD3GEYl7SbKXoVaM/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/AVvXsEhNUZCHXAMioU_dxafMLL6xwb_LR9drC_XsB4YH2lmEMJTQ3YTHdWz0bGw4GoAzUE5-f_z35UAVCLsq4_Nznxve_xvLAgeXHIFB1MT4NfxM4Dg_ipDannnJo-J48UiDD3GEYl7SbKXoVaM/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/AVvXsEiaA_k9gg2apE9uRljqiBYf5y_Eh8wFGtPa0uhhbqhOxcjD-twe17KXHC2mhcfqHVVkRkSIL3lCKfabKpDblgumogAkmg1tttSwJ4LR4WiySnvz_UGns85rK2NrSwx9WDmm9-oU7eogqVE/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/AVvXsEiaA_k9gg2apE9uRljqiBYf5y_Eh8wFGtPa0uhhbqhOxcjD-twe17KXHC2mhcfqHVVkRkSIL3lCKfabKpDblgumogAkmg1tttSwJ4LR4WiySnvz_UGns85rK2NrSwx9WDmm9-oU7eogqVE/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/AVvXsEiaA_k9gg2apE9uRljqiBYf5y_Eh8wFGtPa0uhhbqhOxcjD-twe17KXHC2mhcfqHVVkRkSIL3lCKfabKpDblgumogAkmg1tttSwJ4LR4WiySnvz_UGns85rK2NrSwx9WDmm9-oU7eogqVE/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/AVvXsEj_buAOBv1iJmdhPvO5_ZkEqGuzWFlGgqUbWqVUIwuAWaQG8YHFbKbOTXN12vvUSMLnX7T7NEw_yJvXEsNJo14QJGuk2puUkNNdHiTHZ28nCJRdfrGKf6nVRjXMXxbZ0fYpvqDD89SzXp4/s800/z33s2.gif); padding: 8px 0 0 30px; } #z33s2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_buAOBv1iJmdhPvO5_ZkEqGuzWFlGgqUbWqVUIwuAWaQG8YHFbKbOTXN12vvUSMLnX7T7NEw_yJvXEsNJo14QJGuk2puUkNNdHiTHZ28nCJRdfrGKf6nVRjXMXxbZ0fYpvqDD89SzXp4/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/AVvXsEjPD4J7hwFjJ8AhRtULbmfLRI8JJ1Y3panjBfEoG-EE_dOQMW56QsIY-1aEzCXIKfb4Dnh8DRjS54qiYnpoXYTKUqBEsXEUNllQiYMzj0vYbMh83ksojfzJE4FpNOSOzR0-LmpbUWsrftk/s800/z33sPink1.gif); padding: 8px 0 0 10px; } #z33sPink1 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPD4J7hwFjJ8AhRtULbmfLRI8JJ1Y3panjBfEoG-EE_dOQMW56QsIY-1aEzCXIKfb4Dnh8DRjS54qiYnpoXYTKUqBEsXEUNllQiYMzj0vYbMh83ksojfzJE4FpNOSOzR0-LmpbUWsrftk/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/AVvXsEiU6QKsrdsgST-bwgTpbL10iHkaPuCRFd1bjAd3qU9zjtlsNVJAo4vX9QCERF6dDuHFmDAFfGHTAFPXQCNgBW2FEYaeBrKj6uKJMk3XzXefB-3CDfl8qnJTA8hWb_IQESuStxGOPVNPP6w/s800/z33sBL1.gif); padding: 8px 0 0 10px; } #z33sBL1 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU6QKsrdsgST-bwgTpbL10iHkaPuCRFd1bjAd3qU9zjtlsNVJAo4vX9QCERF6dDuHFmDAFfGHTAFPXQCNgBW2FEYaeBrKj6uKJMk3XzXefB-3CDfl8qnJTA8hWb_IQESuStxGOPVNPP6w/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/AVvXsEjWpfB5t0AFJeRREB4laOSWW5WwLinV5tI2FSC_FRfvenNitkTIhJjdmGxr5w9aqq5xFefitvBpzntReVIalw78h2WS1YRPo2ZciCtNvWYioRgNF5RSym0ehSpnMtObjhK5ccWKeH-vgxU/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/AVvXsEjWpfB5t0AFJeRREB4laOSWW5WwLinV5tI2FSC_FRfvenNitkTIhJjdmGxr5w9aqq5xFefitvBpzntReVIalw78h2WS1YRPo2ZciCtNvWYioRgNF5RSym0ehSpnMtObjhK5ccWKeH-vgxU/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/AVvXsEjU8ckI5GqdL193zy-AHLXbQ9fn9e01_sM7Ivu5_lWZV6hRLiNKLbjpstVTQJFRC4pMu-lo32RXqavPcjguKt22hszoiUUBlEi6-2UgUrQ4K4qCmF1XiDFPPmIazWJJUP-POdufCig2_98/s800/z33sBrown.gif); padding: 8px 0 0 10px; } #z33sBrown li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU8ckI5GqdL193zy-AHLXbQ9fn9e01_sM7Ivu5_lWZV6hRLiNKLbjpstVTQJFRC4pMu-lo32RXqavPcjguKt22hszoiUUBlEi6-2UgUrQ4K4qCmF1XiDFPPmIazWJJUP-POdufCig2_98/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/AVvXsEjHKHyUrQLJcu5kdKtzBKXscbLdgtZ72KOgym8lqqbpuxmQ9QD517cIW-X0UVd73C1JFl6if0MVV9OtwGgF675IHQTYvPyQfGEs5v1Uv8Xp1EMja9T0DIIg4G8XD7RiXRDRRlSRhKjzc5o/s800/z33sS1.gif); padding: 8px 0 0 30px; } #z33sS1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHKHyUrQLJcu5kdKtzBKXscbLdgtZ72KOgym8lqqbpuxmQ9QD517cIW-X0UVd73C1JFl6if0MVV9OtwGgF675IHQTYvPyQfGEs5v1Uv8Xp1EMja9T0DIIg4G8XD7RiXRDRRlSRhKjzc5o/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/AVvXsEgZ4fnvUQDpwTlVBmqD5RyafLwF0oWFHrLXGAU7egz1HzjVjqB0XHX2F8ZCje6rL2nEXJtMzu-Vh45rxyiroXewqHbGr46rCszWCr3qmuao4d9sofyyyXAttcCj-9JuUC_EAfTJG9Iu170/s400/z33sY1.gif); padding: 8px 0 0 25px; } #z33sY1 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4fnvUQDpwTlVBmqD5RyafLwF0oWFHrLXGAU7egz1HzjVjqB0XHX2F8ZCje6rL2nEXJtMzu-Vh45rxyiroXewqHbGr46rCszWCr3qmuao4d9sofyyyXAttcCj-9JuUC_EAfTJG9Iu170/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/AVvXsEjv0bWkrHidlN0l81MKAEwxuzE-ML76GfmfZTa7ZZPBx03mQtvo-oCBZSMKwYn42g4OT3WE4KDvZzBnZqhAJ86b93kGJEKfVaadfyKgkbi3S3iXZnCS1EdTzdVYRlNup3DDYzVmaG84CfI/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/AVvXsEjv0bWkrHidlN0l81MKAEwxuzE-ML76GfmfZTa7ZZPBx03mQtvo-oCBZSMKwYn42g4OT3WE4KDvZzBnZqhAJ86b93kGJEKfVaadfyKgkbi3S3iXZnCS1EdTzdVYRlNup3DDYzVmaG84CfI/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/AVvXsEjv0bWkrHidlN0l81MKAEwxuzE-ML76GfmfZTa7ZZPBx03mQtvo-oCBZSMKwYn42g4OT3WE4KDvZzBnZqhAJ86b93kGJEKfVaadfyKgkbi3S3iXZnCS1EdTzdVYRlNup3DDYzVmaG84CfI/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/AVvXsEinx7Oec2rErYhnhEL9Czxe6aV1HtfHd9LtX2Xla0Hz3N6RH-bYYO94QgoYRBMI3LOaxa9akmS_dW1p6xG3FxBCIAoNe28vFjdxyaxtaJB9fQTqcveV4l_5m5CD8Xbcp1Jr0yh1Fc5WZ7c/s800/z33sRBT.gif); padding: 10px 0 0 35px; } #z33sRBT li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinx7Oec2rErYhnhEL9Czxe6aV1HtfHd9LtX2Xla0Hz3N6RH-bYYO94QgoYRBMI3LOaxa9akmS_dW1p6xG3FxBCIAoNe28vFjdxyaxtaJB9fQTqcveV4l_5m5CD8Xbcp1Jr0yh1Fc5WZ7c/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/AVvXsEhsF7_f0JStwoT6-wOD9nLrnFJSW-4AfyE9UJLH37fftglP6DECdcRrjxG2FOWVhwFqAtOXHvS_UVkeHEyh6-DYdxNv8tb1w5cCkFoqdH5P7ET1m-eHrGeIrG-6KIRRd8wnYcmKZ66LQlI/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/AVvXsEhsF7_f0JStwoT6-wOD9nLrnFJSW-4AfyE9UJLH37fftglP6DECdcRrjxG2FOWVhwFqAtOXHvS_UVkeHEyh6-DYdxNv8tb1w5cCkFoqdH5P7ET1m-eHrGeIrG-6KIRRd8wnYcmKZ66LQlI/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/AVvXsEhsF7_f0JStwoT6-wOD9nLrnFJSW-4AfyE9UJLH37fftglP6DECdcRrjxG2FOWVhwFqAtOXHvS_UVkeHEyh6-DYdxNv8tb1w5cCkFoqdH5P7ET1m-eHrGeIrG-6KIRRd8wnYcmKZ66LQlI/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/AVvXsEjHCdDeyVH1jmlNqJzgyQfQU-C39GZwC1L9AiR7zgZ37ZHGNW76ld6hOzAaeaiWJBg8IyuW_5ePaQegf_NktImEDTSGr9IaIMuLwJXfXggA2Ej9f5Va9JAyWzbW3bf81c8WWovnHySEgFM/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/AVvXsEjHCdDeyVH1jmlNqJzgyQfQU-C39GZwC1L9AiR7zgZ37ZHGNW76ld6hOzAaeaiWJBg8IyuW_5ePaQegf_NktImEDTSGr9IaIMuLwJXfXggA2Ej9f5Va9JAyWzbW3bf81c8WWovnHySEgFM/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/AVvXsEhuQBVsMuPT98v1cvEQgXflyRxk7_oNIKw41RO9MngnKRL-k28M_r4GXzma3Nf-HXuKe31YBKZEddXiYgdrXNTP8uMvYHTvPxF8nYja4zbiB1VMS7rCQREYAKryQzsLfZo4qZC9DHxigf4/s800/z33sOR.gif); padding: 8px 0 0 10px; } #z33sOR li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQBVsMuPT98v1cvEQgXflyRxk7_oNIKw41RO9MngnKRL-k28M_r4GXzma3Nf-HXuKe31YBKZEddXiYgdrXNTP8uMvYHTvPxF8nYja4zbiB1VMS7rCQREYAKryQzsLfZo4qZC9DHxigf4/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