teknoloji haberleri - internet haberleri: Buton

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

18 Aralık 2012 Salı

Siyah Zoom Efektli Sosyal Butonlar Eklentisi

Unknown 14:05 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , bookmark , Buton , dinamik , efekt , Facebook , facebook eklenti , sosyal eklenti , Twitter , twitter eklenti , zoom Hiç yorum yok :

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/AVvXsEjiHsfDV3b0YKaeEQZZH3axiPnxX71l0JobqRSJsZbW2C4bIvj-As3qpnt61Sm6q15WbKJLsIG2Hd4OrYrxZ_-auFE3NmU0YBs96Cs4ZGAu9iOn3Fmha7YiuoMaPefgZuwRsf8XSdwLFg8/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/AVvXsEhtUmUO3T67bE3eIPw5bqMArKmIjkTkzSqXX_fDm9bvthYpjTSP6R90GW3wFiSJ5R94qVxC3CyV-tyVh5KFMwIaZ8FXdCCUy3GLLsrZTtCOM_YY3pJZHIQnIjR134KLsOaBGharCF1Jw64/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/AVvXsEjO2GLuhZQIAkrxeR8MZk7rGlpQJLFofFsTKmudFytpMSy6423kIRSx3WecduW11P3an8OrqcDMiwWvGjrsRXEsnxG78q_7s-yKUokIi9pSETTMIVjP600gdTaK9ox-Bs48rTt7Zcsi-wo/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/AVvXsEgVUAv_u1Ts5_Sr7BtZYp89PV6woT2cY0n477bk4galqvUGOTIk3hOeMUFyAC9DG9JLiCDayi_TTyG07vG9j0bhkIUeVrJOMgR0TGR9h_x4KuUDmq2FQF00-8bTvURKNcQ__YqbFyuiTT8/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/AVvXsEgwDfuRGE59cNeeph9pWOxK0_k4XuYNanjVA55oBKnabKYX3i6Mp2RxzYTg24sy6SNdFpjDPcE7quIoh7XtHsq9juP_uhCPYK2D3sV8wyJ-3F4P3lF1jKdEAHTWsRqLZ6ZbQEN2n422ty8/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

28 Kasım 2012 Çarşamba

Blogger Angry Birds Sosyal Paylaşım Eklentisi

Unknown 14:39 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , bookmark , Buton , efekt , Facebook , facebook eklenti , Twitter , twitter eklenti Hiç yorum yok :

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/AVvXsEiJBuYuRydNN5ybndSnDkeFGo0eogOElruojyIaiUOrHa6WU6n4tFJ0bKERuTsNsh4nmhpWa8K3r4FkoGWfBqVJ5KqOBj86_lw_ZRQtfqzfecVTB6MiL0VUJqHA1xarxqGcLNoCM6xVqmc/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/AVvXsEjLZpDoGprKPJDbNlrLLkKJnRjWFgHD7-ybH800qC_HhEY-52wrupLWsBTGSeGyTfHRhpR5My5mzqlReKGo4Q4hM1i7MRHF_Y5BK-F1rgoR4NVDkRIbdCW1lJJgNH-8TqEC6_61YSN8G_4/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/AVvXsEhYpeOiuo4_bXlOftKrk44ndRz5QMSkiWxg89alTK7xI8XVJpoi1jIQDzC2iPjmBH14mdTv59q-JMwlA8h_Wk4tRHDXKbYmGlpgT3oJhL_gJ3dmx0vHqpjHL3fePBAocs1oHvxztoUw9UY/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/AVvXsEiFGgBJDQda4kTmhUGxIRzpLjCwSoZFysMUqmXdm_ELCLauyoQE0Plt8xoDWUqmjbBdVWIyTAevU1FzGkg-fuUqYbR_eHwCWSwivFpp_lK71ZKor1m1X8Sn_BEQCTHcoci-O_qgq80RJSg/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

19 Kasım 2012 Pazartesi

Yana Esneyen Sosyal Sayfalar Eklentisi

Unknown 15:29 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , bookmark , Buton , efekt , Facebook , facebook eklenti , renkli , sosyal eklenti , Twitter , twitter eklenti Hiç yorum yok :

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

17 Kasım 2012 Cumartesi

Blogger Animasyonlu Hareketli Buton Eklentisi

Unknown 17:03 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Css3 , efekt , renkli Hiç yorum yok :

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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/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

5 Kasım 2012 Pazartesi

Blogger Yağlı Boya Sosyal Medya Butonları Eklentisi

Unknown 16:13 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Facebook , facebook eklenti , renkli , Twitter , twitter eklenti , zoom Hiç yorum yok :

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/AVvXsEgOujWc2UDnF38gnywUJrJwhJsI4bwAbunTqBAr_bTWYpGB8bHovTxAosaH42i6Ctqjq2-ZnTGJmP0niJ5Y8Aqx1CX1iI_BUL2qnl643qrGJWheAFwwBIWVvyxnObQfUm-aGlr5tVH1ft8/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/AVvXsEipukA4QkEF9_GVqD57pgEykXzba4uaOvd6XfDLR26NHkOyXLK4wB_k8LCS_o8NOg9IdRL3es7IdPsBtYJl9MleDEhUJjfGHzuKE1c_D76JzU1qWGKP1i2rC3GsTmmuT2Zz0Fl46_MzRlA/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/AVvXsEgnuGNXe_lmFEpt1Q8LCuQZKiobX-wfcuHeSIqvNS8NEOO4uqbAU6HqK5X_K7uQTBrJrgpmwlseolcGBk1sr4d_J0JSY5trQJr4PbokEYM3RnjA56IbQOkBfwq96wq6gonzYJ_FgpZZ9yM/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/AVvXsEiICBEVAaS028PQvuw_7vz89vRKiT07dqqxMw-WsUrZJNU3tpR4LWrQZGST8ClNnexN-Rqm6Y6kRMxeIf98y-TVdrSIAWMP5zgMOvIls_ItUe_xtAPxlQOpx6sCBfqL0MQ57sogI3G07ck/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

22 Ekim 2012 Pazartesi

CSS3 Dairesel Blogger Buton Eklentisi

Unknown 15:16 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Css3 Hiç yorum yok :

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

17 Ekim 2012 Çarşamba

Blogger 3D arama kutusu Eklentisi

Unknown 15:17 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Css3 Hiç yorum yok :

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

15 Ekim 2012 Pazartesi

Blogger Sürgülü Buton Eklentisi

Unknown 10:07 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Css3 , kayan Hiç yorum yok :

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/AVvXsEhXzwWyZ3rhyphenhyphenDZnaBaE6KHmOzVH0VNhzWHwVUkh-eBMy0fPiqB8XfghjIl0i9QVjX8ai1mi9-9e85kXPjscgfCGlyfMGNcDcMziw3tT_NJOZmU5Qu5G5EQ7zgaiHr6yGIbrOKWEW2BxqPQ/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

12 Haziran 2012 Salı

Blogger Hareketli Sosyal Medya Butonlar Eklentisi

Unknown 17:07 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Facebook , facebook eklenti , renkli , sosyal eklenti , Twitter , twitter eklenti Hiç yorum yok :

Blogger Hareketli Sosyal Butonlar Eklentisi Widget..

Bu eklentimizle , blogger blogunuza üzerine gelince renkelenen sosyal butonları ekliyeceğiz...Bu eklentimizle , rss, google , facebook ve twitter sayfalarınızı ziyaretçilerinize oldukça şık bir görünümle sunabilirsiniz..

DEMO

Blogger Hareketli Sosyal Butonlar Eklentisini blogger'a eklemek için aşağıdaki adımı takip edin..

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

<style> 
/*--------eklentileri.blogspot.com hareketli menu ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeH-SyPaEXtXuX2CJ5069tjZUcF0IV6SM3qOEeXzxZEFkjRr3Sw-NVe-58DPZKcVhzTBSqEnYOzTuweMQSC90PqPgCnkp48gbbyJ8WhhAiLQ7LY-vXruiWCJCyf4GP519sec1UALL6lxlb/s1600/eklentileri.blogspot.com.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="RSS ADRESI" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="GOOGLE PROFIL ADRESI" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="FACEBOOK ADRESI" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="TWITTER ADRESI" rel='external nofollow' target='_blank' ></a>

</div>

Yukarıdaki kodlarda kırmızı ile yazılmış olan yerlere , kendi adreslerinizi yazmayı unutmayın...yapmanız gereken sadece bu kadar..

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

Blogger Hareketli Sosyal Butonlar Eklentisi , Blogger Hareketli buton , blogger sosyal medya butonları , renk değiştiren butonlar , blogger sosyal ağ butonları , blogger facebook twitter buton

19 Mayıs 2012 Cumartesi

Üzerine Gelince dairesel açılan paylaş butonları eklentisi

Unknown 15:17 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , bookmark , Buton , Facebook , facebook eklenti , Twitter , twitter eklenti Hiç yorum yok :

Blogger Üzerine Gelince dairesel açılan paylaş butonları widgets

Bu eklentimizde , Blogunuzun sol altında üzerine gelince yada tıklayınca açılan paylaş eklentimizi anlatacağız..

Eklentimizde , pinterest , google+ , twitter , facebook , tumblr ve mail ile paylaş butonları bulunmakta...

Göze hoş gelen bu eklentiyi blogunuzda kullanarak , ziyaretçileriniz blogunuzdaki yazıları kolayca paylaşabilecekler..

Hemen anlatıma geçelim..

Öncelikle Widget Şablonlarını Genişlet kutucuğunu işaretlerek , aşağıdaki kodu buluyoruz..

</body>

Bulduğumuz bu kodun hemen üstüne aşağıda yer alan kodlarımızı ekliyoruz..

<!-- Start Shareaholic Sassy Bookmarks HTML (eklentileri.blogspot.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (eklentileri.blogspot.com) -->

Yukarıdaki işlemi yaptıysanız , artık eklentimiz kullanıma hazırdır... DEMO

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

Üzerine Gelince dairesel açılan paylaş butonları eklentisi , Blogger Üzerine Gelince dairesel açılan paylaş butonları eklentisi , Blogger paylaş eklentisi , Blogger paylaş butonları , blogger facebook twitter paylaş butonu

11 Mayıs 2012 Cuma

Blogger Translate Eklentisi ( Bayraklı )

Unknown 15:27 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , Diğer Hiç yorum yok :

Blogunuzda yazdığınız yazıları ,diğer dillere çevirmesi için bir eklenti istermisiniz ?

Bu eklentimiz sayfalarınıza giren ziyaretçilerinize , yazılarınızı konularınızı farklı dillere çevrilmesini sağlıyor, eğer blogunuza farklı ülkelerden ziyaretçiler geliyorsa yada gelebileceğini düşünüyorsanız bu eklenti oldukça işinize yarayacak..

Ziyaretçileriniz tek tıkla blogunuzdaki dili değiştirebiliyorlar..

Blogger Translate Eklentisi

<style type="text/css">  .trans-flags{margin: auto; width:auto; text-align: center;}  div.attribution {font-size:8px;text-align: center; width: auto;}  img.flag {cursor: pointer; height: 24px; width: 24px; border: 0;-webkit-transition: all .2s linear;-moz-transition: all .2s linear;-o-transition: all .2s linear;transition: all .2s linear;}  img.flag:hover {-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);} </style>  <div class='trans-flags'><a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=zh-CN&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="&#20013;&#25991;(&#31616;&#20307;)" src="http://lh6.ggpht.com/_dzq0x75P67s/Sqodh0eQlGI/AAAAAAAAAnI/qeNNDV5ZsIQ/s800/China.png" title="&#20013;&#25991;(&#31616;&#20307;)" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=pt&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="PortuguÃªs" src="http://lh6.ggpht.com/_dzq0x75P67s/Su6pkl4lNCI/AAAAAAAAAto/-lLpHw3dd-c/s800/Brazil.png" title="PortuguÃªs" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=en&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="English (US)" src="http://lh4.ggpht.com/_dzq0x75P67s/SqofSt9T9YI/AAAAAAAAAno/fEk669hIv4Y/s800/United%20States%20of%20America%28USA%29.png" title="English (US)" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=fr&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="FranÃ§ais" src="http://lh3.ggpht.com/_dzq0x75P67s/Sqodh1SZl4I/AAAAAAAAAnM/75d_mi391cM/s800/France.png" title="FranÃ§ais" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=de&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="Deutsch" src="http://lh4.ggpht.com/_dzq0x75P67s/SqodiEO5DFI/AAAAAAAAAnQ/Zg3lznR_xxQ/s800/Germany.png" title="Deutsch" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=it&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="Italiano" src="http://lh5.ggpht.com/_dzq0x75P67s/SqodiCj-k-I/AAAAAAAAAnU/uBITDoMVy3U/s800/Italy.png" title="Italiano" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=ja&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="&#26085;&#26412;&#35486;" src="http://lh4.ggpht.com/_dzq0x75P67s/SqodiHC9jHI/AAAAAAAAAnY/7EizWdCnn4s/s800/japan.png" title="&#26085;&#26412;&#35486;" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=ko&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="&#54620;&#44397;&#50612;" src="http://lh3.ggpht.com/_dzq0x75P67s/SqofSY4TTlI/AAAAAAAAAnc/gL6lLQqO2-U/s800/South%20Korea.png" title="&#54620;&#44397;&#50612;" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=ru&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;" src="http://lh6.ggpht.com/_dzq0x75P67s/SqofSVz2JhI/AAAAAAAAAng/opgmwbgvnDU/s800/Russian%20Federation.png" title="&#1056;&#1091;&#1089;&#1089;&#1082;&#1080;&#1081;" /></a> <a rel="nofollow" onclick="window.open('http://www.google.com/translate?hl='+'en&amp;sl=auto&amp;tl=es&amp;u='+encodeURIComponent(location.href)); return false;"><img class="flag" alt="EspaÃ±ol" src="http://lh6.ggpht.com/_dzq0x75P67s/SqofSuXVoYI/AAAAAAAAAnk/bM3PAPvu6vo/s800/Spain.png" title="EspaÃ±ol" /></a></div> <div class="attribution"> <a href="http://eklentileri.blogspot.com/" target="_blank">translate language</a></div>

15 Nisan 2012 Pazar

Blogger Rastgele Link Eklentisi

Unknown 13:26 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton , link , rastgele Hiç yorum yok :

Blogger Rastgele Link Eklentisi

Blogger blogunuz için rastgele link eklentisi istermisiniz ?

Bu eklentimiz ile , sayfanızın istediğiniz bir yerinde rastgele link oluşturabileceksiniz, ziyaretçiler linke bastığında , blogger blogunuzda bulunan yazılardan biri rastgele açılacaktır..

Blogger Rastgele Link Eklentisini kullanmak için aşağıdaki yolları takip edin..

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyin , herhangi bir başlık kullanmayın...

<script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Rastgele Sayfa'; document.getElementById('Rastgele').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Yukarıdaki kod içinde kırmızı ile geçen Rastgele Sayfa , link eklediğinizde gözükecek yazıdır , dilediğiniz gibi düzenleyebilirsiniz..

Yukarıdaki işlemi yaptıysanız , şimdi ise link eklememiz için aşağıdaki kodu yine Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele ekleyiniz , yada nerde kullanmak istiyorsanız orayada ekleyebilirsiniz..

<div id="Rastgele"></div>

Kod içinde bulunan Rastgele yazısına dokunmayın , o yazı gözükmeyecek , gözükecek yazı bir üst kodda kırmızı ile gösterilen yer..DEMO

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

Blogger Rastgele Link Eklentisi , Blogger Rastgele Link , Blogger Rastgele Link Eklentisi ekleme , Blogger Rastgele Link ekleme , Blogger Rastgele Eklentisi , Blogger Rastgele Yazı Gösterme , Blogger Rastgele Yazı Eklentisi

31 Mart 2012 Cumartesi

Blogger Pagerank Butonları Eklentisi

Unknown 15:53 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Buton Hiç yorum yok :

Blogger Pagerank Butonları Eklentisi

Blogger blogunuza pagerank butonu eklemek istermisiniz , bu butonlar yardımı ile pagerankınızı ziyaretçilerinize gösterebilirsiniz..

Aşağıdan beğendiğiniz göstergeyi , gadget ekle seçeneği ile blogunuza ekleyebilirsiniz..

	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=sbgrey" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=wpgreen" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=csblue" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=Technical" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=wpblue" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=gsblack" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=vgsun" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=pgblue" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=Google" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />
	<img src="http://pagerank-sorgula.turkeyrank.com/pagerank-display.php?a=getCode&s=gsblue" title="PageRank Gösterim Butonu " border="0px" alt="PageRank" />

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

Blogger Pagerank Butonları , Blogger Pagerank Butonları eklentisi , Blogger Pagerank Butonu , Blogger Pagerank Butonu ekle , Blogger Pagerank Butonları ekle , pagerank buton , pagerank buton kodları , Blogger Pagerank Butonları kodu

29 Mart 2012 Perşembe

Renkli Çizim Şeklinde Sosyal Medya Butonları

Unknown 13:53 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , bookmark , Buton , Facebook , facebook eklenti , sosyal eklenti , Twitter , twitter eklenti Hiç yorum yok :

Renkli Çizim Şeklinde Sosyal Medya Butonları Eklentisi..

Blogger blogunuzda El çizimi şeklinde renkli sosyal medya butonları kullanmak istermisiniz , Bu blogger eklentisi ile farklı görünümde olan bu sosyal butonlarını kullanmış olacaksınız..

Sosyal paylaş butonları ile , facebook , twitter , rss ve google + sayfalarınızı ziyaretçilerinize tanıtmış olacaksınız..

Demosunu Görmek için TIKLAYIN

Yerleşim > Gadget ekle "HTML/Java Script" seçelim ve aşağıdaki kodu ekleyelim



<style class="text/css">
table
{
border-bottom: 0px solid #E6E6E6;
float: center;
width: 260px;
margin:10px 0 0 3px;
}
.subicons
{
border-right: 1px solid #E6E6E6;
}
.Fadeout {
filter:alpha(opacity=100);
opacity: 1.0;
border:0;
}
.Fadeout:hover{
filter:alpha(opacity=80);
opacity: 0.8;
border:0;
}
</style>
<div class="table">
<table>
<tr>
<td><div class="subicons"><a class="Fadeout" href="http://www.facebook.com/XXXXX" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb14k6PpAqbS4uAgKJAFEsnowC3KU4FJtc90NXfrjWkyGBR0fXM-MJw5qZWzG24nMFZOaiyvV3wLMDEuAO4xVToZU_MfhLEZfL5_Y_oo9orCbDMavfESQCp2V7T17e4N7xlq21kwg1IQp-/s1600/facebook-48.png" /></a></div></td><td><div class="subicons"><a class="Fadeout" href="http://twitter.com/XXXXX" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhealD5XGCg-PRaY6wvW_At-rcc7EyFooaURCyM1LAUEqF8FTjMILRwhy2d3S1j-P3aMUvgV8RF66SmPMs_cwWR0GRjA9Br88ZCfi0dNlGG0byCN4rn2iDplCbFdciQa1T-013wRAjlFUb_/s1600/twitter-48.png" /></a></div></td>
<td><div class="subicons"><a class="Fadeout" href="http://feeds.feedburner.com/XXXXX" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxRNvVJMGqMN94iUiYc1iAHIcUdHTRC5YHw4rfUVII4w10u_AgOcUsSmQsyYCxXNa1Tg69IyNvIKWmbFu3IA0TZPthXpjEY4khDFVb1QgvPUzlB-jFhlSFjSSAim4Sgi_QPHV82tnUbBDg/s1600/rss-48.png" /></a></div></td>
<td><a class="Fadeout" href="https://plus.google.com/110875602250977569192/posts" imageanchor="1" target="_blank" rel="nofollow"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRufpxsukLVYAoDuSNveF9-7iL_KXFLscEVetcaSQNqbHUR923e7PfJLPDnYbt_6MwNimKxIbFAKIar6vvi5BBcOqSEh0zmuv19YSsvjUZZXr2sORaUt2uYPfNE5hQKBNr-Mp361ydfyGa/s1600/google-48.png" /></a></td>
</tr></table>
</div>

Yukarıdaki kod içinde renkli yazılmış olan yerlere , kendi sayfalarınızın adreslerini yazınız..

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

Sosyal medya butonları , Sosyal medya düğmeleri , blogger sosyal buton ekle , blogger için sosyal butonlar , blogger facebook twitter buton , blogger blog sosyal medya eklentisi, Sosyal medya eklentisi