Nivo slider siteye ekleme


Deprecated: Function create_function() is deprecated in /var/www/vhosts/digitaldunyam.net/coder.digitaldunyam.net/wp-content/plugins/codecolorer/lib/geshi.php on line 4698

Bir önceki yazımda hazırladığım basit css ana sayfa üzerinden devam ediyorum. Yazıyı buradan görebilirsiniz. Önceki tasarıma göre yeni eklenen görseller; site logosu, basit menü ve konumu olan slider.

Başlamadan önce slider eklenmiş hazır tasarıma ve slider dosyalarını alttaki linkten indirebilirsiniz.
[viral-lock][wpdm_file id=1][/viral-lock]

Büyük resim olarak bıraktığım alana slider(otomatik değişen resimler, geçişli resimler) ekleyeceğiz. Bunun için öncelikle sayfamda kullandığım Nivo slider kodlarını nivo.dev7studios.com, dosyalarını(jquery, css) bilgisayarınıza indirmeniz gerekmekte.

İndirdiğiniz anasayfa tasarımının ekran görüntüsü

Dosyaları veya yukarıda paylaştığım bitmiş tasarımı indir diğinizi varsayarak başlamak istiyorum.

Nivo slider’in çalışması için gerekli dosyaları Head etiketi arasına css js dosyaların yerlerini belirterek yapıştırın. Kodlar içinde dikkat edilmesi gereken noktalar; css ve js ek olan dosyaların doğru yolunun verilmesi, jquery.nivo.slider.pack.js dosya ekinin hemen altına koddaki gibi sliderın çalışması için gerekli script dosyalarının hemen altında olması (javascript i başka yere yazıldığın da çalışmıyor! ).

Bir diğer dikkat edilmesi gereken husus, $(‘#buyukresim’).nivoSlider( daha önceki örnekte oluşturduğum #buyukresim id’li sınıfı javascript içinde belirtmem olması. Yukarıda paylaştığım bitmiş olan tasarımı indirip bakarsanız ne göstermek istediğimi daha iyi anlarsınız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    <link href="slider/themes/default/default.css" rel="stylesheet" media="screen" type="text/css" />   <link href="slider/nivo-slider.css" rel="stylesheet" media="screen" type="text/css" />

    <link href="style.css" rel="stylesheet" media="screen" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="slider/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">// <![CDATA[
   $(window).load(function() {
       $('#buyukresim').nivoSlider(
            {
            animSpeed: 500,
            }
            );
   });

// ]]></script>

Sliderın çalışması için gerekli dosyaları ekledikten sonra sıra geldi gösterilecek olan resimlere.

1
2
3
4
5
6
7
8
9
<div class="slider-wrapper theme-default">
<div class="nivoSlider" id="buyukresim">


<img alt="" src="resimler/resim2.jpg" width="960" height="360" />
<img alt="" src="resimler/resim3.jpg" width="960" height="360" />

</div>
</div>

Bir sonraki yazılarda bu ana sayfa tasarım uygulamasının devamında görüşmek üzere…

Hazır basit site tasarımı css ile

El altında bulunması gereken css ile hazırladığım basit anasayfa görünümü. Yalnızca kalıp olarak hazırladığım bu css örneğinde bazen ufak tefek unuttuğumuz kodlar olduğundan dolayı paylaşmak istedim. Sıfırdan web sitesi tasarlayanlar içinde başlangıç kalıbı da yapılabilir.

Fazla irdelemeden başlangıç seviyesindeki Css bilgisiyle yapılan bu örnek sayfanın devamı diğer yazılarımda geleceğini söyleyeyim. Bu tasarımda; logo, üst menü, altında slider veya büyük resim için alan, onun altında orta kısım ve site hakkında bilgiler içeren alt kısım bulunmakta.

Css ve html kısımları ayrı olarak kullanabilirsiniz.

Head alanı içine yazılan Css kodları;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<style>
body
{
margin-top: 0px;
margin-bottom: 0px;
background-color:#CCC;
}

#anagovde
{
margin: auto;
width:960px;
height:1000px;
background-color:#999; 
}

#anagovde #enustkisim
{
width: auto;
height: 80px;
background-color:#9F0;
}

#anagovde #enustkisim #logoalani
{
width:300px;
height:80px;
background-color:#F00;
float:left;
}

#anagovde #enustkisim #menualani
{
width:600px;
height:80px;
background-color:#9C0;
float:right;

}

#anagovde #buyukresim
{
width:960px;
height:360px;
background-color:#69C;

}

#anagovde #ortakisim
{
width:960px;
height:340px;
background-color:#FF0;
}

#anagovde #enaltkisim
{
width:960px;
height:220px;
background-color:#930;
}

</style>

Body alanına içine yazılan Html kodları;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="anagovde">

<div id="enustkisim">
<div id="logoalani"><h2 align="center">Coder.digitaldunyam.net
</h2>
</div>
<div id="menualani">Menüler buraya | Anasayfa | Hakkında | Vs.</div>
</div>

<div id="buyukresim">Büyük resim alanı
  </div>

<div id="ortakisim">Orta kısım
  </div>

<div id="enaltkisim">En alt kısım</div>


</div>

Css renk bazında transparan alan

Başlık biraz harbiden karışık oldu. Neyse ki içerik ve etiketlerden dolayı bu yazıyı buldunuz. Bu laubali girişten sonra konuyu açmak, geliştirmek ve sonlandırmak istiyorum. Resimdeki gibi sayfalarımızda div tag’ı ile açtığımız bir alanı transparan göstermek isteyebiliriz. Bunun için .png transparan resmi ile yapabilmekteyiz. Ama bazen resim yetmeye bilir. Css’in yeni teknolojisinde .png lerle uğraşmadan renk bazında transparan değeri verilebilir.

Bu şekilde background-color: rgb(255,51,0); renklendirdiğimiz bir div tagini alttaki kod gibi transparan değeri ekleyerek, opacity ile uğraşmadan arka planı gözüken şeffaf alan yapabiliriz.

1
2
3
4
5
6
7
8
9
10
11
.resimdekidiv {
width:300px;
height:200px;
border-bottom-color:#0C3;
background-color: rgba(255,51,0,0.5);
color:#FFF;
border-color:rgb(153,0,255);
border-width:3px;
border-style:solid;

}

Kodlar transparan resimdekidiv class’ının kodları.

Css ile linklere ikon resim ekleme

Bazen sitemizdeki bağlantılara daha fazla görsellik katmak isteye biliriz. Css ile halledebileceğimiz senaryo da bağlantının uzantısına göre renklendirip sağına resim ikon ekleye bilmekteyiz. İsteyen alttaki kodlarla sitesindeki tüm linkleri tek tek stil ekleyebilir.

Suffix selectors anlamında kullanılan uzantı seçici senaryosunu tam açıklamak gerekirse; sitenizde .psp, .exe, .rar vb. gibi dosya paylaşım linkleri olduğunu düşünün. Bu linkleri ziyaretçiye daha hoş göstermek için eklediğimiz link uzantısına göre linki renklendirip minik ikon resmi ekleyebiliriz.

Kodu kopyala yapıştır yaparsanız tam olarak çalışmayacaktır. background:url(winraricon.png) css dosyasının aynı dizininde olduğu için resimdeki gibi sorunsuzca çalıştı.

1
2
3
4
5
6
a[href$=".rar"]{
    background:url(winraricon.png) no-repeat right center;
    color:#C00;
    padding-right:20px;
   
}

Burada dikkat ederseniz olay [href$=”.rar”] kodunda cereyan etmekte. Burada .rar uzantısı yerine veya ayrı bir link için css tanımladığınızda istediğiniz uzantıyı yazarak özel uzantı seçici oluşturabilirsiniz. Diğer dikkat edilmesi gereken nokta, seçtiğiniz resim boyutuna göre padding-right değerini ayarlamak oluyor.

Jquery scrollbar yapımı

Halk dili ile sağ sürükleme çubuğu olarak da geçen, demosunu bu adresten bulabileceğiniz jquery scrollbar web siteleri için olmazsa olmazlardandır. jscrollpane.kelvinluck.com adresinden de ulaşabileceğiniz Jquery scrollbar farklı türlerine de rastlayabilirsiniz.(inceledim hepsi birbirine benzer şekilde oluşturulmuş).

Gerekli stil ve jquery referans dosyalarını buradan indirerek operasyona başlayabiliriz. Bu klasörleri indirdikten sonra head etiketleri arasına sürükleyin. Uygulamayı Asp.net(php vs. fark etmez benzer şekilde uygularsanız bu scrollbar zamazingosu her yerde çalışır) ile yaptığımı hatırlatarak gerekli referansları ve javascript kodları nereye ekleneceğini alt tarafta bulabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
   
   
    <link href="jquery.jscrollpane.css" rel="stylesheet" type="text/css" />
        <style type="text/css" id="page-css">
            .scroll-pane
            {
                width: 100%; /* Genişlik buradan */
                height: 400px; /* Yüksekliği, metin vs. içeriğinin yüksekliğine göre ayarlamalısnız  */
                overflow: auto;
            }
            .horizontal-only
            {
                height: auto;
                max-height: 200px;
            }
            </style>


    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="jquery.mousewheel.js" type="text/javascript"></script>
    <script src="jquery.jscrollpane.min.js" type="text/javascript"></script>
               
         
        <script type="text/javascript" id="sourcecode">
            $(function () {
                $('.scroll-pane').jScrollPane();
            });
        </script>
</asp:Content>

head aralığına yukarıdaki gibi gereken javascript ve css kodlarını da ekleyerek, referans edilen 4 dosyayı(1 css 3 js) da ekleyip scrollbar için gereken işlemleri tamamlamış olursunuz. Gereken bir kaç açıklamayı kod içinde bulabilirsiniz. Rengini jquery.jscrollpane.css dosyasından değiştirebilirsiniz.

Ardından scrollbar içine koyacağınız metin, görsel, form vs. ilgili class içine almak kalıyor. Alltaki kısımda ne demek istediğimi anlayabilirsiniz;

1
 <div class="scroll-pane"> metin görsel form vs içeriği buraya giriyoruz....</div>

Bu scrollbar sayesinde uzunca yazıları, formları yüksekliği belli site içinde konumlandırmanıza yardımcı oluyor.

Css ile büyük küçük harf

Stil dosyaları yardımı ile websitendeki paragraftaki veya ilgili etiketin içindeki yazıları; baş harflerini büyük, tüm harflerini küçük veya tüm harfleri otomatik büyük göstere biliriz.

Sayfamızdaki harici veya dahili css içindeki paragraf

1
<p>...</p>

etiketleri arasındaki tüm harfleri büyük yapmak için;

1
2
3
4
p
{
text-transform: uppercase
}

tüm harfleri küçük yapmak için;

1
2
3
4
p
{
text-transform: lowercase
}

baş harfi büyük diğeri küçük olmasını istiyorsak;

1
2
3
4
p
{
text-transform: capitalize
}

Benzer şekildeki uygulamalarda; uppercase, lowercase, capitalize kullanarak gerekeni yaptık.