x

Blog sitesi olanlar için 3 renkte sayfalandırma kodu hazırladık.. Cok güzel oldu büyük ve şık oldu.. Genelde blog sitesi olanlar sayfalandırması zor oluyor. En iyisi bu sayfalandırma ile hem şık gözükün hemde rengarenk. Benimde bu güne kadar sayfalandırmam yoktu. Linkle yapıyordum ama bi an önce bu kodu kullanmaya başlayacağım. Kodu css ve html olarak ikiye ayırdım Öncelilerde sadece html veriyordum ama birazda siz yorulun zamanım yok css ye ekleyerek idare edin artık : )
Not: 3 Renktedir renklerini ayırarak yapınız...

Ön izlemesi :
 
 

Css Koduna ekleyin : 
<!-- BS-AKTIF.TR.GG KOD BASLANGICI --> 
 
 
body {
margin: 0px;
background-image: url('https://img.webme.com/pic/b/bs-aktif/arkaplan.png');
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18pt;
}
#tasiyici {
width: 590px;
margin: 0 auto;
}
#turuncu {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#turuncu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#turuncu ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#turuncu ul li a {
background-image: url('https://img.webme.com/pic/b/bs-aktif/turuncu.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #d05c03;
}
#turuncu ul li a:hover, .active {
background-position: 0px -50px;
}
#yesil {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#yesil ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#yesil ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#yesil ul li a {
background-image: url('https://img.webme.com/pic/b/bs-aktif/yesil.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #beb404;
}
#yesil ul li a:hover, .active {
background-position: 0px -50px;
}
#pembe {
margin: 20px 0px 0px 0px;
display: inline-table;
}
#pembe ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#pembe ul li {
width: 44px;
height: 50px;
float: left;
text-align: center;
line-height: 45px;
margin: 0px 10px 0px 0px;
color: #ffffff;
text-shadow: 1px 1px #000000;
}
#pembe ul li a {
background-image: url('https://img.webme.com/pic/b/bs-aktif/pembe.png');
display: block;
height: 50px;
text-decoration: none;
color: #ffffff;
text-shadow: 1px 1px #985151;
}
#pembe ul li a:hover, .active {
background-position: 0px -50px;
}
.ok-sol {
background-image: url('https://img.webme.com/pic/b/bs-aktif/ok.png')!important;
}
.ok-sol:hover {
background-position: 0px 0px!important;
}
.ok-sag {
background-image: url('https://img.webme.com/pic/b/bs-aktif/ok.png')!important;
background-position: 0px -50px;
}
.ok-sag :hover {
background-position: 0px 0px!important;
}
 
 

        <!-- BS-AKTIF.TR.GG KOD BITISI -->

Koyacağınız yere ekleyin :
<div id="tasiyici"> 
<div id="turuncu"> 
<ul> 
<li><a class="ok-sol" href="#"></a></li> 
<li><a class="active" href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li>...</li> 
<li><a href="#">25</a></li> 
<li><a class="ok-sag" href="#"></a></li> 
</ul> 
</div> 
<div id="yesil"> 
<ul> 
<li><a class="ok-sol" href="#"></a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a class="active" href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
<li>...</li> 
<li><a href="#">25</a></li> 
<li><a class="ok-sag" href="#"></a></li> 
</ul> 
</div> 
<div id="pembe"> 
<ul> 
<li><a class="ok-sol" href="#"></a></li> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a class="active" href="#">5</a></li> 
<li>...</li> 
<li><a href="#">25</a></li> 
<li><a class="ok-sag" href="#"></a></li> 
</ul> 
</div> 
</div> 

 
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol