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

Retro Tazı Blogger Sosyal Paylaşım Widget

DEMO

Altta yer alan kodlarımızı , Yerleşim >> Gadget Ekle >> HTML/JavaScript yardımı ile ekleyiniz..

<style>
/* Retro tarzı blogger sosyal paylasim eklentisi eklentileri.blogspot.com */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>

<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZmZndnVfUztpkgjrX4zj6l-DYCx8AcZ01Swm4yKyO-0b_lCJduqa_dIRpKkM0JNxZDDdo8PN_uAU_NQSAhTuuGzEr3VWsmaPFjnhZ_Wm7th6gqQ4ebuxVj1pCtLYkp_JfONk4tVwPcM/s1600/bloggertrix-google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiok4ogZ1S0hZ2b6pfC9eNy1Mrvqh_Erz6QhM-pVIGay5Pmujwf5eKR9oCwx9LAOWAjQBYf0QxKBfwv9O6XKFoRSPHWSItQDI9uo8SwJE4bPsOIDgW3E1YLGBDe5-malqMReFtF_r-GOWg/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.pinterest.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMVlMxIsHLZLX1Mn39aeP4S4lJ_88SXSbTwUmvPxA7RxV4g2_grSMu46mC2h3d2DH0WzsUqP4sePOfXAUpzTSABMimluWx7_hOCqeZSUD4p8bKLKRVAq7aH1lIScuhSC3c0o1c4r_751U/s1600/bloggertrix-pinterest-icon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklY9F5Swb59IiszfYdbxrF7TVj0w3fqwxmXlnYYcFNYqECqXeUnw-MYT2VGvkTYOmUPddHzEkRzBWvXYj6MMSR7XZvoPgY_4tQrP1hOWtzc9hwYjRj5WAmDBhZp4y7y5psazFifOVCyI/s1600/bloggertrix-twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlVrvYvJ69lZ3D68Zgg9nntOmYML24SlbBBEXhbSTa84yEZuLKEzWmnPRosaH7Y5Vu-GmBte1yH0rPKuyOTp6c9aA95ltQrzTvA0UVVKYI4GK2k3m0yKXvOy6PTercMR6-3ld9rcpXNZg/s1600/bloggertrix-rss-feed-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Yukarıdaki kod içinde geçen XXXXX yazısı yerlerine kendi asreslerinizi yazmayı unutmayınız..

DEMO

Blogger paneline girin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile aşağıdaki kodlarımızı açılan panele ekleyelim..

 <style>.blogtrixfb {
width: 280px;
height: 150px;
border-radius: 3px;
position: relative;
background-color:#f4f4f4;
padding:5px 10px 15px 0;
}
.blogtrixfb, .blogtrixfb:before, .blogtrixfb:after {
background: #f4f4f4;
border: 1px solid #ccc;
}
.blogtrixfb:before, .blogtrixfb:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.blogtrixfb:after {
left: 4px;
right: 4px;
bottom: -5px;
box-shadow: 0 0 2px #ccc;
}
</style>
<div class="blogtrixfb">
<div style="height:155px;overflow:hidden">
<fb:like-box href="http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640" data-width="300" data-height="250" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 250px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&amp;channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26origin%3Dhttp%253A%252F%252Feklentileri.blogspot.com%252Ff1ae6f85bc%26relation%3Dparent.parent%26transport%3Dpostmessage&amp;colorscheme=light&amp;header=false&amp;height=300&amp;href=http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640&amp;locale=tr_TR&amp;sdk=joey&amp;show_faces=true&amp;stream=false&amp;width=300"></iframe></span></fb:like-box>
</div>
</div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Yukarıdaki kod içinde kırmızı olan yerlere , kendi facebook sayfasınızın adresini yazmayı unutmayınız..

Blogger Yazı Altı Sosyal Paylaşım Kutucukları Eklentisi..

Bu eklentimiz ile, yazılarınızın altına , twitter , facebook ve google+ kutucukları eklenecektir , ziyaretçileriniz böylelikle yazılarınızı twitter , facebook ve google+ da paylaşabilecekler..

DEMO

Aşağıdaki kodlardan birini bulunuz , ilk denediğiniz olmazsa diğerini deneyiniz , bazı bloglarda bu kodlardan bir kaç tane olabilir , üşenmeyin deneyin..

<data:post.body/>


YADA


<div class='post-footer-line post-footer-line-1'/>

Bir satır altına aşağıdaki kodları ekleyelim..

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>
.promote_post_bg {
    height: 103px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx8kvrgyDj56rxGIvCVOalZFSdiCougwC-ATzFOAye1h4YZS81qOr1zxMpYaz6K4AYSLJz0hrfL_50NhX1xt6CXtt-DHKErWAZZA8f0LOM8OJew8MfnZxHW9WFuyJh4-61X3bFzsWMrKEh/s1600/social-kutucuk.png) 0 -7px no-repeat;
    width: 500px;
    margin-left: 65px;}
.promote_twitter {
    width: 130px;
    height: 38px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 13px;
    text-align: center;}
.promote_facebook {
    width: 115px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 63px 0 0 28px;
    text-align: center;}
 .promote_google {
    width: 65px;
    height: 40px;
    float: left;
    margin: 0 39px 0 0;
    padding: 65px 0 0 28px;
    text-align: center;
}
</style>
<div class="promote_post_bg">
<div class="promote_twitter">
<a class="twitter-share-button" data-via="BloggerEklenti" href="https://twitter.com/share">Tweet</a>
<script>
                !
                function (d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (!d.getElementById(id)) {
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//platform.twitter.com/widgets.js";
                        fjs.parentNode.insertBefore(js, fjs);
                    }
                }(document, "script", "twitter-wjs");
          
</script></div>
<div class="promote_facebook">
<fb:like action="like" colorscheme="light" expr:href="data:post.canonicalUrl" font="verdana" layout="button_count" send="false" show_faces="false"></fb:like>
<div>
<b:if cond="data:post.isFirstPost">
<script>
                        (function (d) {
                            var js, id = 'facebook-jssdk';
                            if (d.getElementById(id)) {
                                return;
                            }
                            js = d.createElement('script');
                            js.id = id;
                            js.async = true;
                            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                            d.getElementsByTagName('head')[0].appendChild(js);
                        }(document));
                  
</script>
</b:if></div>
</div>
<div class="promote_google">
<g:plusone annotation="none" size="medium"></g:plusone>
<script type="text/javascript">
                (function () {
                    var po = document.createElement('script');
                    po.type = 'text/javascript';
                    po.async = true;
                    po.src = 'https://apis.google.com/js/plusone.js';
                    var s = document.getElementsByTagName('script')[0];
                    s.parentNode.insertBefore(po, s);
                })();
          
</script></div>
</div> 
</b:if>

GameMix Blogger Teması

Blogger için uyarlanan , GameMix teması , oyun blogları için tasarlanmış , GameMix temasını özelleştirerek , farklı alanlarda da kullanabilirsiniz..

DEMOINDIR

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

Blogger Tema , Blogger Temaları , GameMix Blogger Tema , GameMix Blogger Teması , GameMix Blogger Theme , GameMix Blogger Template , Blogger Oyun Teması

Son zamanlarda , sıkça blogger tema nasıl yüklenir , bu blogger temasını nasıl yüklerim , Beğendiğim bir temayı blogger bloga nasıl eklerim , şeklinde sorular almaya başladım..

Her ne kadar , blogger blogunuza şablon eklemek basit olsa da , bilmeyenler ve yeni blogger kullanıcıları için bu anlatımı yapalım..

Blogger yönetim panelinizde , Şablon kısmına giriyoruz..

Sağ üst bölümde yer alan Yedekle / Geri yükle bağlantısına tıklıyoruz..

Açılan panelde , Dosya Seç butonuna tıklıyoruz...

İndirdiğiniz temayı bulun...uzantısı xml olmalı...

Son olarak Yükle butonuna basıyoruz ve yeni temanız hazır..

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

Blogger Tema Yükleme , Blogger Tema Yükle , Blogger Tema Ekle , Blogger Tema Nasıl Eklenir , Blogger Tema Nasıl Yüklenir , Blogger Blog Tema Değiştirme , Blogger Şablon Ekleme ,Blogger Şablon Yükleme , Blogger Tema Nasıl Eklenir

Blogger blogunuzda , yazılarınızı klavye tarzı şeklinde yazmak istermisiniz ?

Klavye Tarzı Yazı Yazma Eklentisi ile , vurgulamak istediğiniz cümleleri kelimeleri yada harfleri ön plana çıkarabilirsiniz..

DEMO

Alttaki kodu buluyoruz

]]></b:skin>

Hemen üstüne aşağıdaki kodları ekliyoruz

/*****************************************
Klavye Tarzı Yazı Yazma Eklentisi kod baslangıcı eklentileri.blogspot.com
******************************************/
klavye{
border:1px solid gray;
font-size:1.2em;
box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
margin:2px 3px;
padding:1px 5px;
}

Şablonumuzu kaydediyoruz.......Blogumuzda klavye tarzı yazı yazmak istediğimizde aşağıdaki kodu kullanıyoruz.

<klavye>Yazı Alanı</klavye>

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

Klavye Tarzı Yazı Yazma Eklentisi , Klavye Tarzı Yazı Yazma  , Klavye Tarzı Yazı  , Klavye yazı Blogger , Blogger Yazı Eklentisi , keyboard like text effect , Blogger keyboard like text effect 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ü

Blogger blogunuz için , Döner Sosyal Butonlar Eklentisi ile , ziyaretçiniz fare ile ikonların üzerine geldiğinde , ikonumuz dönme efekti gösterir..

DEMO

Altta yer alan kodlarımızı , Yerleşim >> Gadget Ekle >> HTML/JavaScript yardımı ile ekleyiniz..

<style>
 #social a:hover {
 background-color: transparent;
 opacity:0.7;
 }
 #social img {
 -moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;
 }
 #social img:hover {
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);
 }
</style>

<center>
 <div id="social">
<!--Start Rss Icon-->
 <a href="http://draft.blogger.com/YOUR-FEED-URL-HERE" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0wAFzcyq-0DmiX6ZHh4D9ey3EMLhKZ6q2xB2ozJU1K9f2CQMDcSm4EzeDXfu_A8-GaiUvHMloj5T_5J6W1qbh0KseCrXpnrAQMxd2UkImmIvA-dHXewLIIOly7gchcyYAABh4MCaFv_Yt/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Rss Icon-->
 <!--Start Email Rss Icon-->
 <a href="http://draft.blogger.com/YOUR-EMAIL-RSS-URL-HERE" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFnpap5Gib_Dsnf4QPrd697y4dPOb_NoR6rLnwaFERBZeq-PkqjzXXGg-qZAQuhAyJWRUb_ddn_QcfSC6XRKudRSw8jYOrvvpsnBM20vlvOb-h3C3ycdW9RsIsxqCnUatenDw860we_hug/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Email Rss Icon-->
 <!--Start Facebook Icon-->
 <a href="http://draft.blogger.com/YOUR-FACEBOOK-PAGE-URL-HERE" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG0O7nH3yzNM2qR3i0bhyphenhyphenmGZAiZhNAw1iT_0K8ufSjs4RbZiZJn7lZquuCOwohgIax4l03I6A8HkEHQjvwshObloJSyolrut8oE-fM28fcLGPPJufUx7KR6p1XVWHql9XGiHLdFY8OqbZ7/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Facebook Icon-->
 <!--Start Twitter Icon-->
 <a href="http://draft.blogger.com/YOUR-TWITTER-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPArSAvSuxOeu4kJjnOlnQ_AuEZOLfhYqUaKukdfYx50M3jBaO6T0VwiWKPn5xYibhPt4hK7KN7nk58IW-9ZVhDtBL1GahNCgxhmjDwVKjse9UyMlZ9TEaziNKblA_XibMK44EuhVZzWpd/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Twitter Icon-->
 <!--Start Google+ Icon-->
 <a href="http://draft.blogger.com/YOUR-GOOGLE-PLUS-URL-HERE" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDyG8vBl8eTAyDeOhf2inQRC3SJ1QO4TNuPOLVq2yvzZhYwKr0-IuToxIEceGKaDMzSzEJU6pzO1dDZ8nz-wVj9jpkXrCg4FWID1vyuLbzCwlm2g2rX-8XT-ll1IHXUqg9bRYkeBa26kSj/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a> 
 <!--End Google+ Icon-->
 <!--Start Pinterest Icon-->
 <a href="http://draft.blogger.com/YOUR-PINTEREST-URL-HERE" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL8gygOwXj0IZPEcwIxjp7xoD_JmgXNZtKUYer-RX1s6D21lhSAEzysidikf6A0Ex1W9q4onPru8hjbZcq2NFirVgK2zaw6LECalX0LrJAa7UG8yKJ_aliz-BDJ6pVZni0TLO5B9BJzc1i/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a>
 <!--End Pinterest Icon-->
 </div>
</center>

Yılbaşı nedeniyle , yaklaşık 10 günlük bir ara vermek durumunda kaldık , bu süre zarfında oldukça fazla yorum ve mail almışız , yorum ve maillerin hepsine dönüş yapılacaktır..

Anlayışınız için teşekkürler..