Menu

Blogger CSS3 Demo Buttonları 4 Adet

Blogger CSS3 demo buttonlarını demo düğmesini göstermek istediğiniz yazılarınıza ekleyerek sayfalarınıza canlılık katarsınız.Örneğin bir kod yayımladınız kodun demosunu göstermek isterseniz aşağıdaki kodlardan birini sitenize eklemeniz yeterlidir.Veya bir tema yayımladınız temanın demosunu veya indirme adresini blogger css3 buttonlarına ekleyebilirsiniz.

Blogger CSS3 Demo Buttonları 4 Adet

Blogger Css Demo Buttonları Ekleme Adımları

Sitenize Reddit düğmesi eklemek için aşağıdaki adımları izleyiniz

1.Adım

İlk önce Blogger.com giriş yapınız sonra Şablon/ HTML Düzenle adımlarını takip ediniz.

2.Adım

Ctrl + F yardımı ile ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki verdiğim kodları ekleyin.

Sitil 1:

Blogger CSS3 Demo Buttonları 4 Adet


/*--- Turuncu çerçeve seomektebi.com--- */
.seomektebi {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:0px 5px 0px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:#AA80FE; repeat-x scroll 0 0 #24006B;
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.seomektebi {
background-position: center;
background: #24006B;
font-size: 15px;
border: 1px dashed #111;
box-shadow: 0 0 0 4px #f6701d, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
text-align:center;
width:150px;
}
.seomektebi:hover {
background-color:#AA80FE;
}
.seomektebi:active {
background-color:#B25900;
}
.seomektebi:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
border-radius:5px 0px 5px 0px;
filter:alpha(opacity=10); /* For IE8 and earlier */
left: 0;-webkit-transition: .2s ease-in;
-moz-transition: .2s ease-in;
-o-transition: .2s ease-in;
transition: .2s ease-in;
}
Sitil 2:

Blogger CSS3 Demo Buttonları 4 Adet


/*--- Kırmızı seomektebi.com--- */
.seomektebi{
cursor:pointer;
font-weight:bold;
line-height:1;
ole;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
-moz-border-radius:5px 5px 5px 5px;
-webkit-bor-dius:5px 5px 5px 5px;
cursor:pointer;border-radius:5px 5px 5px 5px;
color:#Fff;-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:#B20000; repeat-x scroll 0 0 #222222;
border-:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
}
.seomektebi:hover{
background:#000000;
font:bold 17px sans-serif;
border:3px #BFE3FE;
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
}
Sitil 3:

Blogger CSS3 Demo Buttonları 4 Adet



/*---Turuncu seomektebi.com--- */
.seomektebi{
background:#EB7F17;
text-align:center;
cursor:pointer;
color:#fff;
margin:8px 0;
border:none;
padding:8px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 17px sans-serif;
}
.seomektebi:hover{
background:#FFB93C;
}
.seomektebi a {
color:#fff;
text-decoration:none;
}
.seomektebi a:hover {
color:#fff;
text-decoration:none;
}

Sitil 4:

Blogger CSS3 Demo Buttonları 4 Adet


/*--- Kahvererengi çerçeve seomektebi.com--- */
.seomektebi {
border-bottom: #B24700 5px solid;
border-left: #B24700 5px solid;
padding-bottom: 6px; padding-left: 5px;
padding-right: 6px;
border-top: #B24700 5px solid;
border-right: #B24700 5px solid;
padding-top: 6px;
border-radius: 5px;
width: 80px;
-moz-border-radius: 5px;
}

Blogger Css Demo Buttonları Nasıl kullanılacak

Bu butonları kullanmak içim HTML bölümüne gelerek aşağıda kullanmak istediğimiz renkteki butonu seçerek HTML bölümüne ekleyiniz,url adresi yazan yere kendi adınızı veya link vermek isteyeceğiniz adresi ekleyiniz.Buton Yazısı olan yere bağlantı adresinizi yazınız.

<div class="seomektebi" href="url adresi" target="_blank">Buton Yazısı</div>
Sonraki Yazılar
« Prev Post
Önceki Yazılar
Next Post »

Henüz Yorum Yapılmamış " Blogger CSS3 Demo Buttonları 4 Adet "

Önerilen Yazı
×