Forumlar
Yeni Mesajlar
CerezExtra
EĞLENCE ↓
Şans Kurabiyesi
Renk Falınız
ÇerezRADYO
Sevgiliye Özel
ÇerezDERGİ
Hızlı Okuma Testleri
Pratik Çözümler
Yeniler
Yeni Mesajlar
Yeni ürünler
Yeni kaynaklar
Son Aktiviteler
İndir
En son incelemeler
Dükkan
Giriş
Kayıt
Yeniler
Yeni Mesajlar
Menu
Giriş
Kayıt
Uygulamayı yükle
Yükle
Forumlar
Bilgisayar & Cep & Teknoloji
WebMaster Bölümü
vBulletin
Header için şık bir saat ekleyin.
JavaScript devre dışı bırakıldı. Daha iyi bir deneyim için, devam etmeden önce lütfen tarayıcınızda JavaScript'i etkinleştirin.
You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an
alternative browser
.
Konuya cevap yaz
Mesaj
<blockquote data-quote="YoRuMSuZ" data-source="post: 574616" data-attributes="member: 1"><p>Temanızın header bölümünde şık bir saat ister misiniz? Öncelikle demo adresimizdeki uygulamayı inceleyin.</p><p></p><p><a href="http://aksamci.net/forum.php" target="_blank">http://aksamci.net/forum.php</a></p><p></p><p><img src="http://i.imgur.com/dyM0E2R.gif" alt="" class="fr-fic fr-dii fr-draggable fr-fir" style="" />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.</p><p></p><p><strong>Uygulama için 3 adımlı bir çalışma yapıyoruz. </strong></p><p></p><p><span style="color: #ff0000"><strong>1-) </strong></span>Temanızın <strong>additional.css</strong> şablonuna aşağıdaki kodları ekleyin.</p><p>[CODE].header_saat { width:280px;</p><p> height:100%;</p><p> float:right;</p><p> padding-top:23px;</p><p>}</p><p></p><p>/*** Saat ***/</p><p>.clock {width:260px; height:100px; padding:5px; border:1px solid #65A5D1 background:#000</p><p>margin-top:3px; font-family: 'Fjalla One',sans-serif; float:right;}</p><p></p><p></p><p>#Date { font-family:font-family: 'Fjalla One',sans-serif; font-size:11px; text-align:center; color:#FFF padding-bottom:10px;}</p><p></p><p>.clock ul { width:260px; margin:0 auto; padding:0px; list-style:none; text-align:center; padding-bottom:4px; }</p><p>.clock ul li { display:inline; font-size:40px; text-align:center; color:#007cdb}</p><p></p><p>#point { position:relative; -moz-animation:mymove 1s ease infinite; -webkit-animation:mymove 1s ease infinite; padding-left:5px; padding-right:5px; color:#FFF}</p><p></p><p>/* Simple Animation */</p><p>@-webkit-keyframes mymove </p><p>{</p><p>0% {opacity:1.0; text-shadow:0 0 20px #00c6ff}</p><p>50% {opacity:0; text-shadow:none; }</p><p>100% {opacity:1.0; text-shadow:0 0 20px #00c6ff } </p><p>}</p><p></p><p>@-moz-keyframes mymove </p><p>{</p><p>0% {opacity:1.0; text-shadow:0 0 20px #00c6ff}</p><p>50% {opacity:0; text-shadow:none; }</p><p>100% {opacity:1.0; text-shadow:0 0 20px #00c6ff } </p><p>}</p><p>/*** Saat bölümü sonu ***/[/CODE]</p><p></p><p><span style="color: #ff0000"><strong>2-) </strong></span>Temanızın <strong>header </strong>şablonunda aşağıdaki etiketi bulun.</p><p>[CODE] <hr />[/CODE]</p><p>Hemen altına aşağıdaki kodları ekleyin.</p><p>[CODE] <!-- Header Saat --> <div class="widgets"></p><p> <div class="clock"></p><p> <div id="Date"></div></p><p> <ul></p><p> <li id="hours"></li></p><p> <li id="point">:</li></p><p> <li id="min"></li></p><p> <li id="point">:</li></p><p> <li id="sec"></li></p><p> </ul></p><p> </div></p><p> </div></p><p> <!-- /Header Saat -->[/CODE]</p><p></p><p><span style="color: #ff0000"><strong>3-)</strong></span> Temanızın <strong>headinclude </strong>şablonunun <u>en altına</u> aşağıdaki javascript kodlarını ekleyin.</p><p>[CODE]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" charset="utf-8"></script><script type="text/javascript"></p><p>$(document).ready(function() {</p><p>// Create two variable with the names of the months and days in an array</p><p>var monthNames = [ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haz.", "Tem.", "Ağs.", "Eylül", "Ekim", "Kasım", "Aralık" ]; </p><p>var dayNames= ["Paz.","P.tesi","Salı","Çarş.","PErş.","Cuma","C.tesi"]</p><p> </p><p>// Create a newDate() object</p><p>var newDate = new Date();</p><p>// Extract the current date from Date object</p><p>newDate.setDate(newDate.getDate());</p><p>// Output the day, date, month and year </p><p>$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());</p><p> </p><p>setInterval( function() {</p><p> // Create a newDate() object and extract the seconds of the current time on the visitor's</p><p> var seconds = new Date().getSeconds();</p><p> // Add a leading zero to seconds value</p><p> $("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);</p><p> },1000);</p><p> </p><p>setInterval( function() {</p><p> // Create a newDate() object and extract the minutes of the current time on the visitor's</p><p> var minutes = new Date().getMinutes();</p><p> // Add a leading zero to the minutes value</p><p> $("#min").html(( minutes < 10 ? "0" : "" ) + minutes);</p><p> },1000);</p><p> </p><p>setInterval( function() {</p><p> // Create a newDate() object and extract the hours of the current time on the visitor's</p><p> var hours = new Date().getHours();</p><p> // Add a leading zero to the hours value</p><p> $("#hours").html(( hours < 10 ? "0" : "" ) + hours);</p><p> }, 1000); </p><p>});</p><p></script></p><p><link href='http://fonts.googleapis.com/css?family=Donegal+One' rel='stylesheet' type='text/css'>[/CODE]</p><p></p><p><img src="http://i.imgur.com/ATgnoaQ.png" alt="" class="fr-fic fr-dii fr-draggable " style="" /></p></blockquote><p></p>
[QUOTE="YoRuMSuZ, post: 574616, member: 1"] Temanızın header bölümünde şık bir saat ister misiniz? Öncelikle demo adresimizdeki uygulamayı inceleyin. [url]http://aksamci.net/forum.php[/url] [IMG align="right"]http://i.imgur.com/dyM0E2R.gif[/IMG]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. [B]Uygulama için 3 adımlı bir çalışma yapıyoruz. [/B] [COLOR=#ff0000][B]1-) [/B][/COLOR]Temanızın [B]additional.css[/B] şablonuna aşağıdaki kodları ekleyin. [CODE].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 ***/[/CODE] [COLOR=#ff0000][B]2-) [/B][/COLOR]Temanızın [B]header [/B]şablonunda aşağıdaki etiketi bulun. [CODE] <hr />[/CODE] Hemen altına aşağıdaki kodları ekleyin. [CODE] <!-- 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 -->[/CODE] [COLOR=#ff0000][B]3-)[/B][/COLOR] Temanızın [B]headinclude [/B]şablonunun [U]en altına[/U] aşağıdaki javascript kodlarını ekleyin. [CODE]<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'>[/CODE] [IMG]http://i.imgur.com/ATgnoaQ.png[/IMG] [/QUOTE]
Alıntıları ekle...
İsim
Spam kontrolü
Atatürk'ün doğduğu şehir?
Cevapla
Forumlar
Bilgisayar & Cep & Teknoloji
WebMaster Bölümü
vBulletin
Header için şık bir saat ekleyin.
Top