Sharing Ilmu WEB-Design

Yo... kita sharing ilmu web-design yuk...

yang punya ilmu tentang bahasa pemograman web seperti :

php-html-xhtml-css-js-vbs-asp-flash

atau ilmu desain graphic web

silahkan berbagi disini yah....., tapi non-template......

saya mulai

injeksi css dengan js

Code:

function CssMod() {
  if(window.cssinjected == undefined) {
      cssinjected = 1;
      var css = document.createElement("link");
      css.setAttribute("type","text/css");
      css.setAttribute("rel","stylesheet");
      css.setAttribute("href","Renato.css"); <-- ini  link css-nya
      css.setAttribute("media","screen, print");      document.getElementsByTagName("head")[0].appendChild(css);
  }
}CssMod();

ini code js jadi klo di html pake pembukanya yaitu

Code:

<script language="Javascript" type="text/javascript"> code nya disini </script>

atau save aja dengan extensi .js

berikutnya cara buat forum sendiri......cmn agak panjang jadi kita liat yg lain dulu..

wah bagus neeh... ayo om terusin,kebetulan pengen beljar JS neeh, klo bisa seh dari dasar pisan. Css juga om aduh bingung ... kalo bahasa html sih dah rada mendingan, bisa2 dikit lah .

terusin ya... sy tunggu.


_______________________________________________________________________________

ok...

nih cara bikin status bar kamu gerak di e-explorer mau mozila atau yg lain

Code:

ketik = new Object(); [bikin objek baru]

ketik.speed = 50;    [bikin propertinya]
ketik.refresh = 1000;
ketik.loop = true;

function statusketik(MESSAGES,SPEED,REFRESH,LOOP) {
  cancelStatusEffects();
  ketik.tempMessages = MESSAGES.split(',');
  ketik.tempSpeed = (SPEED != null) ? SPEED : ketik.speed;
  ketik.tempRefresh = (REFRESH != null) ? REFRESH : ketik.refresh;
  ketik.tempLoop = (LOOP != null) ? LOOP : ketik.loop;
  ketik.tempLoop += '';
  if (ketik.tempLoop == 'true') ketik.tempLoop = -1;
  else if (ketik.tempLoop == 'false') ketik.tempLoop = 1;
  else ketik.tempLoop = parseInt(ketik.tempLoop);
  ketik.messageIndex = 0;
  ketik.positionIndex = 0;
  ketik.isActive = true;
  activateketik();
  }

function cancelStatusEffects() {
  ketik.isActive = false;
  window.status = window.defaultStatus;
  }


function activateketik() {
  if (ketik.isActive) {
      var currentMessage = ketik.tempMessages[ketik.messageIndex];
      var tempMessage = currentMessage.substring(0,ketik.positionIndex);
      window.status = tempMessage;
      if (ketik.positionIndex < currentMessage.length) {
        ketik.positionIndex++;
        window.setTimeout('activateketik()',ketik.tempSpeed);
        }
      else {
        ketik.positionIndex = 0;
        ketik.messageIndex = (ketik.messageIndex < ketik.tempMessages.length - 1) ? ketik.messageIndex + 1 : 0;
        if (ketik.messageIndex == 0) ketik.tempLoop--;
        if (ketik.tempLoop == 0) ketik.isActive = false;
        else window.setTimeout('activateketik()',ketik.tempRefresh);
        }
      }
  }


tinggal gunain fungsi statusketik...

cuma ini kan code masih berdiri sendiri alias akhiran js...

jadi klo mau di html pke code pembuka script...

om minta tutor about css buat pemula donks............... rada ngak ngarti neeh pliss belum nemu yang pas buat pemula..soalnya semua tutor yang aku dapet ngak cocok


thaks sebelumnya......

hmmm...tutor yah... ada sih cmn bahasa inggris..., klo mau saya upload.....,

tapi buat belajar css meningan belajar sendiri pke cara otak-atik :

1. copy css orang
2. coba ubah beberapa codenya dan liat apa yang terjadi....

dan dianjurin kamu punya localhost sendiri...



dengan cara pakai IIS.., atau app server lainya .., klo mau gampang pakai Nusphere dia langsung nyediain localhost..........

klo ada localhost atau server sendiri code net jadi bisa otak-atik di rumah tanpa ngehost ke internet terlebih dahulu..

ooo... supaya bisa baca css musti pake web server toh.... Oke deh. pelajaran pertama mungkin ngotak ngatik css orang selanjutnya create sendiri........
thanks

@renato

om, software'nya posting sini dong. . . soalnya ane liat2 tu software cuman trialnya doank

yah boleh...aja cmn bener gk apa-apa perlu persetujuan admin dulu yah... soalnya kan forum ini pakai nice-forum bkn host sndiri jdi piracy atau software sharing dilarang nanti di baned lg... klo mau sya e-mailin atau di migrasi aja ke 00webhosting disana bebas da dikasih space gede n free

networker wrote:ooo... supaya bisa baca css musti pake web server toh.... Oke deh. pelajaran pertama mungkin ngotak ngatik css orang selanjutnya create sendiri........
thanks

enggak juga kok..., localhost itu cuman buat memungkinkan kita untuk membuat kode-kode bersifat server seperti membership atau posting....dan mengetes pembuatan security kalau css pakai frontpage atau notepad juga bisa.

klo css

sperti

Code:


* {
   
   margin: 0;
   padding: 0;
}


maka browser baik ie atai frfx akan mereset margins, padding dan ukuran hurufnya

Code:


body {
background-image: url(lokasinya); [lokasi gambar bg]
        background-attachment: fixed; [maka posisi lampiran bg akan fix]
  background-position: center top; [lokasi penempatan bg]
  background-repeat: no-repeat; [perulangan bila ukuran max sudah terlewat]
  background-color: #000000; [warna dasar]
   font-family: Verdana, Helvetica, Arial, sans-serif;
   color: #828282;
   font-size: 10px;
   margin: 0;
   padding: 15px 0;
   

}


cohtoh body diatas...
tanpa code css pun bisa dilakukan
namun bila ingin bg dengan css maka di coding pusat kita memasukan

Code:


<link href="lokasi" rel="stylesheet" type="text/css" media="screen, projection" />


untuk animasi pada button saat hover dan click pun biasanya menggunakan css...pengubahan ukuran huruf pun..dengan css berganda..

Q : digunakan dimana css..? yg kita tulis ?

R :

tag
contoh css

Code:


<style type="text/css" media="screen" class="Flasha">
<!--
.Flasha {
   background-attachment: fixed;
   background-repeat: no-repeat;
   background-position: center center;
   text-align: center;
   clear: both;
   float: left;
   overflow: hidden;
   position: relative;
   visibility: visible;
   z-index: auto;
   cursor: hand;
   page-break-before: auto;
   page-break-after: auto;
      height: auto;
   width: 702;
}
-->
</style>

<ul class="class css yg kita koding sebelumnya"> </ul>
maka dalam class kita tulis flasha, semua yg didalam tag tersebut akan menuruti koding css baik pewarnaan maupun apakah itu tersebunyi atau terlihat

atau
<div> </div>
<dl> </dl>
perbedaanya silahkan utak-atik sendiri good luck yah...


__________________________________________________________________________
I Love Google 4ever ...

halow.. nih ada js dikit dapet mungut di dynamicdrive, lumayan buat yang suka nge-Blog buat nambah2 asesorisna ..... judulna Animated Browser Opener. Nih Scriptna :

Code:

<script>
<!--


var winheight=100
var winsize=100
var x=5

/*
Animated Window Opener Script (updated 00/04/24)-
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/



function openwindow(thelocation){
temploc=thelocation
if (!(window.resizeTo&&document.all)&&! (window.resizeTo&&document.getElementById)){
window.open(thelocation)
return
}
win2=window.open("","","scrollbars")
win2.moveTo(0,0)
win2.resizeTo(100,100)
go2()
}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=temploc
winheight=100
winsize=100
x=5
return
}
setTimeout("go2()",50)
}
//-->
</script>

<p><a href="javascript:openwindow('http://link_yang_dituju.com')">Open window</a>

Catatan:
http://link_yang_dituju.com = Ganti dengan link yang akan dituju.
Open window = Teks / gambar yang akan di tampilkan di blog.

Untuk Preview na Klik disini. Kalo udah masuk trus klik Image Go to My Site untuk melihat hasil dari script di atas, seperti itulah kira-kira hasilna selamat Nge-Blog ria.

NB: Kalo mau lebiah simple upload dulu script di atas ke webhost kalian, biar kodena jadi dikit

seep deh ^^