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  

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 Yağlı Boya Paylaş Butonları Eklentisi Widget ( Zoom özellikli )

Bu eklenti ile , blogger blogunuza yağlı boya tarzında , facebook , twitter , google+ ve rss butonları ekleyebilirsiniz..

Altta yer alan kodu blogunuzda bulunuz..

]]></b:skin>

hemen üstüne , aşağıdaki kodları ekleyiniz..

/* Yağlı boya tarzında sosyal buton eklentisi başlangıç.....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);
}

Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan kutucuğa aşağıdaki kodları ekleyiniz..

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhafILAZsGOIDRiiyjLXuqeMpyhxSTCF8N8uHVIWjmUoJVU2OENf_3K5Z929B2qQtKqJKqP4LTZp3KP99-gGZ2ixPXVlxt9ONHRG4UHoILNvk_LVzvbohA_tWOgX5n_qF20SMjTpHgOhMY/s1600/bloggertrix.com-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/AVvXsEgi__SdtzbgFbDsXo3eZt7QHbFkrP6670RpLK3eSvoyBzRN0TDDJd3izorkbbUabZVTI93K26-g0pwuJk4y3oJs0h-BAPTqMRuSwBwU1ZlKG19lX2gTTbt0PAuWnic-BhlKLYzlyr1Xw-g/s1600/bloggertrix.com-Facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK6uzFwS-Ei0RnM9IAtkzsoz2pRc4yQ8EwiW2qfW25FVgDmJkhd5i6h_vztYESmQbiGyd_o2xTE455en8BQw6Sm4HkSBrD1iO_ec8acHnpzir2tGhe01rAqOblWRnPdd_1l9KmJdfC1_Y/s1600/bloggertrix.com-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/AVvXsEhBaXAkRRAqIBNv-_hG6WQmQkbt9VLAMTnrPbo4fCBQT1AC_GJjS25nCC5Mt6zzzlj7TgDFOuaq8bYvjtUl68K4IevOQq-SHlNzvEMo6R2_Dncg0Og0kY_l_QWOQjpDj-vPs-xxM-3DKeU/s1600/bloggertrix.com-RSS-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Yukarıdaki kodlar içinde yer alan XXXXX yerlerine , kendi adreslerinizi yazınız..

DEMO

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

Blogger Yağlı Boya Paylaş Butonları Eklentisi , Blogger sosyal medya butonları , Blogger sosyal butonlar , renkli blogger buton , renkli sosyal buton , facebook buton , twitter button , blogger sosya buton ekleme

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