vB 4.x Header için şık bir saat ekleyin.

YoRuMSuZ · 23 Ock 2013

Temanızın header bölümünde şık bir saat ister misiniz? Öncelikle demo adresimizdeki uygulamayı inceleyin.

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="https://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='https://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css'>

vB 4.x Header için şık bir saat ekleyin.

YoRuMSuZ

Biz işimize bakalım...

Benzer konular