Header için şık bir saat ekleyin.

YoRuMSuZ

Biz işimize bakalım...
Katılım
7 Hzr 2006
Mesajlar
36,719
Beğeniler
8,981
Takım
GALATASARAY
#1
Temanızın header bölümünde şık bir saat ister misiniz? Öncelikle demo adresimizdeki uygulamayı inceleyin.

http://aksamci.net/forum.php

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:
.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:
    <hr />
Hemen altına aşağıdaki kodları ekleyin.
Kod:
    <!-- 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:
<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.getFullYear());
 
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);
 
setInterval( function() {
    // Create a newDate() object and extract the hours of the current time on the visitor's
    var hours = new Date().getHours();
    // Add a leading zero to the hours value
    $("#hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);    
});
</script>
<link href='http://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css'>
 
Son düzenleme:

Benzer konular

Top