5 Eki 2016
11 Nis 2016
36
Yorum
Blogger dinamik resim eklentisi
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...
By Eklentileri.Blogspot
Devamını Oku >>>
36
yorum
Etiketler:
Blogger,
Blogger Eklenti,
Blogger Eklentileri,
blogger eklentisi,
Blogger Widget,
Diğer,
dinamik,
resim
3
Yorum
Multi Color CSS3 Blogger Menü
Multi Color CSS3 Blogger Menü Eklentisi
Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?
Bu eklentimizle , Blogunuzda post üstüne , bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..
Aşağıda yer alan kodu buluyoruz..
]]></b:skin>
Bir satır üstüne , alttaki kodları ekliyoruz..
/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */
.cbdb-menu li {
display: block;
float: left;
line-height: 35px;
list-style:none;
margin: 0 5px;}
.cbdb-menu li a {
/* This generators the gradient on top of the solid color */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image: -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color: #f4f4f4; /* IE */
color: rgba(255, 255, 255, 0.8);
display: block;
font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
outline:none;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); }
.cbdb-menu li a:active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}
/* Dark Text */
.cbdb-menu li a.dark {
color: #333; /* IE */
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
background: #B80202;
border: #B80202 1px solid}
.red:hover, .red:focus{
background-color:#e30606
}
.green {
background: #46c431;
border: #46c431 1px solid}
.green:hover,.green:focus {
background-color:#44e329
}
.yellow {
background: #D9CE1C;
border: #D9CE1C 1px solid}
.yellow:hover,.yellow:focus {
background-color:#eee117}
.cyan {
background: #23c6de;
border: #23c6de 1px solid}
.cyan:hover,.cyan:focus {
background-color:#18d8f4
}
.blue {
background: #3271d9;
border: #3271d9 1px solid}
.blue:hover,.blue:focus {
background-color:#377ef2
}
Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim
<ul class="cbdb-menu"> <li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li> <li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li> <li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li> </ul>
Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın..
<<< Bu Yazı için Arama Sonuçları >>>
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
By Eklentileri.Blogspot
Devamını Oku >>>
3
yorum
Etiketler:
Blogger,
Blogger Eklenti,
Blogger Eklentileri,
blogger eklentisi,
Blogger Widget,
Css3,
menü,
renkli
10 Nis 2016
5
Yorum
Sola Kayma Efektli Açılır Menü Bar
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ü
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ü
By Eklentileri.Blogspot
Devamını Oku >>>
5
yorum
Etiketler:
Blogger,
Blogger Eklenti,
Blogger Eklentileri,
blogger eklentisi,
Blogger Widget,
Css3,
dinamik,
efekt,
menü
8 Ağu 2015
8
Yorum
Blogger Animasyonlu Etiket Eklentisi
Blogger Animasyonlu Etiket Eklentisi
Bu eklentimizde, Blogger blogunuza yer alan etiketlerin üstüne gelindiğinde , Etiketimiz Sağa doğru hareket ediyor...
Demo için BURAYA tıklayın , açılan sayfada sağ taraftaki etiketlerin üstüne gelin.
Blogger Animasyonlu Etiket Eklentisini blogger blogunuza eklemek için aşağıdaki adımı izleyin..
Aşağıdaki kodu blogunuzun şablon kısmında bulun..
</head>
Hemen üstüne aşağıdaki kodları ekleyiniz..
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'> </script> <script type='text/javascript'> var dur = 450; $(document).ready(function() { $('a.linknudge, .Label ul li a').hover(function() { $(this).animate({ paddingLeft: '20px' }, dur); }, function() { $(this).animate({ paddingLeft: 0 }, dur); }); });</script>
Yapmanız gereken bu kadar...
<<< Bu Yazı için Arama Sonuçları >>>
Blogger Animasyonlu Etiket Eklentisi , Blogger Animasyonlu Etiket , Blogger Etiket , Blogger Etiket Eklentisi , Blogger Etiket Ekleme
Blogger Animasyonlu Etiket Eklentisi , Blogger Animasyonlu Etiket , Blogger Etiket , Blogger Etiket Eklentisi , Blogger Etiket Ekleme
By Eklentileri.Blogspot
Devamını Oku >>>
8
yorum
Etiketler:
Blogger,
Blogger Eklenti,
Blogger Eklentileri,
blogger eklentisi,
Blogger Widget,
etiket
Blogger tarafından desteklenmektedir.
Etiketler
404
aşağı
begen
benzer
Blog Ekle
Blogger
Blogger Eklenti
Blogger Eklentileri
blogger eklentisi
blogger ipucu
Blogger Tema
Blogger Temaları
Blogger Template
Blogger Theme
Blogger Widget
bookmark
Buton
Css3
Diğer
dinamik
efekt
etiket
Facebook
facebook eklenti
fare
flash
Jquery
kayan
kayıtlar
konular
kutu
link
loader
menü
navbar
navbar kaldırma
otomatik
pencere
popup
popüler
rastgele
renkli
resim
saat
sayfa
sayfa yükleniyor
sitemap
Slider
Slider Menu
son yorumlar
sosyal eklenti
SSS
Thumbnail
Twitter
twitter eklenti
yayınlar
yazı
yorum
yukarı
zoom