Blogger blogunuz için, siyah ağırlıklı , google+ , facebook , twitter , digg ve rss butonları istermisiniz ? 

Siyah Zoom Efektli Sosyal Butonlar Eklentisi ile , sosyal sayfalarınızı blogger blogunuzda ziyaretçilerinize gösterebilirsiniz , ziyaretçi fare ile üstüne geldiğinde , zoom özelliği gösterir..

DEMO

Aşağıdaki kodu bulunuz..

]]></b:skin>

Hemen üstüne alttaki kodları ekleyelim.

/* Siyah Zoom Efektli Sosyal Butonlar Eklentisi baslangici 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);
}

Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele alttaki kodları ekliyoruz..

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/xxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBeKxnfWFxL8pMw2ZU-xglmcs-2JzEpWLeAIBrg0s1q-JIFABOxEZ2SYxKLOwQGPYJca53t3hn7W6uCbIhp3esB-Es3jjt42c8Z1MRyNcPgVNn80E7lRMFqcDn9I8M-pftOS1Plzgin-c/s1600/bloggertrix-google-icon.png" title="Add to Google+" /></a></li>

<li><a href="http://www.facebook.com/xxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdEJVET1xpwRvR8p7I2X4rEEv-7NwwiXLBwPBhwD3XhS81GxIrlpudnBfYcTiLELaxE4y9c8w58stOTKwhB8nkowSz7yh_nOf4kyKQZPwRngYslsBO3_BvjZYx7A2Enq4yexoNqh6GIXA/s1600/bloggertrix-facebook-icon.png" title="Add to Facebook" /></a></li>

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

<li><a href="http://www.twitter/xxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWytPYAXMpwRhsrkAGjATulMemnKoQtti6H4kLNEtRJPD0wrMryV8h-2HdYEVHxEHJ8wzjz_q887XhU3FxIcX5W1MnzI7CRGHEWpnYPKtwYTgDsWoFwPVP7B38pO18LhTOZIR3KWuC1C8/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/AVvXsEgzUf8hw4kRtFagzATQu5gMV4wjVjEMr-Zbdxv3KD6ozAjNBjQK6vQZwUXYbrkPCSTzNCSU4QP0mwSap1xKIn72Qmt1n5bbrwlWHcn7YETt7GOFon9ATLZWSsxh9IT_aDVmW34W0gWiuZE/s1600/bloggertrix-rss-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Kodlar içinde kalın olarak vurgulanmış yerleri kendinize göre düzenleyiniz..

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

Siyah Zoom Efektli Sosyal Butonlar Eklentisi , Blogger Sosyal Butonlar Eklentisi , Blogger Sosyal , Sosyal , Sosyal Paylaşım , Blogger Facebook , Blogger Twitter , Sosyal Share , Social Sharing Buttons For Blogger ,Social Sharing Buttons  

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ü

Blogger blogunuz için angry birds sosyal eklentisi istermisiniz ?

Bu eklentimizle blogger blogunuza angry birds kuşlarını ekleyerek , facebook , twitter , rss ve google+ sayfalarınızı tanıtabilirsiniz..

Angry Birds hayranı iseniz bu blogger eklentisini kaçırmayın..

Aşağıdaki kodu buluyoruz..

]]></b:skin>

Hemen üstüne altta yer alan kodları ekliyoruz..

.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.3); /*scale up image 1.3x*/
-webkit-transform:scale(1.3);
-o-transform:scale(1.3);
}

Blogger şablonunu kaydedip , Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele altta yer alan kodları ekliyoruz

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/xxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ5spIYrg5Wip5yfMH32__rzCglxt3S6M_tNuTbCw21QyfbKV3hnIeLpdJERn8E4jZQZMD5DaL0A4ijXbE35rFOsAK4WEmBmQ4nUAwwRWqAZa5_yTb-Xpb0x8fMBdGhtS_UIgZlXcHokw/s1600/bloggertrix-googleplus.png" title="Add to Google" /></a></li>

<li><a href="https://www.facebook.com/pages/Blogger-Eklentileri/126895440798640"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ6CAARLkoUonui1iiqWFPHHyfIeoPKgdCylzdWDN1DgsYfGApGJMjt8_F2zyNoEhwbMW2WyFIOKdRv9iDRysexqW93AC4CvX4qyZjTJJAl0fzmRhpPb_ERaSe9I12wyMvWruJhtQU-pk/s1600/bloggertrix-facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://twitter.com/BloggerEklenti"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi25IiC1re0gwoppjKoGrP1rE-w7lasMtMQa5gELBRJ3sYxjWIJL9i8NNjWVk-87eAoxwD_s8Sz1eN7X9CypjX_jIOU-TT8l98lt3b-xhdpEqZrcaZJL5i0Z2LenyET8bjZGYNHh-XSXNM/s1600/bloggertrix-twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/xxxxx"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6opmVCOJ_j_GXJzX1tEXk0G18vvNeYFhwHR61Q52D3kfQ8ZWL-z6dsnQ5WhDCY7F3kPJTVsbPS_a-FwosC2uFeqSo4Jwe9K5FgcxwfNt7mXkYO9KMR6ew3dKgy5454amWdFKAcDGnJyo/s1600/bloggertrix-Rss.png" title="Add RSS Feed" /></a></li>
</ul>

Yukarıda anlatılanları yaptıysanız , Angry birds eklentimiz hazır..Kırmızı yerlere kendi sosyal sayfa adreslerinizi yazmayı unutmayınız..

DEMO

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

Blogger Angry Birds Sosyal Paylaşım Eklentisi , Angry Birds , Angry Birds eklentisi , Angry Birds blogger , Angry Birds widget , Angry Birds gadget , blogger Angry Birds social share , Angry Birds share button

Yana Esneyen Sosyal Sayfalar Eklentisi ile blogunuzda , facebook sayfanız , twitter adresiniz ve google+ sayfanıza bu hoş butonlar yardımı ile link verebilir ve ziyaretçilerinizi bu sayfalara yönlendirebilirsiniz..

Bu eklentimizin demosunu görmek için TIKLAYINIZ..

Blogger blogunuzun yönetim paneline girin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodları ekleyiniz..

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0iCSwODAit_AwOjWFUNXK2jUUo3jjaPyifoScuWUvXVUmOIqdjZckW3n8uwsLwIm3c1rRrZ-BRliep4S_0BANE39f44ZuyF3C7hN5zejcT9KwMI9yhU8UWzcgRzJmFj2VM0-Hl_jDepw/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> 
<ul id="buttonbg"> <li ><a href="Facebook Adresiniz" class="icon fb">Facebook Takip Et >>></a><span>Facebook Takip Et</span></li> <li ><a href="Twitter Adresiniz" class="icon twit" >Twitter Takip Et >>></a><span>Twitter Takip Et</span></li> <li ><a href="Google+ Adresiniz" class="icon google" >Google+ Takip Et >>></a><span>Google+ Takip Et</span></li>
</ul>

Yukarıda kodları eklediyseniz , Yana Esneyen Sosyal Sayfalar Eklentisi blogunuz için hazır durumda , son olarak kodlar içinde geçen kırmızı ve siyah yerleri düzenleyiniz..

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

Yana Esneyen Sosyal Sayfalar Eklentisi , Sosyal Sayfa , Blogger Sosyal Sayfa eklentisi , Sosyal Sayfa Butonları , Facebook buton ekle , Twitter buton ekle , Google+ buton ekle , Blogger widget

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 

Blogger blogunuzda kullandığınız resimlere zoom özelliği eklemek istermisiniz ?

Blogger zoom eklentisi ile , kullanıcılar resimlerin üzerine geldiğinde , resimleriniz belli bir miktarda büyüyerek zoom etkisi gösterir..

Blogger resimlere zoom eklentisini blogger blogunuza eklemek için yapmanız gerekenler aşağıda..

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

]]></b:skin>

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

/* eklentileri.blogspot.com zoom efekti kod sonu  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimHlc7jp6yIULMoKlkfGci72j6G3__dFXR_84aj31hymgilf68UIaGYWHPj5ePomfhLftXcMLwESh8lX7dpC3op4Nz-DN3wJ5qZU7GwIw8NqRsp7KikkuT6d6CCP_n9apbnBmn9Lq64JRL/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* eklentileri.blogspot.com zoom efekti kod sonu*/
}

Yukarıdaki işlemi yaptıktan sonra , şimdide bu kodumuzu bulalım.

</head>

Bu kodumuzunda hemen üstüne şu kodları ekleyelim..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

Blogger resimlerinize zoom efekti eklentimiz hazır , nasıl kullanılacağına gelirsek , yazılarınızı yazarken , resimlerinizi alttaki şekilde ekleyeceksiniz..

<ul class="thumb">
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 1" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 2" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 3" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 4" alt="" /></a></li>
</ul>

güle güle kullanın =)

DEMO

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

Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect

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 Etiketleriniz Hareketlensin Eklentisi

Blogger blogunuzda bulunan etiketleri biraz hareketlendirmek istermisiniz ?

Bu eklentimiz ile blogunuzda bulunan etiketlerin üstüne fare ile gelindiğinde , etiketimiz belirli bir açı ile sağa doğru yatmaktadır..

Bu eklentiyi blogger blogunuzda kullanmak için aşağıdaki anlatımları takip ediniz..

Aşağıdaki kodumuzu blogger blogumuzda buluyoruz..

]]></b:skin>

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

/*-----Etiketleriniz hareketlensin eklentileri.blogspot.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}

Yapmamız gerekenler bu kadar , eklentinin çalışması için blogunuzda etiketler widgetinin ekli olması gerekmektedir..ekli değilse ekleyiniz lütfen..Etiketler eklentisini bulut olarak değiştirmeyi unutmayınız...

DEMO

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

Blogger Etiket özelleştirme , etiket eklentileri , blogger etiket eklentisi , blogger etiket efekti , etiketler , blogger etiketleriniz hareketlensin , blogger label widget