Bu yazımızda , işinize yarayabilecek bir kaç adet chrome eklentisinden bahsedeceğiz..

Sadece blogger kullanıcıları için değil , webmaster olan herkesin işine yarayabilecek eklentilere değineceğiz..

RSS Feed Reader

RSS Feed Reader Chrome eklentisi ile , sevdiğiniz yada sürekli takip ettiğiniz blog/siteleri, chrome tarayıcınıza ekleyebilir , eklediğiniz blog/site yeni bir içerik girdiğinde , eklenti size bildirim yaparak uyarır , kısacası RSS Feed Reader eklentisi ile yeni konulardan hemen haberdar olabilirsiniz..

RSS Feed Reader Ekle

Awesome Screenshot

Awesome Screenshot eklentisi ile , blogger blogunuzda rahatlıkla ekran görüntüsü alabilir isterseniz bu ekran görüntüsü üzerinde değişiklikler yaparak kaydedebilirsiniz..

Awesome Screenshot Ekle

SEO Status Pagerank/Alexa

SEO Status Pagerank/Alexa Eklentisi ile , blogger blogunuzun alexa sıralamasını ve pagerank değerini görebilirsiniz..Kısacası bu eklentimiz o an ekranda bulunan site/blogun alexa ve pagerank değerini gösterir , oldukça kullanışlı olan SEO Status Pagerank/Alexa chrome eklentisini tavsiye ediyoruz.

SEO Status Pagerank/Alexa Ekle

Bir başka yazımızda , diğer eklentilerdende bahsedeceğiz , sizinde bildiğiniz eklentiler varsa bizimle paylaşabilirsiniz..

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

Blogger Chrome Eklentileri , Blogger Chrome Widgets ,Chrome eklenti , chrome , chrome blogger , blogger için chrome eklentileri

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

Blogger Teması olan , VideoBox Blogger temasını blogunuzda kullanmak istermisiniz..

Altta yer alan Demo bağlantısı ile , VideoBox Blogger temasını inceleyebilirsiniz , VideoBox Blogger temasını beğenirseniz indir butonu ile blogger blogunuzda bu temayı kullanabilirsiniz..

DEMOINDIR

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

Blogger Teması - VideoBox Blogger Theme , VideoBox Blogger Theme , VideoBox Blogger Template , VideoBox Blogger teması , VideoBox Blogger , Blogger temaları , Blogger templates

Blogger blogunuzda , yazılarınızın/yayınlarınızın hemen altında , sizi yada blogunuzu tanıtan bir eklenti istermisiniz ?

Bu eklentimizde , Blogunuzu yada kendinizi , ziyaretçilerinize tanıtabilir , veya detaylı bilgi verebilirsiniz..

DEMO için bu yayının hemen altına bakabilirsiniz..

Öncelikle , Widget Şablonlarını Genişlet kutucuğunu işaretleyin ve aşağıdaki kodu bulunuz..

]]></b:skin>

Bir satır üstüne , altta yer alan kodları ekleyiniz..

.authbio{
color: #454545; /* Yazı rengi*/
font-weight: normal;
font-size:0.9em;
background: #fff;
border: 1px dotted #cc0000;
width: 580px;
padding: 15px;
margin-bottom:25px;

}

.biotitle {
width: 580px;
background: #f57100; /* Turuncu olan arka renk.*/

width: 580px;
padding: 0px;
border: 1px dotted #000000;

}

.biotitle h2 {
font-weight: bold;
color: white;
padding:3px;

}
.authbio a{

color:#cc0000;

text-decoration:underline;}

Şimdide <data:post.body/  kodunu buluyoruz..( Lütfen hangisi diye sormayın , bazı bloglarda 2-3 tane olabiliyor, genellikle ilk olan , ilki olmazsa diğerlerini deneyin mutlaka çalışacaktır eklenti. ) hemen altına aşağıdaki kodları ekliyoruz..

<div class='authbio'>
<div class='biotitle'>
<h2> Eklentileri.blogspot.com Hakkında.</h2>
</div>

<br/>
<div style='float: left;'>
<img alt='' height='75' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41kLKLYQjikuqugE3nsqk6nx79IdMkbE7vO-fpKfBHAyAlL6Wi9OZxqOPFJHjRHpA4CBr_XFvjkRH49cbhRSN6XJXwNY4c8VqXQ4XOb2Lm7SXxhBqbXQqSafP2RzEpNa25C7chjNHdTMq/s1600/yorum.png' width='75'/>
</div>

     Blogumuz ilk yayınından bu güne , blogger eklentilerini , tüm blogger kullanıcılarına ulaştırmak için yayın yapmış , bu süre içinde hiç bir şekilde kar/gelir elde etmemiş , etmiyecektir..Lütfen desteklerinizi bizden esirgemeyin..
<br/>
<br/>
Bizi <b><a href='http://www.facebook.com/pages/Blogger-Eklentileri/126895440798640' target='_blank'>Facebook</a></b> ve <b><a href='https://twitter.com/BloggerEklenti' target='_blank'>Twitter</a></b> üzerinden de takip edebilirsiniz..

Yukarıdaki anlatılanları yaptıysanız eklentimiz hazırdır..

Kırmızı olan yerlere, kendi facebook ve twitter adresleriniz.
Mavi olan yere , Görünmesini istediğiniz resminiz.
Siyah olan yerlere ise tanıtım yazınız..

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

Blogger Yazar bilgisi eklentisi , Blogger yazar eklenti , yazar hakkında , yazar , Blogger Yazar bilgi kutusu , About the Author , About the Author widget , About the Author box

eklentileri.blogspot.com artık facebook'da..

Bize destek olmak için sayfamızı beğenebilir ve bizi facebook'dan takip edebilirsiniz..

Facebook Adresimiz

Blogger Eklentileri Sadece Konu/Yazılarda Gözüksün , Ana Sayfada Görünmesin..

Blogger blogunuzda eklediğiniz widget(eklenti)leri sadece Yazı sayfalarınızda göstermek istermisiniz ?

Bu eklentimizle , eklediğiniz eklentiler , sadece yazı/konularınızda  gözükür , ana sayfada eklentileriniz görünmez..

Hemen anlatıma geçelim.

Öncelikle dikkat etmemiz gereken , blogunuza eklediğiniz gadgetin bir ismi olması .Widget başlığı neden gerekli derseniz, kodlarla uğraşmamanız ve hemen bulmamız için gerekli..

Blogumuzun şablon kısmına giriyoruz , Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz , ctrl+f yardımı ile Görünmemesini istediğiniz eklentinin başlığını aratıyoruz ( örnek olarak : Popüler Yayınlar ) 

<b:widget id='HTML4' locked='false' title='Popüler Yayınlar' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

</b:includable>
</b:widget>

Yukarıdaki kod aramamız sonucunda çıkar , kırmızı olan yerleri aşağıdaki kod ile değiştiriyoruz ( sadece kırmızı olanları silip yerine aşağıdakileri ekliyoruz.. )

<b:includable id='main'>

<b:if cond='data:blog.pageType == "item"'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>

Artık eklediğiniz eklentiler sadece yazı sayfalarınızda çıkacaktır , ana sayfada ise eklentiler gözükmeyecektir..sizde eklentilerinizi ana sayfada göstermek istemiyorsanız bu blogger eklentisini kullanabilirsiniz..

Tam tersi olan , Blogger eklentilerinizi sadece ana sayfada göstermek isterseniz ise BU konuya bakabilirsiniz..

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

Widget Sadece Konu/Yazılarda Gözüksün , Eklentileri Ana Sayfada gizleme , Eklentiler görünmesin , Eklenti gizleme , Yazılarda görünsün , Ana sayfada görünmesin , Blogger Sadece Yazı Gösterme

Blogger Teması olan , Inspiration teması görüntü ve kullanım açısından oldukça şık bir görüntüye sahip..

Inspiration Blogger Temasını blogger blogunuzda kullanmak için aşağıdaki indir butonunu kullanabilirsiniz , Ön izlemesini ise demo linkinden yapabilirsiniz..

DEMOINDIR

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

Inspiration Template , Inspiration Theme , Blogger Inspiration Template , Blogger Inspiration Teması , Inspiration , Blogger Şablon Inspiration , Blogger Template , Blogger Temaları

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 

Blogumuzun Sağ altında , Blog Sayfanızın reklamının yer almasınız istermisiniz ?

eklentileri.blogspot.com , Blogunuzu ücretsiz tanıtıyor , sizde blogunuzu ekleyin sizde blogunuzu başkalarına tanıtma fırsatına sahip olun..

Sayfamızın Sağ altında 125x125 lik alanda , banner , yazı vs.. ile blogger blogunuzu tanitabilirsiniz..

Blogumu Nasıl Eklerim ?

• Blogger blogunuzu eklemek için ;
• Öncelikle , Blogger blogunuzda bizi tanıtan bir yazı yazmak ve yazınızın sonuna http://eklentileri.blogspot.com/ adresini içeren bir link vermek..
• Yazınızı yayınladıktan sonra , iletişim'e girerek yada eklentileri.blogspot@gmail.com adresinden bize , 125x125 logo/yazı resminizi ve bizi tanıtan yazınızın linkini göndermek gerekiyor..
• Yapmanız gereken bu kadar..

Blogum Ne zaman Eklenir ?

• Üstte yer alan koşulları uyguladıktan sonra , Size atacağımız cevapta tarih ile belirtilecektir..Yoğunluğa göre süre değişebilir ,( Blogunuz eklendiğinde mail ile haber verilecektir )

Ne kadar süre Blogumun reklamını yapabilirim ?

• Blogunuz 5 gün süre ile , sayfalarımızın sağ altında kalır , 5 gün sonra yerini başka bir bloga devreder...Bu 5 günlük süre zarfında Blogunuza ziyaretçi çekebilirsiniz..

 Reklamın iyisi kötüsü olmazmış diyen blogger kullanıcıları için ideal bir yöntem olan bu reklam alanını sizde kullanabilirsiniz..

Blogger teması olan , Fitnessmag temasını blogger blogunuzda kullanmak için aşağıdan indirebilir ve önizlemesini görebilirsiniz..

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

Blogger Tema - FitnessMag Theme , Blogger FitnessMag , FitnessMag , FitnessMag themes , FitnessMag tema , Blogger themes , Blogger FitnessMag Template , Blogger Temaları

Blogger Blogunuza Flash obje eklemek istiyorsunuz ama yapamıyormusunuz ?

Bu eklentimiz ile , blogger bloglarınızda flash içeren objeler ekleyebileceksiniz..

Blogger blogunuza flash eklemek için aşağıdaki kodu kullanmanız yeterli..

<embed type="application/x-shockwave-flash" width="500" height="100" src="FlashAdresi.swf" quality="high" bgcolor="white" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>

Yukarıda ön izlemesini görebilirsiniz..width="500" height="100" değerleriyle oynarak , genişlik ve yüksekliği ayarlayabilirsiniz..FlashAdresi.swf yerine kendi flash url adresinizi yazınız..

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

Blogger Bloga Flash Obje (Swf) Ekleme , Blogger Flash Ekle , Blogger Flash Obje Ekleme , Bloga Flash nasıl eklenir , Blogger Flash Gösterme , Blogger Flash Oynatma , Blogger add Flash , Blogger How to add a Flash , Flash

Blogunuza sağa sola aşağı yukarı kayan yazılar istermisiniz ?

Oldukça basit olan bu eklentiyi bilmeyenler olabilir diye paylaşıyoruz..tam olarak eklenti diyemeyiz ama kullanmak isteyenler kullanabilirler..

<marquee direction="left">Sola Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com</marquee>

Sola Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com

<marquee direction="right">Sağa Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com</marquee>

Sağa Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com

<marquee direction="up">Yukarı Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com</marquee>

Yukarı Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com

<marquee direction="down">Aşağı Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com</marquee>

Aşağı Doğru Kayan yazı Buraya Yazılacak..eklentileri.blogspot.com

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

Sola Kayan Yazı Eklentisi , Sağa Kayan Yazı Eklentisi , Yukarı Kayan Yazı Eklentisi , Aşağı Kayan Yazı Eklentisi , Blogger Kayan Yazı Ekleme , Kayan yazı eklentisi , kayan , yazı , Blogger Kayan Yazılar

Blogger ChromeGT Template

Blogger için yapılmış bu temayı çok beğendik , sizlerle paylaşalım istedik..

Blogger Chrome GT Teması , oldukça şık , kırmızı ve siyah ağırlıklı bu tema , modern bir görüntüye sahip..

Blogger ChromeGT temasının önizlemesini aşağıdaki demo linkinden yapabilir , blogger blogunuzda bu temayı kullanmak istersenizde , indir butonu ile indirebilirsiniz..

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

Blogger ChromeGT Teması , Blogger ChromeGT Teması Themes , Blogger ChromeGT Template , Blogger ChromeGT , ChromeGT , Blogger temaları , Blogger teması , Blogger themes , Blogger Templates

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

Blogger blogunuza eklediğiniz resimlerin üzerine fare ile gelindiğinde, aşağı doğru açılan metin/bilgi kutusu eklentisini blogger blogunuza eklemek için aşağıdaki anlatımı takip edip , blogger blogunuzda bu eklentiyi kullanabilirsiniz.

Alttaki kodu bulunuz..

]]></b:skin>

Bir satır üzerine aşağıdaki kodları ekleyiniz..

.imagepluscontainer{ /* main image container */
position: relative;
z-index: 1;
}

.imagepluscontainer img{ /* CSS for image within container */
position: relative;
z-index: 2;
-moz-transition: all 0.5s ease; /* Enable CSS3 transition on all props */
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

.imagepluscontainer:hover img{ /* CSS for image when mouse hovers over main container */
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-transform: scale(1.05, 1.05);
-webkit-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
}

.imagepluscontainer div.desc{ /* CSS for desc div of each image. */
position: absolute;
width: 90%;
z-index: 1; /* Set z-index to that less than image's, so it's hidden beneath it */
bottom: 0; /* Default position of desc div is bottom of container, setting it up to slide down */
left: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.8); /* black bg with 80% opacity */
color: white;
-moz-border-radius: 0 0 8px 8px; /* CSS3 rounded borders */
-webkit-border-radius: 0 0 8px 8px;
border-radius: 0 0 8px 8px;
opacity: 0; /* Set initial opacity to 0 */
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8); /* CSS3 shadows */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-transition: all 0.5s ease 0.5s; /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
-webkit-transition: all 0.5s ease 0.5s;
-o-transition: all 0.5s ease 0.5s;
-ms-transition: all 0.5s ease 0.5s;
transition: all 0.5s ease 0.5s;
}

.imagepluscontainer div.desc a{
color: white;
}

.imagepluscontainer:hover div.desc{ /* CSS for desc div when mouse hovers over main container */

-moz-transform: translate(0, 100%);
-webkit-transform: translate(0, 100%);
-ms-transform: translate(0, 100%);
-o-transform: translate(0, 100%);
transform: translate(0, 100%);
opacity:1; /* Reveal desc DIV fully */
}

Yukarıdaki işlemi yaptıysanız eklentimiz hazırdır , bu eklentiyi kullanmak için , aşağıdaki kod dizilimini kullanmanız gerekiyor..

<div class="imagepluscontainer" >
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQX-tclp_3KEvx6Vvngp7SRzeqyY_WkS6Ml_hXlXKzwcbt5AXXKKfRf4DZ6qIu6yJIyUseS0cu0BoGw6jDQuusCkv3w8mug0MHD7qQ-47MMu6qDZj5jqGgNrzIm6rrryVWyJwj-TKsRsb/s1600/yorum.png" style="width:263px; height:199px; z-index:2" />
<div class="desc">
Tüm Blogger eklentilerini , eklentileri.blogspot.com adresinde bulabilir , blogunuza ekleyebilirsiniz..
</div>
</div>

Kırmızı olan yere , resim linkiniz..Mavi olan yer ise görünmesini istediğiniz yazınız..düzenlemeri ona göre yapınız..

DEMO

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

Resim üzerine gelince açılan açıklama kutusu , blogger resim üstüne gelince açıklama ekleme , blogger resim eklentisi , blogger resim üstü yazı eklentisi , blogger image widget , Image With Description Hover Effect , Blogger hower widget ,