Blogger tarafından desteklenmektedir.

Kişisel Blog

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

19 Şubat 2013 Salı

Blogger dinamik resim eklentisi

Hiç yorum yok :


Blogunuza dinamik bir resim eklentisi istermisiniz ?

Bu eklentimiz , fare ile resim üzerine gelindiğinde resmi bir miktar yatırır , oldukça güzel bir eklenti olduğunu düşündümüz dinamik resim efektini sizde blogunuzda kullanabilirsiniz..


öncelikle blogunuzda aşağıda kodu buluyorsunuz.

yukarıdaki kodun hemen üstüne bu kodu yapıştırıyoruz


kaydedip çıkıyoruz...

18 Aralık 2012 Salı

Siyah Zoom Efektli Sosyal Butonlar Eklentisi

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


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  


17 Aralık 2012 Pazartesi

Sola Kayma Efektli Açılır Menü Bar

Hiç yorum yok :

CSS3 Sola Kayma Efektli Blogger Menü Bar Eklentisi

Bu eklentimiz ile , blogger blogunuzda , üst menü yaratabilirsiniz , Menü bar eklentimizle alt kategoriler yaratabilirsiniz , alt kategorilerimiz soldan uçarak gelir...


Alttaki kodumuzu şablon kısmında buluyoruz
]]></b:skin>
Bir satır üstüne , altta yer alan kodlarımızı ekliyoruz..
/*Soldan Kayma Efektli Blogger Menü Bar Eklentisi Kod Baslangici www.eklentileri.blogspot.com*/

#flyingmenubt,#flyingmenubt ul {
list-style: none outside none;
margin: 0;
padding: 0;
height:500px;}
#flyingmenubt {
font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;
font-size: 13px;
height: 36px;
list-style: none outside none;
margin: 40px auto;
text-shadow: 0 -1px 3px #202020;
width: 980px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow: 0px 3px 3px #cecece;
-webkit-box-shadow: 0px 3px 3px #cecece;
box-shadow: 0 3px 4px #8b8b8b;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}
#flyingmenubt ul {
left: -9999px;
position: absolute;
top: -9999px;
z-index: 2;
}
#flyingmenubt li {
border-bottom: 1px solid #575757;
border-left: 1px solid #929292;
border-right: 1px solid #5d5d5d;
border-top: 1px solid #797979;
display: block;
float: left;
height: 34px;
position: relative;
width: 105px;
}
#flyingmenubt li:first-child {
border-left: 0 none;
margin-left: 5px;
}
#flyingmenubt li a {
color: #FFFFFF;
display: block;
line-height: 34px;
outline: medium none;
text-align: center;
text-decoration: none;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
background-color:#5f5f5f;
}

/* keyframes #animation1 */
@-webkit-keyframes animation1 {
0% {-webkit-transform: scale(1);}
30% {-webkit-transform: scale(1.3);}
100% {-webkit-transform: scale(1);}}
@-moz-keyframes animation1 {
0% {-moz-transform: scale(1);}
30% {-moz-transform: scale(1.3);}
100% {-moz-transform: scale(1);}}
#flyingmenubt li > a:hover {

-moz-animation-name: animation1;
-moz-animation-duration: 0.7s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation1;
-webkit-animation-duration: 0.7s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#flyingmenubt li:hover > a {
z-index: 4;
}
#flyingmenubt li:hover ul.subs {
left: 0;
top: 34px;
width: 150px;
}
#flyingmenubt ul li {
background: none repeat scroll 0 0 #838383;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
opacity: 0;
width: 100%;
/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}

/* keyframes #animation2 */
@-webkit-keyframes animation2 {
0% {margin-left:185px;}
100% {margin-left:0px;opacity:1;}
}
@-moz-keyframes animation2 {
0% {margin-left:185px;}
100% { margin-left:0px;opacity:1;}
}
#flyingmenubt li:hover ul li {
/* css3 animation */
-moz-animation-name: animation2;
-moz-animation-duration: 0.3s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: animation2;
-webkit-animation-duration: 0.3s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

/*-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
-ms-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;*/
}
/* animation delays */
#flyingmenubt li:hover ul li:nth-child(1) {
-moz-animation-delay: 0;
-webkit-animation-delay: 0;
}
#flyingmenubt li:hover ul li:nth-child(2) {
-moz-animation-delay: 0.05s;
-webkit-animation-delay: 0.05s;
}
#flyingmenubt li:hover ul li:nth-child(3) {
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
}
#flyingmenubt li:hover ul li:nth-child(4) {
-moz-animation-delay: 0.15s;
-webkit-animation-delay: 0.15s;
}
#flyingmenubt li:hover ul li:nth-child(5) {
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
}
#flyingmenubt li:hover ul li:nth-child(6) {
-moz-animation-delay: 0.25s;
-webkit-animation-delay: 0.25s;
}
#flyingmenubt li:hover ul li:nth-child(7) {
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
}
#flyingmenubt li:hover ul li:nth-child(8) {
-moz-animation-delay: 0.35s;
-webkit-animation-delay: 0.35s;
}
Şablonumuzu kaydediyoruz ve Yerleşim >> Gadget Ekle >> HTML/JavaScript seçenekleri ile açılan blogger paneline altta yer alan kodlarmızı ekliyoruz..
<ul id="flyingmenubt">
<li><a href="http://eklentileri.blogspot.com/">Ana Sayfa</a></li>
<li><a class="hsubs" href="#">Menu 1</a>
<ul class="subs">
<li><a href="#">Submenu 1</a></li>
<li><a href="#">Submenu 2</a></li>
<li><a href="#">Submenu 3</a></li>
<li><a href="#">Submenu 4</a></li>
<li><a href="#">Submenu 5</a></li>
</ul>
</li>
<li><a class="hsubs" href="http://eklentileri.blogspot.com/">Menu 2</a>
<ul class="subs">
<li><a href="#">Submenu 2-1</a></li>
<li><a href="#">Submenu 2-2</a></li>
<li><a href="#">Submenu 2-3</a></li>
<li><a href="#">Submenu 2-4</a></li>
<li><a href="#">Submenu 2-5</a></li>
<li><a href="#">Submenu 2-6</a></li>
<li><a href="#">Submenu 2-7</a></li>
<li><a href="#">Submenu 2-8</a></li>
</ul>
</li>
<li><a class="hsubs" href="#">Menu 3</a>
<ul class="subs">
<li><a href="#">Submenu 3-1</a></li>
<li><a href="#">Submenu 3-2</a></li>
<li><a href="#">Submenu 3-3</a></li>
<li><a href="#">Submenu 3-4</a></li>
<li><a href="#">Submenu 3-5</a></li>
</ul>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">Menu 6</a></li>
<li><a href="http://eklentileri.blogspot.com/">Blogger Eklenti</a></li>
</ul>
Yukarıdaki kodları kendinize göre düzenleyiniz, daha iyi anlamak için üstte yer alan demo linkinden yararlanabilirsiniz..Son olarak gerekli gadgeti yerleşim kısmından , post yayınlarının üstündeki alana taşıyınki eklenti yukarda gözüksün..


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

Sola Kayma Efektli Blogger Menü Bar , Blogger Menü Bar , Menu Bar , MenuBar , Bar , Blogger Menü Eklentisi , Kayma Efektli Blogger Menü , Açılır Menü , Blogger Açılır Menü




2 Mayıs 2012 Çarşamba

Popüler Yayınlar Eklentisi ( Otomatik Animasyonlu )

Hiç yorum yok :

Blogger Popüler Yayınlar Otomatik Animasyon Eklentisi

Bu eklentimizde , blogunuzda yayınladığınız popüler yayınlarınız animasyonlu şekilde geçiş yapılarak listelenir , klasik popüler yayınlardan sıkıldıyanız işinize yarayacak bir eklenti olduğunu düşünüyorum..

Not : Bu eklentiyi eklemeden önce , Blogunuza popüler yayınlar eklentisini eklediğinizden emin olun , popüler yayınları eklemek için Yerleşim >> Gadget Ekle >> Popüler Yayınlar seçeneğini kullanınız..

Not 2 : Popüler yayınları eklediğinizde , Görüntüleme sınırını 10 yayın yapmanız önerilir , tercihe bağlı..