Změna písma v celém blogu
Chcete mít v celém blogu stajné písmo (+ velikost, barvu atd. ) ?
body { font-family: Verdana;
font-color: #000000;
font-style: italic;
font-weight: bold;
font-size: 14px; }
Vysvětlivky:
Verdana -je druh písma, který si můžete změnit podle sebe.
Tip: Můžete si třeba vyhledat nějaké písmo ve Wordu a potom jen dopsat jeho název.
#000000 -je barva písma.
italic -písmo bude kurzivé
Tip: Pokud nechcete aby písmo bylo kurzivé ale normální, tak změňte italic na normal.
bold -znamená, že písmo bude tučné.
Tip: Místo bold můžete taky zadat normal (písmo bude normální) nebo lighter (písmo bude světlejší).
14 -je velikost písma.
Chcete, aby v blogu bylo stajné písmo bez velikosta, barvy atd. ?
body { font-family: Verdana; }
Obarvení kategorií
Jak obarvit kategorie.
Obarvení kategorii.
a { color: barva; }
Barva navštívených kategorií.
a:visited { color: barva; text-decoration: none; }
none- kategorie nebudou podtržené.
Barva kategorií, když po nich přejíždíte.
a:hover { color: barva; text-decoration: none;}
Tip: můžete i připojit třeba pozadí, orámování a různý.
Barva kategorie, ve které se zrovna nacházíte.
.kategorie .zvoleno, .kategorie .zvoleno:visited {
color: barva;}
Zarovnání
Kategorie
.sloupek {text-align: left;}
left- zarovnání doleva
right- zarovnání doprava
center- zarovnání doprostřed
Logo
Logo doprava
.hlavicka { margin:2em 200px 2em 20px; padding:0; border:none; text-align:right; }
.logo { display:block; float:none; margin:0 auto; }
hlavicka { margin:2em 200px 2em 20px; padding:0; border:none; text-align:left; }
.logo { display:block; float:none; margin:0 auto; }
.logo { display:block; float:none; margin:0 auto; }
Mažu, mažeš, maže
kategorii nezařazeno:
.nezarazeno { display: none; }
logo:
.logo { display: none; }
archív:
.archiv {display: none; }
rss:
.rss {display: none; }
kalendář:
.kalendar { display: none; }
název blogu:
.nazevblogu { display: none; }
popis blogu:
.popisblogu { display: none; }
smazání lišty seznamu
#SZNHLAVICKA {visibility: hidden;}
Kolem obrázků nebudou rámečky
Obrázky fung.
jako odkaz bez rámečků
Celý blog bez rámečků
Rozluštěmí šablony
body { background-color: doplň barvu;color: black; } = barva pozadí blogu; anglicky napsaná barva označuje barvu písma příspěvků, barvu názvu blogu a popisu blogu a také barvu nadpisů v html sloupku
.sloupek { =html sloupek
top: 72 px; = vzdálenost od horního okraje
left: 11px; = vzdálenost od levého okraje
margin-left: 0px;
color: doplň barvu; =barva nadpisů, ohraničení ve sloupku
border: 0px outset white; =po vložení tohoto kódu bude sloupek bez ohraničení (bez rámečku)
}
.prispevky {
margin-left: 193px; =vzdálenost zleva
margin-right: 3px; = vzdálenost zprava
background-color: doplň barvu; = pokud v css použiješ tento kódík, bude pod články pozadí uvedené barvy
}
.prispevek {
border: 1px solid; =styl a šířka rámečku kolem příspěvků
border-color: doplň barvu; =barva rámečku
}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok, {
border: 1px solid; =rámečky
margin: 1px;
background-color: doplň barvu; =barva sloupečku
}
.kategorie-titulek { =po
kliknutí na určitou kategorii se vypíší články s kategorie a nad nimi
se objeví název kategorie, tímto nastavíš jak bude vypadat:
background-color: doplň barvu; =barva pozadí nápisu
color: white; =barva nápisu
}
.prispevek h2 { =velikost a barva nadpisu příspěvku (velikosti jsou h1,h2 atd.)
color: doplň barvu; =barva nadpisu
}
Klik
function helloWorld()
{
alert("Ahojky! Jak se máš?")
}
</SCRIPT>
<FORM>
<INPUT TYPE=button NAME="clik me" VALUE=" !Klikni sem! " onClick="helloWorld();">
</FORM>
Místo zeleného textu dej svůj text.
Tohle vznikne:
Jezdící texty
<
<
<
<
<
n=
Základní CCS šablona
Často to trvá i několik dnů a proto mám pro vás šablonu, podle, které můžete
svůj design navrhnout.
CSS slovník má spousty celkem rozluštitelných výrazů,
stačí jim jen trochu porozumět ;) a všechno půjde samo...
Design lze ještě zkombinovat s kódy do html sloupku, např. pozadí a podobně.
#SZNHLAVICKA { visibility: hidden;}
a:link {decoration:none;}
.permonik A:visited { color: black; }
.oprispevku .cas { color: #b8860b; }
.komentare .kom-form { background-color: FFFFF; }
.komentare .warn { color: black; }
.prispevky .komentar .pocet { border: 1px solid black; font-weight: normal; font-style: normal; font-size: 10px; font-family: Calligraph421 BT; background-color: white; color: #FF9933; }
.sloupek .kategorie.nezarazeno { display:none; }
.uzivatel-blok { display: none; }
.archiv-blok { display: none; }
.body { font-size: 13px; }
.body { font-family: Trebuchet MS; }
.popisblogu {font-size: 13px; color: black; text-align: right; font-style: normal; margin-right: 12px;}
.prispevek { font-size: 13px; color: #FF9933; border: none; background: white;}
h2 {font-size: 15px; color: #0066cc;}
.hlavicka { margin:2em 2em 0px; padding:; border: none;text-align:center; }
.logo { display:block; float:none; margin:10 auto; }
.nazevblogu { display:none }
.kategorie-titulek {border: none; border-color: white; color: black; background-color: ;}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok {margin: 5px; font-size: x-small; background-color: transparent; border: 6px solid white;}
.oprispevku { color: #b8860b;}
.kalendar .clanky {background-color: black;}
background-color: FFFFF;
color: #FF9933;
border: 2px dashed #CCFF33
}
a, a:visited {
color: #FF0033;
}
.sloupek {
border:2px dashed #CCFF33 ;
border-left: 2px dashed #CCFF33;
left: 281px;
margin-right: 85px;
padding: 0px;
background-color: white
}
.prispevky {
margin-left: 300px;
margin-right: 205px;
.prispevek {
border: 2px dashed #CCFF33;
border-bottom: 2px dashed #CCFF33;
border-left: 2px dashed #CCFF33;
padding: 10px;
background-color: white
}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok {
margin: 5px;
background-color: white;
border: ;
}
.kategorie-titulek {
color: #FF9933;
border: 2px dashed #CCFF33;
border-bottom:2px dashed #CCFF33 ;
background-color: #CCFF33;
}
.kategorie-nadpis {
border: 2px dashed #CCFF33;
}
.prispevek h2 {
color: #FF9933;
border: 2px dashed #CCFF33;
border-bottom: 2px dashed #CCFF33;
border-left: 2px dashed #CCFF33
background-color: white;
}
.komentare .cas {
color: #CCFF33;
.kategorie .zvoleno, .kategorie .zvoleno:visited {
color: CCFF33;
Vysvětlivky:
Přechody
Chcete takovéhle menu?
<P></P>
<head><style type="text/css">
#coolmenu{
border: 1px solid #66FFFF;
width: 170px;
background-color: #99FF66 ;
}
#coolmenu a{
font: bold 13px Comic Sans MS;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black ;
text-decoration: none;
border-bottom: 1px solid #66FFFF;
}
html>body #coolmenu a{
width: auto;
}
#coolmenu a:hover{
background-color: #66FFFF;
color: black;
}
#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}
</style>
<script type="text/javascript">
// Cool CSS Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Fading routine based on Dynamic Drive script: http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm
// This notice must stay intact for use
var baseopacity=0
function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}
function hidetext(){
cleartimer()
instantset(baseopacity)
}
function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}
function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}
function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}
</script></head>
<div id="coolmenu">
<a href="http://www.maxsite.cz/serv/gbook/index.php?ank=44423afad3cb61145191162" onMouseover="showtext('Pro vás o vás.')" onMouseout="hidetext()"> Návštěvní kniha</a>
<a href="http://blog.lide.cz/goodkamoska/diskuzniforum/" onMouseover="showtext('Mluvte o čemkoliv !')" onMouseout="hidetext()">Fórum</a>
<a href="http://blog.lide.cz/goodkamoska/forumproblogare/" onMouseover="showtext('Otázky ohledně blogů a webů. Jen vstupte! :)')" onMouseout="hidetext()">Blogařské fórum</a>
<a href="http://blog.lide.cz/goodkamoska/pratelskeblogy/" onMouseover="showtext('Spřátelené blogy. Co říct ?')" onMouseout="hidetext()">Přátelské blogy</a>
<a href="http://blog.lide.cz/goodkamoska/superodkazy/" onMouseover="showtext('Odkazy aneb co jsem ulovila.')" onMouseout="hidetext()">Odkazy</a>
<a href="http://blog.lide.cz/goodkamoska/oblogu/" onMouseover="showtext('Informace o mým blogu + novinky.')" onMouseout="hidetext()">O blogu</a>
<a href="http://blog.lide.cz/goodkamoska/mojeikonky/" onMouseover="showtext('Jen se na ně jukněte.')" onMouseout="hidetext()">Moje ikonky</a>
<a href="http://blog.lide.cz/goodkamoska/meztresteneja/" onMouseover="showtext('O mě aneb Kdo je vlastně Goodkamoska ?')" onMouseout="hidetext()">Mé ztřeštěné já</a>
<a href="http://blog.lide.cz/goodkamoska/mujdenik/"
onMouseover="showtext('Názory, příhody, včera, dnes, zítra...prostě Můj
Deníček')" onMouseout="hidetext()">Můj deník</a>
<div id="tabledescription"></div>
</div>
<P></P>
Vysvětlivky:
Barva orámování
velikost orámování
Druh orámování
Pozadí
Tučné písmo
Velikost písma
Druh písma
Barva písma
Nastavení dolního orámování (zase velikost, barva a druh orámování)
Barva pozadí při najetí na odkaz
Odkaz na kategorii
Popis kategorie
Název kategorie
Pozadí...
...za příspěvky
.prispevek { background-image: url(http:// zde napište celou url adresu pozadí nebo barvu .gif);
}
Když tam chcete dát barvu:
.prispevek { background-color: green;
}
...na pozadí
.kategorie-blok,
.uzivatel-blok,
.html-blok,
.archiv-blok { background-image: url(http:// zde napište url adresu vámi zvoleného pozadí);}
Můžete zvolit a takový zápis:
.sloupek { background-image: url(http:// zde napište url adresu vámi zvoleného pozadí);}
Můžete zkusit obě varianty a zvolit tu, která se vám bude nejvíce líbit.
Pozor !!!! Jestli chcete mít v pozadí nějakou barvu, tak zápis bude vypadat takhle:
.kategorie-blok,
.uzivatel-blok,
.html-blok,
.archiv-blok { background-color: green;}
.sloupek { background-color: green
...do blogu v html
<DIV class="html-blok"><body background="http://zde napiš celou adresu url obrázku .jpg" >
Jak zjistit url obrázku ?
1. Vyberte si nějaký obrázek
2. Klikněte na něj pravým talčítkem myši
3. Klikněte na Vlastnosti
Jak vložit kodik, nebo i jiné věci ?
1. Podsviťte věc, kterou chcete někam vložit
2. Stiskněte ctrl + c ( bez toho plus )
3. Klikněte tam, kam chcete aby se vámi vybraná věc vložila.
4. Stiskněte ctrl + v ( opět bez plus )
5. Nyní můžete uložit
Pozn.: Podsvítit je jako kdybyste chtěli vymazat nějaký text, tak jej "označíte" myší. Když je věc podsvícená, poznáte podle toho, že zmodrá.
Postup si můžete vyzkoušet třeba na tomto obrázku.
...na blog
body { background-color: blue; }
Můžete zvolit i jinou barvu.
Chcete-li mít pozadí nějaké vzorované, nebo chcete mít v pozadí obrázky, udělejte zápis takhle:
body { background-image: url(http:// url vámi vybraného obrázku);}
Jak zjistit url obrázku.
1. Vyberte si nějaký obrázek
2. Klikněte na něj pravým talčítkem myši
3. Klikněte na Vlastnosti
4. Podsviťte URL adresu
5. Stiskněte ctrl + c ( bez toho plus )
6. V tomto zápisu body { background-image: url (http:// url vámi vybraného obrázku);} podsviťte to, co máte napsané zelené a stiskněte ctrl + v ( opět bez toho plus )
7. Nyní můžete uložit
Vypadá to složitě, ale potom možná pochopíte, že na tom není nic tak moc těžkého.
Zkuste si to třeba na tomto obrázku.
Odkazy
Odkaz bez podtrhnutí
Otevření bez kliknutí
(Infor při najetí na odkaz
Otevření v novém okně
Animace s obrázkem
Běžící obrázek:
<marquee><img src="adresa obrázku"></marquee>
Měnící se obrázek:
<IMG onmouseover="this.src='adresa prvního obrázku';" onmouseout="this.src='adresa druhého obrázku';" src="adresa druhého obrázku">
Nápis na lištu
<SCRIPT LANGUAGE="JavaScript">
<!--
ScrollSpeed = 150;
ScrollChars = 1;
function SetupTicker() {
msg = " TEXT ";
msg += " TEXT ";
msg += " TEXT";
msg += " TEXT";
RunTicker();
}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);
}
SetupTicker();
<!-- end -->
</SCRIPT>
Zaheslování stránky
HTML kód:
<script language="JavaScript">
<!--hide
var password;
var pass1=
"TADY NAPIŠ HESLO";
password=prompt
('TVÁ OTÁZKA',' ');
if (password==pass1)
alert('Welcome');
else
{
window.location=
"wrong.html";
}
//-->
</script>
Text za kurzorem
<SCRIPT language=JavaScript type=text/javascript>
var browser = navigator.appName;
var verze = parseInt(navigator.appVersion);
if (browser == "Microsoft Internet Explorer" & verze >= 4){
var x,y
var step=7
var flag=0
var message=" Tvůj text"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {xpos[i]=-50}
var ypos=new Array()
for (i=0;i<=message.length-1;i++) {ypos[i]=-50}
function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1}
function Had()
{ if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
if ((i==5) || (i==13))
xpos[i]=xpos[i-1]+step-3;
else
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1]}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i] }}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]}
xpos[0]=x+step
ypos[0]=y
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]}}
var timer=setTimeout("Had()",20)}
}
</SCRIPT>
<SCRIPT language=JavaScript type=text/javascript>
if (browser == "Microsoft Internet Explorer" & verze >= 4){
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"'class='Had'>");
document.write(message[i]);
document.write("</span>");
}
if (document.layers) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
}
</SCRIPT>
Takové polozákladní
<style>
<!--
BODY{
cursor:url("http:// ZDE vložíte adresu kurzoru.ani");
}
-->
</style>
Posuvník
<STYLE>
BODY {
scrollbar-face-color: BARVA;
scrollbar-shadow-color: BARVA;
scrollbar-highlight-color: BARVA;
scrollbar-3dlight-color: BARVA;
scrollbar-darkshadow-color: BARVA;
scrollbar-track-color: BARVA;
scrollbar-arrow-color: BARVA;
}
</STYLE>
<A href="mailto:tvůj mail">a sem co chceš aby se zobrazilo</A>
Písmo
Shocking Pink Glow
Aqua Blue Glow
Purple Glow
Orange Glow
Green Glow
Red Hot Glow
Yellow Glow
Black Glow
Baby Pink Glow
Royal Blue Glow
Písmo
Shocking Pink Glow
Aqua Blue Glow
Purple Glow
Orange Glow
Green Glow
Red Hot Glow
Yellow Glow
Black Glow
Baby Pink Glow
Royal Blue Glow