Blogger dikey menü kodları

Posted by : Unknown 20 Mart 2013 Çarşamba

Blogunuzda kenar çubuğuna ekliyebileceğiniz birbirinden şık görünüm olarak hoş ve üstelik navigasyonlu olan tam 10 adet navigasyonlu dikey menü içerisinden istediğinizi blogunuza uygulayabilmek için;

Beğendiğiniz dikey menüye ait CSS kodunu HTML kodları içerisinde

]]></b:skin> kodunu bulup menüye ait CSS kodunu

]]></b:skin>kodundan önceki kısma yapıştırın. Daha Sonra CSS kodunu eklediğiniz dikey menüye ait HTML kodunu ise Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip ederek CSS kodunu eklediğimiz menüye ait HTML kodunu da açılan gadget içerisine yapıştırın ve kaydedip çıkın.Gadgeti menünün görünmesini istediğiniz yere sürükleyip bırakın.

HTML kodları içerisinde

<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>

#1-#2-#3-#4-#5: yerine yazılarımızın linkini koyuyoruz

Link1-Link2-Link3-Link4-Link5:yerinede menüde görünmesini istediğimiz isimleri yazıyoruz.

Örnek:

<li><a href=http://blogger-yazari.blogspot.com >blogger-yazari</a></li>

Navigasyonlu Dikey Menü #1

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #2

Css Kodu

#menu3 ul { list-style:  none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 {  width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 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; } #menu3 li a:link, #menu3 li a:visited {  color: #888; display: block; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nC4ClbDHwOxMHhqkWumtxeCSXFltlDi-UtiW5dlxlJgPfnnnp3KqGXHiCzElh2r0fV7MnM1gOsDeQRaHn627p9tuKSkWp4L04ei01l52i5G4WuGyROcFmysUKhXhvz-SAGJ05t2MjsQ/s800/menu3.gif);  padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3  li a:active { color: #283A50; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7nC4ClbDHwOxMHhqkWumtxeCSXFltlDi-UtiW5dlxlJgPfnnnp3KqGXHiCzElh2r0fV7MnM1gOsDeQRaHn627p9tuKSkWp4L04ei01l52i5G4WuGyROcFmysUKhXhvz-SAGJ05t2MjsQ/s800/menu3.gif)  0 -32px; padding: 8px 0 0 30px; }

HTML Kodu

Navigasyonlu Dikey Menü #3

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #4

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #5

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #6

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #7

Css Kodu

#menu2 ul { list-style:  none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 {  width: 200px; border-style: solid solid none solid; border-color:  #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 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; } #menu2 li a:link, #menu2 li a:visited {  color: #fff; display: block; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NAyi4Eq2BjkqRyKBkQX9iZUkYr-on9TqeKHo0z-g7MKz1EhhbOwQ6KxYwNsoDpFU6TQLIhThA8qb9k1wQ7-EpZ-DOG34vRQ0NrUzsf8SZRLYXWeBNxyaaeb6dmRLY1Ry0RBJMJ11e1g/s800/menu2.gif);  padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color:  #283A50; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NAyi4Eq2BjkqRyKBkQX9iZUkYr-on9TqeKHo0z-g7MKz1EhhbOwQ6KxYwNsoDpFU6TQLIhThA8qb9k1wQ7-EpZ-DOG34vRQ0NrUzsf8SZRLYXWeBNxyaaeb6dmRLY1Ry0RBJMJ11e1g/s800/menu2.gif)  0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50;  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0NAyi4Eq2BjkqRyKBkQX9iZUkYr-on9TqeKHo0z-g7MKz1EhhbOwQ6KxYwNsoDpFU6TQLIhThA8qb9k1wQ7-EpZ-DOG34vRQ0NrUzsf8SZRLYXWeBNxyaaeb6dmRLY1Ry0RBJMJ11e1g/s800/menu2.gif)  0 -64px; padding: 8px 0 0 10px; }

HTML Kodu

Navigasyonlu Dikey Menü #8

Css Kodu

#menu9 ul { list-style:  none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 {  width: 200px; margin-top: 10px; } #menu9 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; } #menu9 li a:link, #menu9 li a:visited { color:  #E5E8D4; display: block; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyigv_MM4mzKc6l_lQCNip8j1bfT0RXYiUZqjAWYZXhRbGPjgXRdDkx5yFX4WuayvIHSi7OjhPIWy9O3CQIo_YBRZK7ayMeQqLGWtBjEhLDqtYqjtGwwGk7Ii65Vqv_02olftC5aPM1eU/s800/menu9.gif);  padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color:  #725033; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyigv_MM4mzKc6l_lQCNip8j1bfT0RXYiUZqjAWYZXhRbGPjgXRdDkx5yFX4WuayvIHSi7OjhPIWy9O3CQIo_YBRZK7ayMeQqLGWtBjEhLDqtYqjtGwwGk7Ii65Vqv_02olftC5aPM1eU/s800/menu9.gif)  0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff;  background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyigv_MM4mzKc6l_lQCNip8j1bfT0RXYiUZqjAWYZXhRbGPjgXRdDkx5yFX4WuayvIHSi7OjhPIWy9O3CQIo_YBRZK7ayMeQqLGWtBjEhLDqtYqjtGwwGk7Ii65Vqv_02olftC5aPM1eU/s800/menu9.gif)  0 -64px; padding: 8px 0 0 10px; }

HTML Kodu

Navigasyonlu Dikey Menü #9

Css Kodu

HTML Kodu

Navigasyonlu Dikey Menü #10

Css Kodu

#menu4 ul { list-style:  none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 {  width: 200px; margin: 10px; border-style: solid solid none solid;  border-color: #000; border-size: 1px; border-width: 1px; } #menu4 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; } #menu4 li a:link, #menu4 li a:visited {  color: #CCC; display: block; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN8KZ6wAuv4UnOhn8dj-3F91gfrGvbUAWd9q0-WhpyWfAYIw9CSfoF26GclTWMDq4_2vKiZR3Nr4QXkeN1jsUcLVDQVSVVkmQ3R5LQXlJ_7rl6v9XU9_Rh3Ny2UOI6w-tkkh2qEcLZbo/s800/menu4.gif);  padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwN8KZ6wAuv4UnOhn8dj-3F91gfrGvbUAWd9q0-WhpyWfAYIw9CSfoF26GclTWMDq4_2vKiZR3Nr4QXkeN1jsUcLVDQVSVVkmQ3R5LQXlJ_7rl6v9XU9_Rh3Ny2UOI6w-tkkh2qEcLZbo/s800/menu4.gif)  0 -32px; padding: 8px 0 0 10px; }

HTML Kodu

blogger-yazarı iyi calışmalar diler..

Subscribe to Posts | Subscribe to Comments

Blogger Ve Wordpress Tema Arşivi