Tekil Mesaj gösterimi
Alt 13 Şubat 2013, 13:18   #1
Zen
Misafir
Kullanıcıların profil bilgileri misafirlere kapatılmıştır.
IF Ticaret Yüzdesi:(%)
Header'a şık bir saat ekleyin.




Temanızın header bölümünde şık bir saat ister misiniz?
Bu uygulama ile foruma görsellik açısından güzel bir görünüm katabilirsiniz. CSS kodlarında değişiklik yaparak istediğiniz görünümü elde edebilirsiniz.

Uygulama için 3 adımlı bir çalışma yapıyoruz.

1-) Temanızın additional.css şablonuna aşağıdaki kodları ekleyin.


Kod:   Kodu kopyalamak için üzerine çift tıklayın!
.header_saat { width:280px; height:100%; float:right; padding-top:23px; } /*** Saat ***/ .clock {width:260px; height:100px; padding:5px; border:1px solid #65A5D1 background:#000 margin-top:3px; font-family: 'Fjalla One',sans-serif; float:right;} #Date { font-family:font-family: 'Fjalla One',sans-serif; font-size:11px; text-align:center; color:#FFF padding-bottom:10px;} .clock ul { width:260px; margin:0 auto; padding:0px; list-style:none; text-align:center; padding-bottom:4px; } .clock ul li { display:inline; font-size:40px; text-align:center; color:#007cdb} #point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:5px; padding-right:5px; color:#FFF} /* Simple Animation */ @-webkit-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff } } @-moz-keyframes mymove { 0% {opacity:1.0; text-shadow:0 0 20px #00c6ff} 50% {opacity:0; text-shadow:none; } 100% {opacity:1.0; text-shadow:0 0 20px #00c6ff } } /*** Saat bölümü sonu ***/



2-) Temanızın header şablonunda aşağıdaki etiketi bulun.


Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<hr /> Hemen altına aşağıdaki kodları ekleyin. <!-- Header Saat --> <div class="widgets"> <div class="clock"> <div id="Date"></div> <ul> <li id="hours"></li> <li id="point">:</li> <li id="min"></li> <li id="point">:</li> <li id="sec"></li> </ul> </div> </div> <!-- /Header Saat -->


3-) Temanızın headinclude şablonunun en altına aşağıdaki javascript kodlarını ekleyin.


Kod:   Kodu kopyalamak için üzerine çift tıklayın!
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" charset="utf-8"></script><script type="text/javascript"> $(document).ready(function() { // Create two variable with the names of the months and days in an array var monthNames = [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haz.", "Tem.", "Ağs.", "Eylül", "Ekim", "Kasım", "Aralık" ]; var dayNames= ["Paz.","P.tesi","Salı","Çarş.","PErş.","Cuma","C.tesi"] // Create a newDate() object var newDate = new Date(); // Extract the current date from Date object newDate.setDate(newDate.getDate()); // Output the day, date, month and year $('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.get****Year()); setInterval( function() { // Create a newDate() object and extract the seconds of the current time on the visitor's var seconds = new Date().getSeconds(); // Add a leading zero to seconds value $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds); },1000); setInterval( function() { // Create a newDate() object and extract the minutes of the current time on the visitor's var minutes = new Date().getMinutes(); // Add a leading zero to the minutes value $("#min").html(( minutes < 10 ? "0" : "" ) + minutes); },1000);



Bu forumdaki linkleri ve resimleri görebilmek için en az 25 mesajınız olması gerekir.


Alıntı

 
Alıntı ile Cevapla

IRCForumlari.NET Reklamlar
sohbet odaları sohbet bizimmekan