DTE :]: July 2011

Saturday, July 30, 2011

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Jika salah satu tutorial di situs ini memerintahkan kamu untuk mengunjungi halaman ini, maka kamu telah sampai di tempat yang tepat. Tapi jika kamu membuka halaman ini karena ketidaksengajaan atau mengira bahwa ini adalah salah satu halaman tutorial, maka kamu telah memasuki halaman yang salah. Halaman ini adalah salah satu bagian dari beberapa tutorial di blog ini. Saya sengaja memisahkannya mengingat ada beberapa tutorial yang selalu menggunakan perintah yang sama pada setiap awal langkah. Untuk menghindari duplikasi langkah, maka Saya memisahkan halaman ini dari halaman yang lainnya.
Salin script ini, kemudian letakkan tepat di atas kode </head> atau di bawah kode <head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>

Intinya adalah, jika suatu saat kamu merasa bahwa kamu pernah menjalani langkah tutorial seperti ini, maka kamu tidak perlu melakukannya lagi.
Perhatikan juga nama-nama berkasnya (bukan URLnya):

Teliti betul-betul isi templatmu. Jika ternyata templatmu sudah dilengkapi dengan skrip-skrip tersebut, maka kamu bisa menghapusnya salah satu. Kita cukup menggunakan satu skrip saja pada setiap jenisnya. Sekarang kamu bisa melanjutkan ke langkah berikutnya.

Labels: jQuery, Menengah

JQuery Image Menu, Membuat Menu Slide Gambar

Desain menu navigasi ini sangat cocok untuk para pemilik situs dengan tema fotografi. Sebenarnya menu ini lebih tepat difungsikan sebagai gambaran umum dari isi sebuah situs dibandingkan dengan penggunaannya sebagai menu biasa:

Lihat Demo

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Ambil scriptnya di sini.

Setelah itu salin kode ini, kemudian letakkan tepat di atas kode </head>:

<script type='text/javascript'>
$(document).ready(function () {
     $('div.jimgMenu ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 450, easing: "easeOutQuad", complete: "callback"});
          } else {
               $(this).addClass("active").stop().animate({width: "310px"}, {duration: 400, easing: "easeOutQuad", complete: "callback"});
          }
     }, function () {
          if ($(this).is(':animated')) {
               $(this).removeClass("active").stop().animate({width: "78px"}, {duration: 400, easing: "easeInOutQuad", complete: "callback"})
          } else {
               $(this).removeClass("active").stop(':animated').animate({width: "78px"}, {duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>

Salin kode pemodel ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

.jimgMenu {
  position:relative;
  width:630px;
  height:200px;
  overflow:hidden;
  margin:10px;
}

.jimgMenu ul {
  list-style:none;
  margin:0px;
  padding:0px;
  display:block;
  height:200px;
  width:1340px;
}

.jimgMenu ul li {
  float:left;
}

.jimgMenu ul li a {
  text-indent:-1000px;
  background:#FFFFFF none repeat scroll 0%;
  border-right:2px solid #fff;
  cursor:pointer;
  display:block;
  overflow:hidden;
  width:78px;
  height:200px;
}

.jimgMenu ul li.satu a  {background:url(http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg) repeat scroll 0%;}
.jimgMenu ul li.dua a   {background:url(http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg) repeat scroll 0%;}
.jimgMenu ul li.tiga a  {background:url(http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg) repeat scroll 0%;}
.jimgMenu ul li.empat a {background: url(http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg) repeat scroll 0%;}
.jimgMenu ul li.lima a  {background: url(http://4.bp.blogspot.com/-m0l4jFx9_TM/ThKqhmjUqmI/AAAAAAAAAXQ/wAPNi03KSn0/s1600/urban.jpg) repeat scroll 0%;min-width:310px;}

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode ini, kemudian letakkan di tempat dimana kamu menginginkan menu ini ditampilkan:

<div class='jimgMenu'>
     <ul>
          <li class='satu'><a href='#'>Landscapes</a></li>
          <li class='dua'><a href='#'>People</a></li>
          <li class='tiga'><a href='#'>Nature</a></li>
          <li class='empat'><a href='#'>Abstract</a></li>
          <li class='lima'><a href='#'>Urban</a></li>
     </ul>
</div>

Pelajari beberapa alternatif peletakan menu navigasi di sini »
Simpan templatemu.

Dari sisi visualisasi, tampilan menu navigasi ini memang menarik, namun jika dilihat dari sisi fleksibilitas, desain menu ini memiliki kekurangan terutama dalam hal pengeditan mengingat menu ini hanya terdiri dari gambar-gambar, bukan tulisan seperti pada umumnya.
Jika kamu menghendaki untuk membuat gambar menu sendiri, ini adalah standar ukurannya:

Gunakan gambar tersebut untuk membuat panduan pemotongan dengan ukuran yang tepat. Setelah gambar barumu tersimpan, upload gambar tersebut, lalu ambil URLnya untuk menggantikan URL-URL ini:

http://3.bp.blogspot.com/-tV_WbAALyr8/ThKqb8arAiI/AAAAAAAAAXE/pT9KuebBecY/s1600/landscapes.jpg
http://3.bp.blogspot.com/--Dw4kWyM3yo/ThKqfxFZvtI/AAAAAAAAAXM/1L5ODPu0OcU/s1600/people.jpg
http://4.bp.blogspot.com/-Uib-i2TNAsc/ThKqd6uDB6I/AAAAAAAAAXI/p89exio6t8E/s1600/nature.jpg
http://4.bp.blogspot.com/-53TyMk779WE/ThKqY4c6BkI/AAAAAAAAAXA/rPFPPg0J8lc/s1600/abstract.jpg

Sumber: http://www.alohatechsupport.net

Labels: Desain, jQuery

Saturday, July 9, 2011

CSS Formulir Komentar untuk Blogspot

Berikut ini adalah sebuah tampilan formulir komentar yang sudah Saya obrak-abrik. Dengan memberikan tampilan yang berbeda pada formulir komentar di blogmu, tentunya akan membuat para pengunjung lebih tertarik untuk corat-coret:

Untuk membuat tampilan formulir komentar yang luar biasa dahsyat seperti gambar di atas, kamu hanya membutuhkan dua buah langkah perombakan kecil:

Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.

Pertama-tama, carilah sebuah elemen divisi yang tampak seperti ini:

<div class='comment-form'>

Tip: Tekan CTRL + F lalu ketik kode tersebut untuk mempermudah pencarian.

Ganti kode tersebut dengan ini:

<div class='blok-komentar'>

Setelah itu gulung layarmu ke atas, dan segera temukan kode ]]></b:skin> atau </style>.

Salin kode CSS ini, kemudian letakkan tepat di atas kode ]]></b:skin> atau </style>:

.blok-komentar {
  background-color:#becdd5;
  margin-left:10px;
  text-align:left;
  width:400px;
  border:5px solid #728a97;
  padding:10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.blok-komentar:hover {background-color:#e0d1e0}

Klik Simpan Template dan lihat hasilnya pada halaman posting.

Catatan: Pengeditan tampilan maksimal untuk formulir komentar memang hanya sebatas pada pewarnaan latar saja, sedangkan untuk penerapan CSS Button dan CSS Textarea tidak bisa diterapkan di sini. Hal itu terjadi karena formulir komentar Blogger pada dasarnya hanyalah berupa iframe yang diletakkan di bawah posting.

iframe merupakan portal untuk menampilkan halaman yang sebenarnya tidak berada dalam halaman yang sedang aktif. Hampir mirip dengan televisi. Hanya saja, ketika kita melihat seorang gadis cantik di televisi, kita tidak bisa melakukan apa-apa terhadap gadis tersebut. Berbeda jika kita melihat seorang gadis cantik dalam sebuah iframe. Saat kita melihatnya di dalam iframe, maka kita bisa melakukan apa saja terhadap gadis itu. Seperti menyentuh, menabrak, bahkan sampai mengobrak-abrik.

Intinya, CSS yang dideklarasikan di halaman induk tidak akan pernah bisa mempengaruhi formulir komentar karena formulir komentar tersebut pada dasarnya memang tidak berada di halaman tersebut.

Bahkan, dengan sebuah iframe Saya juga bisa menampilkan formulir komentar di tempat yang tidak semestinya seperti ini:

Labels: Blogger, CSS

Friday, July 8, 2011

CSS Background, Cara Memodifikasi Latar Belakang Blog

Ini adalah penerapan CSS dasar untuk properti background. Saya harap kalian bisa cepat mengerti. Sebagai bahan praktek, Saya buat sebuah blog sederhana dengan background yang sangat miskin seperti ini:

Dalam tampilan tersebut tampak sebuah blog dengan latar belakang hijau. Untuk mengganti warna latar belakang, terkadang sebuah template sudah dilengkapi dengan variabel-variabel yang nantinya akan ditampilkan dalam halaman Perancang Template. Dari tempat itu kamu bisa dengan mudah menentukan warna latar belakang hanya dengan sekali klik:

<Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#ffffff">

Tapi bagaimana jika templatemu ternyata tidak memiliki variabel tersebut? Satu-satunya jalan hanyalah dengan mengubah background secara manual, yaitu melalui halaman Edit HTML.

Untuk mengganti warna latar belakang melalui halaman Edit HTML, carilah sebuah grup kode yang tampak kurang lebih seperti ini:

body {
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  color:$mainTextColor;
  background:#692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
  font-size:small;
}

Tidak usah pedulikan kode apa saja yang ada di dalamnya, cukup fokus pada selektor body {} dan properti background.

Coba perhatikan kode ini:

background: #692 url(http://www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;

#692 adalah warna background (aslinya #669922 tapi kode warnanya diringkas menjadi tiga digit angka).
url(http://www.blogblog.com/moto_son/outerwrap.gif) adalah background image berupa potongan gambar yang jika ditampilkan akan terlihat seperti ini (klik!)
Untuk menampilkan sebuah background image, caranya cukup dengan mengakses URL gambar tersebut.
top center adalah posisi background. Dalam posisi horizontal (sumbu-X), background image tersebut ditempatkan rata atas atau top, sementara dalam posisi vertikal (sumbu-Y), background image tersebut ditempatkan rata tengah.
repeat-y menunjukkan bahwa background tersebut akan diduplikasi secara vertikal mengikuti sumbu-Y. Cara ini digunakan untuk mengurangi besar gambar yang umumnya diterapkan dalam background image berupa gradient atau pattern.

Oke, sekarang kita mulai prakteknya. Kita tahu bahwa kode #692 merupakan warna hijau dalam blog kita. Jika kita ganti kode warna tersebut dengan #882222 misalnya, maka hasilnya akan menjadi seperti ini:

Sekarang kita coba untuk mengganti background imagenya. Ganti URL gambarnya dengan URL ini: http://2.bp.blogspot.com/-l0z0zMqI2_E/TgvtSDKcsoI/AAAAAAAAAVQ/YzrI83Qjcio/s1600/arsip.jpg lalu ganti kode repeat-y dengan repeat saja, sehingga background image akan diduplikasikan ke sumbu-X dan sumbu-Y seperti ini:

Itu adalah sedikit cara untuk mengganti background image secara manual. Dan ingat, background image tersebut secara langsung diterapkan dalam latar belakang blog karena yang tadi kita utak-atik adalah format-format model yang berada di dalam selektor body {}. Jika kalian menerapkan praktek ini dalam selektor #outer-wrapper {} misalnya, maka kamu akan mendapatkan hasil seperti ini:

Saya mulai menulis tutorial CSS ini karena hari ini Saya mendapati seorang pembaca yang mengira bahwa template Saya ini adalah template hasil unduhan atau membeli dari sebuah situs. Padahal Saya mendesain template ini dengan memanfaatkan kerangka dari template Rounders bawaan dari Blogger.

Jika dilihat-lihat, memang masih tampak mirip kan?

Labels: CSS, Dasar, Desain

Percepat Loading Blog dengan Plugin Lazyload

Pos ini sudah kadaluarsa. Peramban moderen sudah tidak bisa lagi membatalkan proses muat gambar meskipun plugin ini sudah melepaskan atribut src pada gambar. Satu-satunya cara yang bisa dilakukan untuk menggunakan plugin ini dengan benar adalah dengan meletakkan URL gambar asli pada atribut data-original. Itu artinya Anda harus mengubah semua URL gambar pada semua posting, dan itu tidak mungkin bisa dilakukan. Plugin ini tidak bisa hanya ditempel begitu saja:

Remove all code regarding placeholder and automatically removing src attribute. It does not work with modern browsers. Must use data-original attribute instead. — Changelog #1.6.0

Alternatif yang lebih sederhana untuk mengetahui cara kerja plugin ini bisa dibaca pada halaman ini ⇒ Lakukan Sesuatu Jika Elemen Mencapai Area Terlihat

Jika kalian mengunjungi Google untuk mencari gambar, mungkin kalian akan menemui situasi semacam ini saat hasil penelusuran gambar ditampilkan:

Lazyload pada Google — Halaman penelusuran gambar **Google**.

Itu adalah salah satu cara Google untuk mempercepat muat halamannya walau dengan hasil temuan gambar yang begitu banyak. Setiap gambar yang masih berada di bawah layar (sebut saja begitu) tidak akan diakses, melainkan hanya akan digantikan dengan sebuah gambar kelabu. Sampai sesaat kemudian layar digulung ke atas dan gambar-gambar kelabu di bawahnya muncul, gambar-gambar kelabu itupun akan menghilang lalu mengubah dirinya menjadi gambar yang asli. Dan, ya, itu adalah sistem Google yang sempat membuat Saya sangat terkesan. Dengan cara ini, maka kita tidak perlu lagi mengeklik tautan Halaman Sebelumnya atau Halaman Berikutnya, kita cukup menggulung layarnya saja ke atas dan gambar-gambar di halaman sebelumnyapun masih tetap ada pada tempatnya. Tidak perlu membolak-balik halaman, dan tentu saja itu akan lebih menghemat waktu dan biaya.

Anda juga bisa menerapkan sistem ini ke dalam blog. Diutamakan untuk blog-blog yang memiliki begitu banyak gambar dalam satu halaman. Percaya tidak percaya, sistem ini hanya melibatkan JQuery

Masuk ke tab Rancangan, kemudian pilih Edit HTML.

Pertama-tama, pastikan dulu bahwa blog Anda sudah dilengkapi dengan JQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

Jika belum ada, salinlah skrip tersebut, kemudian letakkan di atas kode </head>

Setelah itu salin juga kode ini, lalu letakkan tepat di bawah skrip tadi:

<script src='http://reader-download.googlecode.com/svn/trunk/lazyload.js' type='text/javascript'></script>
⇒ https://github.com/tuupola/jquery_lazyload/commit/3f123e96020e9678af15bbf57bf0787339c8eaa5
<script type='text/javascript'>
$(function() {
  $('img').lazyload({
    placeholder : "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
    effect      : "fadeIn",
    threshold   : 500
  });
});
</script>

Klik Simpan Template dan selesai sudah.

Anda lihat URL gambar yang Saya beri tanda itu? Itu adalah gambar kelabu yang Saya maksud. Coba saja akses URL tersebut, Saya jamin Anda tidak akan mememukan apapun kecuali hanya sebuah titik kelabu. Ya, itu adalah gambarnya. Ukurannya hanya 1 × 1 piksel, jadi tidak akan memberatkan.

Labels: Gambar, jQuery

Thursday, July 7, 2011

Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Jika kalian merasa tidak suka dengan gaya artikel/posting terkait dengan gambar/thumbnail, berikut ini adalah model elemen posting terkait berbentuk daftar yang lebih sederhana dan praktis:

Untuk membuatnya, ikutilah langkah-langkah kebenaran Saya ini:

Masuk ke tab Rancangan, kemudian pilih Edit HTML. Cek Expand Template Widget agar seluruh elemen pembangun posting tampil.

Salin kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>:

#mamas-topik {
  margin-top:100px;
  clear:both;
  display:block;
}

.paling-ganteng {
  border:2px solid #666;
  padding:5px;
  background-color:#efefef;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0 0 7px #666;
  -moz-box-shadow:inset 0 0 7px #666;
  box-shadow:inset 0 0 7px #666;
}

.paling-ganteng:hover {background:#f9f9f9;}

.sedunia {
  padding:10px;
  border:1px solid #bbb;
  height:165px;
  overflow:auto;
}

Setelah itu salin juga kode ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mamas-topik'>
<h2>Tutorial Sejenis:</h2>
<div class='paling-ganteng'>
<div class='sedunia'>
<div id='hompimpa'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 7;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 7;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;hompimpa&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

Kemudian letakkan tepat di bawah kode yang tampak seperti ini:

<data:post.body/>

atau seperti ini:

<p><data:post.body/></p>

atau seperti ini:

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Klik Simpan Template dan lihat hasilnya (pada halaman item).

Sedikit Penyesuaian:

Ganti kode yang Saya beri warna merah (Saya harap Anda tidak buta warna) dengan judul yang kalian inginkan.
Di situ juga terdapat beberapa variabel yang bisa kalian utak-atik, tapi Saya rasa itu tidak telalu penting. Langsung simpan saja.
Jika kalian tidak menghendaki scroll bar dalam elemen ini, hapus saja deklarasi overflow:auto; dan ganti value 165px dalam properti height: dengan auto sehingga hasilnya menjadi seperti ini:
```
.sedunia {
  padding:10px;
  border:1px solid #bbb;
  height:auto;
}
```
Dengan begitu tampilan scroll bar akan hilang, sementara tinggi artikel/posting terkaitmu akan menyesuaikan diri dengan banyaknya daftar yang ada di dalamnya.

Labels: Blogger

Daftar CSS Desain Button dari Berbagai Situs

Berikut ini adalah daftar CSS Button yang bisa kamu terapkan dalam blogmu. Beberapa Saya desain sendiri, dan beberapa lagi adalah hasil mengambil dari desain situs-situs yang Saya kunjungi. Halaman ini akan terus bergerak dan akan terus diperbaharui andaikan Saya mendapatkan kesempatan untuk hidup lebih lama (dramatis). Oke ini dia...

Daftar CSS Button untuk Kerangka Dasar:

<input value="Button" type="button">
<input value="Submit" type="submit">
<input value="Reset" type="reset">
<button>Tag Button</button>

Mirip Tuts+ Premium

/* Tuts+ */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  cursor:pointer;
  border:1px solid #e7a943;
  border-bottom-color:#d6982f;
  border-top-color:#f5b74e;
  color:#623f1d;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  padding:10px 18px;
  text-decoration:none;
  text-shadow:0 1px 0 #fede9d;
  -webkit-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -moz-box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  box-shadow:0px 1px 2px #d9d9d9, inset 0px 1px 0px #ffe598;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;
  border-radius:20px;
  background-color:#feda71;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#feda71), to(#febb49));
  background-image:-webkit-linear-gradient(top, #feda71, #febb49);
  background-image:-moz-linear-gradient(top, #feda71, #febb49);
  background-image:-ms-linear-gradient(top, #feda71, #febb49);
  background-image:-o-linear-gradient(top, #feda71, #febb49);
  background-image:linear-gradient(top, #feda71, #febb49);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#feda71', EndColorStr='#febb49');
  outline:none;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-color:#fee296;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#fee296), to(#fec166));
  background-image:-webkit-linear-gradient(top, #fee296, #fec166);
  background-image:-moz-linear-gradient(top, #fee296, #fec166);
  background-image:-ms-linear-gradient(top, #fee296, #fec166);
  background-image:-o-linear-gradient(top, #fee296, #fec166);
  background-image:linear-gradient(top, #fee296, #fec166);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#fee296', EndColorStr='#fec166');
}

Mirip CSS-TRICKS (2011)

css button css-tricks

/* CSS-TRICKS */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  display:inline-block;
  position:relative;
  padding:7px 15px;
  -webkit-border-radius:18px;
  -moz-border-radius:18px;
  border-radius:18px;
  font:15px/1.4 "myriad-pro-1","myriad-pro-2","Lucida Grande",Sans-Serif;
  background-color:#b6d3f4;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#b6d3f4), to(#5483b8)) !important; 
  background-image:-webkit-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-moz-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-ms-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  background-image:-o-linear-gradient(top, #b6d3f4, #5483b8) !important; 
  color:white !important;
  -webkit-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  box-shadow:inset 0 1px 1px white,0 3px 3px rgba(0,0,0,0.6);
  border:1px solid #9ac9ff !important;
  font-weight:600;
  text-shadow:0 -1px 0 rgba(0,0,0,0.3);
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
  box-shadow:inset 0 2px 6px white,0 3px 3px rgba(0,0,0,0.6);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  -webkit-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  -moz-box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  box-shadow:inset 0 2px 6px white,0 1px 1px rgba(0,0,0,0.6);
  top:2px;
}

Mirip Buyatoyota.com

/* Buy A Toyota */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  text-decoration:none;
  font:bold 70% Verdana,sans-serif;
  text-transform:uppercase;
  padding:3px 10px 4px;
  text-shadow:1px 1px 2px #17703e;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  color:#fff;
  border:1px solid #17793E;
  background:#17793E url('http://1.bp.blogspot.com/-GX5RKsbVap0/TkDsfUXdcAI/AAAAAAAAApw/bRikIRqTrFY/s1600/buyatoyota.png') repeat-x;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.9;
  filter:alpha(opacity=90);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
}

Mirip Abu Farhan

css button abu-farhan

/* Abu Farhan */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  outline:none;
  cursor:pointer;
  text-decoration:none;
  font:14px/100% Arial,Helvetica,sans-serif;
  padding:.5em 2em .55em;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius:.5em;
  -moz-border-radius:.5em;
  border-radius:.5em;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2);
  -moz-box-shadow:1px 1px 4px #AAAAAA;
  box-shadow:0 1px 2px rgba(0,0,0,.2);
  color:#fef4e9;
  border:2px solid white !important;
  background:#f78d1d;
  background:-webkit-gradient(linear,left top,left bottom,from(#faa51a),to(#f47a20));
  background:-moz-linear-gradient(top,#faa51a,#f47a20);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a',endColorstr='#f47a20');
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  text-decoration:none;
  background:#f47c20;
  background:-webkit-gradient(linear,left top,left bottom,from(#f88e11),to(#f06015));
  background:-moz-linear-gradient(top,#f88e11,#f06015);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11',endColorstr='#f06015');
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  position:relative;
  top:1px;
  color:#fcd3a5;
  background:-webkit-gradient(linear,left top,left bottom,from(#f47a20),to(#faa51a));
  background:-moz-linear-gradient(top,#f47a20,#faa51a);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20',endColorstr='#faa51a');
}

Biru Segar

/* Biru Segar */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 0.9em Arial,Sans-Serif;
  background:url('http://1.bp.blogspot.com/-i8a-1q97r_o/ThQRxeTBjzI/AAAAAAAAAZQ/YfCsBiEpQwI/s1600/button.png') repeat-x;
  border:0;
  padding:5px 10px;
  color:#fff;
  text-shadow:0 1px 2px #222;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -9px;
  color:#fff;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#000;
  outline:none;
}

Mirip Setting AddThis

/* AddThis */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://2.bp.blogspot.com/-NUbFYgrfMZw/Tf_5hAd49GI/AAAAAAAAATY/FDzgMXQvKlQ/s1600/tombol.gif') repeat-x scroll 0 0 #EDEDED;
  border:1px solid #B7B7B7;
  padding:8px 22px;
  color:#000;
  text-shadow:0 1px 2px #fff;
  -webkit-box-shadow:0 1px 2px #ccc;
  -moz-box-shadow:0 1px 2px #ccc;
  box-shadow:0 1px 2px #ccc;
  -webkit-border-radius:16px;
  -moz-border-radius:16px;
  border-radius:16px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -35px;
  background-color:#DFDFDF;
  border-color:#AFAFAF;
  color:#000;
  cursor:pointer;
  text-decoration:none;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:0 -70px;
  background-color:#D4D3D3;
  outline:medium none;
}

Mirip Yahoo!

css button yahoo!

/* Yahoo! */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#fa2 url('http://3.bp.blogspot.com/-OWOuIfroX6k/ThUdocPWgtI/AAAAAAAAAZw/jGjdN5POwmQ/s1600/yahoo.jpg') repeat-x;
  padding:3px 7px;
  border:1px solid #644e12;
  text-decoration:none;
  color:#000;
  font:bold 0.9em Arial,Sans-serif;
  cursor:pointer;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  opacity:0.9;
  filter: alpha(opacity=90);
}

Mirip Google

css button google

/* Google */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#ccc url('http://3.bp.blogspot.com/-EjKdL802bcA/ThUhSH3XEkI/AAAAAAAAAZ4/h_4Vu7imfys/s1600/buttongoogle.jpg') repeat-x;
  padding:5px 10px;
  border-width:1px;
  border-style:solid;
  border-color:#dfdfdf #aaa #aaa #dfdfdf;
  text-decoration:none;
  color:#000;
  font:normal 0.9em Arial,Sans-Serif;
  -webkit-box-shadow:1px 1px 0 #eee;
  -moz-box-shadow:1px 1px 0 #eee;
  box-shadow:1px 1px 0 #eee;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background:#aaa;
  border:1px solid #999;
}

Mirip Blogger (2010)

css button blogger

/* Blogger */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6598FF url('http://1.bp.blogspot.com/-qOzc14mMCBM/ThU480aWdhI/AAAAAAAAAbA/VpYEc0XpRUo/s1600/bloggerbiru.jpg') repeat-x;
  border:1px solid #003399;
  padding:3px 7px;
  font:bold 12px Arial,sans-serif;
  color:#fff;
  text-transform:uppercase;
  -webkit-border-radius:2px;
  -moz-border-radius:2px;
  border-radius:2px;
}

input[type="submit"],
button {
  background:#FF7602 url('http://3.bp.blogspot.com/-Dsbg9WwDuq4/ThU4_uxFFnI/AAAAAAAAAbI/1ZdGECVZtaI/s1600/bloggeroren.jpg') repeat-x;
  border:1px solid #662f00;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  border:1px solid #000;
}

Mirip Facebook

/* Facebook */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#6079AB url('http://1.bp.blogspot.com/-qqIWi8HlrT0/ThUXzdggHfI/AAAAAAAAAZo/yG6zvJe1Igk/s1600/butonfbbiru.jpg') repeat-x;
  border:1px solid #29447E;
  border-bottom-color:#1A356E;
  padding:2px 5px 4px;
  font:bold 11px Tahoma,Verdana,Arial,sans-serif;
  color:#fff;
  -webkit-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 0 rgba(0,0,0,0.2);
  box-shadow:0 1px 0 rgba(0,0,0,0.2);
  cursor:pointer;
}

input[type="submit"],
button {
  background:#67A54B url('http://2.bp.blogspot.com/-Svb_PRzSLuE/ThUWJnJs8cI/AAAAAAAAAZg/u5Qu-m9mNqQ/s1600/facebookbutton.jpg') repeat-x;
  border:1px solid #3B6E22;
  border-bottom-color:#2C5115;
  padding:5px 10px 6px;
}

Kinclong Menginclong

css button kinclong

/* Kinclong Menginclong */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#135295 url('http://4.bp.blogspot.com/-zsVYM7TZ5MY/ThUopiHuKoI/AAAAAAAAAaA/5t2_qiAVKcU/s1600/menu_hover.gif') repeat-x;
  border:0;
  padding:4px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#c1e5ec;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  opacity:0.7;
  filter: alpha(opacity=70);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  color:#f9d2f4;
}

Tombol Hitam untuk Blog Hitam

css button dark

/* Hitam untuk Hitam */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:#333;
  border:0;
  padding:5px 7px;
  font:bold 11px Verdana,Arial,Sans-Serif;
  color:#91dd4b;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background:#284918;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-color:#fff;
  color:#b82354;
}

Hover Menyala

css button hover menyala

/* Hover Menyala */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:bold 12px Verdana,Arial,Sans-Serif;
  padding:3px 15px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  color:#999;
  border:5px outset #444 !important;
  background:#444;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-box-shadow:0 1px 5px #d0fbf7,0 1px 15px #d0fbf7,0 1px 25px #d0fbf7;
  -moz-box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  box-shadow:0 1px 5px #d0fbf7,0 1px 10px #d0fbf7,0 1px 25px #d0fbf7;
  color:#fff;
}

Janda Kembang

css button violet

/* Janda Kembang */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  font:normal 12px Arial,Sans-Serif;
  padding:3px 15px;
  text-shadow:0 1px 1px rgba(0,0,0,.3);
  -webkit-border-radius:.5em;
  -moz-border-radius:.5em;
  border-radius:.5em;
  -webkit-box-shadow:0 1px 3px #666;
  -moz-box-shadow:0 1px 3px #666;
  box-shadow:0 1px 3px #666;
  color:#fff;
  border:2px solid #e9e9e9 !important;
  background:#8899d0;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  -webkit-transform:rotate(-10deg);
  -moz-transform:rotate(-10deg);
  -ms-transform:rotate(-10deg);
  -o-transform:rotate(-10deg);
  transform:rotate(-10deg);
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  -webkit-transform:rotate(10deg);
  -moz-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
  -o-transform:rotate(10deg);
  transform:rotate(10deg);
  background:#8899a0;
}

Apel Anemia

/* Apel Anemia */
input[type="button"],
input[type="submit"],
input[type="reset"],
button {
  background:url('http://4.bp.blogspot.com/-ZwWV6WKSrj8/ThexOzGH6aI/AAAAAAAAAdI/6xfWx5zt-aA/s1600/apelanemia.jpg') repeat-x;
  border:0;
  padding:3px 15px 4px;
  font:bold 11px Verdana,Arial,sans-serif;
  color:#f3fcd5;
  text-shadow:0 1px 2px #222;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
  -webkit-box-shadow:0 1px 3px #aaa;
  -moz-box-shadow:0 1px 3px #aaa;
  box-shadow:0 1px 3px #aaa;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover {
  background-position:0 -7px;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active {
  background-position:bottom;
}

Pelajari tutorial awalnya di sini

Labels: CSS, Desain

Wednesday, July 6, 2011

CSS Input Text dan Textarea

Satu lagi penerapan CSS dalam elemen-elemen input. Sekarang Saya akan memberikan beberapa tip untuk tampilan input text dan textarea.
Ini adalah contoh tampilan input text dan textarea biasa:

Dan ini adalah CSS untuk mengubah tampilannya:

input[type="text"] {
  font:normal 12px Verdana,Sans-Serif;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 0 5px #666;
  -moz-box-shadow:inset 0 0 5px #666;
  box-shadow:inset 0 0 5px #666;
  padding:2px;
}

textarea {
  font:bold 12px Verdana,Sans-Serif;
  border:5px solid #dcdcdc;
  background-color:#fafafa;
  -webkit-box-shadow:inset 0 0 5px #666;
  -moz-box-shadow:inset 0 0 5px #666;
  box-shadow:inset 0 0 5px #666;
  padding:2px;
}

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

Letakkan kode tersebut di atas </style> atau ]]></b:skin> maka tampilannya akan berubah seperti ini:

Dari penampilan kode ini Saya rasa kalian sudah mengerti maksudnya.

input[type="text"] { ... }



textarea { ... }

Nah, untuk kode yang terakhir itu digunakan untuk membuat tampilan warna textarea dan input text menjadi berubah ketika kursor sedang aktif di dalamnya.

input[type="text"]:focus,
textarea:focus {
  background-color:#FFE4B5;
}

Labels: CSS

Pemahaman Dasar CSS Input Button dan Tag Button

Beberapa dari kalian mungkin merasa bosan dengan tampilan button di halaman blogmu yang tidak bisa menyesuaikan diri dengan tampilan blogmu seperti ini:

Tanpa CSS

Masalahnya, mungkin kalian belum tahu seperti apa format CSS untuk tampilan button ini. Nah, di sini Saya akan menjelaskan tentang teknik dasar dalam mengubah tampilan button di blogmu.
Ini adalah contoh CSS sebuah input button dan tag button dasar (di sini Saya menyamakan tampilan antara button, submit dan reset agar lebih efisien):

input[type="button"],
input[type="submit"],
input[type="reset"],
button { 
  font:normal 0.9em Arial,Sans-Serif; 
  background-color:#4169E1; 
  border:1px solid #B7B7B7; 
  padding:2px 7px; 
  color:#fff; 
}

Letakkan saja CSS tersebut di atas kode </style> atau ]]></b:skin>, maka tampilan tombol-tombol di blogmu akan berubah seperti ini:

Dengan CSS

Namun itu saja sepertinya masih kurang. Kita juga perlu menerapkan event hover dan active pada tombol-tombol tersebut agar tampak lebih agresif dan bikin nafsu para pengunjung untuk memencet. CSS lanjutannya adalah seperti ini:

/* warna background saat pointer di atasnya */ 
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover { 
  background-color:#A52A2A; 
} 

/* warna background saat tombol ditekan */ 
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active { 
  background-color:#000; 
}

Jika kedua event tersebut telah diterapkan, maka hasilnya akan tampak seperti ini:

Kita ketahui dari kode ini bahwa terdapat lima properti yang umum digunakan, yaitu:

font: (mode tampilan (bold normal atau italic), ukuran font dan jenis font)
background: (warna latar belakang)
padding: (jarak antara batas terluar sebuah area dengan kontennya)
color: (warna teks) dan
border: ukuran garis tepi, tipe garis tepi dan warna garis tepi).

Dan ini adalah contoh kerangkanya:

<input value="Button" type="button"/> 
<input value="Submit" type="submit"/> 
<input value="Reset" type="reset"/> 
<button>Tag Button</button>

Tentu saja, itu semua hanya sebagian kecil dari penerapan CSS dalam tombol. Suatu saat mungkin kamu menginginkan tampilan-tampilan tombol yang lebih dahsyat seperti ini, ini, ini atau ini:

Tapi bagaimana?? (Klik di sini!)

Labels: CSS, Dasar

Tuesday, July 5, 2011

Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis

Melanjut sedikit tentang bagaimana JQuery bisa mengubah tampilan list menjadi berbeda warna antara list genap dan list ganjil, ini adalah sebagian kecil cara kerjanya.
Sebagai contoh, kita buat sebuah kerangka list seperti ini (boleh ordered list ataupun unordered list):

<ul class='kuda-zebra'>
     <li>Andai Saja</li>
     <li>Engkau Tahu</li>
     <li>Betapa Aku</li>
     <li>Kebelet Pipis</li>
     <li>Maukah...</li>
</ul>

Di sini kita memakai <ul> atau unordered list.

Sekarang kita buat kode pemodel sederhana untuk bahan praktek tersebut seperti ini:

ul.kuda-zebra  {font-weight:bold;}
.kuda-zebra li {color:darkRed;}

Maka nantinya hasilnya akan tampak seperti ini:

Sekarang kita terapkan sistem JQuery sederhana seperti ini:

$(document).ready(function() {
     $('ul.kuda-zebra li:even').addClass('kampret');
});

Lalu tambahkan sebuah pemodel baru dengan nama li.kampret (maksudnya elemen <li> yang memiliki class "kampret") dan buat deklarasi pewarnaan yang berbeda (misalnya hijau tua):

ul.kuda-zebra  {font-weight:bold;}
.kuda-zebra li {color:darkRed;}
li.kampret     {color:darkGreen;}

Nah, sekarang, elemen listmu akan berubah warna menjadi seperti ini:

Menarik bukan? (Jawab: tidak juga)

Ada dua hal penting yang mempengaruhi perubahan warna ini, yaitu pada CSS li.kampret{ ... } dan dari JQuery itu sendiri.
Perhatikan kode ini: $('ul.kuda-zebra li:even').addClass('kampret');
Kode tersebut dibaca: Elemen <li> bernilai genap yang berada dalam elemen <ul> dengan class "kuda-zebra" akan mendapatkan jatah class "kampret" satu-satu secara otomatis.
Nah, karena kita sudah menentukan bahwa elemen <li> dengan class "kampret" akan mendapatkan tampilan berwarna hijau tua (li.kampret{color:darkGreen;}), maka berubahlah tampilan setiap elemen <li> bernilai genap secara otomatis.

:even artinya genap, :odd artinya ganjil

Sebenarnya, meskipun tidak memakai JQuery, kita juga bisa menerapkan sistem ini dengan menuliskannya secara manual seperti ini:

<ul class='kuda-zebra'>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
     <li class='kampret'>Genap</li>
     <li>Ganjil</li>
</ul>

Tapi bukankah itu adalah pekerjaan yang melelahkan? (Jawab:Hmmm...)
Asal tahu saja, penerapan sistem ini juga digunakan dalam Accordion TOC buatan Abu Farhan, juga pada menu navigasi JQuery yang warnanya cokelat itu.

Labels: CSS, jQuery

Membuat Menu Navigasi dengan Efek Hover Menggulung

Sebelum membuat menu ini, Saya beri gambarannya terlebih dahulu:

Lihat Demo

Untuk membuatnya, pertama-tama masuklah ke Tab Rancangan kemudian pilih Edit HTML. Lalu cari script yang tampak seperti ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

Jika templatemu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head>

Setelah itu salin script ini, lalu letakkan tepat di bawah script tadi:

<script type="text/javascript">
//<![CDATA[ 
$(document).ready(function() { 
    $("#topnav li").prepend("<span></span>"); 
    $("#topnav li").each(function() { 
        var linkText = $(this).find("a").html(); 
        $(this).find("span").show().html(linkText); 
    }); 
    $("#topnav li").hover(function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "-40"}, 250);}, 
    function() { 
        $(this).find("span").stop().animate({ 
            marginTop: "0"}, 250); 
    }); 
});
//]]>
</script>

Jika sudah, sekarang kita masuk ke tahap pemodelan. Salin kode CSS ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

ul#topnav { 
  margin:30px; 
  padding:0; 
  list-style-type:none; 
  float:left; 
  font-size:1em; 
} 

ul#topnav li { 
  margin:0; 
  padding:0; 
  overflow:hidden; 
  float:left; 
  height:40px; 
} 

ul#topnav a, ul#topnav span { 
  padding:10px 20px; 
  float:left; 
  text-decoration:none; 
  color:#fff; 
  background:transparent url(http://2.bp.blogspot.com/-PUd9Qj1OKtE/ThKinZljN6I/AAAAAAAAAW0/i00P00dOdnI/s1600/a_bg.gif) repeat-x; 
  text-transform:uppercase; 
  clear:both; 
  width:100%; 
  height:20px; 
  line-height:20px; 
} 

ul#topnav a { 
  color:#555; 
  background-position:left bottom; 
} 

ul#topnav span { 
  background-position:left top; 
}

Terakhir, kita hanya tinggal meletakkan kerangka objeknya. Salin kode di bawah ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<ul id='topnav'> 
    <li><a href='#'>Beranda</a></li> 
    <li><a href='#'>Profil</a></li> 
    <li><a href='#'>Portfolio</a></li> 
    <li><a href='#'>Komentar</a></li> 
    <li><a href='#'>Kontak</a></li> 
    <li><a href='#'>Bantuan</a></li> 
</ul>

Pelajari tentang beberapa alternatif peletakkan menu navigasi di sini »
Simpan templatemu.

Sumber: hatetepe://wewewe.sohtanaka.com

Labels: Desain, jQuery

Menonaktifkan Klik-Kanan Mouse dengan Alert

Itu adalah pesan yang akan muncul jika kamu melakukan klik-kanan pada halaman yang telah dilengkapi script ini. Fungsinya tentu saja, untuk membuat seorang pengunjung menjadi sedikit kerepotan ketika hendak menyalin sesuatu di blog kita. Dan secara otomatis, jendela peringatan ini akan mencegah para pengunjung untuk menyalin sesuatu di halamanmu. Meskipun sebenarnya kita juga bisa menggunakan perintah Edit » Copy atau cukup menekan tombol CTRL+C di papan kunci, tapi paling tidak cara ini bisa sedikit memberi peringatan bahwa di sini ada monster berbahaya (???)

Salin kode ini kemudian letakkan dalam sebuah elemen halaman HTML/JavaScript, kemudian simpan:

<script type="text/Javascript">
// Sumber: http://dynamicdrive.com
var message="Hayooo...!!!!!";
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

Ganti teks yang berwarna merah dengan kata-kata dahsyatmu.

Labels: JavaScript, Masalah

Dropdown Navigasi Sederhana dengan JQuery

Satu lagi penerapan prinsip kerja slide panel (baca tutorialnya di sini). Di sini kita lebih memfokuskan kepada penerapan <ul> sebagai objek terpicu, sementara <img> sebagai pemicunya:

Lihat Demo

Untuk membuatnya, pertama-tama pastikan bahwa blogmu sudah memiliki skrip yang kurang lebih tampak seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Jika sudah ketemu, kita langsung masuk ke langkah dua (jika tidak ketemu, salinlah kode tersebut dan letakkan di atas </head>). Berikutnya salin kode ini, kemudian letakkan di bawah kode tadi:

<script type="text/javascript">
$(document).ready(function () {
    $("ul.menu_awak li:even").addClass("alt");
    $('.menu_ndhas').click(function() {
        $('ul.menu_awak').slideToggle();
    });
    $('ul.menu_awak li a').mouseover(function() {
        $(this).animate({
            fontSize: "14px",
            paddingLeft: "20px"
        }, 50);
    });
    $('ul.menu_awak li a').mouseout(function() {
        $(this).animate({
            fontSize: "12px",
            paddingLeft: "10px"
        }, 50);
    });
});
</script>

Lalu letakkan kode CSS ini di atas kode ]]></b:skin> atau </style>:

.menu_ndhas {
  display:block;
  border:1px solid #998675;
  margin:0;
  padding:0;
}
.menu_awak {
  width:184px;
  border-right:1px solid #998675;
  border-bottom:1px solid #998675;
  border-left:1px solid #998675;
  margin:0;
  padding:0;
  display:none;
}
.menu_awak li {background-color:#493e3b}
.menu_awak li.alt {background-color:#362f2d}
.menu_awak li a {
  display:block;
  color:white;
  text-decoration:none;
  padding:10px;
}
.menu_awak li a:hover {
  padding:15px 10px;
  font-weight:bold;
}

Nah, sekarang tinggal menempatkan kerangkanya saja di tempat yang kamu inginkan:

<img class="menu_ndhas" width="184" height="32" src="http://1.bp.blogspot.com/-v1gLRs4wDq4/ThJzVsSsbaI/AAAAAAAAAWM/cVxrI8haoOg/s1600/navigate.png"/>
<ul class="menu_awak">
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
  <li><a href="#">Menu 4</a></li>
  <li><a href="#">Menu 5</a></li>
</ul>

Klik Simpan Template dan lihat hasilnya.

Labels: Desain, jQuery

Monday, July 4, 2011

Prinsip dasar Pembuatan Slide Panel dengan JQuery

Sederhananya, beginilah tampilan awal sebuah slide panel (lihat demo) JQuery. Untuk membuatnya kita hanya membutuhkan empat langkah sederhana:
Pertama, carilah script yang kurang lebih tampak seperti ini dalam baris kode HTML templatemu:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Jika template blogmu ternyata sudah disertai dengan script ini, kamu tidak perlu menambahkannya dan bisa langsung mengarah ke langkah berikutnya. Tapi jika belum ada, salinlah dulu script di atas, kemudian letakkan di atas kode </head>.

Ke dua, salinlah script pengaturan efek, kecepatan efek dan objek-objek yang diseleksi ini tepat di bawah kode tadi:

<script type='text/javascript'>
$(document).ready(function() {
    $('.btn-slide').click(function() {
        $('#panel').slideToggle('slow');
    });
});
</script>

Ke tiga, salinlah kode pemodel ini, kemudian letakkan di atas kode </style> atau ]]></b:skin>

#panel {
  background:#754c24;
  max-height:200px;
  padding:10px;
  color:#ddd;
  overflow:auto;
  display:none;
}

.slide {
  margin:0;
  padding:0;
  border-top:4px solid #422410;
}

.btn-slide {
  cursor:pointer;
  text-align:center;
  padding:10px;
  margin:0 auto;
  display:block;
  font:bold 120%/100% Arial,Helvetica,sans-serif;
  color:#fff;
  background-color:#FF8C00;
}

Terakhir, kamu tinggal meletakkan kerangka objeknya saja di tempat yang kamu inginkan:

<div id='panel'>
    KONTEN SLIDE PANEL DI SINI
</div>
<div class='slide'><span class='btn-slide'>Tombol Slide Panel di Sini</span></div>

Sebagai contoh, letakkan kode tersebut di bawah <div id='sidebar-wrapper'> maka kamu akan menemukan panel tersebut di sidebar.
Klik Simpan Template dan lihat hasilnya.

Namun tentu saja, hasilnya tidak akan sama persis dengan gambar di atas, karena di sini Saya lebih menekankan kepada cara kerja objek ini, bukan pada bentuknya:

Lihat Demo

Untuk memahami cara kerjanya kita masuki tahap pemahaman lebih lanjut.

Pemahaman Lebih Lanjut:

Perhatikan kode ini:

<script type='text/javascript'>
$(document).ready(function() {
    $('.btn-slide').click(function(){
        $('#panel').slideToggle('slow');
    });
});
</script>

Fokuslah pada kode $('.btn-slide') dan $('#panel').
Kode $('.btn-slide') menunjukkan bahwa fungsi ini diterapkan untuk sebuah elemen objek yang memiliki class "btn-slide" (dalam hal ini adalah elemen <span class="btn-slide">Tombol Slide Panel di Sini</span>).
.click adalah event mouse yang diterapkan pada objek ".btn-slide".

#panel bisa dibilang adalah elemen yang akan dikenai efek JQuery berdasarkan event yang diberikan pada objek <span class="btn-slide">Tombol Slide Panel di Sini</span>.
Dalam hal ini, elemen yang dimaksud adalah:

<div id="panel">
    KONTEN SLIDE PANEL DI SINI
</div>

Intinya, .btn-slide adalah tombolnya dan #panel adalah pintunya. Ketika .btn-slide ditekan, maka #panel akan bereaksi sesuai dengan jenis aksinya (dalam hal ini adalah .slideToggle).

Satu lagi, cobalah untuk sekali-kali mengganti nilai slow dengan normal atau fast dalam kode .slideToggle('slow'); dan lihat perbedaan kecepatan pembukaan panelnya. ^_^

Begitulah kira-kira cara kerjanya. Sedangkan untuk pembuatan model-model objek atau yang lainnya bisa kamu sesuaikan dengan mengutak-atik CSSnya agar tampilannya bisa sesuai dengan template blogmu seperti ini:

Semuanya tergantung dari kreativitas kalian.

Labels: jQuery

DTE :]

Saturday, July 30, 2011

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

JQuery Image Menu, Membuat Menu Slide Gambar

Langkah Pertama: Pemanggilan JQuery dan Paket Easing

Saturday, July 9, 2011

CSS Formulir Komentar untuk Blogspot

Friday, July 8, 2011

CSS Background, Cara Memodifikasi Latar Belakang Blog

Percepat Loading Blog dengan Plugin Lazyload

Thursday, July 7, 2011

Artikel/Posting Terkait dengan atau tanpa Scroll Bar

Sedikit Penyesuaian:

Daftar CSS Desain Button dari Berbagai Situs

Daftar CSS Button untuk Kerangka Dasar:

Mirip Tuts+ Premium

Mirip CSS-TRICKS (2011)

Mirip Buyatoyota.com

Mirip Abu Farhan

Biru Segar

Mirip Setting AddThis

Mirip Yahoo!

Mirip Google

Mirip Blogger (2010)

Mirip Facebook

Kinclong Menginclong

Tombol Hitam untuk Blog Hitam

Hover Menyala

Janda Kembang

Apel Anemia

Wednesday, July 6, 2011

CSS Input Text dan Textarea

Pemahaman Dasar CSS Input Button dan Tag Button

Tuesday, July 5, 2011

Membuat Tampilan List/Daftar dengan Warna Berselingan secara Otomatis

Membuat Menu Navigasi dengan Efek Hover Menggulung

Menonaktifkan Klik-Kanan Mouse dengan Alert

Dropdown Navigasi Sederhana dengan JQuery

Monday, July 4, 2011

Prinsip dasar Pembuatan Slide Panel dengan JQuery

Pemahaman Lebih Lanjut:

About Me

Links

Previous Posts

Archives