Yazar |
Mesaj |
-
teknolanya
Bedava-Sitem Bağımlısı
Konum: Anamur
|
16.11.2016, 09:10 (UTC) Mesaj konusu: Sitem İçin Haber Teması Kodlayacak Biri Var mı |
|
|
Ama özgün bir içerik olsun şu an ki temama cidden eski geliyor lütfen yardımcı olun ______________ |
|
↑
|
|
|
-
isacotur
Uzman Üye
Konum: ANKARA
|
16.11.2016, 15:25 (UTC) Mesaj konusu: |
|
|
sitemde resim slayt kodları bölümünde manşet haber kodları var
arama motorunua resim slayt kodları yazınca ilk sırada çıkıyorum ______________ |
|
↑
|
|
|
-
tasarimci-amca2
Uzman Üye
Konum: eskisehir uleyn :)
|
|
↑
|
|
|
-
isacotur
Uzman Üye
Konum: ANKARA
|
24.11.2016, 21:49 (UTC) Mesaj konusu: |
|
|
kodlama bilen varsa arkadaşlar sitemde ana sayfaya haber slayt kodu eklemeyi düşünüyorum haber sitelerindeki gibi, ana sayfada kullanabileceğim 15 sayfası olan bir koda ihtiyacım var ______________ |
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
25.11.2016, 06:31 (UTC) Mesaj konusu: |
|
|
isacotur yazmış: kodlama bilen varsa arkadaşlar sitemde ana sayfaya haber slayt kodu eklemeyi düşünüyorum haber sitelerindeki gibi, ana sayfada kullanabileceğim 15 sayfası olan bir koda ihtiyacım var 15 görseli olan bu şekilde bir slider işinizi görecekse kodlamayı sizinle paylaşabilirim. Bu, oldukça basit bir kodlama olup oldukça da kullanışlıdır, ayrıca içeriğindeki görsel sayısını istediğiniz gibi arttırıp azaltabilir veya üzerinde farklı stil ayarlamaları yapabilirsiniz.
______________ |
|
↑
|
|
|
-
isacotur
Uzman Üye
Konum: ANKARA
|
25.11.2016, 17:24 (UTC) Mesaj konusu: |
|
|
slobada yazmış: isacotur yazmış: kodlama bilen varsa arkadaşlar sitemde ana sayfaya haber slayt kodu eklemeyi düşünüyorum haber sitelerindeki gibi, ana sayfada kullanabileceğim 15 sayfası olan bir koda ihtiyacım var 15 görseli olan bu şekilde bir slider işinizi görecekse kodlamayı sizinle paylaşabilirim. Bu, oldukça basit bir kodlama olup oldukça da kullanışlıdır, ayrıca içeriğindeki görsel sayısını istediğiniz gibi arttırıp azaltabilir veya üzerinde farklı stil ayarlamaları yapabilirsiniz.
evet işimi görür
sitemde Ana sayfada yayınlayacağım genişlik 700px yükseklik 400px düşünüyorum ______________ |
|
↑
|
|
|
-
slobada
Bedava-Sitem Bağımlısı
|
25.11.2016, 19:05 (UTC) Mesaj konusu: |
|
|
Kodlamayı genişlik 700px yükseklik 400px şeklinde ayarladım; görselleri ve linklerini istediğiniz gibi ayarlarsınız. 15 görsel olunca kodlama biraz uzadı fakat bu sizi korkutmasın, inceleyince gayet basit bir kodlama olduğunu göreceksiniz. Sonrasında istediğiniz gibi görsel sayısını artırıp azaltabilir, gerekli gördüğünüz düzenlemeleri yaparsınız. Mesela; eğer alt kısımdaki dot'ların görünürlüğünü artırmak isterseniz; .slide{} bölümüne border-bottom:30px solid rgba(255,255,255,0.5); gibi bir tanımlama ekleyebilirsiniz.
CSS KODU Kod: <style>
/**Genel Yerleşim**/
.slides {
padding: 0;
width: 700px;
height: 400px;
display: block;
margin: 0 auto;
position: relative;
}
/**Seçilebilme Özelliği**/
.slides * {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
/**Slayt Girişleri**/
.slides input { display: none; }
/**Slayt Alanı**/
.slide-container { display: block; }
/**Slayt Bölümü**/
.slide {
top: 0;
opacity: 0;
width: 700px;
height: 400px;
display: block;
position: absolute;
transform: scale(0);
transition: all .7s ease-in-out;
}
/**Slayt İçi Görseller**/
.slide img {
width: 100%;
height: 100%;
}
/**İleri Geri Yönlendirme**/
.nav label {
width: 200px;
height: 100%;
display: none;
position: absolute;
opacity: 0;
z-index: 9;
cursor: pointer;
transition: opacity .2s;
color: #FFF;
font-size: 156pt;
text-align: center;
line-height: 380px;
font-family: "Varela Round", sans-serif;
background-color: rgba(255, 255, 255, .3);
text-shadow: 0px 0px 15px rgb(119, 119, 119);
}
.slide:hover + .nav label { opacity: 0.5; }
.nav label:hover { opacity: 1; }
.nav .next { right: 0; }
input:checked + .slide-container .slide {
opacity: 1;
transform: scale(1);
transition: opacity 1s ease-in-out;
}
input:checked + .slide-container .nav label { display: block; }
/**Slayt Altı Noktalar**/
.nav-dots {
width: 100%;
bottom: 9px;
height: 11px;
display: block;
position: absolute;
text-align: center;
}
.nav-dots .nav-dot {
top: -5px;
width: 11px;
height: 11px;
margin: 0 4px;
position: relative;
border-radius: 100%;
display: inline-block;
background-color: rgba(0, 0, 0, 0.6);
}
.nav-dots .nav-dot:hover {
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
input#img-1:checked ~ .nav-dots label#img-dot-1,
input#img-2:checked ~ .nav-dots label#img-dot-2,
input#img-3:checked ~ .nav-dots label#img-dot-3,
input#img-4:checked ~ .nav-dots label#img-dot-4,
input#img-5:checked ~ .nav-dots label#img-dot-5,
input#img-6:checked ~ .nav-dots label#img-dot-6,
input#img-7:checked ~ .nav-dots label#img-dot-7,
input#img-8:checked ~ .nav-dots label#img-dot-8,
input#img-9:checked ~ .nav-dots label#img-dot-9,
input#img-10:checked ~ .nav-dots label#img-dot-10,
input#img-11:checked ~ .nav-dots label#img-dot-11,
input#img-12:checked ~ .nav-dots label#img-dot-12,
input#img-13:checked ~ .nav-dots label#img-dot-13,
input#img-14:checked ~ .nav-dots label#img-dot-14,
input#img-15:checked ~ .nav-dots label#img-dot-15 {
background: rgba(0, 0, 0, 0.8);
}
</style>
HTML KODU Kod: <ul class="slides">
<input type="radio" name="radio-btn" id="img-1" checked />
<li class="slide-container">
<div class="slide">
<a href="#"><img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" /></a>
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-2" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-2" />
<li class="slide-container">
<div class="slide">
<a href="#"><img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" /></a>
</div>
<div class="nav">
<label for="img-1" class="prev">‹</label>
<label for="img-3" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-3" />
<li class="slide-container">
<div class="slide">
<a href="#"><img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" /></a>
</div>
<div class="nav">
<label for="img-2" class="prev">‹</label>
<label for="img-4" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-4" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-3" class="prev">‹</label>
<label for="img-5" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-5" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-4" class="prev">‹</label>
<label for="img-6" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-6" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-5" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-7" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-6" class="prev">‹</label>
<label for="img-8" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-8" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8504/8365873811_d32571df3d_z.jpg" />
</div>
<div class="nav">
<label for="img-7" class="prev">‹</label>
<label for="img-9" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-9" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8068/8250438572_d1a5917072_z.jpg" />
</div>
<div class="nav">
<label for="img-8" class="prev">‹</label>
<label for="img-10" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-10" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8061/8237246833_54d8fa37f0_z.jpg" />
</div>
<div class="nav">
<label for="img-9" class="prev">‹</label>
<label for="img-11" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-11" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8055/8098750623_66292a35c0_z.jpg" />
</div>
<div class="nav">
<label for="img-10" class="prev">‹</label>
<label for="img-12" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-12" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-11" class="prev">‹</label>
<label for="img-13" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-13" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-12" class="prev">‹</label>
<label for="img-14" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-14" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-13" class="prev">‹</label>
<label for="img-15" class="next">›</label>
</div>
</li>
<input type="radio" name="radio-btn" id="img-15" />
<li class="slide-container">
<div class="slide">
<img src="http://farm9.staticflickr.com/8195/8098750703_797e102da2_z.jpg" />
</div>
<div class="nav">
<label for="img-14" class="prev">‹</label>
<label for="img-1" class="next">›</label>
</div>
</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" id="img-dot-1"></label>
<label for="img-2" class="nav-dot" id="img-dot-2"></label>
<label for="img-3" class="nav-dot" id="img-dot-3"></label>
<label for="img-4" class="nav-dot" id="img-dot-4"></label>
<label for="img-5" class="nav-dot" id="img-dot-5"></label>
<label for="img-6" class="nav-dot" id="img-dot-6"></label>
<label for="img-7" class="nav-dot" id="img-dot-7"></label>
<label for="img-8" class="nav-dot" id="img-dot-8"></label>
<label for="img-9" class="nav-dot" id="img-dot-9"></label>
<label for="img-10" class="nav-dot" id="img-dot-10"></label>
<label for="img-11" class="nav-dot" id="img-dot-11"></label>
<label for="img-12" class="nav-dot" id="img-dot-12"></label>
<label for="img-13" class="nav-dot" id="img-dot-13"></label>
<label for="img-14" class="nav-dot" id="img-dot-14"></label>
<label for="img-15" class="nav-dot" id="img-dot-15"></label>
</li>
</ul><br style="clear:both" /> ______________ |
|
↑
|
|
|
-
teknolanya
Bedava-Sitem Bağımlısı
Konum: Anamur
|
26.11.2016, 10:49 (UTC) Mesaj konusu: Seçtim |
|
|
@tasarimci-amca2
Özelden link atayım size ______________ |
|
↑
|
|
|
-
tasarimci-amca2
Uzman Üye
Konum: eskisehir uleyn :)
|
26.11.2016, 18:41 (UTC) Mesaj konusu: Re: Seçtim |
|
|
teknolanya yazmış: @tasarimci-amca2
Özelden link atayım size
tamamdır kardeşim kusura bakma fırsat bulamadım anca kısmet bu güneymiş kodlamaları zamanında bitirip vericem (net bir zaman veremem fakat 1-2 saate biter tabi bu süre kodlamayla geçmeyecek bazı işlerimde oldugu için senin kodlamayı araya sıkıştırmaya çalışacağım)______________ css tasarım,giriş paneli gibi istekleriniz için bana ulaşın
skype:semihseker26 veya profilime mesaj atmanız yeterlidir...
|
|
↑
|
|
|
-
teknolanya
Bedava-Sitem Bağımlısı
Konum: Anamur
|
26.11.2016, 19:26 (UTC) Mesaj konusu: Adamsın |
|
|
@tasarimci-amca2
Çok sağol valla ______________ |
|
↑
|
|
|
|