teknoloji haberleri - internet haberleri: renkli

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

14 Aralık 2012 Cuma

Multi Color CSS3 Blogger Menü

Unknown 17:08 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , menü , renkli Hiç yorum yok :

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

DEMO

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

10 Aralık 2012 Pazartesi

Blogger Tema - Sunrise Template

Unknown 16:39 Blogger , Blogger Tema , Blogger Temaları , Blogger Template , Blogger Theme , renkli Hiç yorum yok :

Blogger Tema - Sunrise Theme

Sunrise teması , blogger bloglarınızı renklendirecek bir görünüme sahip , özellikle kişisel bloglarda tercih edilebilir..

Sunrise temasını , Blogger blogunuzda kullanmak için , Aşağıdaki indir butonundan indirebilirsiniz..

DEMO INDIR

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

Blogger Sunrise Theme , Blogger Sunrise Template , Sunrise theme , Sunrise , Blogger Template , Blogger Sunrise Teması , Blogger Sunrise Tema , Blogger Teması , Blogger Temaları , Blogger

19 Kasım 2012 Pazartesi

Yana Esneyen Sosyal Sayfalar Eklentisi

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

Yana Esneyen Sosyal Sayfalar Eklentisi ile blogunuzda , facebook sayfanız , twitter adresiniz ve google+ sayfanıza bu hoş butonlar yardımı ile link verebilir ve ziyaretçilerinizi bu sayfalara yönlendirebilirsiniz..

Bu eklentimizin demosunu görmek için TIKLAYINIZ..

Blogger blogunuzun yönetim paneline girin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodları ekleyiniz..

<style type="text/css"> #buttonbg {width: 260px;margin: 10px 20px;padding: 0;} #buttonbg li {cursor: pointer;height: 48px;position: relative;list-style-type: none; } #buttonbg .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAg8VULcv0bEIzgCqE8MoVCKKW0N9RgvqNF6QO2fyz1GuKGYo2dz4omQv0pi2ELmB9h6mpPUich54D0quMQai1DVyf6lJzADrZxL28laXgda69Lr1m_2j6iAeLs21Ajgdm2QqdB9QL8Os/s1600/blsocial12.png') 0 0 no-repeat; background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block; color: #141414;float: none;height: 48px;line-height: 48px; margin: 5px 0;position: relative;text-align: left;text-indent: 90px; text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5; -webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out; -moz-transition: width .25s ease-in-out, background-color .25s ease-in-out; -o-transition: width .25s ease-in-out, background-color .25s ease-in-out; transition: width .25s ease-in-out, background-color .25s ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; -moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px; box-shadow: rgba(0, 0, 0, .28) 0 2px 3px; text-decoration: none;} #buttonbg span:hover {visibility: hidden;} #buttonbg span {display: block;top: 15px;position: absolute;left: 90px;} #buttonbg .icon {color: #fafafa;overflow: hidden;} #buttonbg .fb {background-color: rgba(45,118,185, .42); background-position: 0 -382px;} #buttonbg .twit {background-color: rgba(0, 161, 223, .42); background-position: 0 -430px;} #buttonbg .google {background-color: rgba(167, 0, 0, .42); background-position: 0 -478px;} #buttonbg .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;} #buttonbg .linked {background-color: rgba(0, 87, 114, .42); background-position: 0 -574px;} #buttonbg .deviant {background-color: rgba(76, 122, 74, .42); background-position: 0 -622px;} #buttonbg .ytube {background-color: rgba(170, 0, 0, .42); background-position: 0 -670px;} #buttonbg .rss {background-color: rgba(255,109, 0, .42); background-position: 0 -718px;} #buttonbg li:hover .icon {width: 250px; } #buttonbg li:hover .icon {background-color: #d91e76; } #buttonbg li:hover .fb {background-color: #2d76b9;background-position: 0 2px;} #buttonbg li:hover .twit {background-color: #00A1DF; background-position: 0 -46px; } #buttonbg li:hover .google {background-color: #A70000;background-position: 0 -94px;} #buttonbg li:hover .pint {background-color: #C00;background-position: 0 -142px; } #buttonbg li:hover .linked {background-color: #005772;background-position: 0 -190px;} #buttonbg li:hover .deviant {background-color: #4C7A4A;background-position: 0 -238px;} #buttonbg li:hover .ytube {background-color: #A00;background-position: 0 -286px; } #buttonbg li:hover .rss {background-color: #EC5601;background-position: 0 -334px; } #buttonbg .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;} </style> 
<ul id="buttonbg"> <li ><a href="Facebook Adresiniz" class="icon fb">Facebook Takip Et >>></a><span>Facebook Takip Et</span></li> <li ><a href="Twitter Adresiniz" class="icon twit" >Twitter Takip Et >>></a><span>Twitter Takip Et</span></li> <li ><a href="Google+ Adresiniz" class="icon google" >Google+ Takip Et >>></a><span>Google+ Takip Et</span></li>
</ul>

Yukarıda kodları eklediyseniz , Yana Esneyen Sosyal Sayfalar Eklentisi blogunuz için hazır durumda , son olarak kodlar içinde geçen kırmızı ve siyah yerleri düzenleyiniz..

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

Yana Esneyen Sosyal Sayfalar Eklentisi , Sosyal Sayfa , Blogger Sosyal Sayfa eklentisi , Sosyal Sayfa Butonları , Facebook buton ekle , Twitter buton ekle , Google+ buton ekle , Blogger widget

17 Kasım 2012 Cumartesi

Blogger Animasyonlu Hareketli Buton Eklentisi

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

Blogger blogunuzda , hareketli butonlar kullanmak istermisiniz ?

Blogunuza bu butonları eklemek için aşağıdaki anlatımı takip ederek , Animasyonlu buton eklentisiniz blogger blogunuzda kullanabilisiniz..

Demo aşağıda...

DEMO

eklentileri.blogspot.com

TIKLA

İNDİR

Alttaki kodu bulunuz..

]]></b:skin>

Bir satır üstüne aşağıdaki kodlarımızı ekleyelim..

.button{
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 1px 0 rgba(255,255,255,0.4);
text-decoration:none !important;
white-space:nowrap;
display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;
background-repeat:no-repeat;
background-position:bottom left;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png');
background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;
-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}
.button:hover{
background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}
.button:active{
bottom:-1px;
}
/* The three buttons sizes */
.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}
/* BlueButton */
.blue.button{
color:#0f4b6d !important;
border:1px solid #84acc3 !important;
background-color: #48b5f2;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover{
background-color:#63c7fe;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover{
background-color:#89d228;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}
.orange.button:hover{
background-color:#ec9732;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
/* Orange Button */
.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover{
background-color:#b6bbc0;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSxedZxr-TvZSkrqyybw_T1ThnSg47_oqiT8JUYGMBNl7KOYpcidSl2PkOhrj-MvaaeIRnwDIt-Y-JdalcjrqNiV0BVjEY_JZuTPbl1MzA_o146rLBj2P4dBcO8-1IUIFIDDOHdeCzh56/s144/button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

Butonları Kullanmak için aşağıdaki kodları kullanıyoruz..

<a class="button big blue" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big orange" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big green" href="LİNK/URL" target="_blank">Buton Yazısı</a>

<a class="button big gray" href="LİNK/URL" target="_blank">Buton Yazısı</a>

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

Blogger Animasyonlu Hareketli Buton Eklentisi , Blogger Animasyonlu Buton Eklentisi , Blogger Hareketli Buton Eklentisi , Blogger Buton Eklentisi , Blogger Buton , Buton , Button , Blogger Button Widget ,Animated CSS Buttons For Blogger , Blogger Animated Buttons

5 Kasım 2012 Pazartesi

Blogger Yağlı Boya Sosyal Medya Butonları Eklentisi

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

Blogger Yağlı Boya Paylaş Butonları Eklentisi Widget ( Zoom özellikli )

Bu eklenti ile , blogger blogunuza yağlı boya tarzında , facebook , twitter , google+ ve rss butonları ekleyebilirsiniz..

Altta yer alan kodu blogunuzda bulunuz..

]]></b:skin>

hemen üstüne , aşağıdaki kodları ekleyiniz..

/* Yağlı boya tarzında sosyal buton eklentisi başlangıç.....eklentileri.blogspot.com  */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan kutucuğa aşağıdaki kodları ekleyiniz..

<ul class="bubblewrap">

<li><a href="http://www.plus.google.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOujWc2UDnF38gnywUJrJwhJsI4bwAbunTqBAr_bTWYpGB8bHovTxAosaH42i6Ctqjq2-ZnTGJmP0niJ5Y8Aqx1CX1iI_BUL2qnl643qrGJWheAFwwBIWVvyxnObQfUm-aGlr5tVH1ft8/s1600/bloggertrix.com-Google-icon.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipukA4QkEF9_GVqD57pgEykXzba4uaOvd6XfDLR26NHkOyXLK4wB_k8LCS_o8NOg9IdRL3es7IdPsBtYJl9MleDEhUJjfGHzuKE1c_D76JzU1qWGKP1i2rC3GsTmmuT2Zz0Fl46_MzRlA/s1600/bloggertrix.com-Facebook-icon.png" title="Add to Facebook" /></a></li>


<li><a href="http://www.twitter/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuGNXe_lmFEpt1Q8LCuQZKiobX-wfcuHeSIqvNS8NEOO4uqbAU6HqK5X_K7uQTBrJrgpmwlseolcGBk1sr4d_J0JSY5trQJr4PbokEYM3RnjA56IbQOkBfwq96wq6gonzYJ_FgpZZ9yM/s1600/bloggertrix.com-Twitter-icon.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiICBEVAaS028PQvuw_7vz89vRKiT07dqqxMw-WsUrZJNU3tpR4LWrQZGST8ClNnexN-Rqm6Y6kRMxeIf98y-TVdrSIAWMP5zgMOvIls_ItUe_xtAPxlQOpx6sCBfqL0MQ57sogI3G07ck/s1600/bloggertrix.com-RSS-icon.png" title="Add RSS Feed" /></a></li>
</ul>

Yukarıdaki kodlar içinde yer alan XXXXX yerlerine , kendi adreslerinizi yazınız..

DEMO

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

Blogger Yağlı Boya Paylaş Butonları Eklentisi , Blogger sosyal medya butonları , Blogger sosyal butonlar , renkli blogger buton , renkli sosyal buton , facebook buton , twitter button , blogger sosya buton ekleme

4 Ekim 2012 Perşembe

Renkli Populer Yayınlar Eklentisi

Unknown 14:51 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , popüler , renkli , yayınlar Hiç yorum yok :

Blogger Renkli Populer Yayınlar Eklentisi

Bu eklentimizle , blogunuzda bulunan populer yayınlar eklentinizi dahada renklendirmeyi anlatacağız..

Renkli popüler yayınlar eklentimiz ile blogunuzu daha çekici bir hale getirebilirsiniz..

Hemen anlatıma geçelim...aşağıdaki kodumuzu buluyoruz..

]]></b:skin>

Hemen üstüne aşağıda yer alan kodlarımızı ekliyoruz..

/*Renkli Populer Yayınlar Eklentisi Baslangıcı http://eklentileri.blogspot.com*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 11px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:30px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:89%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:89%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:89%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:89%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:89%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
/*Renkli Populer Yayınlar Eklentisi Sonu http://eklentileri.blogspot.com*/

Yapmanız gereken sadece bu kadar = ) Bu eklentinin çalışabilmesi için , blogunuza daha önceden popüler yayınlar eklentisini eklemiş olmanız gerekmektedir...Eğer ekli değilse , popüler yayınlar eklentisini eklemeyi unutmayınız...

Bu eklentinin önzilemesini , blogumuzun sağ üst tarafında görebilir yada BURAYA tıklayabilirsiniz..

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

Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar Eklentisi , Blogger Renkli Populer Yayınlar , Renkli Populer Yayınlar Eklentisi Nasıl Eklenir , Renkli Populer Eklentisi , Blogger Populer Yayınlar Eklentisi

30 Eylül 2012 Pazar

Blogger css3 ile Etiketleri özelleştirme eklentisi

Unknown 15:55 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , Css3 , etiket , renkli Hiç yorum yok :

Blogger Etiketleri özelleştirme ( renklendirme ) eklentisi

Bu eklentimizde blogger blogunuzda bulunan etiketleri css3 yardımı ile biraz daha görselleştirmeyi anlatacağız..

Öncelikle blogunuzda etiketler gadgetinin ekli olduğundan emin olun , yoksa eklemek için , Yerleşim >> Gadget Ekle >> Etiketler sekmesinden eklentiyi ekleyin..

Etiketler eklentisini eklerken "Görüntüle" kısmını "BULUT" olarak seçelim..

Şimdi şablon ksımına girip alttaki kodumuzu buluyoruz..

]]></b:skin>

Bu kodumuzun hemen üstüne , aşağıda yer alan kodları ekliyoruz..

.label-size {
    float: left;
    margin: 0 0 7px 20px;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    color: #996633;
    text-shadow: 0px 1px 0px rgba(255,255,255,.4);
    padding: 0.417em 0.417em 0.417em 0.917em;
    border-top: 1px solid #d99d38;
    border-right: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0.25em 0.25em 0;
    -moz-border-radius: 0 0.25em 0.25em 0;
    border-radius: 0 0.25em 0.25em 0;
    background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');
    -webkit-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 0 #faeaba,
        0 1px 1px rgba(0,0,0,.1);
    z-index: 1;
}
 
.label-size:before {
    content: '';
    width: 1.30em;
    height: 1.39em;
    background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');
    position: absolute;
    left: -0.69em;
    top: .2em;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-left: 1px solid #d99d38;
    border-bottom: 1px solid #d99d38;
    -webkit-border-radius: 0 0 0 0.25em;
    -moz-border-radius: 0 0 0 0.25em;
    border-radius: 0 0 0 0.25em;
    z-index: 1;
}
 
.label-size:after {
    content: '';
    width: 0.5em;
    height: 0.5em;
    background: #fff;
    -webkit-border-radius: 4.167em;
    -moz-border-radius: 4.167em;
    border-radius: 4.167em;
    border: 1px solid #d99d38;
    -webkit-box-shadow: 0 1px 0 #faeaba;
    -moz-box-shadow: 0 1px 0 #faeaba;
    box-shadow: 0 1px 0 #faeaba;
    position: absolute;
    top: 0.667em;
    left: -0.083em;
    z-index: 9999;
}
 
#Label1 {
    height: 210px;
}
 
.label-size:hover {
    background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}
 
.label-size:hover:before {
    background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
    border-color: #e1b160;
}

Artık blogger blogunuzda bulunan etiketler daha renkli...

DEMO

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

Blogger css3 etiket , blogger etiketleri özelleştirme , blogger etiket renklendirme , blogger css3 eklentileri , blogger etiket eklentileri

28 Eylül 2012 Cuma

Blogger Renkli Sosyal Medya Eklentisi

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

Blogger Renkli Sosyal Medya Eklentisi

Blogunuzda rengarenk sosyal medya eklentisi kullanmak için , aşağıdaki anlatımları takip ederek , blogger blogunuza ekleyebilirsiniz..

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

<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/chandeepsBlogTips">Rss ile takip edin</a></li>
<li><a class="twitter" href="https://twitter.com/chandeeban">Twitter ile takip edin</a></li>
<li><a class="facebook" href="https://www.facebook.com/blogtipsntricks">Facebook ile takip edin</a></li>
<li><a class="google" href="https://plus.google.com/u/0/b/101110372634917065358/">Google+ ile takip edin</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/blogtipsntricks">LinkedIn ile takip edin</a></li>
<li><a class="youtube" href="http://www.youtube.com/user/chandeep10">YouTube ile takip edin</a></li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/ 
.btnt-chronicl-social {  width: 280px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .youtube { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Youtube-1.png") no-repeat scroll 10px center #C6312B; background-size: 20px;  padding: 17.5px 45px; }
/*]]>*/
</style>

Eklemiş olduğunuz kodlar içindeki , kırmızı ile yazılmış olan adresleri kendi adreslerinizle değiştirin..

DEMO

28 Haziran 2012 Perşembe

Blogger Dikey Navigation Menü Eklentisi

Unknown 14:37 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , link , menü , renkli Hiç yorum yok :

Blogger Dikey Navigation Menü Eklentisi Widgets

Blogger blogunuzda , üstteki resimde gördüğünüz gibi bir menü eklentisi istermisiniz ?

Bu eklentimizi blogunuzda isterseniz kategori olarak , isterseniz farklı yerlere link vermek için kullanabilirsiniz..

Demo için üstteki resime bakabilir , yada BURAYA tıklayabilirsiniz..

Anlatıma geçelim..

Aşağıdaki kodu bulun

]]></b:skin>

hemen üstüne aşağıdaki kodlarımızı ekleyelim..

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaXoLWB5dINZYIhh_hHXirEjNGveLoMPd_MDOdSQBodFhAeTkhqGo5xk-nBZ0OakakwMvFpv3AjlaF2k68xHtdHAEPgJnG1I8vW4Yo6RHy4Od1M29onMxThkQE85mOS3PUvkxEimDF6U/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDaXoLWB5dINZYIhh_hHXirEjNGveLoMPd_MDOdSQBodFhAeTkhqGo5xk-nBZ0OakakwMvFpv3AjlaF2k68xHtdHAEPgJnG1I8vW4Yo6RHy4Od1M29onMxThkQE85mOS3PUvkxEimDF6U/s288/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

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

<div id="menu9"> <ul> <li><a href="#">MENU 1</a></li> 
                      <li><a href="#">MENU 2</a></li> 
                      <li><a href="#">MENU 3</a></li> 
                      <li><a href="#">MENU 4</a></li> 
                      <li><a href="#">MENU 5</a></li> </ul> </div>

Kodlar içinde geçen kırmızı yerlere görünmesini istediğimiz yazıyı , mavi yerlere ise gidilmesi gereken link adresinizi yazınız..

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

Blogger Dikey Navigation Menü Eklentisi , Blogger Dikey Navigation Menü , Blogger Menü Eklentisi , Blogger Menü widget , Blogger için menü

12 Haziran 2012 Salı

Blogger Hareketli Sosyal Medya Butonlar Eklentisi

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

Blogger Hareketli Sosyal Butonlar Eklentisi Widget..

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

DEMO

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

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

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

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

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

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

</style>

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

</div>

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

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

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

12 Nisan 2012 Perşembe

Blogger Renkli Popüler Yayınlar Eklentisi

Unknown 15:20 Blogger , Blogger Eklenti , Blogger Eklentileri , blogger eklentisi , Blogger Widget , popüler , renkli , yayınlar Hiç yorum yok :

Blogger Renkli Popüler Yayınlar Eklentisi

Bu eklentimizde , blogunuzda bulunan popüler yayınlarınız renkleniyor , Popüler yayınlarınıza renk katmak isterseniz bu eklenti tam size göre..

Görsel açıdan oldukça şık olan Blogger Renkli Popüler Yayınlar Eklentisini tavsiye ediyoruz..

Anlatıma geçelim hemen..

Şablona girerek , Widget Şablonlarını Genişlet diyoruz ve Aşağıdaki kodumuzu buluyoruz

/* Variable definitions
   ====================

Bu kodumuzun hemen altına aşağıdaki kodlarımızı ekliyoruz..

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

Şimdi ise bu kodu bulalım.

]]></b:skin>

Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Yukarıdaki işlemleri yaptıysanız eklentimiz şuan için çalışacaktır , ama popüler yayınlarda resim kullanıyorsanız aşağıdaki anlatımıda yapmanızı öneririz , yoksa resimler düzgün görüntülenmeyebilir , resim kullanmıyorsanız üstte anlatılanlar yeterli..

Öncelikle popüler yayınları blogunuza eklediğinizden emin olun , standart olarak popüler yayınlar başlığınız , "Popüler Yayınlar" şeklindedir..Bu yüzden biz popüler yayınlar kelimesini arayacağız , farklı bir isim kullandıysanız siz o ismi aratın..

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>

Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kod arasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..

<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzJ4Tl_L0LIhTzAkjg4QGKemzkYwGTXBmfZD6Oevxc4zcuXl4Tisf5O98VLWu0PG3-DcElR63OPy6hC9WaYfUwqWdoBlOfUrUr5XpkUsQGzGjrbgu9gNnOYgZK2c-MqhLJb6eeqCQqT4/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzJ4Tl_L0LIhTzAkjg4QGKemzkYwGTXBmfZD6Oevxc4zcuXl4Tisf5O98VLWu0PG3-DcElR63OPy6hC9WaYfUwqWdoBlOfUrUr5XpkUsQGzGjrbgu9gNnOYgZK2c-MqhLJb6eeqCQqT4/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>

Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın..DEMO

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

Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi

Kaydol: Kayıtlar ( Atom )

teknoloji haberleri - internet haberleri

Hakkımda

Kişisel Blog

Games

14 Aralık 2012 Cuma

Multi Color CSS3 Blogger Menü

10 Aralık 2012 Pazartesi

Blogger Tema - Sunrise Template

19 Kasım 2012 Pazartesi

Yana Esneyen Sosyal Sayfalar Eklentisi

17 Kasım 2012 Cumartesi

Blogger Animasyonlu Hareketli Buton Eklentisi

5 Kasım 2012 Pazartesi

Blogger Yağlı Boya Sosyal Medya Butonları Eklentisi

4 Ekim 2012 Perşembe

Renkli Populer Yayınlar Eklentisi

30 Eylül 2012 Pazar

Blogger css3 ile Etiketleri özelleştirme eklentisi

28 Eylül 2012 Cuma

Blogger Renkli Sosyal Medya Eklentisi

28 Haziran 2012 Perşembe

Blogger Dikey Navigation Menü Eklentisi

12 Haziran 2012 Salı

Blogger Hareketli Sosyal Medya Butonlar Eklentisi

12 Nisan 2012 Perşembe

Blogger Renkli Popüler Yayınlar Eklentisi

Subscribe

Labels

Follow us on facebook

Blog Archive

Popular Posts

Ads

Recent Posts

Like us

Labels

İletişim Formu