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

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/AVvXsEg2_3cGgBaUgao86w9Uwb_9fF8nNb3zPd8rgibq3OwWFr4szk1ft99w5uwwZmM40_mYxVaguiNey5C_IUUis-SIC5H3FBzDyCLEdcDCQoBAETJufmVxAEq2odhxkqQouaQF5AgUO21cAeI/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/AVvXsEiikS29epDk4MWZFoiUxKTQpTu_hrSKD6YT-UxPtK0PrCtoWb0HAa4_2a7iD-XH2YyC4_KC8dA5Erj8d1yX7zhmgWYHpMpLLPfQ_fF_yDelKSP4EJ31wRlqUp8aZgt9u77f2Xi1bjtlpHo/s1600/bloggetrix-home.png" /> Home</a></li>
                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB5_QOeYq2K4dzx6LVnv6rcITcBsy0h3tzSptGt_xsupu0X31te6wSvDh8uTolhqCSwHz83V9z6ABUOemzonBRbF3PT6FRjKk2d4uvw8GJUSJzLZnk7yvgmmFvPamkU_oSAtu8oTp7xZs/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 41</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 42</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 43</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 44</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 46</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 47</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 48</a></li>
                                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/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/AVvXsEgIigPJdpD60_y14af4bAtP2x6Y7e-y7IWc3P0NNppgfE9rB2ZFQ827lUqjn05FM6qwJGVEb45dXUXorBs8RmX6rnTKnozm8j4hvEpJJ-5r8J1FO54miGcFZCRQJbyqxhyphenhyphencJ7V4-SjCHCU/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 1</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 2</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 3</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 4</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/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/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 6</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 7</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 8</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 9</a></li>
                                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhav-kIyAZmzabIhWZP1jrDk_JoYWZjeTgtxTtD0EgCF4cdvYVM6uMLRtnycYmkx4_z_wCB00HjXF55w73gVwWbx_7j96VmPiaB5qB1OcqDK_rqH1hmztwoaO4j8wOe1DHSu2XmdWc9Up8/s1600/bloggetrix-bub.png" /> Link 10</a></li>
                            </ul>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnEZIeVLzEYOHf_tXqo8F6y7L_9HXkNhVRFcEBOSuhcBIfbnfYy18ddA_TufCpv0l3Xi9_Ad0LdvP1BpEo2rX6-bM4F012kWknX6femJzOrYrdvMB8CiyL1_GQ0DAw5ceHGS-t7Rxj_0/s1600/bloggetrix-top3.png" /> PHP</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwkWZ3toqXR0TsH4fcTO0aAhbLgbrJfaVp_ESzLZ_ipOx8giGHoEU8ok-7meZV-xIor43mKYe7E84k4Iy4ygTYoueweKhI4y7EKCLFEpn7Hv2_lwCZumV8oTumXzjDI9MXxos6HHr2Iw4/s1600/bloggetrix-top4.png" /> MySQL</a></li>
                <li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezWH5jR_imZeF-uV0oJcurvymLBApd8qoVeUcTD16Zi-XetYOvDu0Gkvni401lPLDzPXWM7PlljSlCmbDklT7WvnQvf00f5c9uqvMfYZfigrUZ3HHeXaUs2ONs9_twhwPHt-3WRBO8aI/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ü

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ü

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

Blogger blogunuzda , hareketli butonlar kullanmak istermisiniz ?

Blogunuza bu butonları eklemek için aşağıdaki anlatımı takip ederek , Animasyonlu buton eklentisiniz blogger blogunuzda kullanabilisiniz..

Demo aşağıda...

DEMO

eklentileri.blogspot.com

TIKLA

İNDİR

Alttaki kodu bulunuz..

]]></b:skin>

Bir satır üstüne aşağıdaki kodlarımızı ekleyelim..

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIqzxb_Mm5C3caOxLDMBLRBYPj49CKYNRuuRed6r2gNbRdKWmOK7gIapmHup6SgE1z3ROSHQ54BmQ-vJQJ4sRsxykvgDC9VY9KNp60CGOz_lMg8oKWEh_NXPlzKYY6tHwmP8lL1LFb2hX2/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Butonları Kullanmak için aşağıdaki kodları kullanıyoruz..

<a class="button big blue" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big orange" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big green" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big gray" href="LİNK/URL" target="_blank">Buton Yazısı</a>

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

Blogger Animasyonlu Hareketli Buton Eklentisi , Blogger Animasyonlu Buton Eklentisi , Blogger Hareketli Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton , Buton , Button , Blogger Button Widget ,Animated CSS Buttons For Blogger , Blogger Animated Buttons 

CSS3 Dairesel Blogger Buton Widget

Blogger blogunuz için , üzerine gelince hareketlilik gösteren buton veya butonlar kullanmak istermisiniz ?

O halde aşağıdaki yazıyı takip edin..

Alttaki kodu blogger blogunuzda bulun..

]]></b:skin>

Hemen üstüne aşağıda yer alan kodları ekleyiniz..

.a-btn{
    width:60px;
    height:60px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    display:block;
    margin:20px;
    float:left;
    background:#f0ad4e;
    position:relative;
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px 0px 1px 8px rgba(188, 188, 188, 0.4), 0px 0px 0px 9px #fff;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span{
    display:table-cell;
    width:40px;
    height:40px;
    padding:10px;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    color:#fff;
    text-shadow:0px 1px 1px #A03F16;
    font-family:"Arvo", "Myriad Pro", "Trebuchet MS", sans-serif;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn span:nth-child(1), 
.a-btn span:nth-child(3){
    position:absolute;
    top:0px;
    left:0px;
    font-size:16px;
    line-height:19px;
    opacity:0;
}
.a-btn span:nth-child(1){
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGiS1s4M9Mu4_lr0HoUAlMZgkMxAijGY6srLE-slWETJMqDktu7xjaFjWhdm3Y5GZYPGjchUspc1MKpPLVV4UITuZ3r1CfNlzBATUORgPjH77blwJDP0cm3OghWpYfK7BUhTvRJbTnTAA/s1600/star.png) no-repeat center center;
    opacity:0.2;
}
.a-btn:hover{
    background:rgba(170, 77, 27, 0.6);
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  1px 4px 5px 8px rgba(188, 188, 188, 0.6), 0px 0px 0px 9px #fff;
}
.a-btn:hover span:nth-child(3){
    opacity:1;
}
.a-btn:hover span:nth-child(2){
    opacity: 0; 
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.a-btn:hover span:nth-child(1){
    -webkit-animation:rotate 1s linear;
    -moz-animation:rotate 1s linear;
    animation:rotate 1s linear;
}
.a-btn:active{
    -webkit-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    -moz-box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
    box-shadow:0px 0px 5px 0px rgba(246, 212, 163, 0.5) inset, 0px -1px 5px 4px rgba(170, 77, 27, 0.2) inset, 0px 0px 0px 7px #fff,  0px -1px 0px 8px rgba(188, 188, 188, 0.3), 0px 0px 0px 10px #fff;
}
.a-btn:active span:nth-child(2){
    color:rgba(170, 77, 27, 0.8);
    text-shadow:0px 1px 1px rgba(255, 255, 255, 0.6);
}
@keyframes rotate{
    0% { transform: scale(1) rotate(0);}
    50% { transform: scale(0.5) rotate(180deg);}
    100% { transform: scale(1) rotate(360deg);}
}
@-webkit-keyframes rotate{
    0% { -webkit-transform: scale(1) rotate(0);}
    50% { -webkit-transform: scale(0.5) rotate(180deg);}
    100% { -webkit-transform: scale(1) rotate(360deg);}
}
@-moz-keyframes rotate{
    0% { -moz-transform: scale(1) rotate(0);}
    50% { -moz-transform: scale(0.5) rotate(180deg);}
    100% { -moz-transform: scale(1) rotate(360deg);}
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazır , şimdi nasıl kullanılacağını görelim..yaınların içinde yada eklenti olarak kullanmak için aşağıdaki kodları kullanıyoruz.

div class="button-wrapper">

<a href="#" class="a-btn"><span></span>
<span>Sign up</span>
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Join Now</span>  
<span>It's free!</span></a>

<a href="#" class="a-btn"><span></span>
<span>Enter</span> 
<span>It's free!</span></a>

<a href="#" class="a-btn">
<span></span>
<span>Get in</span>
<span>It's free!</span></a>
</div>

DEMO

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

CSS3 Dairesel Blogger Buton Eklentisi , Dairesel Blogger Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton Ekleme , Blogger Butonları , Blogger Button Widget , CSS3 Circle Effect Buttons Style For Blogger

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

Blogger blogunuz için 3d arama kutusu ( butonu ) eklentisi istermisiniz ?

Özellikle blogger blogunda , arama kutusu olmayanlar için , yada olupta beğenmeyenler için bu eklenti işe yarayabilir..

Görüntü olarakta oldukça şık olduğunu düşündüğümüz blogger 3d arama kutusunu blogger blogunuza eklemek için aşağıdaki anlatımı takip ediniz..

Blogger blogunun yönetim paneline giriniz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim.

<style type="text/css">
.form-wrapper {
width: 250px;
padding: 8px;
margin: 10px auto;
overflow: hidden;
border-width: 1px;
border-style: solid;
border-color: #dedede #bababa #aaa #bababa;
-moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-color: #f6f6f6;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));
background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);
background-image: linear-gradient(top, #f6f6f6, #eae8e8);
}
.form-wrapper #search {
width: 160px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 1px solid #ccc;
-moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.form-wrapper #search:focus {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #bbb inset;
-webkit-box-shadow: 0 1px 1px #bbb inset;
box-shadow: 0 1px 1px #bbb inset;
}
.form-wrapper #search::-webkit-input-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
}
.thumb{position:relative;left:4px;top:1px; border:8px solid transparent;-webkit-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.3);box-shadow:0 0 8px rgba(0, 0, 0, 0.3);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip:padding-box;}
.form-wrapper #submit {
float: right;
border: 1px solid #00748f;
height: 42px;
width: 70px;
padding: 0;
cursor: pointer;
font: bold 15px Arial, Helvetica;
color: #fafafa;
text-transform: uppercase;
background-color: #0483a0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));
background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);
background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);
background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);
background-image: -o-linear-gradient(top, #31b2c3, #0483a0);
background-image: linear-gradient(top, #31b2c3, #0483a0);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;
}
.form-wrapper #submit:hover,
.form-wrapper #submit:focus {
background-color: #31b2c3;
background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));
background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);
background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);
background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);
background-image: -o-linear-gradient(top, #0483a0, #31b2c3);
background-image: linear-gradient(top, #0483a0, #31b2c3);
}
.form-wrapper #submit:active {
outline: 0;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
}
.form-wrapper #submit::-moz-focus-inner {
border: 0;
}
</style>
<form class="form-wrapper" action="/search" method="get">
    <input id="search" name="q" type="text" placeholder="ARA.." />
    <input id="submit" type="submit" value="ARA.." />
</form>

Yapmamız gereken sadece bu kadar , artık blogger blogunuzda , 3d bir arama kutusuna sahipsiniz..

DEMO

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

Blogger 3D arama kutusu Eklentisi , Blogger 3D arama kutusu , Blogger 3D arama Eklentisi , Blogger Arama Kutusu , Blogger Arama butonu , Blogger Search Bar , Blogger 3D search box

Blogger Blogunuz için Sürgülü CSS Buton Eklentisi

Blogger blogunuzda , yazılarınızın içinde yada istediğiniz bir yerde kullanmak üzere , farklı bir buton istermisiniz ?

Bu eklentimizde , üzerine gelindiğinde , sağa doğru sürgülü bir biçimde açılan buton eklentimizin nasıl yapılacağını anlatacağız.

Bu Blogger Buton eklentisini kullanmak içibn aşağıda yer alan adımları takip ediniz..

Aşağıdaki kodumuzu blogger blogunuzda bulunuz..

]]></b:skin>

Hemen bir satır üstüne , aşağıda yer alan kodları ekleyiniz..

.a-btn{
    background:#80a9da;
    background:-webkit-gradient(linear,left top,left bottom,color-stop(#80a9da,0),color-stop(#6f97c5,1));
    background:-webkit-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-moz-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:-o-linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    background:linear-gradient(top, #80a9da 0%, #6f97c5 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#80a9da', endColorstr='#6f97c5',GradientType=0 );
    padding-left:20px;
    padding-right:80px;
    height:38px;
    display:inline-block;
    position:relative;
    border:1px solid #5d81ab;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2), 0px 0px 0px 4px rgba(188,188,188,0.5);
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    float:left;
    clear:both;
    margin:10px 0px;
    overflow:hidden;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn-text{
    padding-top:8px;
    display:block;
    font-size:18px;
    white-space:nowrap;
    text-shadow:0px 1px 1px rgba(255,255,255,0.3);
    color:#446388;
    -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.a-btn-slide-text{
    position:absolute;
    height:100%;
    top:0px;
    right:52px;
    width:0px;
    background:#63707e;
    text-shadow:0px -1px 1px #363f49;
    color:#fff;
    font-size:18px;
    white-space:nowrap;
    text-transform:uppercase;
    text-align:left;
    text-indent:10px;
    overflow:hidden;
    line-height:38px;
    -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 2px rgba(0,0,0,0.2) inset;
    -webkit-transition:width 0.3s linear;
    -moz-transition:width 0.3s linear;
    -o-transition:width 0.3s linear;
    transition:width 0.3s linear;
}
.a-btn-icon-right{
    position:absolute;
    right:0px;
    top:0px;
    height:100%;
    width:52px;
    border-left:1px solid #5d81ab;
    -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
    box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;
}
.a-btn-icon-right span{
    width:38px;
    height:38px;
    opacity:0.7;
    position:absolute;
    left:50%;
    top:50%;
    margin:-20px 0px 0px -20px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4T8qAmABZK-dOiZUqVJO8fVvjK4pqMBoBtULjXQ-0uX3CLrBYMJs0qsjcZP6EozmrwJgw-16_F-B8CSe_LeuYpsMAWqZinZrifT9dpxBRVehbFVGDZ7vrbVEzBvWI-IglamocYznRVY/s1600/arrow_right.png) no-repeat 50% 55%;
    -webkit-transition:all 0.3s linear;
    -moz-transition:all 0.3s linear;
    -o-transition:all 0.3s linear;
    transition:all 0.3s linear;
}
.a-btn:hover{
    padding-right:180px;
    -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 3px rgba(0,0,0,0.2);
}
.a-btn:hover .a-btn-text{
    text-shadow:0px 1px 1px #5d81ab;
    color:#fff;
}
.a-btn:hover .a-btn-slide-text{
    width:100px;
}
.a-btn:hover .a-btn-icon-right span{
    opacity:1;
}
.a-btn:active{
    position:relative;
    top:1px;
    background:#5d81ab;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    box-shadow:1px 1px 2px rgba(0,0,0,0.4) inset;
    border-color:#80a9da;
}

Üstteki işlemi yaptıysanız , butonumuzun css işlemleri tamamdır..

Butonu kullabilmek için ister gadget olarak ekleyebilir isterseniz yazı içlerinde kullanabilirsiniz.. Eklemek için aşağıdaki kodu kullanmanız gerekiyor..

<div class="button-wrapper">
<a class="a-btn" href="http://eklentileri.blogspot.com/">
      <span class="a-btn-text">Blogger</span>
      <span class="a-btn-slide-text">TIKLA</span>
      <span class="a-btn-icon-right"></span>
      </a>
</div>

DEMO

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

Blogger Sürgülü Buton Eklentisi , Blogger Sürgülü Buton  , Blogger  Buton Eklentisi , Blogger Buton Eklentileri , Blogger Butonlar , Blogger CSS buton , Blogger button Widget