Javascript Css stil de─či┼čtirici haz─▒rlamak - SPAKSUÔäó Blog [fdx-switch-link]

Javascript Css stil de─či┼čtirici haz─▒rlamak

Bir ├Ânceki yaz─▒mda size s├Âz verdi─čim gibi beraber javascript yard─▒m─▒ ile css stil de─či┼čtirici haz─▒rlayaca─č─▒z. Ancak e─čer css konusunda bilgi sahibi de─čilseniz l├╝tfen uzman biri yard─▒m─▒ ile haz─▒rlaman─▒z─▒ yap─▒n─▒z. Yapaca─č─▒n─▒z hata sitenizde de─či┼čik bozulmalara neden olabilir. Yaz─▒n─▒n devam─▒nda anlatt─▒─č─▒m css stil de─či┼čtiri haz─▒rlama yabanc─▒ bir siteden T├╝rk├žeye ├ževirilmi┼č halidir.

1. Javascript styleswitcher dosyas─▒n─▒ indirin

Verece─čim bu dosya stil ge├ži┼člerini sa─člaman─▒z i├žin gereken bir js dosyas─▒d─▒r.
─░ndir (styleswitcher.js)

Styleswitcher.JS Kod i├žeri─či

[syntax type=”js”]

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”)) {
a.disabled = true;
if(a.getAttribute(“title”) == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1 && a.getAttribute(“title”) && !a.disabled) return a.getAttribute(“title”);
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName(“link”)[i]); i++) {
if(a.getAttribute(“rel”).indexOf(“style”) != -1
&& a.getAttribute(“rel”).indexOf(“alt”) == -1
&& a.getAttribute(“title”)
) return a.getAttribute(“title”);
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/”;
}

function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(‘;’);
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie(“style”, title, 365);
}

var cookie = readCookie(“style”);
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

[/syntax]

2. <head> tag─▒ aras─▒nda js dosyas─▒n─▒ ├ža─č─▒r─▒n

Stil de─či┼čtiriyi ekleyece─činiz sayfada </head> tag─▒n─▒n hemen ├╝st├╝ne alttaki kodu ekleyin e─čer koddaki src ├ža─č─▒rma k─▒sm─▒ farkl─▒ ise kendi sitenize g├Âre uygun hale getirin:
[syntax type=”html”]<script type=”text/javascript” src=”styleswitcher.js”></script>[/syntax]

3. Yeni bir stil dosyas─▒ olu┼čturun

Bu k─▒s─▒m en ├Ânemli k─▒s─▒md─▒r. Sitenizde bulunan css stil dosyas─▒n─▒n bir kopyas─▒n─▒ olu┼čturarak i├žindeki de─čerleri , renkleri yeni stile g├Âre ayarlay─▒n. E─čer stilinizdeki tan─▒mlamalar di─čer stil ile ba─čda┼čmazsa uyumsuzluklar ortaya ├ž─▒kabilir. Gerekli de─či┼čiklikleri yap─▒ktan sonra dosyan─▒z─▒ “style-mavi.css” ┼čeklinde farl─▒ bir isim ile adland─▒r─▒n ve kaydedin. Bu i┼člemi istedi─činiz kadar stil olu┼čturmak i├žin kullanabilirsiniz.

4. Head b├Âl├╝m├╝nde stillere link verin

Dikkat etmeniz gereken nokta iki ├že┼čit stil dosyas─▒ oldu─čudur. Ana stil ve Alternatif stil. Ana stiliniz teman─▒n ilk stilidir Title yani ba┼čl─▒k de─čeri default’dur.
[syntax type=”html”]<link rel=”stylesheet” type=”text/css” href=”style.css” title=”default” />[/syntax]

Olu┼čturdu─čunuz di─čer stil dosyalar─▒ alternatif stillerdiir. Alttaki kod gibi “Rel” ve “Title” de─čerleri ana stilden farkl─▒d─▒r. Birden fazla alternatif eklemek i├žin alttaki kodlar─▒ tekrarlayabilirsiniz..
[syntax type=”html”]<link rel=”alternate stylesheet” type=”text/css” href=”style-mavi.css” title=”mavi” />[/syntax]

5. CSS stil de─či┼čtiricileri sitenize link olarak ekleyin.

├ťstteki stil dosyalar─▒n─▒ olu┼čturup tan─▒mlad─▒ktan sonra bular─▒ ziyaretcilernizin kullanaca─č─▒ hale getirmek i├žin sitenizde istedi─činiz herhangi bir yerde link olarak ister text format─▒nda isterseniz imaj format─▒n kullan─▒c─▒n─▒za su─▒nabiilirsiniz. Altta belirtti─čim kodda dikkat ├žeken k─▒s─▒m setActiveStyleSheet(ÔÇÖmaviÔÇÖ); olarak belirti─čimiz stil aktifle┼čtirme b├Âl├╝m├╝d├╝r.
[syntax type=”html”]<a href=”/” onclick=”setActiveStyleSheet(‘mavi’); return false;”>Mavi Tema</a>[/syntax]

Ayn─▒ link kodu ile alttakini kullanarakda ziyaret├žinin orjinal stile d├Ânmesi sa─članabilir:
[syntax type=”html”]<a href=”/” onclick=”setActiveStyleSheet(‘default’); return false;”>Orjinal Tema</a>[/syntax]

─░┼čte bukadar stil de─či┼čtiriciniz haz─▒r.

E─čer Css hakk─▒nda bilgi sahibi de─čilseniz l├╝tfen uzman birinin g├Âzetimi ile yap─▒n. Yanl─▒┼č bir ┼čey yapt─▒─č─▒n─▒zda sitenizin yap─▒s─▒n─▒ bozabilirsiniz ve ben kesinlikle bu nedenden ├Ât├╝r├╝ sorumluluk kabul etmem.

Kolay gelsin.

15 yorumlar On Javascript Css stil de─či┼čtirici haz─▒rlamak

  • Elinize sa─čl─▒k .

  • Bilgi i├žin saol

  • Pingback: Fatih Hayrio─člu: not defteri ()

  • Pingback: Javascript Css stil de ()

  • Makale i├žin te┼čekk├╝rler.
    Bir Sorunum var ;
    her┼čeyi dedi─činiz gibi yap─▒yorum index.html i├žine de ekliyorum
    <a href="/" >Mavi Tema</a>

    ama temaya style-mavi.css e ge├žmiyor href=”/” e ne yazmam gerekiyor style-mavi.css yaz─▒yorum direk css dosyas─▒n─▒ a├ž─▒yor ?

  • Yasin bey kodlamada eksi─činiz var.. yukarda verdi─čim kod a┼ča─č─▒daki gibidir stil aktifle┼čtirici bir kodlama mevcut onclick olay─▒nda ;

    <a href="/" onclick="setActiveStyleSheet(ÔÇÖmaviÔÇÖ); return false;">Mavi Tema</a>

  • Safa Bey kodlar─▒ yaz─▒yorum yard─▒mc─▒ olursan─▒z sevinirim.
    <a href="/" rel="nofollow">Mavi Tema</a>
    <a href="/" rel="nofollow">OrjinalTema</a>

  • Yasin hocam yanl─▒┼čm─▒ anlat─▒yorum bilmiyorum ancak verdi─činiz kodlar eksin durumda. 4. numaral─▒ yoruma bak─▒n─▒z. mavi isimli temay─▒ aktifle┼čtiren bir kod eklenmi┼č.. Art─▒ kodlara neden nofollow ekliyorsunuz anlamad─▒m.?

  • Safa bey sizi u─čra┼čt─▒r─▒yorum kusura bakmay─▒n ama 5. yorumda tamamen sayfan─▒n kodlar─▒n─▒ atm─▒┼čt─▒m ve kodlar ├Âyle de─čildi tekrar html tak─▒s─▒ olmadan yolluyorum ; makele deki gibi t├╝m ad─▒mlar─▒ izleyerek yapt─▒m ama sonuca ula┼čamad─▒m e─čer yollad─▒─č─▒m kodlarda bir sorun varsa onu s├Âyler veya da bir html sayfa ├Ârne─či eklerseniz makalenize iyi olur. Te┼čekk├╝rler.

  • Yasin bey kodlar─▒ oldu─ču gibi eklemiyorsunuz. makaledeki kodlara dikkat edin.

  • merhaba kodlar─▒ ayn─▒ ┼čekilde ekledim fakat t─▒klad─▒─č─▒mda css yi de─či┼čtirmiyor ayr─▒ca sayfada javascript hatas─▒ vveriyor sol alt k├Â┼čedeki sembolde.

  • ├ça─čatay

    Te┼čekk├╝r Ederim. S├╝per bir olay. Uzun zamand─▒r akl─▒mda vard─▒ bu olay fakat bir t├╝rl├╝ kodlar─▒ yapamam─▒┼čt─▒m. Sonunda buldum te┼čekk├╝rler :)

  • wordpress temam─▒n header.php dosyas─▒na dedi─činiz kodlar─▒ aynen koydum ( tag─▒n─▒n alt─▒na tabi). Sitede linkler belirdi ancak css de─či┼čikli─či bir t├╝rl├╝ olmuyor. T─▒kl─▒yorum ama tema hala ayn─▒. Nereyi yanl─▒┼č yap─▒yorum acaba?

  • Arkadaslar uygulama ├žal─▒st─▒. Burada dikkat etmeniz gereken
    Mavi Tema
    Orjinal Tema
    kodlar─▒nda bulunan tek t─▒rnak isareti.
    Tek t─▒rnaklar─▒ klavyeden tekrar girin ├žal─▒st─▒─č─▒n─▒ g├Âreceksiniz. Makale i├žin tesekk├╝rler.

  • Arkadaslar kodlardaki tek t─▒rnakalar─▒ klavyeden tekrar girin ├žal─▒sacakt─▒r. Makale i├žin sa─čolun. ─░yi ├žal─▒smalar.

Bi Yan─▒t B─▒rak:

E-posta hesab─▒n─▒z yay─▒nlanmayacak.

┬ę 2007-2017 T├╝m haklar─▒ Spaksu Blog'a aittir.

Kullan─▒m ┼×artlar─▒ yerine getirilmeden hi├žbir ┼čekilde kopyala - yap─▒┼čt─▒r yap─▒lamaz, yaz─▒lar ve bilgiler kullan─▒lamaz.