renkli etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Multi Color CSS3 Blogger Menü
0
Multi Color CSS3 Blogger Menü Eklentisi
Blogger blogunuzda , rengarenk bir menü kullanmak istermisiniz ?
Bu eklentimizle , Blogunuzda post üstüne , bu renkli menüyü ekleyip , hem görsel açıdan hemde ziyaretçilerinizin yararlanması amaçlı bir menü oluşturabilirsiniz..
Aşağıda yer alan kodu buluyoruz..
]]></b:skin>Bir satır üstüne , alttaki kodları ekliyoruz..
/* CSS3 Multi color blogger menu widget başlangıç kodu eklentileri.blogspot.com */
.cbdb-menu li {
display: block;
float: left;
line-height: 35px;
list-style:none;
margin: 0 5px;}
.cbdb-menu li a {
/* This generators the gradient on top of the solid color */
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgba(255,255,255,.5)),
color-stop(1, rgba(0,0,0,.1))
);
background-image: -moz-linear-gradient(
center top,
rgba(255,255,255,.5) 0%,
rgba(0,0,0,.1) 100%
);
color: #f4f4f4; /* IE */
color: rgba(255, 255, 255, 0.8);
display: block;
font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;
outline:none;
padding: 5px 15px;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65); }
.cbdb-menu li a:active {
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0,rgba(255,255,255,.5)),
color-stop(.1,rgba(255,255,255,.2)),
color-stop(.85, rgba(0,0,0,.2)),
color-stop(100, rgba(0,0,0,.4))
);
background-image: -moz-linear-gradient(
center bottom,
rgba(255,255,255,.5) 0%,
rgba(255,255,255,.2) 10%,
rgba(0,0,0,.2) 85%,
rgba(0,0,0,.4) 100%
);
}
/* Dark Text */
.cbdb-menu li a.dark {
color: #333; /* IE */
color: rgba(0, 0, 0, 0.8);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
background: #B80202;
border: #B80202 1px solid}
.red:hover, .red:focus{
background-color:#e30606
}
.green {
background: #46c431;
border: #46c431 1px solid}
.green:hover,.green:focus {
background-color:#44e329
}
.yellow {
background: #D9CE1C;
border: #D9CE1C 1px solid}
.yellow:hover,.yellow:focus {
background-color:#eee117}
.cyan {
background: #23c6de;
border: #23c6de 1px solid}
.cyan:hover,.cyan:focus {
background-color:#18d8f4
}
.blue {
background: #3271d9;
border: #3271d9 1px solid}
.blue:hover,.blue:focus {
background-color:#377ef2
}
Yukarıdaki işlemi yaptıysanız , şablonunuzu kaydedin ve Yerleşim >> Gadget Ekle >> HTML/JavaScript yolu ile açılan panele aşağıdaki kodlarımızı ekliyelim
<ul class="cbdb-menu">
<li><a href="http://eklentileri.blogspot.com/" class="red">Ana Sayfa</a> </li>
<li><a href="http://eklentileri.blogspot.com/" class="green">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="yellow">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="cyan">Deneme</a></li>
<li><a href="http://eklentileri.blogspot.com/" class="blue">iletişim</a></li>
</ul>
Kod içinde kalın belirtilmiş yerleri kendinize göre düzenleyiniz , son olarak gadgeti, post kısmının üstüne taşıyın ki yukarıda kalsın..
<<< Bu Yazı için Arama Sonuçları >>>
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
Multi Color CSS3 Blogger Menü , Renkli CSS3 Blogger Menü , Blogger Menü , Menü , Blogger Menu Widget , Renkli , CSS3 , Blogger Menu Ekleme
Blogger Tema - Sunrise Template
0
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..
<<< 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
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
0
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/AVvXsEjOyGdQmjP8PKQ54NlnhhxOeMBoH0KXIFUAB39V3dK8PgNG1YwS_qOQ_YAqI405K4YBW4OIcs1gzj-1kUE-b2x9W8sRncfYARkLZ9Pv6oOCvn4lMLbQ2zFrPPQLRGtnft1_FM2rlvXyaME/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
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 Animasyonlu Hareketli Buton Eklentisi
0
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...
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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCpHwQwmFRFOXxDA-7OBFX-u5voF1wuTPQI5QY1is-xarChXxEGHdTwceSAuGdwTCdcYctT4XPV3mLzSqGBT4VVJoM4vOW7tXZmHLja-7kw0nlOL3QMvE7tPGaLdwFiskLNQRPn3SDGrHd/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 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 Sosyal Medya Butonları Eklentisi
0
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/AVvXsEgUVKLYdM8aXJLS4YbbrNZ5DcRQK5eRp0XzBMdo1VzDzEzzaYKYL6bBipKgb_hcCHOMLs4E-5byxQHiie5154l2RkzgzS-mfqmWPGiUeG1rY0sxCNxH2VtTgNvFB9EoN4HgIQ78QgbkVUk/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/AVvXsEjTYF5VW9D5KR1EUSRV8Z2XrdwPAqBAGhrgqY_sJ6TvMebyUiZKygBelmqWzczKDRVFT9Wn1DeEkzX3ximeewDhjUKIOXDvMQC71XS7dm5GveBxrkVBabAS2MTNGwAqLWm6cw9X1n_0RFk/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/AVvXsEiYowB_IuZjfh7Jzcp0VTQWw4Z8NXVyhX4prqzNB1MbmURVQh9UShMppyYYco_HKEEkcGN1nTJq3ie669b0hDHKRXdjDKnDolAb5dHbYeRviuv32I4e3rnWmNLQQyJoeY9vRtkbNlaUH3I/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/AVvXsEiRQbtWJPehL1Vl6yCcWz0GUY7pxyeyE9HrD8EKS19GnAKy_QEwRTZVpFiLkF7MxUE1CDSd2Lk7n6mU-LEnlRwmdJVOiHaMGbqpjhuJ9tCYKflp-vjX4vmK6gDHwQLwRfwCn_DQ8srGYpA/s1600/bloggertrix.com-RSS-icon.png" title="Add RSS Feed" /></a></li>
</ul><<< 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 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
Renkli Populer Yayınlar Eklentisi
0
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 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
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 css3 ile Etiketleri özelleştirme eklentisi
0
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..
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;
}<<< Bu Yazı için Arama Sonuçları >>>
Blogger css3 etiket , blogger etiketleri özelleştirme , blogger etiket renklendirme , blogger css3 eklentileri , blogger etiket eklentileri
Blogger css3 etiket , blogger etiketleri özelleştirme , blogger etiket renklendirme , blogger css3 eklentileri , blogger etiket eklentileri
Blogger Renkli Sosyal Medya Eklentisi
0
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
DEMO
Blogger Dikey Navigation Menü Eklentisi
0
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/AVvXsEj0DUJ6cOtlybOZ9658eEWm9besdNBXJxPoRKMf204AoUIToIlmlnzP4Qm7OSCWwl-y0PGFm_fcv5l0UKbx3Yt3kovlDfaGqX-N4vjs0IwKcUIiF84YKpmok2raA3UA03igqYtoFV-gO8c/s288/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DUJ6cOtlybOZ9658eEWm9besdNBXJxPoRKMf204AoUIToIlmlnzP4Qm7OSCWwl-y0PGFm_fcv5l0UKbx3Yt3kovlDfaGqX-N4vjs0IwKcUIiF84YKpmok2raA3UA03igqYtoFV-gO8c/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ü
Blogger Dikey Navigation Menü Eklentisi , Blogger Dikey Navigation Menü , Blogger Menü Eklentisi , Blogger Menü widget , Blogger için menü
Blogger Hareketli Sosyal Medya Butonlar Eklentisi
0
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..
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/AVvXsEjI3dDS5vYbaOvHAU2D48n0j1k_2J2uz1wgEfcrU5Y3QWLJ7frst3zDMvWJEb8ZHIM9_UcNwEwJAJ852-Sy8ZtVR4XceMLGOiSBln2AXK_i8TT0YU7Y-QA94HJQ7yZsXxqpF31Yt23j7BBH/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
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
Blogger Renkli Popüler Yayınlar Eklentisi
0
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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<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 == "false"'>
<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/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/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/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/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
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
.jpg)
