Dün bulduğum ve siteme yerleştirdiğim güzel bir slider ile karşınızdayım.Ben yapmadım.
Admin KP > Temalar & Şablonlar > Şablonlar > Temanız >
{header} yazısının hemen altına boşluk bırakıp yapıştırın.HTML KODLARI;
Admin KP > Temalar & Şablonlar > Temalar > Temanız > global.css > Gelişmiş düzenleme > En alta yapıştırın bu CSS kodlarını;
Önizleme olarak buraya bakabilirsiniz:
Admin KP > Temalar & Şablonlar > Şablonlar > Temanız >
{header} yazısının hemen altına boşluk bırakıp yapıştırın.HTML KODLARI;
PHP Kod:
<section>
<div id="icon-wrapper">
<a href="map.html">
<div class="icons">
<div class="icon-slide-container">
<img class="slide-icon" alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg">
</div>
</div>
</a>
<a href="kite-map.php">
<div class="icons2">
<div class="icon-slide-container">
<img class="slide-icon" alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/add-beach.jpg">
</div>
</div>
</a>
<a href="location.php">
<div class="icons3">
<div class="icon-slide-container">
<img class="slide-icon" alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-all.jpg">
</div>
</div>
</a>
<a href="feedback.html">
<div class="icons4">
<div class="icon-slide-container">
<img class="slide-icon" alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/feedback.jpg">
</div>
</div>
</a>
</div>
</section>
Admin KP > Temalar & Şablonlar > Temalar > Temanız > global.css > Gelişmiş düzenleme > En alta yapıştırın bu CSS kodlarını;
PHP Kod:
body3{
background:#eeeeee;
}
section{
float: left;
padding-top: 50px;
padding-bottom: 100px;
width: 100%;
padding-left:0;
padding-right:0;
}
#icon-wrapper{
width:100%;
float:left;
height:300px;
}
.icons {
width:25%;
float:left;
position:relative;
}
.icons2 {
width:25%;
float:left;
position:relative;
margin-left:25%;
}
.icons3 {
width:25%;
float:left;
position:relative;
margin-left:50%;
}
.icons4 {
width:25%;
float:left;
position:relative;
margin-left:75%;
}
.icon-slide-container{
height:300px;
overflow:hidden;
text-align: left;
position: absolute;
float: left;
width: 300px;
left: 50%;
margin-left: -150px;
}
.slide-icon{
width:300px;
height:auto;
position:absolute;
margin-top:-300px;
-webkit-transition:.4s ease;
-moz-transition:.4s ease;
-ms-transition:.4s ease;
-o-transition:.4s ease;
transition:.4 ease;
}
.slide-icon:hover{
position:absolute;
margin-top:0;
}
@media only screen and (max-width: 1300px) {
#icon-wrapper{
width:100%;
float:left;
height:170px;
}
.icon-slide-container {
height: 200px;
overflow: hidden;
text-align: left;
position: absolute;
float: left;
width: 200px;
left: 50%;
margin-left: -100px;
}
.slide-icon {
width: 200px;
height: auto;
position: absolute;
margin-top: -200px;
}
}
@media only screen and (max-width: 1000px) {
#home-social-container{
margin-right: 0;
margin-left: 0;
width: 100%;
padding: 0;
float: left;
left: 0;
}
}
@media only screen and (max-width: 840px) {
#icon-wrapper{
width:100%;
float:left;
height:650px;
}
.icon-slide-container {
height: 300px;
overflow: hidden;
text-align: left;
position: absolute;
float: left;
width: 300px;
left: 50%;
margin-left: -150px;
}
.slide-icon {
width: 300px;
height: auto;
position: absolute;
margin-top: -300px;
}
.icons {
width: 50%;
float: left;
position: relative;
}
.icons2 {
width: 50%;
float: left;
position: relative;
margin-left: 50%;
}
.icons3 {
width: 50%;
float: left;
position: relative;
margin-left: 0%;
margin-top: 350px;
}
.icons4 {
width: 50%;
float: left;
position: relative;
margin-left: 50%;
}
}
@media only screen and (max-width: 650px) {
#icon-wrapper {
height: 400px;
}
#section{
width: 90%;
padding-left:5%;
padding-right:5%;
}
.slide-icon {
width: 200px;
height: auto;
position: absolute;
margin-top: -200px;
}
.icon-slide-container {
height: 200px;
width: 200px;
left: 50%;
margin-left: -100px;
}
.icons3 {
width: 50%;
position: relative;
margin-left: 0%;
margin-top: 230px;
}
}
@media only screen and (max-width: 570px) {
#icon-wrapper {
height: 300px;
}
.slide-icon {
width: 150px;
height: auto;
position: absolute;
margin-top: -150px;
}
.icon-slide-container {
height: 150px;
width: 150px;
left: 50%;
margin-left: -75px;
}
.icons3 {
width: 50%;
float: left;
margin-left: 0%;
margin-top: 190px;
}
}
Önizleme olarak buraya bakabilirsiniz:
Kod:
onizle.koddostu.com