MiskinBlog - Miskin değilim ben! - 2AdetSlider

ツ Başlangıç

• Anasayfa / baş tacı.

• TA-CH / biz kimiz?

• Defter / anlat derdini.

• Yazar Ol / bize katıl.

ツ Kategoriler

Blogger

taKu Kişisel

mKaya Kişisel

{Mim)

Genel

Grafik

Bedava-Sitem

ツ Popüler Yazılar

Windows Start Orb.

Süper Ötesi 404 Tasarımları

Şekilci Yatay Menü

2 Adet Muhteşem Slider Kodu.

CSS3 Ile Dönen Resimler

ツ Son Yorumlar

Taylan M., 'Şekilci Yatay Menü'ye yazdı,
Güzel olmuşda keşke biraz animation efekleri kullansaydın.mesela 1.5 saniye içinde siyaha dönebilirdi.

mKaya, '2 Adet Slider Kodu'na yazdı,
@Taylan Mandacı, Evet haklısın kodlar için.

Taylan M. '2 Adet Slider Kodu'na yazdı,
Güzel Olmuş eski sitendekide güzelde ancak bunlar portfolye için tam ideal.

OzkanTrk, 'MiskinBlog Açıldı'ya yazdı,
Başarılar :).

pReis, 'MiskinBlog Açıldı'ya yazdı,
Başarılar ;).

Toplam 5 yorum gösteriliyor.

Merhabalar, MiskinBlog açıldı ve sizlerden ricamız sitemizi değerlendirip + ve -'lerimizi bize bildirmeniz (: BS'de ki konumuza gitmek için tıklayın.

2AdetSlider

Muhteşem 2 Adet Slider Kodu

taKu 'Css / Html , Bedava Sitem'e yazdı.

04.01.2015

Merhabalar, bugün siz değerli kullanıcılarımıza açılış olarak güzel 2 adet slider manşet kodu paylaşımı yapmak istiyoruz. TasarimKurdu ve MuradKaya her geçen gün daha da güzel ve kullanışlı kodların paylaşımını yapmaya devam etmektedir. Her neyse fazla uzatmayalım bir an önce Slider Kodlarını sitenize ekleyip güzel bir dizayn kurmayı sağlayın (:.

Etiketler : slider manşet, slider, manşet, chickenblog, tasarımkurdu

✎ Kodlar.

<style type="text/css">  /*  * jQuery FlexSlider v2.0  * http://www.woothemes.com/flexslider/  *  * Copyright 2012 WooThemes  * Free to use under the GPLv2 license.  * http://www.gnu.org/licenses/gpl-2.0.html  *  * Contributing author: Tyler Smith (@mbmufffin)  */  /* Browser Resets */  .flex-container a:active,  .flexslider a:active,  .flex-container a:focus,  .flexslider a:focus{  outline:none;  }  .slides,  .flex-control-nav,  .flex-direction-nav{  margin:0;  padding:0;  list-style:none;  }  /* FlexSlider Necessary Styles  *********************************/  .flexslider{  margin:0;  padding:0;  }  .flexslider .slides > li{  display:none;  -webkit-backface-visibility:hidden;  -moz-backface-visibility:hidden;  -ms-backface-visibility:hidden;  -o-backface-visibility:hidden;  backface-visibility:hidden;  }  /* Hide the slides before the JS is loaded. Avoids image jumping */  .flexslider .slides img{  width:100%;  display:block;  }  .flex-pauseplay span{  text-transform:capitalize;  }  /* Clearfix for the .slides element */  .flexslider a.intro {  bottom:0;  color:rgba(0, 0, 0, 0.1);  font-size:14px;  position:absolute;  right:0;  text-decoration:none;  z-index:99999;  }  .slides:after{  content:".";  display:block;  clear:both;  visibility:hidden;  line-height:0;  height:0;  }  html[xmlns] .slides{  display:block;  }  * html .slides{  height:1%;  }  /* No JavaScript Fallback */  /* If you are not using another script, such as Modernizr, make sure you  * include js that eliminates this class on page load */  .no-js .slides > li:first-child{  display:block;  }  /* FlexSlider Default Theme  *********************************/  .flexslider{  margin:0 0 60px;  background:#fff;  border:4px solid #fff;  position:relative;  -webkit-border-radius:4px;  -moz-border-radius:4px;  border-radius:4px;  -webkit-box-shadow:0 1px 4px rgba(0,0,0,.2);  -moz-box-shadow:0 1px 4px rgba(0,0,0,.2);  box-shadow:0 1px 4px rgba(0,0,0,.2);  zoom:1;  }  .flex-viewport{  max-height:2000px;  -webkit-transition:all 1s ease;  -moz-transition:all 1s ease;  -o-transition:all 1s ease;  transition:all 1s ease;  }  .loading .flex-viewport{  max-height:300px;  }  .flexslider .slides{  zoom:1;  }  .carousel li{  margin-right:5px;  }  /* Direction Nav */  .flexslider li {  border: 0 none !important;  padding: 0 !important;  text-indent: 0 !important;  }  .flex-direction-nav a{  width:30px;  height:30px;  margin:-20px 0 0;  display:block;  background:url(http://project.dimpost.com/flexslider-carousel/images/bg_direction_nav.png) no-repeat 0 0;  position:absolute;  top:50%;  cursor:pointer;  text-indent:-9999px;  opacity:0;  -webkit-transition:all .3s ease;  -moz-transition:all .3s ease;  -o-transition:all .3s ease;  transition:all .3s ease;  }  .flex-direction-nav .flex-next{  background-position:100% 0;  right:-36px;  }  .flex-direction-nav .flex-prev{  left:-36px;  }  .flexslider:hover .flex-next{  opacity:0.8;  right:5px;  }  .flexslider:hover .flex-prev{  opacity:0.8;  left:5px;  }  .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{  opacity:1;  }  .flex-direction-nav .disabled{  opacity:.3!important;  filter:alpha(opacity=30);  cursor:default;  }  /* Control Nav */  .flex-control-nav{  width:100%;  position:absolute;  bottom:-40px;  text-align:center;  }  .flex-control-nav li{  margin:0 6px;  display:inline-block;  zoom:1;  *display:inline;  }  .flex-control-paging li a{  width:11px;  height:11px;  display:block;  background:#666;  background:rgba(0,0,0,0.5);  cursor:pointer;  text-indent:-9999px;  -webkit-border-radius:20px;  -moz-border-radius:20px;  border-radius:20px;  -webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  -moz-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  box-shadow:inset 0 0 3px rgba(0,0,0,0.3);  }  .flex-control-paging li a:hover{  background:#333;  background:rgba(0,0,0,0.7);  }  .flex-control-paging li a.flex-active{  background:#000;  background:rgba(0,0,0,0.9);  cursor:default;  }  .flex-control-thumbs{  margin:5px 0 0;  position:static;  overflow:hidden;  }  .flex-control-thumbs li{  width:25%;  float:left;  margin:0;  }  .flex-control-thumbs img{  width:100%;  display:block;  opacity:.7;  cursor:pointer;  }  .flex-control-thumbs img:hover{  opacity:1;  }  .flex-control-thumbs .active{  opacity:1;  cursor:default;  }  </style> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.js"></script> <script type="text/javascript" src="http://project.dimpost.com/flexslider-carousel/jquery.flexslider-min.js"></script> <script type="text/javascript"> 
 $(document).ready(function(){    
$(window).load(function() { 
  $('.flexslider').flexslider({ 
    animation: "slide", 
    animationLoop: false, 
    itemWidth: 210, 
    itemMargin: 0, 
    minItems: 1, 
    maxItems: 4 
  }); 
}); 
}); 
</script> <div class="flexslider"> <ul class="slides">     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide1.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide4.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide3.jpg" alt="" /></li>     <li><img src="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" _fcksavedurl="http://project.dimpost.com/flexslider-carousel/images/slide2.jpg" alt="" /></li> </ul> </div>

<style type="text/css">  .slider-box {      background: none repeat scroll 0 0 #FAFAFA;      border-radius: 5px 5px 5px 5px;      box-shadow: 0 0 3px #333333;      margin: 0 auto;      width: 675px;     overflow: hidden;  }  #slider-wrapper {      margin: 0 auto;      padding: 10px;  }  #jslider-container {      border: 2px solid #FFFFFF;      max-width: 550px;      position: relative;      text-align: left;      z-index: 90;  }  </style>  <link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>  <div class="slider-box">  <div id="slider-wrapper">  <div id="jslider-container">  <div class="jslider_images">  <ul>      <li><a href="http://dimpost.com" _fcksavedurl="http://dimpost.com">       <img src="http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg" _fcksavedurl="http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg" title="Sunset" alt="" />       </a>A boat with beautiful sunset.</li>      <li><a href="#" _fcksavedurl="#">       <img src="http://2.bp.blogspot.com/--GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg" _fcksavedurl="http://2.bp.blogspot.com/--GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg" title="Rainbow" alt="" />       </a></li>      <li><a href="#" _fcksavedurl="#">       <img src="http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg" _fcksavedurl="http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg" title="True Nature" alt="" />       </a>Tree in field with blue sky.</li>      <li><a href="#" _fcksavedurl="#">       <img src="http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg" _fcksavedurl="http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg" title="Sunrise" alt="" />       </a>Amaizing sunrise moment</li>      <li><a href="#" _fcksavedurl="#">       <img src="http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg" _fcksavedurl="http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg" title="CAR in HDR Nature" alt="" />       </a></li>      <li><a href="#" _fcksavedurl="#">       <img src="http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg" _fcksavedurl="http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg" title="Sunshine" alt="" />       </a></li>  </ul>  </div>  <div class="jslider_thumbs">  <div><a href="#" _fcksavedurl="#" title="Sunset"><img src="http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg" _fcksavedurl="http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg" alt="" /></a>       <a href="#" _fcksavedurl="#" title="Rainbow"><img src="http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg" _fcksavedurl="http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg" alt="" /></a>       <a href="#" _fcksavedurl="#" title="True Nature"><img src="http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg" _fcksavedurl="http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg" alt="" /></a>       <a href="#" _fcksavedurl="#" title="Sunrise"><img src="http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg" _fcksavedurl="http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg" alt="" /></a>       <a href="#" _fcksavedurl="#" title="CAR in HDR Nature"><img src="http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg" _fcksavedurl="http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg" alt="" /></a>       <a href="#" _fcksavedurl="#" title="Sunshine"><img src="http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg" _fcksavedurl="http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg" alt="" /></a></div>  </div>  </div>  </div>  </div>  <script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Daha fazlası yakında.

✎ Diğer yazılar.

MiskinBlog Açıldı....
Merhabalar, 2 Kişi'nin yönettiği blog sitesi MiskinBlog açıldı, konu devamında site hakkında ve yazarlar hakkında bilgiler alabilir ve yorumlarınızı bırakabilirsiniz, Unutmayın yorum bırakmak parayla değil (:

Daha fazlası yakında.

✍ Yazar hakkında.

Yazar taKu hakkında.
Merhabalar ben TasarimKurdu, 7 yıldır blog yazarlığı, Tasarım Kodlama, Çizme, Html, Javascript ve Jquery alanında kendimi geliştirmekteyim.Teknoloji, mobil ve sosyal medya ile ilgileniyorum ve ilgili yazılar paylaşıyorum, profesyonel derecede grafik tasarım ile ilgileniyorum. İNŞALLAH her geçen gün kendimi daha da geliştireceğim...

Daha fazla bilgi al.

Merhabalar, Bir Yorum'dan zarar gelmez ? O halde bu konuyu yorumlamayı unutma (:

Çizen ve Kodlayan mKaya. Designer taKu.
Eğer sitemize yazar olmak isterseniz Sol Menü'den 'Yazar Ol'a tıklayınız. Tüm hakları gizlidir. 2015.

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

Ücretsiz kaydol