Blogger Sabit Kaliteli Açılır Yan Menu


   Blogunuza kaliteli bir açılır menü eklemek ister misiniz ? Bu kaliteli açılır menü sayesinde blogunuzda bir wordpress görünümü sağlayabilirsiniz. O zaman anlatalım ;

blogger yan menu eklentisi, blogger

TASARIM > HTML’Yİ DÜZENLE yolunu izleyin.  Aşağıdaki kodu arayın

]]></b:skin>

Bundan sonra hemen alt tarafına aşağıdaki kodları yapıştırınız;

/* CSS Style for Horizontal Menu - info @ http://www.sosyofikir.com*/
#hor {
list-style:none;
padding:0;
margin:0; 
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0; 
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0; 
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */ 

#ver {
list-style:none;
padding:0;
margin:0; 
}

#ver li {
padding:2px; 
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
} 

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0; 
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0; 
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
} 


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css - info @ http://www.sosyofikir.com */

Şimdi bunlardan sonra TASARIM > GADGET EKLE > HTML/JAVASCRIPT EKLE yolunu izleyin ve aşağıdaki kodları kutuya yapıştırın. Kendinize göre düzenleyin.

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Ana Sayfa" href="http://eklentileri.blogspot.com">
<span>ANA SAYFA</span>
</a>
</li>

<li>

<a class="about" href="LİNK">
<span>About</span>
</a>
</li>

<li>
<a class="services" href="LİNK">
<span>Services</span>
</a>

</li>

<li>
<a class="portfolio" href="LİNK">
<span>Portfolio</span>
</a>
</li>

<li>
<a class="contact" href="LİNK">

<span>Contact us</span>
</a>
</li>
</ul>
</div>

Blogunuz artık çok daha orjinal bir görünümde 🙂

Tepkiniz nedir?

Çok Eğlendim Çok Eğlendim
0
Çok Eğlendim
Deneme Deneme
0
Deneme
Beğendim Beğendim
0
Beğendim
Yarıldım Yarıldım
0
Yarıldım
Sinirlendim Sinirlendim
0
Sinirlendim
hate hate
0
hate
Kafam Karıştı Kafam Karıştı
0
Kafam Karıştı
Fail Fail
0
Fail
Çalışkan Çalışkan
0
Çalışkan
Lol Lol
0
Lol
Aşık oldum Aşık oldum
0
Aşık oldum
Aman Tanrım Aman Tanrım
0
Aman Tanrım
Korktum Korktum
0
Korktum
Rahatladım Rahatladım
0
Rahatladım
OHA OHA
0
OHA
sosyofikir
Mimarlık Fakültesi sonsınıf öğrencisi, mimar adayı. :) 2010'dan beri sosyofikir.com blogumla yayın yapıyorum. Sosyal, müzik, felsefe, psikoloji, güncel, yaşam ve daha bir çok konuyla yakından ilgileniyorum. Siz değerli okurlarıma elimden geldiğince güzel içerikler sunmaya çalışıyorum. Hatamız olursa affola :)

2 Comments

More From: Blogger

DON'T MISS

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Önemsiz Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Hikaye/Olay
Gömülü ve Görsellerle Biçimlendirilmiş Metin
Liste
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Açık Liste
Submit your own item and vote up for the best submission
Oylanabilir Liste
Upvote or downvote to decide the best list item
Video
Youtube, Vimeo veya Vine Kodları
Ses
Soundcloud or Mixcloud Embeds
Görsel
Fotoğraf veya GIF
GIF
GIF Formatı