teknoloji haberleri - internet haberleri: efekt

efekt 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

17 Aralık 2012 Pazartesi

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

Unknown 17:18 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , dinamik , efekt , menü 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...

DEMO

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ü

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

19 Ekim 2012 Cuma

Blogger Resimlerinize Zoom Efekti Eklentisi

Unknown 16:54 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , efekt , resim , zoom Hiç yorum yok :

Blogger blogunuzda kullandığınız resimlere zoom özelliği eklemek istermisiniz ?

Blogger zoom eklentisi ile , kullanıcılar resimlerin üzerine geldiğinde , resimleriniz belli bir miktarda büyüyerek zoom etkisi gösterir..

Blogger resimlere zoom eklentisini blogger blogunuza eklemek için yapmanız gerekenler aşağıda..

Aşağıda yer alan kodu bulunuz..

]]></b:skin>

Hemen üstüne alttaki kodlarımızı ekleyelim..

/* eklentileri.blogspot.com zoom efekti kod sonu  */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpNpYZUQIV0cqwhtcVaysNFV4ZWfsIBV-ITm3I9aWgh4W0zdrJ_do6uejUL3FQF2PPU6oBIDp7LWFtFXzDApSkSP5Fz1708k6b2Kc7aRP3GyoboY9w4h0LMKS_P0fZUDdShyP1S_uaTq70/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* eklentileri.blogspot.com zoom efekti kod sonu*/
}

Yukarıdaki işlemi yaptıktan sonra , şimdide bu kodumuzu bulalım.

</head>

Bu kodumuzunda hemen üstüne şu kodları ekleyelim..

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

Blogger resimlerinize zoom efekti eklentimiz hazır , nasıl kullanılacağına gelirsek , yazılarınızı yazarken , resimlerinizi alttaki şekilde ekleyeceksiniz..

<ul class="thumb">
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 1" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 2" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 3" alt="" /></a></li>
<li><a href="http://eklentileri.blogspot.com/"><img src="Resim linki 4" alt="" /></a></li>
</ul>

güle güle kullanın =)

DEMO

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

Blogger Resimlerinize Zoom Efekti Eklentisi , Blogger Resimlerinize Zoom Efekti , Blogger Resimlerinize Zoom , Blogger zoom , zoom eklentisi , zoom , blogger resim yakınkaştırma , resim zoom , zoom efekti , zoom eklentisi , zoom widget , blogger photo zoom effect

18 Ekim 2012 Perşembe

Blogger MenuBar eklentisi

Unknown 14:35 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , efekt , menü Hiç yorum yok :

Blogger menü bar eklentisi...

Blogger blogunuz için kullanışlı bir menü eklentisi istermisiniz ? bu eklentimizde , linkin üzerine gelindiğinde açıklama belirtebiliyorsunuz..

Blogger menü bar eklentisini kullanmak için yapmanız gerekenler aşağıda..

Alttaki kodu bulunuz..

]]></b:skin>

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

/* menu kodu eklentileri.blogspot.com */

#menu1 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 20px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 0.8em;
    border:2px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:10px;
}
#menu1 ul li{
    float:left;
}
#menu1 ul li a{
    display:block;
    text-decoration:none;
    background-color:#444;
    padding:5px 10px;
    color:#fff;
    width:140px;
    border-right:1px solid #666;
    border-left:1px solid #000;
}
#menu1 ul li a span{
    display:block;
}
#menu1 ul li a span.title{
    border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
    border-bottom:1px dashed #f0f0f0;
    color:#ef0000;
}
#menu1 ul li a span.text{
    visibility:hidden;
    font-size:12px;
    text-align:right;
}
#menu1 ul li a:hover span.text{
    visibility:visible;
}

Şimdide Yerleşim >> Gadget Ekle >> HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı girelim..
..
tavsiye edilen ; alttaki resimdeki yere ekleyiniz ( BLOG KAYITLARI üstüne )

<div id="menu1">
            <ul>
                <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">ANA SAYFA</span>
                        <span class="text">Home Page</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">Kategoriler</span>
                        <span class="text">Seçenekler</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">LİNK 1</span>
                        <span class="text">Açıklama</span>
                    </a>
                </li>
                <li><a href="">
                        <span class="title">iletişim</span>
                        <span class="text">Bize ulaşın</span>
                    </a>
                </li>
                 <li><a href="http://eklentileri.blogspot.com/">
                        <span class="title">Link 2</span>
                        <span class="text">Açıklama 2</span>
                    </a>
                </li>              
            </ul>
        </div>

yapmanız gerekenler bu kadar , renkli bölümleri kendinize göre düzenleyiniz..

DEMO

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

Blogger MenuBar eklentisi , Blogger MenuBar , Blogger Menü
Bar eklentisi , Blogger menü , blogger menu , menü , menu , blogger menü ekleme , blogger üst menü , blogger widgets

9 Ekim 2012 Salı

Blogger Etiketleriniz Hareketlensin

Unknown 17:22 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , efekt , etiket Hiç yorum yok :

Blogger Etiketleriniz Hareketlensin Eklentisi

Blogger blogunuzda bulunan etiketleri biraz hareketlendirmek istermisiniz ?

Bu eklentimiz ile blogunuzda bulunan etiketlerin üstüne fare ile gelindiğinde , etiketimiz belirli bir açı ile sağa doğru yatmaktadır..

Bu eklentiyi blogger blogunuzda kullanmak için aşağıdaki anlatımları takip ediniz..

Aşağıdaki kodumuzu blogger blogumuzda buluyoruz..

]]></b:skin>

Hemen bir satır üstüne , aşağıda yer alan kodları ekliyoruz..

/*-----Etiketleriniz hareketlensin eklentileri.blogspot.com----*/
.label-size{ 
margin:0 2px 6px 0; 
padding: 3px; 
text-transform: uppercase; 
border: solid 1px #C6C6C6; 
border-radius: 3px; 
float:left; 
text-decoration:none; 
font-size:10px; 
color:#666; 
}

.label-size:hover { 
border:1px solid #6BB5FF; 
text-decoration: none;
-moz-transition: all 0.5s ease-out;  
-o-transition: all 0.5s ease-out;  
-webkit-transition: all 0.5s ease-out;  
-ms-transition: all 0.5s ease-out;  
transition: all 0.5s ease-out; 
-moz-transform: rotate(7deg);  
-o-transform: rotate(7deg);  
-webkit-transform: rotate(7deg);  
-ms-transform: rotate(7deg);  
transform: rotate(7deg);  
filter: progid:DXImageTransform.Microsoft.Matrix( 
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); 
zoom: 1;  
}

.label-size a  { 
text-transform: uppercase; 
float:left; 
text-decoration: none; 
}
.label-size a:hover  { 
text-decoration: none; 
}

Yapmamız gerekenler bu kadar , eklentinin çalışması için blogunuzda etiketler widgetinin ekli olması gerekmektedir..ekli değilse ekleyiniz lütfen..Etiketler eklentisini bulut olarak değiştirmeyi unutmayınız...

DEMO

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

Blogger Etiket özelleştirme , etiket eklentileri , blogger etiket eklentisi , blogger etiket efekti , etiketler , blogger etiketleriniz hareketlensin , blogger label widget

28 Mayıs 2012 Pazartesi

Üzerine Gelince Saydamlaşan Resim Eklentisi

Unknown 13:45 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , efekt , resim Hiç yorum yok :

Üzerine Gelince Saydamlaşan Resim Eklentisi Widget

Bu eklentimizde , konu ve yazılarınızda bulunan bir resmin üzerine gelince , resmin saydamlaşmasını sağlayacağız..

DEMO iÇİN AŞAĞIDAKİ RESMİN ÜZERİNE GELİN..

Blogunuzda ,

]]></b:skin>

kodunu bulun , hemen üstüne aşağıdaki kodları ekleyin..

.blur img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.blur:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

Yukarıdaki işlemi yaptıysanız , Bundan sonra yeni yazılarımıza resim eklerken aşağıdaki şekilde eklemek

<a class="blur"> <img alt="resim" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4OexeyRTQ50abOxesd51qVlTFBaqgy96wauzidCcnJVDl6YwcAFk6vBwv1ienLJx2lgkSYEp0lMOQb-HNEQwX-9HBz975ndG67cd9KnhIVVsPXyxRn2S9rz5ZAvEYuCX98TLtKiFV7nSB/s1600/yorum.png" /></a>

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

Üzerine Gelince Saydamlaşan Resim Eklentisi , Resim eklentisi , Blogger resim effekt eklenti , Blogger resim eklentileri , üzerine gelince sis efekti , Blogger Resim üzerine gelince değişen resim eklentisi

23 Mart 2012 Cuma

Blogger Fare Kar Efekti

Unknown 18:14 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Diğer , efekt , fare Hiç yorum yok :

Blogger Fare Kar Efekti

Bu eklentimizde resimde gördüğünüz gibi, blogunuzda fareyi hareket ettirdikçe kar efektine benzer şekiller farenizin ardından süzülecektir..

Demosunu Görmek için TIKLAYIN

Blogger Fare Kar Efekti için aşağıdaki bloguma ekle butonuna basabilir ve blogunuzda kullanabilirsiniz.

<script type='text/javascript'> // <![CDATA[ var colour="black"; var sparkles=100;  var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var tiny=new Array(); var star=new Array(); var starv=new Array(); var starx=new Array(); var stary=new Array(); var tinyx=new Array(); var tinyy=new Array(); var tinyv=new Array(); window.onload=function() { if (document.getElementById) { var i, rats, rlef, rdow; for (var i=0; i<sparkles; i++) { var rats=createDiv(3, 3); rats.style.visibility="hidden"; document.body.appendChild(tiny[i]=rats); starv[i]=0; tinyv[i]=0; var rats=createDiv(5, 5); rats.style.backgroundColor="transparent"; rats.style.visibility="hidden"; var rlef=createDiv(1, 5); var rdow=createDiv(5, 1); rats.appendChild(rlef); rats.appendChild(rdow); rlef.style.top="3px"; rlef.style.left="0px"; rdow.style.top="0px"; rdow.style.left="3px"; document.body.appendChild(star[i]=rats); } set_width(); sparkle(); }} function sparkle() { var c; if (x!=ox || y!=oy) { ox=x; oy=y; for (c=0; c<sparkles; c++) if (!starv[c]) { star[c].style.left=(starx[c]=x)+"px";  star[c].style.top=(stary[c]=y)+"px"; star[c].style.clip="rect(0px, 5px, 5px, 0px)"; star[c].style.visibility="visible"; starv[c]=50; break; } } for (c=0; c<sparkles; c++) { if (starv[c]) update_star(c); if (tinyv[c]) update_tiny(c); } setTimeout("sparkle()", 40); } function update_star(i) { if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)"; if (starv[i]) { stary[i]+=1+Math.random()*3; if (stary[i]<shigh+sdown) { star[i].style.top=stary[i]+"px"; starx[i]+=(i%5-2)/5; star[i].style.left=starx[i]+"px"; } else { star[i].style.visibility="hidden"; starv[i]=0; return; }  } else { tinyv[i]=50; tiny[i].style.top=(tinyy[i]=stary[i])+"px"; tiny[i].style.left=(tinyx[i]=starx[i])+"px"; tiny[i].style.width="2px"; tiny[i].style.height="2px"; star[i].style.visibility="hidden"; tiny[i].style.visibility="visible" } } function update_tiny(i) { if (--tinyv[i]==25) { tiny[i].style.width="1px"; tiny[i].style.height="1px"; } if (tinyv[i]) { tinyy[i]+=1+Math.random()*3; if (tinyy[i]<shigh+sdown) { tiny[i].style.top=tinyy[i]+"px"; tinyx[i]+=(i%5-2)/5; tiny[i].style.left=tinyx[i]+"px"; } else {   tiny[i].style.visibility="hidden"; tinyv[i]=0; return; } } else tiny[i].style.visibility="hidden"; } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sdown; x=(e)?e.pageX:event.x+sleft; } function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } window.onresize=set_width; function set_width() { if (typeof(self.innerWidth)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height+"px"; div.style.width=width+"px"; div.style.overflow="hidden"; div.style.backgroundColor=colour; return (div); } // ]]> </script>

Kaydol: Kayıtlar ( Atom )

teknoloji haberleri - internet haberleri

Hakkımda

Kişisel Blog

Games

18 Aralık 2012 Salı

Siyah Zoom Efektli Sosyal Butonlar Eklentisi

17 Aralık 2012 Pazartesi

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

28 Kasım 2012 Çarşamba

Blogger Angry Birds Sosyal Paylaşım Eklentisi

19 Kasım 2012 Pazartesi

Yana Esneyen Sosyal Sayfalar Eklentisi

17 Kasım 2012 Cumartesi

Blogger Animasyonlu Hareketli Buton Eklentisi

19 Ekim 2012 Cuma

Blogger Resimlerinize Zoom Efekti Eklentisi

18 Ekim 2012 Perşembe

Blogger MenuBar eklentisi

9 Ekim 2012 Salı

Blogger Etiketleriniz Hareketlensin

28 Mayıs 2012 Pazartesi

Üzerine Gelince Saydamlaşan Resim Eklentisi

23 Mart 2012 Cuma

Blogger Fare Kar Efekti

Subscribe

Labels

Follow us on facebook

Blog Archive

Popular Posts

Ads

Recent Posts

Like us

Labels

İletişim Formu