Burdasın >> Yazi Slide

empadesign

Yazi Slide

YAZI SLİDESİ:
Geçenlerde bir siteye girdim geziyordum ölesine.Baktım bir yazı slidesi yapılışını göstermiş.Bende yapayım dedim ve yaptım tabi ben bazı değişik özellikler ekledim.Daha da güzel oldu.Şimdi de bunu sizlerle paylaşmak istedim.Daha sonra yeni özelliklerde ekleyebilirim beni takip etmeye devam edin.

| Önizleme Yap |

TASARIM ÜSTÜNE:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script><script type="text/javascript">
    $(document).ready(function(){
    
        $("#listeler div:not(':first')").hide();
        $("#tablar li:first").addClass("aktif");
        
        $("#tablar li").click(function(){
            var tiklanan = $(this).index();
            $("#listeler div").hide();
            $("#tablar li").removeClass("aktif");
            $(this).addClass("aktif");
            $("#listeler div:eq("+tiklanan+")").fadeIn(1100);
        });
        
    });
    </script>
CSS:
body {margin: auto; font: 12px Arial} ul,li,h1,p {padding: 0; margin: 0; list-style-type: none} a {text-decoration: none} :focus {outline: 0} #kutu { padding: 10px; width: 500px; overflow: auto; border-top-right-radius:5px; border-bottom-riht-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #tablar { width: 130px; float: left; border-top-right-radius:5px; border-bottom-riht-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #tablar li a { background-color: #ddd; display: block; padding: 5px; margin-bottom: 5px; font-size: 14px; color: #aaa; font-weight: bold; border-top-left-radius:5px; border-bottom-left-radius:5px; -moz-border-radius-topleft:5px; -moz-border-radius-bottomleft:5px; -webkit-border-radius-topleft:5px; -webkit-border-radius-bottomleft:5px text-shadow: 1px 1px 1px #242424; } #tablar li a:hover, #tablar li.aktif a { background-color: #006599; color: #fff; text-shadow: 1px 1px 1px #242424; } #listeler { float: right; width: 370px; text-shadow: 1px 1px 1px #242424; } #listeler div { background-color: #006599; color: #fff; width: 350px; padding: 5px 10px; height: 113px; line-height: 20px; border-top-right-radius:5px; border-bottom-rihgt-radius:5px; -moz-border-radius-topright:5px; -moz-border-radius-bottomright:5px; -webkit-border-radius-topright:5px; -webkit-border-radius-bottomright:5px } #listeler div h1 { font-size: 18px; color: #006599; text-shadow: 1px 1px 1px #006599; }
HTML: 

<div id="kutu">
<div id="listeler">
<div>
<h1>EmPaDesign</h1>
<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>
</div>
<div>
<h1>EmPaDesign</h1>
<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>
</div>
<div>
<h1>EmPaDesign</h1>
<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>
</div>
<div>
<h1>EmPaDesign</h1>
<p>Buraya Deneme Yazısı Gelicektir, EmPaDesign Deneme Yazısı Deneme Bir İki &Uuml;&ccedil; Deneme </p>
</div>
</div>
<ul id="tablar">
    <li><a href="#">EmPaDesign1</a></li>
    <li><a href="#">EmPaDesign2</a></li>
    <li><a href="#">EmPaDesign3</a></li>
    <li><a href="#">EmPaDesign4</a></li>
</ul>
</div>




Bu sayfa hakkındaki yorumlar:
Yorumu gönderen: samet, 03.12.2014, 12:17 (UTC):
olum msnmi kaldı hala sitene üye olamalrı için msn istiyosun sil o msn yazısını msn yok artık

Yorumu gönderen::16.06.2011, 21:00 (UTC)
08oyun
08oyun
Kapalı

güzel bir kod paylaşım için teşekkürler

Yorumu gönderen::01.06.2011, 19:23 (UTC)
empadesign
empadesign
Kapalı

Kusura Bakmayın Ama Ben Herhangi Bir Siteden İçerik Almışsam Yazarım Fakat Sitenin İsmini Unuttuğum İçin Yazmamışımdır.Ayrıca Düzenleme Yok Dediniz Ben Css3 ile bir Kaç Efekti Kastettim.

Yorumu gönderen: Sorry, 31.05.2011, 13:55 (UTC):
Bu kod Edaca.net e aittir düzenleme yok sadece rengini degiştirip Kodu ayırmışşsın okadar....

Yorumu gönderen::29.05.2011, 17:46 (UTC)
empadesign
empadesign
Kapalı

Arkadaşlar kusura bakmayın düzelttim.

Yorumu gönderen::28.05.2011, 17:31 (UTC)
metin2pvpklavuzu
metin2pvpklavuzu
Kapalı

bide kopyalaya bilsek hahaha

Yorumu gönderen::28.05.2011, 17:01 (UTC)
wwebw
wwebw
Kapalı

helal olsun.süper kod.



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

Giriş Yap

Kullanıcı Adı Şifre

Kayıt Ol!

Kategoriler

Popüler Yazılar

Reklamlar

Bir Tık Birşey Kaybettirmez! TurkeyRank.Com - Pagerank Servisi

Dostlarım

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=