Wednesday, August 3, 2011

Border radius dalam Internet Explorer



               Border radius, adalah salah satu declaration yang wujud dalam css, fungsinya? adalah untuk membuatkan bucu-bucu (bukan busyuk2 mcm korng bmnja dgn awek atau pakwe korg k?..huhu )nampak membujur, korang boleh lihat kat blog nie, cuba amati bucunya, semuanya dalam keadaan membulatkan?.. hehe

                Mungkin kebanyakan dari kita sudah tahu, dan sudah pun meletakkan kod nie, dalam customizing, xkira la sama ada header sidebar ka, tajuk entri ka, atau lain2.. Korang amati, dan lihat, mungkin korang puas hati bila melihat blog korang nmpak lebih moden begitu, tapi, aku yakin korang mungkin tengah menggunakan sama da browser chrome ataupun mozilla ketika mengedit dan melihat hasilnya, namun cuba korang buka blog korang menggunakan Internet Explorer.. Korang akan mendapati, yang hujung2 bucu tetap sama, tetap tajam seperti batu grrr...(wahaha.. tarik nafas ui... ksian plak ak tgok mmbaca sampai g2..)


              Apa yang aku cuba sampaikan, border radius yang korang edit tue, xkan menjadi d internet explorer, kalu x percaya, cuba buka blog korang guna browser tue.. haha



             Namun, ada satu penyelesaian mudah untuk membolehkan Internet Explorer membaca border radius (sebenarnya Internet Explorer 9 mampu membaca kod nih suda) korang cuma perlu buat perubahan sedikit pada template korang...

    Cara membolehkan Internet Exlporer 9 membaca border radius pada template korang..            
  1. buka dashboard korang pergi ke ruangan edit html tue ( bahagian template korang )
  2.            
  3. cuba cari kod di bawah nie [ tekan ctl + f]
               
     <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  4. bila dah jumpa korang cuma perlu ubah nombor 7 tue jadi 9 , then siap sda...hoho

p/s: nie post nie mgkin akan di fahami oleh segelentir org jak..huhu

Tuesday, August 2, 2011

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.                    
  3. 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>
  4.          
  5. 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>
  6.                    
  7. 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.          
  3. 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.          
  3. .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..
  4.          
  5. 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..
  6.          
  7. 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
  8.          
  9. untuk memahami css korang boleh baca lebih lanjut di sini

Monday, July 11, 2011

Ubahsuai cursor blog korang..




              Cursor, rasanya, ramai dari kita yang tau suda apa bendanya tue kan?.. Mungkin jugak kebanyakan dari kita sudah pun menukarnya mengikut selera kita sendiri, sama ada agar bersesuaian dengan tema blog atau mungkin jugak untuk memenuhi selera diri kita. Namun tidak kurang jugak ada yang masih belum tahu bagaimana melakukan pengubahsuaian tersebut, di sini korang bila lihat cara-caranya di lakukan.



Tukar Cursor Blog


  1. Buka dashboard blogger korang, kemudian pergi ke option edit html
  2. BAGI PENGGUNA DASHBOARD LAMA
    DASHBOARD > DESIGN > EDIT HTML
    BAGI PENGGUNA DASHBOARD BLOGGER BARU SAHAJA
    DASHBOARD > BUTTON DI ATAS > TEMPLATE > LIHAT YANG PALING BAWAH > KLIK EDIT TEMPLATE
  3. kedua tekan key ctrl dan f serentak, dan cari </head> kemudian paste kod di bawah nie SEBELUM </head>
  4. <style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/anime/ani-11/ani1090.cur), progress;}</style>
  5. cuba PREVIEW, dan lihat hasilnya, jika anda berjaya lihat perubahan cursor korang, klik SAVE
  6. Untuk lebih pilihan cursor, korang boleh terjah sendiri ke laman web Free Cursor 4U

Thursday, July 7, 2011

Tukar favicon (tanpa coding)

                   Mungkin kebanyakan dari kita suda tahu mengenai favourite icon, ataupun lebih di kenali sebagai favicon. Namun tidak kurang jugak yang masih belum tahu tentang benda ini, bagi korang yang tidak tahu, favicon ialah lambang yang terletak pada sudut atas sebelah kiri bagi sesuatu halaman. Sebagai contoh bagi blogger, huruf "b" yang berwarna oren. lihat contoh d bawah.




   Kegunaan favicon ialah sebagai trademark sesuatu laman web, sebagai contoh facebook dengan lambang huruf "f" manakala twitter dengan huruf "t". Korang jugak boleh mengubah favicon blogger yang ada pada blog korang tue dengan lambang atau pic korang sendiri. Caranya? senang..(ikut step d bawah)



Ubah Favicon Tanpa Perlu Coding

  1. pertama korang sediakan dulu gambar yang korang nak guna sebagai favicon baru korang
  2. kedua sign in ke akaun blogger and buka dashboard
  3. selesai sign in, klik pic di bawah nie, n korang akan lihat satu lagi jenis dashboard blogger. 
  4.            
                   
  5. bila da buka dashboard tuh, korang cuma perlu klik button arrow kecil di antara simbol rumah dan "view blog" tue
  6.            
           
               
  7. Korang akan lihat pilihan,  pilih "layout" and satu page akan terbuka (macam screenshot di bawah)




  8. cari ruangan "favicon" dan klik "edit", pilih pic korang, save, dan siap!
Ini cuma akan berhasil sekiranya korang belum pernah mengubah favicon dengan mengedit kod template blog korang