<h3>Menu <span>Shadow no Blog</span></h3>

Menu sempre é uma forma útil de organizar o blog.
Personalizei com cores diferentes escolha abaixo o código de acordo com o modelo desejado.

Idéias - Angry Birds Principe encantado Caixinha de ovos Cuidado Reflexão

-------------------------------------------------------------------------------------
Após escolher o modelo desejado, copie o código e cole em
HTML/Java Script e salve.

Nome do Link Nome do Link

<center> <style> .menu8 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/back003.png'); color: #528B8B; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #48D1CC; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu8 a:hover{ box-shadow: inset 1000px 0 0px 0 #48D1CC; color: #fff; /* {HOVER} */ border-right:10px solid #48D1CC; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu8"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu7 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/back05.png'); color: #9C9C9C; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #DCDCDC; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu7 a:hover{ box-shadow: inset 1000px 0 0px 0 #DCDCDC; color: #fff; /* {HOVER} */ border-right:10px solid #DCDCDC; /* {HOVER} */ border-left:10px solid #000; /*{HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu7"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu5 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu16.gif'); color: #104E8B; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #00BFFF; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu5 a:hover{ box-shadow: inset 1000px 0 0px 0 #00BFFF; color: #fff; /* {HOVER} */ border-right:10px solid #00BFFF; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu5"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 4 Menu 5

<center> <style> .menu4 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/esse2.gif'); color: #000; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #FF69B4; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu4 a:hover{ box-shadow: inset 1000px 0 0px 0 #FF69B4; color: #fff; /* {HOVER} */ border-right:10px solid #FF69B4; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu4"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu3 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu13.gif'); color: #fff; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #ed146f; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu3 a:hover{ box-shadow: inset 1000px 0 0px 0 #ed146f; color: #fff; /* {HOVER} */ border-right:10px solid #ed146f; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu3"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu2 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu31.gif'); color: #8B3A62; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #FF69B4; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu2 a:hover{ box-shadow: inset 1000px 0 0px 0 #FF69B4; color: #fff; /* {HOVER} */ border-right:10px solid #FF69B4; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu2"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu1 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background-image: url('http://i111.photobucket.com/albums/n159/docedani/backmenu/menu20.gif'); color: #8B4C39; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #EED8AE; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu1 a:hover{ box-shadow: inset 1000px 0 0px 0 #EED8AE; color: #fff; /* {HOVER} */ border-right:10px solid #EED8AE; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu1"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menuSC a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:right; background-image: url('http://i111.photobucket.com/albums/n159/docedani/onestripe1_rosa.gif'); color: #00868B; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #FFFACD; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menuSC a:hover{ box-shadow: inset 1000px 0 0px 0 #FFFACD; color: #FF1493; /* {HOVER} */ border-right:10px solid #FFFACD; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menuSC"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu9 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background:#EED5D2; color: #8B7765; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #EED5D2; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu9 a:hover{ text-align:right; box-shadow: inset 1000px 0 0px 0 #CDB7B5; color: #FFf; /* {HOVER} */ border-right:10px solid #CDB7B5; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu9"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu10 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background:#E0EEEE; color: #68838B; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #E0EEEE; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu10 a:hover{ text-align:right; box-shadow: inset 1000px 0 0px 0 #C1CDCD; color: #FFf; /* {HOVER} */ border-right:10px solid #C1CDCD; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu10"> <a href="Endereço do Site"> Menu 1</a> <a href="Endereço do Site"> Menu 2</a> <a href="Endereço do Site"> Menu 3</a> <a href="Endereço do Site"> Menu 4</a> <a href="Endereço do Site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu11 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background:#FFE7BA; color: #EE9572; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #FFE7BA; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu11 a:hover{ text-align:right; box-shadow: inset 1000px 0 0px 0 #EED8AE; color: #FFf; /* {HOVER} */ border-right:10px solid #EED8AE; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu11"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu12 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background:#FFF0F5; color: #FF82AB; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #FFF0F5; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu12 a:hover{ text-align:right; box-shadow: inset 1000px 0 0px 0 #FFB5C5; color: #FFf; /* COLOR DE LETRA {HOVER} */ border-right:10px solid #FFB5C5; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu12"> <a href="Endereço do site"> Menu 1</a> <a href="Endereço do site"> Menu 2</a> <a href="Endereço do site"> Menu 3</a> <a href="Endereço do site"> Menu 4</a> <a href="Endereço do site"> Menu 5</a> </div></center>

Menu 1 Menu 2

<center> <style> .menu13 a{ font-family: comic sans ms; font-size: 13px; padding:3px; letter-spacing: 2px; box-shadow: inset 9px 0 0px 0 #fff; -webkit-transition: 1.0s; -moz-transition: 1.0s; margin:1px; display:block; text-align:center; background:#C1FFC1; color: #698B69; /* */ width: 240px; /* */ border-right:10px solid #fff; /* */ border-left:10px solid #C1FFC1; /* */ overflow: hidden; text-decoration: none; text-shadow: 0px 0px 0px #fff; } .menu13 a:hover{ text-align:right; box-shadow: inset 1000px 0 0px 0 #9BCD9B; color: #FFf; /* {HOVER} */ border-right:10px solid #9BCD9B; /* {HOVER} */ border-left:10px solid #000; /* {HOVER} */ text-decoration: none; text-shadow: 0px 0px 0px #fff; } </style> <div class="menu13"> <a href="Endereço do Site"> Menu 1</a> <a href="Endereço do Site"> Menu 2</a> <a href="Endereço do Site"> Menu 3</a> <a href="Endereço do Site"> Menu 4</a> <a href="Endereço do Site"> Menu 5</a> </div></center>