Twitter Marquee

May be you see it everyday, a seamless-continuous  marquee in the Twitter homepage shows the current trending topic.  It's damn good with fading background and short description in a tooltips.

If you like that marquee and want to put it in your website/blog, I have write such script using jQuery and CSS3 I just stolen a bunch of jQuery and CSS code from Twitter, clean it up and made to work standalone.

All you need to do is edit the CSS (marquee width, background, text color etc) and image to fit to your need and drop it into your website or blog.

It's nothing easier than to try it yourself and the following links will tell you everything.

Incoming search terms:

• twitter marquee jquery

Berikut beberapa tips dalam menuliskan CSS:

1. Hindari penggunaan ID ganda.

ID adalah sebuah penanda unik untuk sebuah elemen halaman, artinya dalam sebuah halaman tidak ada dua ID dengan nama yang sama. Jadi, gunakanlah ID hanya untuk elemen-elemen utama yang tidak ada duanya, seperti header, menu, container, sidebar, footer dsb.

Contoh1:

Contoh2:

Contoh2 di atas adalah salah, karena kemungkinan besar elemen title dan post adalah lebih dari satu dalam sebuah halaman.

Solusinya gunakanlah class daripada ID.

2. Buang nilai-nilai yang mubazir

Kita lihat contoh CSS berikut:

Contoh3

#container {
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-right: 0px;
}

Contoh4

#container {
padding: 5px 0px 5px 0px;
}

Contoh3 dan Contoh4 di atas akan menghasilkan tampilan yang sama, tentu saja contoh4 lebih sederhana daripada contoh3. Namun demikian, contoh4 tersebut masih terdapat perulangan nilai 5 dan 0. Mari kita perbaiki menjadi sebagai berikut:

Contoh5

#container {
padding: 5px 0;
}

Wow, sederhana bukan? Ya, karena nilai pertama sudah dapat mewakili top dan bottom, dan nilai kedua sudah mewakili left dan right. Sementara untuk zero value (0) tidak perlu menambahkan satuan px, jadi boleh dihilangkan.

3. Bijak dalam memberikan nilai warna

Asumsikan kita akan memberi latar warna biru untuk div container, css nya adalah sebagai berikut.

Contoh6

#container {
background: #0000FF;
}

Contoh6 akan menghasilkan warna background dari div container menjadi berwarna biru. Kode tersebut bisa dipersingkat lagi menjadi sebagai berikut:

Contoh7

#container {
background: blue;
}

Ya, karena nilai #0000FF sama artinya dengan blue. Lebih singkat bukan?

Beberapa alternatif lain dalam memberikan warna seperti tertera dalam table berikut:

alternatif1        alternatif2          alternatif3            hasil warna
#000000           #000                  black                   hitam
#FFFFFF           #FFF                  white                  putih
#FFFF00           #FF0                  yellow                 kuning
#FF0000           #F00                  red                     merah

Di sinilah kebijakan kita dituntut, dimana kita harus bisa memilih mana yang paling sedikit karakternya. Misalnya untuk memberi warna kuning, maka lebih baik menggunakan #FF0 dari pada yellow, sementara untuk memberi warna merah, lebih baik menggunakan red, daripada #F00. Pemberian nama warna langsung kemungkinan tidak terbaca oleh semua browser, tapi untuk warna2 dasar hal ini masih bisa ditolelir.

Untuk lebih jelasnya dalam menentukan kode warna, bisa dilihat color chart di sini.

4. Semicolons, hanya untuk pemisah

Kita lihat contoh berikut

Contoh8

#container {
background: blue;  /*terdapat semicolon (titik koma) setelah nilai blue.*/
}

Jika hanya ada sebuah properties, kita tidak perlu mengakhirinya dengan titik koma (;) atau semicolon.
Jadi CSS yang baik adalah.

Contoh9

#container {
background: blue
}

Demikian juga jika sebuah nilai tidak diikuti oleh nilai lainnya, maka semicolon bisa dihilangkan.

Contoh10

#container {
background: blue;
padding: 5px 0;
margin: 0
}

Setelah nilai margin: 0 kita tidak perlu lagi menambahkan semicolon, karena properties untuk container sudah berakhir.

6. Kelompokkan nilai yang sama.

Misalkan div header, div sidebar, dan div footer mempunyai beberapa nilai yang sama, kita bisa mengelompokkannya dengan memisahkannya dengan koma.

Contoh11

#header, #sidebar, #footer {
background: red;
font-family: Arial, Helvetica;
padding: 5px

5. Kurangi spasi yang berlebihan

Sedapat mungkin kurangi penggunaan spasi kosong yang berlebihan.
Untuk contoh10 di atas, bisa kita padatkan lagi menjadi

Contoh12

#container {
background:blue;
padding:5px 0;
margin:0
}

Atau bahkan

Contoh13

#container {background:blue;padding:5px 0;margin:0}

Namun contoh13 tidak dianjurkan, karena akan merepotkan kita sendiri sewaktu-waktu ingin merubah tampilan nantinya.

Demikian beberapa tips yang mungkin berguna, sebenarnya masih ada beberapa tips lagi yang mungkin lain kali bisa disambung lagi.

Incoming search terms:

• penggunaan css
• tips & trik css
• #container css artinya adalah
• background tabel transparan dengan css
• container dan background css
• css artinya
• CSS WRAP DASAR
• css yang baik
• penggunaan class dan id dalam css php

Untuk membuat block region baru, yang perlu kita lakukan adalah mengedit beberapa file template yang kita gunakan. Langkah-langkahnya:

1. Buka file template.php di folder themes, temukan baris-baris berikut (buat file baru bernama template.php jika tidak ada) :

   // regions for nama_template
   function nama_template_regions() {
       return array(
       'left' => t('left sidebar'),
       'content_top' => t('content top'),
      'content_top_right' => t('content top right'),
      'content_bottom' => t('content bottom'),
       'content_header' => t('header'),
       );
   }

   Sisipkan nama region baru yang akan ditambahkan diantara tanda kurung return aray di atas. Pastikan format penulisannya sama dengan region yang sudah ada, contoh:

    'region_baru' => t('region baru'),

   Nama di sebelah kiri tanda => adalah teks yang akan dibaca oleh drupal, tidak boleh menggunakan spasi dan karakter khusus, sedankan di sebelah kanan tanda => adalah nama yang akan ditampilkan di panel Administer, boleh menggunakan spasi.

2. Langkah berikutnya adalah memanggil region tersebut ke template. Sebelum ini dilakukan region baru tersebut tidak akan muncul di panel administer dan tidak bisa digunakan.Buka file page.tpl.php di folder themes, tentukan tempat dimana block akan kita tampilkan nantinya. Sisipkan baris berikut di tempat tersebut.

   <div><?php print $region_baru; ?></div>

   Gunakan CSS untuk memanipulasi ukuran region baru yang kita buat.

3. Selamat mencoba

Incoming search terms:

• drupal template
• membuat template drupal
• membuat block di drupal
• template drupal
• drupal modul wall
• wall drupal
• membuat bloks
• membuat comment di drupal
• membuat content dengan content tempalte
• membuat blok not and

.

Beralih ke table dalam kontent website, sebenarnya ada toolsnya yakni “table2css converter” yang bisa langsung mengkonvert table menjadi div hanya dengan beberapa klik. Namun sayangnya tool ini hanya bisa membuat tabel statik dengan ukuran-ukuran absolut. Bagaimana jika table tersebut merupakan table dinamis, multicolumn, multirow seperti daftar harga barang, statistik atau member, dimana data diambil secara loop dari database?

.

Berikut contoh membuat tabel div yang mempunyai 8 kolom (columns) dan 2 baris (rows).

.

Pertama, buat kontainer yang bertidak sebagai <table> </table>.

<div class="kontainer"></div>

Properti css nya adalah:

.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}

Kedua, tambahkan row/baris di dalam div kontainer tadi, yang bertindak sebagai <tr></tr>.

<div class="kontainer">
   <div class="baris"></div>
</div>

Properti cssnya:

.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}

Ketiga, tambahkan beberapa kolom (contoh ini 8 kolom) diantara div baris tadi, yang bertindak sebagai <td></td>.

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div style="clear: both;" /> <!-- tambahkan ini, supaya div kontainer
                                melingkupi semua div yang ada di dalamnya -->
</div>

Properti css nya:

.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}

.

Berikut screenshot hasil sementara:

.

.

Untuk menambahkan baris lainnya, baris kedua, ketiga dan seterusnya, cukup ulangi div baris beserta div kolom sebanyak baris yang diperlukan. Berikut contoh setelah diatambahkan baris (baris ke 2):

<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>

.

Kode lengkapnya adalah:

.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contoh Table menggunakan div</title>
<style type="text/css">
.kontainer {
width:100%;    /* penuh layar atau fluid/flexible, gunakan ukuran px untuk fixed width */
margin:0 auto; /* opsional, supaya table berada di tengah jika dalam mode fixed,*/
               /* bertindak seperti <table align="center">*/
border: 1px solid #000 /* border, opsional */
}
.baris {
width: 100%    /* harus 100% supaya penuh ke area table */
}
.kolom {
width: 12.2%; /* pembagian 100% dengan 8 kolom, seharusnya 12.5%, */
              /* diberikan kompensasi seperlunya karena penggunaan margin,*/
              /* padding maupun border nantinya akan mempengaruhi lebar kolom */
float: left;  /* kolom yang lebih duluan akan ditempatkan di kiri, begitu seterusnya */
}
</style>
</head>

<body>
<div class="kontainer">
   <div class="baris">
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
   <div class="baris"> <!-- baris ke dua -->
      <div class="kolom">1</div>
      <div class="kolom">2</div>
      <div class="kolom">3</div>
      <div class="kolom">4</div>
      <div class="kolom">5</div>
      <div class="kolom">6</div>
      <div class="kolom">7</div>
      <div class="kolom">8</div>
   </div>
<div style="clear: both;" /> <!-- jangan lupa untuk selalu menempatkan tag ini
                             sebelum penutup div kontainer -->
</div>
</body>
</html>

.

Sesuaikan style tambahan seperti warna background, border, text dan sabagainya. Selanjutnya, untuk pengisian data bisa menggunakan parameter-parameter php sesuai dengan kebutuhan.

.

Dalam contoh ini sengaja menggunakan atribut class bukan id dalam mengidentifikasi css properties karena sesuai dengan standard W3C bahwa id adalah harus unik untuk menamai suatu elemen dalam sebuah halaman web.

Demo: Klik di sini
Download: Klik di sini

Penulis: takien
Sumber: takien.com