Giriş Yap

**Enes Bayraktar** · (Son Düzenleme: 03-08-2016 Saat: 22:48, Düzenleyen: Hatake.)

Merhaba arkadaşlar temalarda kullandığımız menüler, butonlar, duyuru köşeleri gibi materyalleri koda döktüm belki kullanan olur almak isteyen olur buyursun konuyu büyüteceğim...

1. Materyal (Yukarı Çık Butonu)

Kurulumu basit aşağıdaki yönergeleri izleyerek yapabilirsiniz tema yapanlar zaten biliyorlar. :)

HTML Kodlarımız

Kod:

<div class="d10-up">

    <a href="#" class="d10-uptrigger">

         <i class="ion-ios-arrow-up"></i>

    </a>

</div>

CSS Kodlarımız

Kod:

.d10-up {position:fixed; bottom:10px; right:10px;}



.d10-up a {text-decoration:none; color:#333; border:1px solid #000;  border-radius:200px; width:40px; height:40px; display:inline-block; text-align:center; transition:0.5s ease all;}

.d10-up a i {font-size:1.3em; position:relative; top:9px;}



.d10-up a:hover {transition:0.5s ease all; transform:matrix(0.866,0.5,-0.5,0.866,0,0);}

Jquery Kodlarımız

Kod:

$(".d10-up").hide();

$(document).ready(function(){

  

  //.scroll methodu ile yukarıdan 100px inince yukarı git butonunu göster gizle işlevi

 $(window).scroll(function(){

 if ($(this).scrollTop() > 100) {

 $('.d10-up').fadeIn();

 } else {

 $('.d10-up').fadeOut();

 }

 });

 

 // butona tıklayınca yukarı çıkarma işlevi

 $('.d10-uptrigger').click(function(){

 $('html, body').animate({scrollTop : 0},800);

 return false;

 });

 

});

Headerİnclude Şablonu

Kod:

<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Demo

Kod:

http://codepen.io/coder-rj/pen/WxgLry

Kurulum

HTML Kodlarımızı index header veya footer fark etmez istediğiniz bir kısma yapıştabilirsiniz..
CSS Kodlarımızı global.css dosyasının sonuna yapıştırıyoruz..
Jquery kodlarımızı bir js dosyası oluşturup (hostinger veya herhangi bir yerde) <script> tagları ile çekiyoruz.
Headerİnclude şablonun içine verdigim link ve script kodlarını yapıştırıyoruz..

2. Materyal (Footer)

Kurulumu basit aşağıdaki yönergeleri izleyerek yapabilirsiniz tema yapanlar zaten biliyorlar. :)
Responsive olarak yapılmıştır mobil uyumludur..

HTML Kodlarımız

Kod:

<div class="d10-footer">

  <div class="d10-col-40">

    <h6><i class="ion-ios-grid-view-outline"></i>Hakkımızda</h6>

    <p>lorem ipsum sit amet lorem ipsum d10 sit amet amet sit lorim sum ip amet det</p>

  </div>

  

  <div class="d10-col-30">

    <h6><i class="ion-ios-grid-view-outline"></i>Dost Siteler</h6>

    <ul>

      <li><a href="#"><i class="ion-ios-at"></i><span>Destek.10tr.net</span></a></li>

      <li><a href="#"><i class="ion-ios-at"></i><span>Destek.10tr.net</span></a></li>

      <li><a href="#"><i class="ion-ios-at"></i><span>Destek.10tr.net</span></a></li>

      <li><a href="#"><i class="ion-ios-at"></i><span>Destek.10tr.net</span></a></li>

    </ul>

 </div>

  <div class="d10-col-30">

    <h6><i class="ion-ios-grid-view-outline"></i>Sosyal Ağ</h6>

    <ul>

      <li><a href="#"><i class="ion-ios-at"></i><span>Facebook</span></a></li>

      <li><a href="#"><i class="ion-ios-at"></i><span>Twitter</span></a></li>

      <li><a href="#"><i class="ion-ios-at"></i><span>Youtube</span></a></li>

    </ul>

 </div>

  <div class="d10-bottom"><span>This Footer<i >Coded</i>By Enes Bayraktar<i>- MCTR Türkçe Çeviri</i></span></div>

</div>

CSS Kodlarımız

Kod:

.d10-footer {width:100%; height:auto; background:#232323; display:inline-block;}



.d10-footer .d10-col-40 {width:40%; display:inline-block; float:left;}

.d10-footer .d10-col-30 {width:30%; float:left; display:inline-block;}



.d10-footer .d10-col-30 h6 {color:#1E88E5; font-family:"Raleway"; margin:20px 0px 0px; padding:0px; display:inline-block; font-size:20px;}

.d10-footer .d10-col-30 h6 i {font-size:1.1em; position:relative; display:inline-block; margin-right:5px; top:2px;}



.d10-footer .d10-col-30 ul {list-style:none;}

.d10-footer .d10-col-30 ul li{list-style:none; display:block; margin-top:10px;}



.d10-footer .d10-col-30 ul li a{text-decoration:none; color:#1E88E5; font-family:"Raleway"; font-weight:300; font-size:13.5px; transition:0.5s ease all; display:inline-block;}

.d10-footer .d10-col-30 ul li a:hover {transition:0.5s ease all; margin-left:5px;}



.d10-footer .d10-col-30 ul li a i {display:inline-block; position:relative; margin-right:5px; top:2.5px; font-size:1.4em;}



/* Column 40 */

.d10-footer .d10-col-40 h6 { color:#1E88E5; font-family:"Raleway"; margin:20px 0px 0px 10px; padding:0px; display:inline-block; font-size:20px;}

.d10-footer .d10-col-40 h6 i {font-size:1.1em; position:relative; display:inline-block; margin-right:5px; top:2px;}



.d10-footer .d10-col-40 p {display:block; font-family:"Raleway"; font-size:14.5px; margin-left:40px; color:#1E88E5; margin-right:110px;}



@media only screen and (max-width: 600px) {

  .d10-col-30 {width:100% !important; display:block !important;}

  .d10-col-40 {width:100% !important; display:block !important;}

  .d10-footer .d10-col-30 h6 {color:#1E88E5; font-family:"Raleway"; margin:20px 0px 0px 10px; padding:0px; display:inline-block; font-size:20px;}

}



.d10-bottom {display:inline-block; width:100%; background:#313337; height:40px; text-align:left; line-height:40px; color:#1E88E5; font-family:"Raleway"; font-size:11px;}

.d10-bottom span i {position:relative; display:inline-block; margin:0px 5px 0px 5px;  font-size:10px; color:#fff;}

.d10-bottom span {margin-left:10px; position:relative;}

Headerİnclude Şablonu

Kod:

<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" type="text/css">

Demo

Kod:

http://codepen.io/coder-rj/pen/AXPYGB?editors=1100

Kurulum

HTML Kodlarımızı footer şablonuna yapıştırıyoruz.
CSS Kodlarımızı global.css dosyasının sonuna yapıştırıyoruz..
Headerİnclude şablonun içine verdigim link ve script kodlarını yapıştırıyoruz..

3.Materyal (SplashScreen)

Splashscreen nedir ? ilk ondan bahesedelim istedim splashscreen ilk başta yada sayfa yüklendikten bir süre sonra açılan ekran'dır bu ekrana duyuru larınızı veya mesajlarınızı ekleyebilirsiniz buyrun ben bunu sizler için hazırladım..

HTML Kodumuz

Kod:

<div class="d10-splash">

  <h6>Forum Kuralları</h6>

  <p>'Yeni alından yönetim'ce forum kuralları değişmiştir ve yeni kurallar konmuştur bu kuralları okumak için hemen tıklayın'</p>

  <a href="#" class="closetrigger">Tamam</a>

</div>

CSS Kodumuz

Kod:

.d10-splash {position:fixed; z-index:999999; width:100%; height:100%; background:#f3f3f3; display:block; top:0; left:0; text-align:center;}



.d10-splash h6 {font-size:35px; color:#333; font-family:"Raleway"; padding:0; display:block;}



.d10-splash p {font-size:15px; color:#333; font-family:"Raleway"; display:block; margin:20px 100px 0px 100px;}



.d10-splash a {text-decoration:none; display:inline-block; width:100px; margin-left:-50px;

  height:40px;position:absolute; bottom:50px; background:#E91E63; color:rgba(255,255,255,0.9); line-height:40px; border-radius:3px; font-size:15px; font-family:"Raleway"; transition:0.5s ease all;}



.d10-splash a:hover {box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition:0.5s ease all; background:#EC407A;}

Jquery Kodumuz

Kod:

$(".d10-splash").hide();



function splashscreen(){

  $("body").addClass("splashscreen");

  if($("body").hasClass("splashscreen")){

  $(".d10-splash").fadeIn();

  }else {

    $(".d10-splash").fadeOut();

  }

};

setTimeout(splashscreen, 4500);



$(".closetrigger").click(function(){

  $(".d10-splash").fadeOut();

    $("body").removeClass("splashscreen");

});

HeaderInclude Şablonumuza Eklenecekler

Kod:

<link rel="stylesheet" type="text/css" media="screen" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,300" rel="stylesheet" "type="text/css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

Demo

Kod:

http://codepen.io/coder-rj/pen/YWObxZ

~~Hatake~~ · 03-08-2016 Saat: 17:30

Eline sağlık yararlı paylaşım

**Enes Bayraktar** · (Son Düzenleme: 03-08-2016 Saat: 18:14, Düzenleyen: Enes Bayraktar.)

(03-08-2016 Saat: 17:30)Hatake Nickli Kullanıcıdan Alıntı: Eline sağlık yararlı paylaşım

Teşekkürler, güncellendi footer eklendi..

~~Hatake~~ · 03-08-2016 Saat: 18:10

Güncellendi, eklemek istedikçe bana pm atarsın

**Enes Bayraktar** · 03-08-2016 Saat: 23:08

+UP Güncellendi Splashscreen kodları paylaşıldı (kendi yapımım).. yakında anlatımlar'da gelicek..

Giriş Yap
Kullanıcı Adı:
Şifreniz:	Şifremi Unuttum?
	Beni Hatırla