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ı