teknoloji haberleri - internet haberleri: menü

menü etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

11 Şubat 2013 Pazartesi

Blogger Sabit Açılır Yan Menü Eklentisi

Unknown 15:30 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , menü Hiç yorum yok :

Blogger Sabit Açılır Yan Menü Eklentisi

Bu eklentimizde , blogunuzun sol ortasında resimde gördüğünüz gibi bir menü yaratıyoruz.

Oldukça şık bir görüntüye sahip olan Sabit Açılır Yan Menü Eklentisini blogger blogunuzda kullanmak isterseniz aşağıdaki adımları izlemeniz yeterli..

Aşağıdaki kodumuzu bulalım..

]]></b:skin>

Hemen üstüne aşağıdaki kodlarımızı ekleyelim..


/* CSS Style for Horizontal Menu - info @ http://eklentileri.blogspot.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW7fLuZ_0hpKI0smmsy_yi84yuA_RzISI1xD7tw8u-N5cy6aVmN00xqc_TidLz0ywvQ4JXYuOFtM-cacpGYJbjQXiMWpPWgMzhBx1dKEPkBONTt_B52oVTwhx9CiaenIDV2BrKKIAyMAE/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://eklentileri.blogspot.com */

Yukarıdaki işlemi yaptıysanız kaydedin ve yerleşim >> gadget ekle >> HTML/JavaScript seçeneği ile açılan yere aşağıdaki kodlarımızı yapıştıralım..

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

Burada dikkat etmemiz gereken yerler , kırmızı ile yazılmış olan yerleri kendinize göre düzenlemeniz, eklentinin ön izlemesi için TIKLAYIN

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Sabit Açılır Yan Menü Eklentisi , Blogger Sabit Menü , Blogger Menü Eklentisi , Blogger Menü Ekleme , Blogger Nasıl Menü Eklenir , Blogger Renkli Menü Yapımı

29 Ocak 2013 Salı

Blogger Yandan Açılır Menü Eklentisi

Unknown 13:34 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , menü Hiç yorum yok :

Blogger blogunuzda , Yandan açılır menü eklentisi isterseniz , bu eklenti çok hoşunuza gidecek..

Fare ile üzerine gelindiğinde açılan menümüz , blogunuza hoş bir görsellik katabilir..

DEMO

Altta yer alan kodumuzu buluyoruz

]]></b:skin>

Bir satır üstüne altta yer alan kodları ekliyoruz..

/* Blogger Yandan Açılır Menü Eklentisi eklentileri.blogspot.com */

ul.nav8 {
    list-style:none;
    height:120px;
    margin:0;
    padding:0;
}

ul.nav8 table {
    border-collapse:collapse;
    width:0;
    height:0;
    margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
    float:right;
    height:120px;
    width:40px;
    position:relative;
    overflow:hidden;
    -webkit-transition-duration:.5s;
    -moz-transition-duration:.5s;
    -o-transition-duration:.5s;
}

* html ul.nav8 > li {
    width:auto;
}

ul.nav8 > li a.ie6 {
    float:left;
    height:120px;
    width:39px;
    position:relative;
    overflow:hidden;
}

ul.sub {
    list-style:none;
    height:120px;
    width:600px;
    background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
    position:absolute;
    left:0;
    top:0;
    margin:0;
    padding:0;
}

ul.sub li {
    float:left;
}

ul.sub li:first-child {
    margin-left:45px;
}

ul.sub li a {
    display:block;
    width:110px;
    height:120px;
    float:left;
    overflow:hidden;
    position:relative;
    text-decoration:none;
    color:#000;
}

ul.sub li a b {
    font-size:14px;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a b:hover {
    font-size:16px;
    color:#FF0000;
    display:block;
    padding:15px 15px 5px;
}
ul.sub li a p {
    font-size:12px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.sub li a p:hover {
    font-size:13px;
    display:block;
    margin:0;
    padding:0 10px;
}

ul.nav8 > li:hover {
    width:600px;
}

ul.nav8 > li a.ie6:hover {
    direction:ltr;
    width:600px;
}

ul.sub li a:hover i {
    opacity:1.0;
}

Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodlarımızı ekliyoruz

<ul class="nav8">
<li>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table>
<tr><td><![endif]-->
            <ul class="sub">
<li><a href="http://eklentileri.blogspot.com/"><b>Ana Sayfa</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 1</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 2</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 3</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
<li><a href="http://eklentileri.blogspot.com/"><b>Link 4</b>Bu alana bilgi yazısı<br />
<i></i></a></li>
</ul>
<!--[if lte IE 6]></td></tr>
</table>
</a><![endif]-->
        </li>
</ul>

Yukarıdaki işlemleri yaptıysanız Blogger Yandan Açılır Menü Eklentisi hazır , yukarıdaki kodları kendinize göre düzenleyiniz..

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Yandan Açılır Menü Eklentisi , Blogger Menü Eklentisi , Blogger Açılır Menü , Menü Eklentileri , Blogger Yana Açılan Menü , Menü , Slideout Menu Bar For Blogger , Blogger Menu Widget

6 Ocak 2013 Pazar

CSS3 multi blogger menü çubuğu eklentisi

Unknown 15:42 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , menü Hiç yorum yok :

CSS3 Multi Blogger Menü Çubuğu Widget

Blogger blogunuzda şık ve kullanışlı bir üst menü çubuğu arıyorsanız bu eklenti size yarayabilir..

DEMO

alttaki kodu bulunuz

]]></b:skin>

Bir satır üstüne altta yer alan kodları ekleyiniz..

/* CSS3 multi blogger menü çubuğu eklentisi eklentileri.blogspot.com*/

ul#navbt {
    display:block;
    float:left;
    font-family:Trebuchet MS,sans-serif;
    font-size:0;
    padding:5px 5px 5px 0;

    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */  
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */  
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */  
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */  
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */  
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */  
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */  
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
}
ul#navbt,ul#navbt ul {
    list-style:none;
    margin:0;
}
ul#navbt,ul#navbt .subs {
    background-color:#444;
    border:1px solid #454545;

    border-radius:9px;
    -moz-border-radius:9px;
    -webkit-border-radius:9px;
}
ul#navbt .subs {
    background-color:#fff;
    border:2px solid #222;
    display:none;
    float:left;
    left:0;
    padding:0 6px 6px;
    position:absolute;
    top:100%;
    width:300px;

    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}
ul#navbt li:hover>* {
    display:block;
}
ul#navbt li:hover {
    position:relative;
}
ul#navbt ul .subs {
    left:100%;
    position:absolute;
    top:0;
}
ul#navbt ul {
    padding:0 5px 5px;
}
ul#navbt .col {
    float:left;
    width:50%;
}
ul#navbt li {
    display:block;
    float:left;
    font-size:0;
    white-space:nowrap;
}
ul#navbt>li,ul#navbt li {
    margin:0 0 0 5px;
}
ul#navbt ul>li {
    margin:5px 0 0;
}
ul#navbt a:active,ul#navbt a:focus {
    outline-style:none;
}
ul#navbt a {
    border-style:none;
    border-width:0;
    color:#181818;
    cursor:pointer;
    display:block;
    font-size:13px;
    font-weight:bold;
    padding:8px 18px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 1px 1px;
    vertical-align:middle;
}
ul#navbt ul li {
    float:none;
    margin:6px 0 0;
}
ul#navbt ul a {
    background-color:#fff;
    border-color:#efefef;
    border-style:solid;
    border-width:0 0 1px;
    color:#000;
    font-size:11px;
    padding:4px;
    text-align:left;
    text-decoration:none;
    text-shadow:#fff 0 0 0;

    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
}
ul#navbt li:hover>a {
    border-style:none;
    color:#fff;
    font-size:13px;
    font-weight:bold;
    text-decoration:none;
    text-shadow:#181818 0 1px 1px;
}
ul#navbt img {
    border:none;
    margin-right:8px;
    vertical-align:middle;
}
ul#navbt span {
    background-position:right center;
    background-repeat:no-repeat;
    display:block;
    overflow:visible;
    padding-right:0;
}
ul#navbt ul span {
    background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5nt491Fwg837GymN8cAGBPX-4Fvle8AmaAuFKwfcgU7ELGDgULog4Jv9omt3CJMJvlGi5z08kSaCV9nSj0AiKBn4eKZySSeL6UiyQJGMhXA37cXqRU0TnW7nnxe0u1JH-u8MoL_UaRZQ/s1600/bloggetrix-arrow.png");
    padding-right:20px;
}
ul#navbt ul li:hover>a {
    border-color:#444;
    border-style:solid;
    color:#444;
    font-size:11px;
    text-decoration:none;
    text-shadow:#fff 0 0 0;
}
ul#navbt > li >a {
    background-color:transpa;
    height:25px;
    line-height:25px;

    border-radius:11px;
    -moz-border-radius:11px;
    -webkit-border-radius:11px;
}
ul#navbt > li:hover > a {
    background-color:#313638;
    line-height:25px;
}

Şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript ile alttaki kodları ekleyiniz..

<ul id="navbt">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDtWH-tBDMVQMtzEODwPNByrW-RqRgWZrMS6TFcvdtURDyxNqVEfjSlwVh8Pnbhgb49_7DAydjpMV8bKrhqN7i-nmPGQKkT16afBAabtZXihF6rjx-K97qdK3dcGneiA8n89hTK7P7LIM/s1600/bloggetrix-home.png" /> Home</a></li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsh2OtXtID_f8qas_KS2imBfrEhEvPTv8pKbnpXiW7UsMaztOnuoYw-bDYfR9YmBcXp3epR7XrfkBBceEHBx6GdyWithPFxKtpxXvpZWXWTZd1aalLH0Dw8jl5PX4y6Q4oxLF5vNbD3bw/s1600/bloggetrix-top1.png" /> HTML/CSS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Sublinks</span></a>
                                    <div class="subs">
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 45</a></li>
                                            </ul>
                                        </div>
                                        <div class="col">
                                            <ul>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 49</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRNIRYXsY5HbnwH7nf9L3m_o6aqAECqRy36vIDYQckAQwrj-EcWXLv5pbE7zpZROsu8nTuggmdghx5xd4JDv-q2Arn2Ppr3BbnnCyhZTW9e0PyiLgZr5SFjBG3mCMJuAHfvD7LwOQ8g2o/s1600/bloggetrix-top2.png" /> jQuery/JS</span></a>
                    <div class="subs">
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 5</a></li>
                            </ul>
                        </div>
                        <div class="col">
                            <ul>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT3QSN0ldy2md2bLhnQf6iMS8Z95L_zSiGspmDu3nia1r7SW2eDm3bzrMKWIr8fCcR9ZMN6N3ps1h-9lsZbKPEheD3sFhtqhHSRhwSbl2nm5phQDEZ3ucZbdkOFkv-tD4aQOKZsVC9hgg/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs2B7MLqjWwZ2coUe4tBX8X4TCa-XLlgQvedCEc2mm1lVhnf-FQCETcfigAhU29SDY-QSr3mlynVKQQRCUEoswaxNoOqKbRbj266al1_fEYguTOUUpEtfIIvFTSN5q35yYinGiE-MSye8/s1600/bloggetrix-top3.png" /> PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtXmHwTlFKH6zwFGpF4WPiY_LCLfBCzojlSuPrhc5AG28MiW9oe0BSosVXfrZyAfyZy2zwMx8DOEnxOtLuwVR7ZeLBiaeHczFkRSqhIWjCcBGJgJGjGacoDCAx3l6svAqt22Nxenk_Aw/s1600/bloggetrix-top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqEPD8ESLFThLsTOjw92rNvGUP_PvR1Ky49ww7y6wVKNQU6wRqdl4FXXf0mr0aOYvecTawZoQC88ewtuQjbdO7wlxeEW8ZyRmX-gsBvBhY573BRqC8mwU8oRFeJWjzEkXlL_DRvcjcj-A/s1600/bloggetrix-top5.png" /> XSLT</a></li>
            </ul>

Üstte yer alan kodları kendinize göre düzenleyip özelleştiriniz..Ayrıca yerleşim kısmından bu eklentiyi , Blog kayıtları üstüne , yada daha yukarda alanınız varsa oraya taşıyınki , menümüz üstte yer alsın..

<<< Bu Yazı için Arama Sonuçları >>>

CSS3 multi blogger menü çubuğu eklentisi , CSS3 Blogger Menu , Menu Eklentisi , Blogger Menü Çubuğu , Blogger Menü Bar ,menü , Multilevel Blogger Menü

17 Aralık 2012 Pazartesi

Sola Kayma Efektli Açılır Menü Bar

Unknown 17:18 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , dinamik , efekt , menü Hiç yorum yok :

CSS3 Sola Kayma Efektli Blogger Menü Bar Eklentisi

Bu eklentimiz ile , blogger blogunuzda , üst menü yaratabilirsiniz , Menü bar eklentimizle alt kategoriler yaratabilirsiniz , alt kategorilerimiz soldan uçarak gelir...

DEMO

Alttaki kodumuzu şablon kısmında buluyoruz

]]></b:skin>

Bir satır üstüne , altta yer alan kodlarımızı ekliyoruz..

/*Soldan Kayma Efektli Blogger Menü Bar Eklentisi Kod Baslangici www.eklentileri.blogspot.com*/

#flyingmenubt,#flyingmenubt ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    height:500px;}
#flyingmenubt {
    font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
    font-size: 13px;
    height: 36px;
    list-style: none outside none;
    margin: 40px auto;
    text-shadow: 0 -1px 3px #202020;
    width: 980px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}
#flyingmenubt ul {
    left: -9999px;
    position: absolute;
    top: -9999px;
    z-index: 2;
}
#flyingmenubt li {
    border-bottom: 1px solid #575757;
    border-left: 1px solid #929292;
    border-right: 1px solid #5d5d5d;
    border-top: 1px solid #797979;
    display: block;
    float: left;
    height: 34px;
    position: relative;
    width: 105px;
}
#flyingmenubt li:first-child {
    border-left: 0 none;
    margin-left: 5px;
}
#flyingmenubt li a {
    color: #FFFFFF;
    display: block;
    line-height: 34px;
    outline: medium none;
    text-align: center;
    text-decoration: none;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
    0% {-webkit-transform: scale(1);}
    30% {-webkit-transform: scale(1.3);}
    100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
    0% {-moz-transform: scale(1);}
    30% {-moz-transform: scale(1.3);}
    100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

    -moz-animation-name: animation1;
    -moz-animation-duration: 0.7s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation1;
    -webkit-animation-duration: 0.7s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
    z-index: 4;
}
#flyingmenubt li:hover ul.subs {
    left: 0;
    top: 34px;
    width: 150px;
}
#flyingmenubt ul li {
    background: none repeat scroll 0 0 #838383;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    opacity: 0;
    width: 100%;
    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
    0% {margin-left:185px;}
    100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
    0% {margin-left:185px;}
    100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
    /* css3 animation */
    -moz-animation-name: animation2;
    -moz-animation-duration: 0.3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-name: animation2;
    -webkit-animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    /*-webkit-transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -o-transition:all 0.3s ease-in-out;
    -ms-transition:all 0.3s ease-in-out;
    transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
    -moz-animation-delay: 0;
    -webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
    -moz-animation-delay: 0.05s;
    -webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
    -moz-animation-delay: 0.1s;
    -webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
    -moz-animation-delay: 0.15s;
    -webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
    -moz-animation-delay: 0.2s;
    -webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
    -moz-animation-delay: 0.25s;
    -webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
    -moz-animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
    -moz-animation-delay: 0.35s;
    -webkit-animation-delay: 0.35s;
}

Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçenekleri ile açılan blogger paneline altta yer alan kodlarmızı ekliyoruz..

<ul id="flyingmenubt">
    <li><a href="http://eklentileri.blogspot.com/">Ana Sayfa</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://eklentileri.blogspot.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://eklentileri.blogspot.com/">Blogger Eklenti</a></li>
</ul>

Yukarıdaki kodları kendinize göre düzenleyiniz, daha iyi anlamak için üstte yer alan demo linkinden yararlanabilirsiniz..Son olarak gerekli gadgeti yerleşim kısmından , post yayınlarının üstündeki alana taşıyınki eklenti yukarda gözüksün..

<<< Bu Yazı için Arama Sonuçları >>>

Sola Kayma Efektli Blogger Menü Bar , Blogger Menü Bar , Menu Bar , MenuBar , Bar , Blogger Menü Eklentisi , Kayma Efektli Blogger Menü , Açılır Menü , Blogger Açılır Menü

14 Aralık 2012 Cuma

Multi Color CSS3 Blogger Menü

Unknown 17:08 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , menü , renkli Hiç yorum yok :

Multi Color CSS3 Blogger Menü Eklentisi

Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?

Bu eklentimizle , Blogunuzda post üstüne , bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..

DEMO

Aşağıda yer alan kodu buluyoruz..

]]></b:skin>

Bir satır üstüne , alttaki kodları ekliyoruz..

/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }

Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim

<ul class="cbdb-menu">

 <li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li>
 <li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li>
 <li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li> 
</ul>

Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın..

<<< Bu Yazı için Arama Sonuçları >>>

Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme

18 Ekim 2012 Perşembe

Blogger MenuBar eklentisi

Unknown 14:35 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , efekt , menü Hiç yorum yok :

Blogger menü bar eklentisi...

Blogger blogunuz için kullanışlı bir menü eklentisi istermisiniz ? bu eklentimizde , linkin üzerine gelindiğinde açıklama belirtebiliyorsunuz..

Blogger menü bar eklentisini kullanmak için yapmanız gerekenler aşağıda..

Alttaki kodu bulunuz..

]]></b:skin>

Bir satır üstüne aşağıdaki kodları ekleyiniz.

/* menu kodu eklentileri.blogspot.com */

#menu1 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 0.8em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:10px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}

Şimdide Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı girelim..
..
tavsiye edilen ; alttaki resimdeki yere ekleyiniz ( BLOG KAYITLARI üstüne )

<div id="menu1">
            <ul>
                <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">ANA SAYFA</span>
                        <span class="text">Home Page</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Kategoriler</span>
                        <span class="text">Seçenekler</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">LİNK 1</span>
                        <span class="text">Açıklama</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">iletişim</span>
                        <span class="text">Bize ulaşın</span>
                    </a>
                </li>
                 <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">Link 2</span>
                        <span class="text">Açıklama 2</span>
                    </a>
                </li>              
            </ul>
        </div>

yapmanız gerekenler bu kadar , renkli bölümleri kendinize göre düzenleyiniz..

DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger MenuBar eklentisi , Blogger MenuBar , Blogger Menü
Bar eklentisi , Blogger menü , blogger menu , menü , menu , blogger menü ekleme , blogger üst menü , blogger widgets

28 Haziran 2012 Perşembe

Blogger Dikey Navigation Menü Eklentisi

Unknown 14:37 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , link , menü , renkli Hiç yorum yok :

Blogger Dikey Navigation Menü Eklentisi Widgets

Blogger blogunuzda , üstteki resimde gördüğünüz gibi bir menü eklentisi istermisiniz ?

Bu eklentimizi blogunuzda isterseniz kategori olarak , isterseniz farklı yerlere link vermek için kullanabilirsiniz..

Demo için üstteki resime bakabilir , yada BURAYA tıklayabilirsiniz..

Anlatıma geçelim..

Aşağıdaki kodu bulun

]]></b:skin>

hemen üstüne aşağıdaki kodlarımızı ekleyelim..

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 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: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaXoLWB5dINZYIhh_hHXirEjNGveLoMPd_MDOdSQBodFhAeTkhqGo5xk-nBZ0OakakwMvFpv3AjlaF2k68xHtdHAEPgJnG1I8vW4Yo6RHy4Od1M29onMxThkQE85mOS3PUvkxEimDF6U/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaXoLWB5dINZYIhh_hHXirEjNGveLoMPd_MDOdSQBodFhAeTkhqGo5xk-nBZ0OakakwMvFpv3AjlaF2k68xHtdHAEPgJnG1I8vW4Yo6RHy4Od1M29onMxThkQE85mOS3PUvkxEimDF6U/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Yukarıdaki işlemi yaptıysanız , Blogunuzun yönetim panelinden Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneğini seçelim ve açılan panele aşağıdaki kodları ekleyelim..

<div id="menu9"> <ul> <li><a href="#">MENU 1</a></li> 
                      <li><a href="#">MENU 2</a></li> 
                      <li><a href="#">MENU 3</a></li> 
                      <li><a href="#">MENU 4</a></li> 
                      <li><a href="#">MENU 5</a></li> </ul> </div>

Kodlar içinde geçen kırmızı yerlere görünmesini istediğimiz yazıyı , mavi yerlere ise gidilmesi gereken link adresinizi yazınız..

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Dikey Navigation Menü Eklentisi , Blogger Dikey Navigation Menü , Blogger Menü Eklentisi , Blogger Menü widget , Blogger için menü

15 Nisan 2012 Pazar

Aşağı Açılan Sayfayla Kayan Menü Eklentisi

Unknown 15:54 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , menü Hiç yorum yok :

Aşağı Açılan Sayfayla Kayan Menü Eklentisi

Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirilince aşağı doğru açılan menü eklentisi yapımını anlatacağız..

Demosunu görmek için TIKLAYIN.

Aşağı Açılır Sayfayla Kayan Menü Eklentisi Anlatımı.

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div>

Yukarıdaki kodlar içinde dikkat etmemiz gereken yerler renkli olarak belirtilmiştir..

Kırmızı yere >> Görüntü başlığınız...

Mavi yere >> Menü Başlıklarınız

Sarı Yere >> Menü Linkleriniz..

<<< Bu Yazı için Arama Sonuçları >>>

Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi

4 Nisan 2012 Çarşamba

Blogger Jquery Slider Menu Eklentisi

Unknown 12:58 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Jquery , menü , Slider , Slider Menu Hiç yorum yok :

Blogger Jquery Slider Menu Eklentisi

Blogger blogunuzda slider menü kullanmak istermisiniz ? oldukça güzel bir eklenti olan Jquery Slider Menu Eklentisini blogger blogunuza eklemek için şağıdaki anlatılanları yapmanız yeterli..

Blogger blogunuzdaki ziyaretçilerinize önemli konularınızı , duyurularınızı göstermek için güzel bir eklenti...Kullanımı ve görüntüsüde oldukça hoş..

Hemen anlatıma geçelim..

Aşağıdaki kodumuzu bulalım..

]]></b:skin>

Hemen üstüne alttaki kodlarımızı ekleyelim..

/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:250px; width: 500px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}

/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt3hLArSgSeW3CUbjN_nzbyp3CavV_CkiYHUT_kR7YOSj6i1boBupKSq_3WTQTwwLPe1xUUmMmGFEFdfysKvm-rLdbuuRvHql4jQdzNF48nhQcdJvqjLr8hPIU3wbRFJLPtT9MQaQ_uiB8/s1600/paging_bg2.png) no-repeat;
display: none; /*--eklentileri.blogspot.com--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}

Şimdide bu kodu bulalım..

</head>

Bu kodumuzunda hemen üstüne aşağıdaki kodlarımızı ekleyelim..

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function() {

//Set Default State of each portfolio piece
$(&quot;.paging&quot;).show();
$(&quot;.paging a:first&quot;).addClass(&quot;active&quot;);

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(&quot;.window&quot;).width();
var imageSum = $(&quot;.image_reel img&quot;).size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(&quot;.image_reel&quot;).css({&#39;width&#39; : imageReelWidth});

//Paging + Slider Function
rotate = function(){ 
var triggerID = $active.attr(&quot;rel&quot;) - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //eklentileri.blogspot.com

$(&quot;.paging a&quot;).removeClass(&#39;active&#39;); //Remove all active class
$active.addClass(&#39;active&#39;); //Add active class (the $active is declared in the rotateSwitch function)

//Slider Animation
$(&quot;.image_reel&quot;).animate({ 
left: -image_reelPosition
}, 500 );

}; 

//Rotation + Timing Event
rotateSwitch = function(){ 
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $(&#39;.paging a.active&#39;).next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $(&#39;.paging a:first&#39;); //go back to first
}
rotate(); //eklentileri.blogspot.com
}, 7000); //Timer speed in milliseconds (3 seconds)
};

rotateSwitch(); //Run function on launch

//On Hover
$(&quot;.image_reel a&quot;).hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
}); 

//On Click
$(&quot;.paging a&quot;).click(function() { 
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
}); 

});
</script>

Yukarıdaki işlemleri yaptıysanız , kaydet diyelim..

Yerleşim kısmından blog kayıtları ( önerilir) üstüne gadget olarak aşağıdaki kodlarımızı ekleyelim..

<div class="container">

<div class="folio_block">

<div class="main_view">

<div class="window"> 
<div class="image_reel">

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghLJm4KoQ2kO5Uihih8pL3n5s4_6WYFw-B0UdzqkYAuPLmCNSpufVFhkLHfkJ3wsMucUdwzNnoe_vP_ge6UTkL38Fg9r6vUwzhXAI_cha7LDPpddT9zzv7Kr3JXsw7ue5UzMqZNi20alBL/s1600/slider-image-1.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHpRTZJ-_QX8jSgW7Cs8avv6BZX5FrC2m1UMi5T6lTuA5r-rddWPz1xvzLfHd7b1HBekDkoT1couDTx3HwnIsdm32sKJPPngo7cS9TLHP4rYZUYzALpam8sWysTK6kVsNcG72xh8rFXR3h/s1600/slider-image-2.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSYOFFNQVFOTajkRFI2FDFMLFKNeYrg7XHwK1gPo6ScSNboLKynHcZylEmP9mo9um1eu-WhjYLTcMzarnTYy4pMqv3grCPwW5MeK0UqXYm1SpIRGL2av3cIn8CyeKqPUocS39pKAqx4vBj/s1600/slider-image-3.jpg" alt="" /></a>


<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbEZfq7EsvpIVcvXnyBbo7_DioUOVNxOY6oWTRf6Q6sihLSBLgrhaC0oCOvp5yiJanyBOlSMe94ocCOtYrOaHyQIVQdNAleF7x72tl7y7kHHrfQzzgzAEviGF8g-moKyaUguVdmCwsgXEm/s1600/slider-image-4.jpg" alt="" /></a>

<a href="http://eklentileri.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkkfshtFg-AZvzd72GOuML5WcaINKnFc0JUYorzzFvJCTuoFaQWxo3T0VQP7YMSxFeJgyyw6UbjctFIvvSZVSaWx9GJ4t5X13vi2EW2wTTgEv0p4poBp9DvB1J3XYvkxL_4CMzsHbctZrD/s1600/slider-image-6.jpg" alt="" /></a>


</div>
</div>
<div class="paging">

<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
<a href="#" rel="4">4</a>
<a href="#" rel="5">5</a>

</div>
</div>

</div> 

</div>

Yukarıdaki kırmızı olan yerleri kendinize göre düzenleyin..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Jquery Slider Menu Eklentisi , Blogger Jquery Slider Menu , Blogger Jquery Menu Eklentisi , Blogger Jquery Menu , Blogger Slider Eklentisi , Blogger Jquery Eklentisi , Blogger Slayt Menu