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

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

DEMOINDIR

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

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

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

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

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

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

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

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

Blogger blogunuzda , hareketli butonlar kullanmak istermisiniz ?

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

Demo aşağıda...

DEMO

eklentileri.blogspot.com

TIKLA

İNDİR

Alttaki kodu bulunuz..

]]></b:skin>

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

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

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

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

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

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

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

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

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

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

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

Altta yer alan kodu blogunuzda bulunuz..

]]></b:skin>

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

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

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

<ul class="bubblewrap">

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

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


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

<li><a href="http://feeds2.feedburner.com/XXXXX"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBaXAkRRAqIBNv-_hG6WQmQkbt9VLAMTnrPbo4fCBQT1AC_GJjS25nCC5Mt6zzzlj7TgDFOuaq8bYvjtUl68K4IevOQq-SHlNzvEMo6R2_Dncg0Og0kY_l_QWOQjpDj-vPs-xxM-3DKeU/s1600/bloggertrix.com-RSS-icon.png" title="Add RSS Feed" /></a></li>
</ul>

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

DEMO

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

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

Blogger 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

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

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