Renkli kodu bloğa uygulamak için önce temaya eklememiz gereken şeyler var. Temaya ekledikten sonra yazı içerisine kod ekleyerek renkli butona kavuşuyoruz. Yönetim panelinden tema içeriğine (Tema - Html düzenle) ulaşın. Sonra şu kodu ]]></b:skin> kopyalayın ve Ctrl + F tuşlarına basarak temanın içinde arayıp bulun. Bulunca üst satırına aşağıdaki kodları yapıştırın ve temayı kayıt edin. Tabi önce temanın yedeğini almayı unutmayın. Aşağıdaki kodu temaya ekleyip kayıt edip çıkın.
.button, .button:visited {
background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
font-family: calibri;
}
.button:hover {
background-color: #111;
color: #fff;
}
.button:active {
top: 1px;
}
.small.button, .small.button:visited {
font-size: 11px
}
.button, .button:visited,
.medium.button, .medium.button:visited {
font-size: 13px;
font-weight: bold;
line-height: 1;
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}
.medium.button, .medium.button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.large.button, .large.button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.button, .magenta.button:visited {
background-color: #e22092;
}
.pink.button:hover {
background-color: #c81e82;
}
.green.button, .green.button:visited {
background-color: #91bd09;
}
.green.button:hover {
background-color: #749a02;
}
.red.button, .red.button:visited {
background-color: #e62727;
}
.red.button:hover {
background-color: #cf2525;
}
.orange.button, .orange.button:visited {
background-color: #ff5c00;
}
.orange.button:hover {
background-color: #d45500;
}
.blue.button, .blue.button:visited {
background-color: #2981e4;
}
.blue.button:hover {
background-color: #2575cf;
}
.yellow.button, .yellow.button:visited {
background-color: #ffb515;
}
.yellow.button:hover {
background-color: #fc9200;
}
Yazı içerisine eklenecek kodlar ise şöyle;
<center><a href="LİNK BURAYA" target="_blank" rel="nofollow" class="medium button pink" >BURAYA TIKLA</a></center>
Bu adımları uyguladığınız zaman renkli botun oluşacaktır. "Link buraya" yazan yere yönlendireceğiniz adresi yapıştırın. pink yazan rengi de yine ingilizce renk isimleriyle değiştirebilirsiniz. Örneğin blue yazınca mavi renkli buton, green yazınca yeşil renkli, orange yazınca turuncu, red yazınca kırmızı, yellow yazınca sarı renkte buton görünür. Butonu büyütmek için ise "medium" yazan yeri silip "large" yapabilirsiniz.
0 Yorumlar
Bu konudaki görüşlerinizi yazabilirsiniz.