Hiasi exchange banner kawan korang dengan <Div> tag

   


         Exchange banner, mungkin segelintir daripada kita suda memiliki banner blog sendiri dan sudah pun bertukar-tukar banner tersebut dengan kengkawan kita, tapi apabila kita meletaknya dalam blog kita, kelihatan agak berserabut dan tidak teratur, membuatkan kita berasa mo menghempas, menampar, membako , malas2 jak letak. Tapi di sini aku akn cuba kongsi bagaimana mo kemas2 sket banner kawan2 tue.. hoho

Cara untuk customize banner kawan (meletakkan kotak2 )           
1. ambil banner kawan. contoh:
          
   

   <a href="http://ufaachan.blogspot.com" target="_blank"><img src="http://1.bp.blogspot.com/-HdEk8AIfUsM/TiWyvP4OtiI/AAAAAAAAA6c/7vJXtpHJeFM/s1600/banner.gif" /></a>

                   
2. letakkan <div class="kotak-hohoi"> pada awal banner  tue dan </div> pada akhir kod banner tue. macam nie:
          
            

    <div class="kotak-hohoi"><a href="http://ufaachan.blogspot.com" target="_blank"><img src="http://1.bp.blogspot.com/-HdEk8AIfUsM/TiWyvP4OtiI/AAAAAAAAA6c/7vJXtpHJeFM/s1600/banner.gif" /></a></div>

         
3. seterusnya, kita akan fokus pada bahagian design, pada awal page (kalau korang wat exchange banner tue ada page dia sendiri ), atau kalu korang letakkan pada sidebar, letakkan kod di bawah nie, pada bahagian atas sekali...
          
   

   <style type="text/css">
   .kotak-hohoi {
   float: left; margin-left: 5px; margin-right: 5px;
   }
   
   .kotak-hohoi img {
   background-color: green;
   padding: 10px;
   -moz-border-radius: 5px;border-radius: 5px;
   -moz-box-shadow: 10px 10px 5px #072202;
   -webkit-box-shadow: 10px 10px 5px #072202;
   box-shadow: 10px 10px 5px #072202;
   }
   
   </style>

                   
4. Korang boleh customize sendiri warnanya dengan cuma gantikan perkataan green tue dengan warna yang korang mau k?..

Selamat mencuba....hohoho

p/s: pastikan korang guna mode "edit html" bila buat semua nie ok?



Peneranganku..hoho
       

Pada bahagian banner (penambahan <div> tag tue.. )          
1. div tag, ialah tag html yang merujuk kepada division, ataupun bahagian, aku seringkali gunakan tag ini untuk membuat kotak2..hoho
         
2. class="kotak-hohoi" , aku meletakkan "class" pada div tersebut sebab sekarang kita akan meletakkan css (hiasan ) secara inline (atau juga di panggil embedded); dalam erti kata lain hiasan yang kita mo customize terletak pada bahagian lain..

Pada bahagian hiasan (css ataupun cascading style sheet )          
1. tag <style type="text/css"> dan </style> , memberitahu browser, bahawa perkataan yang wujud di antara dua tag ini ialah css ( kod yang memegang hiasan.. )
         
2. .kotak-hohoi ,kalau korang perasan, aku guna titik noktah pada awal .kotak-hohoi ,sebab pada <div> tag yang kita wat tadi, kita gunakan class... .kotak-hohoi jugak kita boleh namakan sebagai selector..
         
3. tanda { dan } ialah untuk memberitahu, jenis2 hiasan apakah yang terkandung di dalamnya (benda2 yang di dalam nya kita panggil sebagai declaration, "{" sebagai pembuka dan "}" sebagai penutup..
   
         
4. background-color: green; ini kita memberitahu browser agar memaparkan warna background sebagai warna hijau ( noktah bertindih ":" tue sebagai pemisah dan semicolon ";" tue sebagai penutup , di mana, background-color di kenali sebagai property, dan green sebagai value
         
5. untuk memahami css korang boleh baca lebih lanjut di sini