Bagi pengguna Twitter pasti tidak asing lagi dengan istilah RT (ReTweet). RT dipakai untuk meneruskan tweet dari teman kita, contoh penulisannya sebagai berikut :

RT @thekacong: Lagi mendesain diteruskan dengan slicing dan konversi XHTML & CSS Valid

Artinya di Twitter saya meneruskan berita dari user thekacong ke semua teman twitter saya

Untuk meletakkan tombol ReTweet di blog kita langkahnya sebagai berikut :
Tambahkan javascript ini di dalam code HTML Anda

<script type=”text/javascript”>
tweetmeme_url = ‘http://yoururl.com’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

Bagi yang menggunakan blogsome

<script type=”text/javascript”>
tweetmeme_url = ‘{permalink_link}’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

Bagi yang menggunakan Blogspot (Blogger.com)

<script type=”text/javascript”>
tweetmeme_url = ‘<data :post.url/>’;
</script>
<script type=”text/javascript” src=”http://tweetmeme.com/i/scripts/button.js”></script>

dan bagi yang menggunakan Wordpress Anda tinggal install pluginnya

Tombol RT ini di sediakan oleh tweetmeme.com

Ada artikel menarik dari Smashing Magazine yang membahas seluk-beluk Breadcrumbs di web design, ini sangat penting untuk kenyamanan user yang mengunjungi website kita. Disini diberikan contoh-contoh dan teori-teori supaya Breadcrumbs yang ada diwebsite kita berguna secara optimal.

Artikel bisa dilihat disini Breadcrumbs In Web Design: Examples And Best Practices

How to create an open book

Create cool 3D infographics

Create Playfull 3D text

Design gift box

Create 3D Logo

CSS 3 semakin berkembang dengan tambahan-tambahan fitur untuk membuat bagus tampilan website kita, disini saya menyajikan teknik baru dari CSS 3 ini dengan bantuan JQuery Framework yang merupakan kebutuhan wajib dari para web designer.

1. Create rounded corners

#box {
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 15px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;
}

Code diatas akan menhasilkan rounded corner pada bagian atas kiri dan bawah kanan.

Code JQuery-nya : http://www.atblabs.com/jquery.corners.html

2. Border Image

Anda bisa lihat properti CSS 3 disini ->Border Images

Cara ini akan berhasil di implementasikan di FIrefox 3.1 dan rilis terakhir dari Opera dan Chrome, Tapi dengan menggunakan JQuery.borderImages.js akan bisa di baca di Firefox 2.*, Firefox 3, Firefox 3.1, Safari 3.*, Chrome 1.0, Opera 9.*, Opera 10 and IE7.

Code JQuery-nya : http://www.lrbabe.com/sdoms/borderImage/index.html

3. Multiple Background
CSS 3 mengijinkan untuk menempatkan beberapa gambar dalam satu elemen.

#kotak {
Background: url(atas.gif) top left no-repeat,
url(bawah.gif) bottom left no-repeat,
url(tengah.gif) left repeat-y;
}

Code JQuery-nya : Multiple Images with JQuery

4. Box Shadow and Text Shadow
Untuk menampilkan shadow yaitu dengan cara berikut

h3 { text-shadow: 2px 2px 2px #333; }

Code JQuery-nya : Box Shadow and Text Shadow

5. Transparency and Opacity

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

Untuk JQuery : Gradient

Masih ingat beberapa postingan saya yang membahas masalah transparansi di IE 6? Mengatasi masalah PNG di IE6 dan postingku yang I Hate IE 6 sampai-sampai saya memasang banner untuk Boycott Internet Explorer 6 di pojok kanan atas blog ini.

Ada teknik baru untuk menanggulangi masalah transparansi PNG di Internet Explorer 6 tanpa script-script yang macam-macam, aneh dan bikin kepala pusing yang anda perlukan hanya software Adobe Fireworks

Langkah-langkahnya:
Buka gambar PNG anda di Fireworks kemudian pada kotak optimize rubah PNG 24 ke PNG 8. dan rubah Index Transparency ke Alpha Transparency. Kalau kita memilih Index Transparency maka efek yang dihasilkan adalah sama dengan kita membuat gambar transparan dengan extensi GIF, efek akan berbeda ketika kita memilih Alpha Transparency.

* gambar diambil dari sitepoint.com

Berhubung saya belum punya software Fireworks ini contoh hasil gambar PNG saya ambil di sitepoint.com

First Steps With WordPress
New To WordPress - Where To Start
SEO With WordPress For Beginners
Free WordPress Tutorials
A Beginner’s Guide To WordPress Plugins
Getting Started With WordPress
WordPress - A Beginner’s Guide Part 1 - “Where To Start”
Wordpress - A Beginners Guide Part 2 - “Wordpress Installation And Setup”
Wordpress - A Beginners Guide Part 3 - “Choosing Themes And Plugins”
Wordpress - A Beginners Guide Part 4 - “Admin Settings”
10 Things You Must Do When Changing WordPress Themes
WordPress : The Complete Post-Install Checklist
SEO For WordPress : Part 1
How To Setup WordPress Locally On Windows
WordPress Quick Tips
Tutorial : Content For Admin Only
4 Simple Ways To Speed Up WordPress
The WordPress Help Sheet
The Advanced WordPress Help Sheet
WordPress Reference Guide
How To Design A WordPress Theme
WordPress:101 – A Beginners Guide To Using WordPress
Best Of WordPress Beginner Articles And Plugins
WordPress Beginner? Avoid Looking Like One
30 WordPress Plugins For Beginners