Unsur Dasar Desain Web Responsif

Para desainer web dunia sedang hangat membahas tentang desain web responsif. Pada tingkatan tertentu, popularitas konsep desain web yang responsif menjadi agenda utama, hal ini karena semakin banyaknya pengguna di tambah beragamnya perangkat keras akses internet yang digunakan pengguna untuk mengakses halaman web. iPad, iPhone, perangkat mobile Android, desktop, netbook dan lain-lain. Ini memaksa kita masuk ke dalam sebuah masa di mana desain web harus berfungsi dalam banyak cara dan banyak perangkat. Mari kita sama-sama telusuri pengertian dan prinsip di balik desain web responsif.

Fitur Inti Desain Web Responsif

Agar desain web kita dianggap "responsif," maka perlu untuk memahami tiga fitur kunci dalam merancang web responsif. Desainer dan pengembang web, Ethan Marcotte menuliskan bahwa konsep desain web responsif memiliki tiga fitur kunci, yaitu:

1. Situs yang akan dibangun harus memiliki kerangka dasar fleksibel (flexible grid).
2. Gambar yang dimasukkan ke dalam desain harus mampu fleksibel sendiri.
3. Pandangan yang berbeda (different view) harus diaktifkan pada konteks yang berbeda melalui media query.

Tiga kunci dasar desain web responsif diatas harus diperhatikan dengan seksama agar hasil akhir web benar-benar responsif. Jika kemudian kita mendesain web tanpa tiga kunci dasar tadi maka hasil akhir web bukanlah web responsif. Berarti desain cacat...

Grid Fleksibel

Istilah grid ini berkaitan dengan desain web yang cukup tumit. Mengharuskan situs web yang anda desain menggunakan grid fleksibel bukan berarti bahwa itu membatasi anda untuk memilih berbagai bentuk dan ukuran dalam penyesuaian dengan sistem jaringan yang kompleks di luar sana. Namun sebaliknya grid fleksibel membantu kita untuk mendesain web yang lebih mudah dan fleksibel dengan berbagai pandangan.

Mendefinisikan parameter sendiri untuk kolom (column), jarak (spacing) dan kontainer (container) merupakan solusi terbaik untuk desain web yang akan menghasilkan halaman web fleksibel dan mampu menyesuaikan dengan sistem di luar sana. Bahkan, sistem grid yang ada sebagian besar, terbatas hanya menggunakan CSS class untuk menentukan ukuran (size), ruang (space) dan keselarasan (alignment). Ketika anda mencoba untuk menempatkan objek di batas-batas ini ke dalam desain web responsif yang anda buat, itu justru akan membuat proses menjadi lebih rumit dan akan memakan banyak waktu dibandingkan dengan koding grid buatan anda sendiri.

Apakah anda menggunakan sistem grid premade (bahan mentah sebagai acuan) atau membuat kustom grid sendiri, hal ini merupakan aspek penting dari sebuah sistem grid fleksibel dalam menyusun mekanisme ukuran, tata letak dan jarak. Bagi seorang desainer web, ini berarti meninggalkan satuan ukuran pixel yang telah lama menemani hari-hari kita dalam mendesain web dan menggantinya dengan layout web yang menggunakan satuan ukuran presentase dan em, yang merupakan satuan unit ukuran relatif.

Namun, hal ini bukan berarti kita meninggalkan satuan pixel dalam pembuatan layout web dengan perangkat lunak editing gambar (misal; Photoshop, Fireworks dan lain-lain). Sebaliknya, ini merupakan tantangan kepada para desainer web untuk kembali belajar dasar-dasar perhitungan matematika. Perhitungan matematika merupakan bagian dari proses desain web responsif yang digunakan sebagai proses konversi dari satuan pixel ke dalam layout web dengan menggunakan satuan unit pengukuran relatif (persen dan em).

Gambar Fleksibel

Gambar yang bergerak dan berskala dengan grid fleksibel adalah kunci berikutnya dalam mendesain web responsif. Maksudnya, ukuran gambar dan posisi gambar akan berubah sesuai dengan pandangan browser. Hal ini merupakan kisah klasik yang membuat para desainer web cukup mengerutkan dahi pertanda pusing tingkat kelurahan. Kenapa? Karena gambar yang diload oleh browser adalah gambar dengan ukuran maksimal, ini membuat loading page (pemuatan halaman) cenderung menjadi lebih berat, sedangkan desainer web hanya bisa mengubah ukuran skala gambarnya saja dari atribut HTML width dan height tanpa mampu menurunkan ukuran gambar yang sebenarnya. Perubahan skala gambar mengikuti pandangan dari perangkat browser di tujukan untuk penyesuaian dan memberikan ruang teks artikel pada halaman tersebut. Dan perubahan skala gambar bukanlah cara terbaik untuk mempercepat loading page web responsif. Mungkin inilah saatnya bagi para desainer web untuk mengkaji ulang penggunaan gambar-gambar yang terlalu berlebihan pada desain web-nya.

Sebuah alternatif lain dalam masalah gambar adalah dengan menggunakan CSS. Properti CSS overflow (misal; overflow: hidden) memberikan kemampuan cropping gambar dinamis yang mampu menyesuaikan gambar dengan wadah (frame) ketika terjadi perubahan pandangan. Selain itu ada juga yang menggunakan metode penyediaan berbagai ukuran gambar pada servernya, sehingga mampu melayani berbagai ukuran gambar yang tepat sesuai dengan permintaan dari agen perangkat browser dengan memanfaatkan fitur deteksi side-server atau side-client seiring dengan berkembangnya metode DOM.

Dan cara terakhir untuk mengakali beratnya loading page akibat ukuran gambar adalah dengan metode menyembunyikan gambar. Hal ini diterapkan pada halaman situs yang memfokuskan web pada konten non-gambar, menggunakan metode stylesheet media query yang menetapkan property display: none pada gambar. Atau menerapkan sebuah subset pada opsi penggantian gambar dengan menggunakan class seperti optional-img sebagai sebuah cara pemilihan gambar melalui selektor CSS yang spesifik didalam stylesheet. Sederhananya, menggunakan opsi pengganti gambar asli dengan gambar yang lebih kecil melalui CSS.

Media Query

Media Query adalah fitur yang paling menarik untuk di bahas (namun paling menakutkan untuk desainer web yang belum terbiasa) dalam proses desain web responsif. Terkadang, para desainer web terbawa arus dengan berkonsentrasi hanya pada media query, tanpa memikirkan komponen inti dari sebuah desain web responsif, bahkan meninggalkan komponen opsional halaman fleksibel. Hal ini justru membuat media query hampir tak berpengaruh terhadap situs web jika meninggalkan prinsip dasar HTML dan CSS yang meliputi grid fleksibel dan gambar fleksibel. Media Query memungkinkan para desainer untuk membuat beberapa layout menggunakan dokumen HTML yang sama secara selektif melalui stylesheet berdasarkan fitur agen pengguna (user agent), seperti misalnya ukuran jendela browser, orientasi layar (landscape atau portrait), resolusi layar, warna (kemampuan menampilkan sejumlah warna pada layar), dan lain sebagainya.

Berikut adalah contoh media query yang melayani stylesheet tergantung pada lebar viewport (pandangan):

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" />
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" />

Media Query tidak dikhususkan untuk memberikan solusi untuk mobile atau solusi untuk tablet (kadang para desainer web pemula berfikir demikian). Sebaliknya, media query dan desain responsif mengajak kita untuk berfikir keluar dari batasan ukuran atau resolusi layar dan mulai membangun website fleksibel yang mampu menyesuaikan diri (secara teoritis) dengan semua media yang beragam.

Apakah Bisa Desain Web Responsif

Seperti telah ditulis diatas mengenai tiga fitur kunci dari desain web responsif, itu hanyalah hal kecil jika dibandingkan dengan semangat anda. Dari 90% desain web responsif yang terbaik adalah dengan memulainya untuk belajar mendesainnya. Well-formed HTML dan tata letak fleksibel harus menjadi bagian penting yang harus diperhatikan dari web desainer modern. Apa yang telah disampaikan oleh Marcotte mengenai aturan desain web responsif hanyalah untuk menunjukan kepada kita cara baru dalam penerapan praktek-praktek mendesain yang terbaik yang harus kita kerjakan. Dalam konteks modern, mengingat bahwa kebutuhan akan layout fleksibel, hal penting yang harus dilakukan sekarang adalah kemampuan dalam mengakomodasi susunan terbaik yang lebih luas sesuai dengan situasi saat ini, kita memerlukan desain yang fleksibel dan fluid. Desain web responsif memaksa kita meluangkan banyak waktu untuk melakukan hal yang benar, bukan hanya bagaimana kita menulis kode, namun bagaimana kita memahami ide-ide baru dan menciptakannya menjadi desain yang segar.

Kami Masih Belum Mengerti

Siapapun yang telah meluangkan banyak waktu dalam mengerjakan konten fleksibel dan merealisasikannya melalui media query maka ia akan menyadari bahwa ini belum mampu memberikan solusi terbaik dalam membangun website yang siap melayani setiap user agent. Pengguna menjelajah web dengan niat berbeda yang terkadang mempunyai keinginan dan kebutuhan yang berbeda-beda, tergantung dari perangkat yang digunakan. Seorang pengguna dengan mobile web browser kemungkinan besar akan tertarik untuk mengakses informasi utama secepat mungkin. Misal; untuk restoran, pengguna mungkin hanya ingin menelusuri menu, nomor telephone untuk pemesanan, alamat, dan sebagainya. Dalam kondisi seperti ini, memuat seluruh halaman situs dan kemudian menyembunyikannya sebanyak 90% bagian halaman, jelas bukan solusi ideal.

Arah Yang Baik

Apa yang membuat desain itu harus responsif, kemudian, apakah langkahnya sudah benar. Banyak situs dibuat untuk memperoleh desain responsif yang terbaik, dan setiap desainer tentunya harus mampu menemukan solusi dan mencari cara untuk mengoptimalkan desain mereka. Desainer akan terus membuat kemajuan untuk menemukan solusi dan menemukan desain yang mampu bekerja dengan baik pada berbagai perangkat dan situasi, sehingga mampu menampilkan web dengan cara yang paling ideal dan intuitif. Hal ini karena kedua belah pihak (desainer dan pengguna) mengarahkan ke arah yang terbaik, ini memberi banyak kesempatan untuk membangun web yang lebih dinamis, menarik dan indah.

Dan itu adalah sesuatu yang sangat berharga... Selamat berkarya...

Pranala Luar :
[1] Kumpulan Situs Responsif
[2] 960 Grid System
[3] 978 Grid System
[4] Fluid Baseline Grid System
[5] Tiny Fluid Grid System

Read More

Jasa Design Blog 2012 GRATIS

Jasa Design Blog 2012 GRATIS, untuk Instansi/ pribadi/ usaha ataupun badan sekolah dll. Jasa Design Blog 2012 GRATIS Kami menerima jasa design blog dengan konten-konten yang baik dan sesuai anjuran master seo. Dengan cara yang cukup simple dan Mudah anda dapat memiliki Web Blog yang sudah Support SEO. GRATIS Konsultasi.

Kami yang bernaung di bawah Art Media Nozh Group menyediakan berbagai macam paket untuk anda, sehingga tidak menguras kantong anda. Hebatnya lagi kami berikan bonus untuk maintenance selama 3 Bulan free/GRATIS. Dengan berbagai pengalaman kami didunia Blog dan team yang selalu mengembangkan ide-ide baru, Jasa Design Blog 2012 GRATIS, Design kami juga kami perlebar tidak hanya pada web Blog saja teapi meliputi Design Foto, Design Video, Design Banner dan Masih banyak lagi.

Kami juga menyediakan jasa untuk Pembuatan Design Sertifikat atau Banner acara anda. Jasa Design Blog 2012 GRATIS, solusi usaha Anda.

Semuanya Kami kemas hanya dengan Harga yang Spektakuler bahkan kami sediakan Jasa Design Blog 2012 GRATIS, dengan syarat dan ketentuan yang berlaku.

Informasi silahkan langsung Hub : 085649905055 ~ effand

Pelayanan dan Kualitas Jaminan Kami.

Read More

Custom HTTP Error 404 Blogger

Kadang-kadang ketika kita mencoba untuk mengunjungi suatu halaman web, kita bertemu dengan pesan kesalahan HTTP. Pesan itu muncul karena ada ketidak beresan pada server web. Namun pada beberapa kasus pesan itu bisa saja muncul karena kesalahan yang kita buat, tetapi pada umumnya pesan itu muncul karena terjadi kesalahan pada situs. Setiap jenis kode kesalahan HTTP memiliki maksud tertentu yang digunakan untuk mengidentifikasi bagian yang mengalami kesalahan pada situs yang bersangkutan. Misalnya, jika kita mencoba mengakses sebuah halaman yang tidak tersedia pada sebuah situs web, maka halaman akan diisi dengan pesan kesalahan 404. Sekarang mungkin diantara kita ada yang bertanya-tanya, apa saja kesalahan yang sering terjadi dan dialami ketika sedang melakukan surfing web? Dibawah ini akan dipaparkan 5 kesalahan yang paling sering terjadi menurut Google, namun tidak akan dibahas secara rinci. Jika anda penasaran tentang kode-kode kesalahan pada situs web secara rinci, silahkan telusuri situs 404 Error Pages yang khusus membahas tentang hal tersebut.

Demo Template HTTP Error 404

5 Pesan Kesalahan HTTP (HTTP Error)

Dibawah ini akan diurutkan 5 pesan kesalahan HTTP yang paling umum ditemukan menurut Google yang disusun secara terbalik. 

5. HTTP Error 401 (Unauthorized)

Kesalahan ini terjadi bila pengunjung situs web mencoba untuk mengakses sebuah halaman web yang dibatasi (restricted) tapi tidak syah (unauthorized) untuk diakses. Pesan error 401 biasanya terjadi karena usaha login yang gagal. 

4. HTTP Error 400 (Bad Request)

Pesan kesalahan ini di sampaikan oleh server web untuk menginformasikan bahwa aplikasi yang kita gunakan (misalnya web browser) tidak mampu mengakses atau menjangkau halaman dengan baik, atau karena permintaan mengalami hambatan diperjalanan. 

 3. HTTP Error 403 (Forbidden)

Kesalahan ini mirip dengan HTTP Error 401, tapi perhatikan perbedaan antara yang tidak sah (unauthorized) dan di larang (forbidden). Dalam hal ini mungkin saja kita diberi kesempatan dan berhasil login kedalam situs yang bersangkutan. Pesan error 403 dapat terjadi misalnya jika ktia mencoba untuk mengakses sebuah direktori (terlarang) di situs web tersebut. 

2. HTTP Error 404 (Not Found) 

Kebanyakan orang mengenali pesan error yang satu ini. Sebuah pesan error 404 terjadi ketika kita mencoba untuk mengakses sumber daya pada web server (biasanya halaman web) yang tidak tersedia. Hal ini terjadi misalnya karena link rusak, kesalahan pengetikan URL, atau webmaster telah memindahkan halaman yang sedang diakses ke tempat lain (atau justru halaman yang di maksud di hapus). Untuk memperbaiki penampilan pesan kesalahan 404, beberapa website membuat halaman kustom (namun tidak sedikit yang kemudian mengacuhkannya, seperti saya...). 

1. HTTP Error 500 (Internal Server Error) 

Deskripsi dari pesan kesalahan ini telah banyak diceritakan. Ini adalah pesan kesalahan umum ketika web server menemukan beberapa kesalahan internal. Sebagai contoh, server web kelebihan beban sehingga tidak dapat menangani permintaan dengan baik. Jika dilihat dari statistik pencarian Google, pesan kesalahan ini paling banyak ditemukan dan menunjukan 2 kali lebih banyak dari pada pesan kesalahan 404. Selanjutnya kita akan membahas cara mendesain tampilan HTTP Error 404 khusus untuk Blogger. Sedang pesan kesalahan lain tidak akan dibahas karena memang para pengguna blogger tidak pernah mengetahui dan diberi kesempatan untuk mengakses mesin blogger. Maka dari itu, kita hanya khusus mendesain HTTP Error 404 saja.

Skenario HTML

Untuk menampilkan pesan error pada halaman yang tidak tersedia maka dipersiapkan halaman HTML seperti dibawah ini. Skenario HTML dibawah ini boleh disisipkan pada halaman terpisah (halaman statis) atau disisipkan pada tag body. Dibawah ini hanyalah skenario contoh jadi silahkan saja di kembangkan sesuai dengan imajinasi anda.

<div id='error'>
 <div id='tirai-kiri'/>
 <div id='tirai-kanan'/>
 <div id='wadah'>
  <div class='tengah'>
  <div class='box-atas'/>
   <div class='box'>
    <div id='halaman'>
     <h2>404 - Halaman Tidak Tersedia</h2>
     <p>Ouuupsss! Ma&#39;af. Halaman yang anda cari tidak bisa ditampilkan.</p>
     <p><a expr:href='data:blog.homepageUrl'>Beranda</a></p>
    </div>
   </div>
  <div class='box-bawah'/>
  </div>
 </div>
</div>

Skenario CSS

Kode CSS dibawah ini diperlukan untuk memberikan penampilan yang lebih menarik pada skenario HTML di atas. CSS ibarat make-up untuk memanipulasi halaman HTML agar tampil lebih meyakinkan dan menarik. Silahkan dikembangkan, dan hasilnya harus lebih bagus dari contoh...

#error {
 background-color: #F2F2F2;
 background-image: url('https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png');
 background-repeat: repeat;
 color: #555555;
 height: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 position: fixed;
 text-align: center;
 top: 0;
 width: 100%;
 z-index: 999;
 line-height: 170%;
}
#error #halaman {
 position: relative;
 height: auto !important;
 height: 100%;
 min-height: 99%;
}
#error #halaman h2 {
 margin: 1em 0;
}
#error #tirai-kiri{
 position:absolute;
 top:0;
 left:0;
 width:155px;
 height:510px;
 background-image: url('https://lh6.googleusercontent.com/-wct7jeYp2cg/T3MaVzMDJvI/AAAAAAAAGPk/arvNoSn7pVA/s1600/tirai-kiri.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #tirai-kanan{
 position:absolute;
 top:0;
 right:0;
 width:155px;
 height:510px;
 background-image: url('https://lh5.googleusercontent.com/-zMCL2WLx8KI/T3MaUklLOGI/AAAAAAAAGPc/MMswCsLnHq0/s1600/tirai-kanan.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #wadah {
 margin-top: 120px;
}
#error .tengah {
 margin: 0 auto;
 width: 920px;
}
#error .box-atas, #error .box-bawah {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: repeat;
 background-position: 0 0;
 height: 43px;
 margin: 0 -12px;
 width: 944px;
}
#error .box-atas {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -43px;
}
#error .box {
 background-image: url('https://lh3.googleusercontent.com/-Eomlz27Ho5c/T3MaRM7be5I/AAAAAAAAGPM/z8xCVXmpA9o/s1600/box-horizontal.png');
 background-repeat: repeat-y;
 background-position: 0 0;
 min-height: 200px;
 padding: 10px 50px;
}

Skenario Kondisi (Conditional Tag)

Skenario kondisi adalah kunci untuk mendeteksi halaman yang sedang di akses oleh pengunjung. Kita asumsikan, jika halaman yang sedang di akses tersedia maka halaman (termasuk isi artikel, sidebar, header, footer dan lain-lainnya) akan di tampilkan utuh, namun jika halaman yang di akses itu tidak tersedia/tidak ada, maka halaman HTTP Error 404 akan di tampilkan. Sebenarnya cara ini telah banyak dibahas oleh para Blogger baik Blogger Lokal maupun Blogger Interlokal, silahkan anda cari-cari cara yang terbaik dalam menggunakan tag kondisi (conditional tag).

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

<!-- disini halaman yang tersedia baik itu artikel, sidebar, header, footer dan lain-lain -->

</b:if>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

<!-- disini halaman error yang akan tampil ketika halaman tidak tersedia -->

</b:if>

Skenario kondisi diatas sebenarnya memanfaatkan metode pemeriksaan URL, jika dibaca maka:

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Jika kondisi URL (data:blog.pageType) tidak sama (!=) dengan halaman error (error_page) maka tag berikutnya akan di akses

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>

Jika kondisi URL (data:blog.pageType) sama (==) dengan halaman error (error_page) maka tag berikutnya akan di akses

Integrasi HTTP Error 404 pada Template Blogger

Langkah 1
Login ke Blogger
Langkah 2 
Masuk ke Dasbor - Template - Edit HTML
Langkah 3 
Cari kode dibawah ini:

]]></b:skin>

Langkah 4 
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 (Lihat Skenario CSS):

#error {
 background-color: #F2F2F2;
 background-image: url('https://lh6.googleusercontent.com/-e0_3IuBZwgs/TyvWQEKqSzI/AAAAAAAAF_w/fuoTc-tNh2Y/d/refreshbg.png');
 background-repeat: repeat;
 color: #555555;
 height: 100%;
 left: 0;
 margin: 0;
 padding: 0;
 position: fixed;
 text-align: center;
 top: 0;
 width: 100%;
 z-index: 999;
 line-height: 170%;
}
#error #halaman {
 position: relative;
 height: auto !important;
 height: 100%;
 min-height: 99%;
}
#error #halaman h2 {
 margin: 1em 0;
}
#error #tirai-kiri{
 position:absolute;
 top:0;
 left:0;
 width:155px;
 height:510px;
 background-image: url('https://lh6.googleusercontent.com/-wct7jeYp2cg/T3MaVzMDJvI/AAAAAAAAGPk/arvNoSn7pVA/s1600/tirai-kiri.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #tirai-kanan{
 position:absolute;
 top:0;
 right:0;
 width:155px;
 height:510px;
 background-image: url('https://lh5.googleusercontent.com/-zMCL2WLx8KI/T3MaUklLOGI/AAAAAAAAGPc/MMswCsLnHq0/s1600/tirai-kanan.png');
 background-repeat : no-repeat;
 z-index: 1;
}
#error #wadah {
 margin-top: 120px;
}
#error .tengah {
 margin: 0 auto;
 width: 920px;
}
#error .box-atas, #error .box-bawah {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: repeat;
 background-position: 0 0;
 height: 43px;
 margin: 0 -12px;
 width: 944px;
}
#error .box-atas {
 background-image: url('https://lh6.googleusercontent.com/-0viaSIbOuI0/T3MaRZ99_aI/AAAAAAAAGPQ/i7TVEVYzKUE/s1600/box-sprite.png');
 background-repeat: no-repeat;
 background-position: 0 -43px;
}
#error .box {
 background-image: url('https://lh3.googleusercontent.com/-Eomlz27Ho5c/T3MaRM7be5I/AAAAAAAAGPM/z8xCVXmpA9o/s1600/box-horizontal.png');
 background-repeat: repeat-y;
 background-position: 0 0;
 min-height: 200px;
 padding: 10px 50px;
}

Langkah 5 
Cari kode dibawah ini:

<body

Langkah 6 
Masukan (copy paste) kode dibawah ini tepat di bawah kode pada langkah 5 (Lihat Skenario Kondisi):

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Langkah 7 
Cari kode dibawah ini:

</body>

Langkah 8 
Masukan (copy paste) kode (X)HTML dibawah ini tepat diatas kode pada langkah 7 (Lihat Skenario HTML dan Skenario Kondisi):

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error'>
 <div id='tirai-kiri'/>
 <div id='tirai-kanan'/>
 <div id='wadah'>
  <div class='tengah'>
  <div class='box-atas'/>
   <div class='box'>
    <div id='halaman'>
     <h2>404 - Halaman Tidak Tersedia</h2>
     <p>Ouuupsss! Ma&#39;af. Halaman yang anda cari tidak bisa ditampilkan.</p>
     <p><a expr:href='data:blog.homepageUrl'>Beranda</a></p>
    </div>
   </div>
  <div class='box-bawah'/>
  </div>
 </div>
</div>
</b:if>

Langkah 9 
Simpan template blog dan preview blog anda, masukan alamat url artikel sembarangan. Misal:

http://esingkatan.blogspot.com/404

Langkah 10 
Bagaimana hasilnya...

Demo Template HTTP Error 404

Unduh Template HTTP Error 404

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Pranala Luar :
[1] Wikipedia : HTTP 404
[2] Wikipedia : List of HTTP status codes

Read More

jQuery Author Threaded Comments Highlight

Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (penulis). Hal ini terjadi karena terjadi perubahan struktur dan kode yang digunakan antara komentar versi klasik dengan komentar versi threaded, namun bukan berarti tidak ada cara. Setelah Blogger Tune-Up meneliti kode-kode yang digunakan pada komentar versi threaded baik itu kode HTML maupun kode CSS-nya, maka cara-cara lama yang mengandalkan kode CSS sudah tidak bisa digunakan. Cara terbaik yang ditemukan Blogger Tune-Up adalah dengan melibatkan jQuery untuk memberikan sentuhan berbeda antara komentar pengunjung dengan komentar penulis/author, baik perbedaan warna latar, warna tulisan atau menambahkan background gambar. Mari kita telusuri...

Skenario HTML

Dibawah ini adalah kode HTML untuk threaded comment yang digunakan Blogger pada saat halaman artikel di load (panggil). Ini dilakukan untuk menidentifikasi tag bagian mana yang akan diberi sentuhan berbeda. Berikut kode yang digunakan Blogger:

<!-- Tag HTML dan Class threaded comment untuk author -->
<div class="comment-block">
 <div class="comment-header">
  <cite class="user blog-author">
   <a href="/" rel="nofollow">Hendriono</a>
  </cite>
  <span class="icon user blog-author"></span>
  <span class="datetime">
   <a href="/" rel="nofollow">Mar 23, 2012 01:30 PM</a>
  </span>
 </div>
 <p class="comment-content">Isi komentar Author</p>
</div>
<!-- Tag HTML dan Class threaded comment untuk pengunjung -->
<div class="comment-block">
 <div class="comment-header">
  <cite class="user">
   <a href="/" rel="nofollow">Pengunjung</a>
  </cite>
  <span class="icon user"></span>
  <span class="datetime">
   <a href="/" rel="nofollow">Mar 23, 2012 03:30 PM</a>
  </span>
 </div>
 <p class="comment-content">Isi komentar pengunjung</p>
</div>

Jika di teliti maka hanya ada satu perbedaan yang membedakan antara komentar pengunjung dengan komentar penulis. Perbedaan tersebut terletak pada class blog-author, jika pada komentar penulis menggunakan class="user blog-author" sedangkan pada pengunjung hanya menggunakan class="user". Sedangkan pada tag <p class="comment-content"> tidak dibedakan antara komentar pengunjung dengan komentar penulis, pada bagian inilah Blogger Tune-Up akan memberikan sentuhan untuk membedakan antara komentar penulis dengan komentar pengunjung. Silahkan diteliti untuk dikembangkan lebih lanjut.

Skenario CSS

Setelah diketahui dan ditemukan bagian yang akan diberikan sentuhan berbeda maka selanjutnya kita persiapkan kode CSS untuk membedakan komentar penulis dengan komentar pengunjung. Blogger Tune-Up menuliskan kode CSS seperti di bawah ini, namun silahkan berkreasi sesuai dengan imajinasi anda.

.author-highlight {
 background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;
 background-color: #F0F0F0;
}

Pada kode CSS ini anda bisa menambahkan property lain, baik itu border, color, font dan lain sebagainya. Silahkan berkreasi...

Skenario jQuery

Setelah kode CSS ditulis, selanjutnya adalah menyisipkan kode CSS tersebut pada skenario HTML yang telah dijelaskan di atas. Blogger Tune-Up kebetulan ingin menyisipkan class author-highlight pada tag HTML <p class="comment-content">, maka kode jQuery di tulis seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
 $('.user.blog-author').closest('.comment-block').find('p.comment-content').addClass('author-highlight');
});
//]]></script>

Namun jika anda ingin memberikan sentuhan berbeda pada tag <div class="comment-block"> maka kode jQuery di tulis seperti dibawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('.user.blog-author').closest('.comment-block').addClass('author-highlight');
 });
//]]></script>

Nah sekarang, silahkan berkreasi dengan imajinasi yang anda miliki dan kembangkan lebih cantik dan menarik lagi...

Integrasi jQuery Author Threaded Comments Highlight

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke Edit HTML
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3 (Lihat Skenario CSS):

.author-highlight {
 background-image: url(https://lh5.googleusercontent.com/_xcD4JK_dIjU/TasKJgjf1FI/AAAAAAAAFEA/pvkcJFnS-DA/s800/author_mark.png);
 background-repeat: no-repeat;
 background-position: 100% 100%;
 background-color: #F0F0F0;
}

Langkah 5
Cari kode dibawah ini:

</head>

atau kode:

</body>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5 (Lihat Skenario jQuery):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
 $(document).ready(function(){
  $('.user.blog-author').closest('.comment-block').addClass('author-highlight');
 });
//]]></script>

Langkah 7
Simpan template anda dan preview blog...

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Menggunakan jQuery .on() dan .off()

Pada tanggal 3 November 2011, jQuery merilis versi 1.7^[1] dengan menambahkan dua cara baru untuk menyisipkan penanganan event (event handler) .on() dan .off(). Ini mungkin saja bukan perubahan besar bagi jQuery untuk sebuah rilis baru, namun hal ini merupakan hal yang tetap menarik untuk dibahas. Dua penanganan event tersebut merupakan hal terbaik untuk menyatukan beberapa penangan event yang akan membantu kita dalam menulis kode jQuery yang lebih rapi dan efisien kedepannya.

Pada artikel ini, akan dibahas secara singkat saja tentang perpindahan penangan event dari .bind(), .live() atau .delegate() menjadi .on() dan .off(). Setiap terjadi perubahan atau penambahan fungsi pada jQuery, dokumentasi resmi .on() dan .off() telah ditulis secara lengkap dan alangkah lebih baiknya jika anda membaca dokumentasi resminya yang sudah dilampirkan di setiap pembahasan di bawah ini jika menemukan masalah yang harus dipertanyakan.

Apakah Penangan Event (Event Handler)?

Mayoritas kode-kode JavaScript di picu oleh sebuah event. Page load ditangani sebuah event, anda menekan tombol atau klik tombol, ditangani oleh sebuah event, bahkan ketika anda memindahkan mouse, maka itu juga ditangani oleh sebuah event. Penanganan event (Event Handler) adalah nadi dari JavaScript untuk menceritakan apa yang harus dilakukannya pada berbagai situasi. Quirksmode^[2] bahkan menuliskan bahwa "tanpa penanganan event tidak ada gunanya menambahkan JavaScript ke halaman Anda. Script terbaik adalah yang bereaksi terhadap apa yang dilakukan pengguna."

.on()^[3]

Event handler .on() di buat untuk mengganti dua event handle yaitu .bind() dan .delegate(). Syntax ditulis seperti dibawah ini:

$(elements).on(events [, selector] [, data], handler);

Penjelasan:

• events adalah tipe event. Ini bisa saja merupakan satu atau lebih tipe event yang dipisahkan spasi, misal 'click' atau 'click keydown'. Hal ini dapat juga menggunakan nama tambahan, misal 'click.pluginku'.
• selector digunakan untuk menentukan elemen turunan yang memicu event. Ini adalah opsional, ini tidak termasuk kedalam event yang selalu memicu ketika elemen event terjadi/berlaku.
• data adalah beberapa data yang ingin anda sampaikan ke handler ketika event di picu. Ini juga opsional, dan digunakan pada objek biasa.
• handler adalah fungsi untuk mengeksekusi ketika event di picu.

Anda juga dapat menggunakan pemetaan event (eventsMap) untuk menentukan beberapa event yang terikat pada satu elemen.

$(elements).on(eventsMap [, selector] [, data]);

Contoh :

$('#kontener a').on({
 click: function() {
  event.preventDefault();
  console.log('item anchor diklik');
 },
 mouseenter: function() {
  console.log('enter!');
 }
});

Mengubah dari .bind() ke .on()

Jika anda sering menggunakan .bind() di dalam kode anda, anda perlu melakukan perubahan mudah ke .on(). Cukup dengan mengganti .bind() dengan .on().

// cara lama - .bind(events, handler);
$('#kontener a').bind('click', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

// cara baru (jQuery 1.7+) - on(events, handler);
$('#kontener a').on('click', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

Jangan berfikir anda harus membuat fungsi handler didalam .on(). Cara pemasangan kode handler yang akan memanggil fungsi terpisah.

// fungsi penanganan (handler)
function handleClick(event) {
 event.preventDefault();
 console.log('item anchor diklik');
}

$('#kontener a').on('click', handleClick);

Ini mempunyai manfaat tambahan yang memungkinkan anda untuk menghapus penanganan individu (individual handler) dengan menggunakan .off().

Mengubah dari .live() ke .on()

jQuery .live() tidak lagi dipergunakan pada versi 1.7. .live() pada awalnya di gunakan untuk melampirkan event handler pada elemen yang tidak tersedia di dalam DOM. Fungsi ini biasanya digunakan untuk menghasilkan halaman dinamis atau memuat konten, tetapi metode ini telah dianggap sebagai metode yang jelek untuk saat ini.

Terdapat beberapa masalah besar dengan .live(), sebagian pengembang kode mengeluhkan kinerja yang buruk pada halaman-halaman yang besar, respon yang lambat dan perilaku-perilaku yang aneh dengan .live() ketika diintegrasikan pada elemen dokumen. Namun sayangnya masih banyak sejumlah pengembang yang tetap menggunakan .live() pada kode-kode yang mereka buat. Jika anda merupakan salah satu pengembang yang tetap mempertahankan .live() maka mulai sekarang tinggalkan .live(). Kenapa? Silahkan baca pada artikel Joakim Ling dengan judul "Why jQuery Live is a bad option to use"^[4] untuk memahami lebih jauh tentang kelemahan .live().

Lalu apa yang harus digunakan untuk menghasilkan konten dinamis? Kita harus beralih dan mendelegasikan handler menggunakan handler baru yaitu .on(). Asumsinya jika kita menambahkan konten dinamis untuk lemen DIV dengan DIV "kontener", dari pada menggunakan cara dibawah ini:

// jangan digunakan! - .live(events, handler)
$('#kontener a').live('click', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

Lebih baik menggunakan cara dibawah ini:

// cara baru (jQuery 1.7+) - .on(events, selector, handler)
$('#kontener').on('click', 'a', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

Ini berfungsi menyisipkan event untuk setiap anchor ke dalam elemen div#kontener, mengurangi ruang lingkup akar dokumen elemen yang harus diperiksa dan meningkatkan efisiensi. Perhatikan! Persempit pencocokan selector, hal ini akan lebih efisien. Meskipun contoh di atas menggunakan anchor, cobalah untuk menghindari penyisipan handler pada setiap anchor. Akan lebih baik jika memberikan class atau id.

Mengubah dari .delegate() ke .on()

Jika kita menggunakan .delegate(), kode akan membutuhkan sedikit penyusunan ulang untuk bekerja pada .on(). Dengan .on(), parameter selector dan eventType harus dialih posisikan.

// cara lama - .delegate(selector, events, handler);
$('#kontener').delegate('a', 'click', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

// cara baru (jQuery 1.7+) - on(events, selector, handler);
$('#kontener').on('click', 'a', function(event) {
 event.preventDefault();
 console.log('item anchor diklik');
});

Ini hanya perubahan untuk konversi dari .delegate().

.off()^[5]

.off() adalah kebalikan dari .on() untuk menghentikan beberapa (atau semua) yang telah selesai dilakukan oleh .on(). Sintaks ditulis seperti dibawah ini:

$(elements).off( [ events ] [, selector] [, handler] );

Dengan .off() semua parameter adalah opsional. Penggunaan parameter akan memungkinkan untuk lebih spesifik dalam event handle yang ingin di nonaktifkan/dimatikan. Penulisan $(elements).off() akan menghapus semua event handle dari elemen.

Berpindah .unbind() ke .off()

Cukup mengganti .unbind() dengan .off() untuk (pada beberapa kasus) perubahan kode.

// cara lama - .bind(events);
$('#kontener a').unbind('click');

// cara baru (jQuery 1.7+) - off(events);
$('#kontener a').off('click');

Jika anda ingin menghapus handle tertentu dan anda telah membuat fungsi handle terpisah, anda dapat menggunakan:

$('#kontener a').off('click', handleClick);

Menggunakan metode ini, memungkinakn untuk menghapus beberapa fungsionalitas event handler tanpa menghapus semua handle.

Mengubah dari .die() ke .off()

Ketika kita sudah tidak lagi menggunakan .live(), maka begitu pula seharusnya, tidak perlu lagi menggunakan .die().

// jangan digunakan! - .die(events)
$('#kontener a').die('click');

// cara baru (jQuery 1.7+) - .on(events, selector, handler)
$('#kontener').off('click', 'a');

Seperti halnya .live(), .die() juga tidak lagi digunakan. Memang sudah waktunya .die() untuk die! (mati!).

Mengubah dari .undelegate() ke .off()

Seperti .on(), urutan pada parameter ini hanya cukup di ubah posisi untuk konsistensi.

// cara lama - .undelegate(selector, events);
$('#kontener a').undelegate('a', 'click');

// cara baru (jQuery 1.7+) - off(events, selector);
$('#kontener a').off('click', 'a');

.one()^[6]

Ini digunakan jika anda menginginkan event hanya dapat diakses sekali. jQuery event handler .one() disisipkan pada penanganan untuk satu kali klik dan klik selanjutnya tanpa harus menuliskan kode tambahan. Walaupun .one() telah dimasukan kedalam jQuery, namun saya secara pribadi jarang melihat penggunaannya. Pada versi 1.7 telah diperbarui untuk memungkinkan penggunaan delegasi.

$(elements).one(events [, selector] [, data], handler);

Parameternya adalah sama seperti halnya untuk .on().

Kesimpulan

Sekarang kita sudah sama-sama belajar sekilas pandang tentang .on() dan .off(). Saatnya kita berkreasi dengan imajinasi dan pengetahuan kita. Penulis hanya berharap, hal ini merupakan titik awal yang baik untuk bisa memicu kreatifitas saya dan anda untuk mempelajari serta menyelidiki lebih jauh pada penambahan event handle baru ini. Jika anda masih penasaran dan merasa kurang dengan informasi di atas, silahkan buka halaman demi halaman dokumentasi pada link catatan kaki. Dan saya sangat senang jika kemudian terjadi diskusi disini.

~Ma'af... Demo Underconstruction~

Credits :
[1] jQuery 1.7 Released
[2] Introduction to Events
[3] Event Handler Attachment .on()
[4] Why jQuery Live is a bad option to use
[5] Event Handler Attachment .off()
[6] Event Handler Attachment .one()
[7] Special thanks to Andi Smith for great article

Read More

Struktur Dasar Dari Text Shadow CSS

Inilah Struktur Dasar Dari Text Shadow CSS ~ Tutorial CSS / CSS 3 tentang Struktur Dasar Text Shadow CSS adalah pemanfaatan efek bayangan yang dibuat dibelakang Tulisan / Text bisa berupa shadow, emboss atau inset.

Susunan standart bisa berupa pendeklarasian seperti ini :

TEXT-SHADOW : 0 0 0 0 #FFF;

Text Shadow : Dekalrasi dari Efek bayangan dengan CSS

0 0 0 0 : adalah posisi bayangan yang bisa juragan modifikasi

#fff  : Kode warna yang menjadi bayangan

Anda masih bingung .. . ??

Lihat gambar berikut ini ~

Struktur Dasar Dari Text Shadow CSS

Angka Paling Depan adalah Bayangan Atas

Angka Kedua adalah Bayangan Bawah

Angka ketiga merupakan ketajaman bayangan (BLUR)

#fff ~ Warna Bayangan

Lihat Demonya klik [+]

Read More

Tempat/ Hosting Upload File Javascript

Tempat/ Hosting Upload File Javascript Terbaru

Aregnoz.blogspot.com,  Selamat malam sahabat blogger, malam ini setelah terbangun dari tidur langsung kepikiran project yang belum selesai. Kali ini saya akan membagikan tips saja atau triks untuk kalian yang ingin mengupload File Javascript ke Hosting dengan cepat dan cara yang sederhana. 

Tempat/ Hosting Upload File Javascript Terbaru, Kamu hanya tinggal memilih do Choose untuk mengambil file javascript kamu dan kemudian centang jika ingin opsional dan kemudian isikan emailmu di bawahnya.

NB : url/domain dengan atau tanpa www adalah sama saja.

Setelah beberapa saat, tunggulah hingga proses uploading selesai. Kemudian silahkan buka email anda untuk mengetahui link javascriptnya.

Kurang lebih seperti diatas untuk cara Upload File Javascript Terbaru. untuk seterusnya hanya tinggal mengcopy ke html blog anda atau sesuai kebutuhan anda mau menempatkan dimana. Semoga membantu.

Terimakasiih anda telah mambacara Artikel "Tempat/ Hosting Upload File Javascript Terbaru"
Langsung Ke TKP klik Disini

Keep Smile blogger indonesia.

Read More

Progress Animation - jQuery Image Rotator

Blogger Tune-Up beberapa hari ini disibukan dengan pekerjaan yang menurut orang lain mungkin biasa-biasa saja tapi bagi penulis sangatlah sulit. Penulis sedang mengotak-atik kode template Blogger versi HTML5 untuk membuat template index video yang diambil dari YouTube, Vimeo dan MetaCafe namun karena nyubi akhirnya pusing sendiri. Disaat stress tingkat benua ini kemudian hiburan dengan berkunjung pada beberapa situs, sedang asyik-asyiknya berselancar tiba-tiba laptop kesayangan tertutup jendela perangkat lunak yang tidak dikenali, dan perangkat lunak ini bernama Trojan.

Laptop berbasis sistem operasi jendela ini akhirnya ngadat untuk diajak berselancar. Jika laptop tua ini dipasang antivirus, dijamin dan garansi 100% pasti super lambat kerjanya. Maka dicari-carilah perangkat antitrojan, antimalware dan lain sebagainya, namun karena trojan yang sedang berkembang biak ini tidak dikenali namanya, akhirnya minta bantuan situs penyedia Online Scanner milik BitDefender. Ketika halaman BitDefender Online Scanner dibuka, mata tertuju pada Animasi pada saat melakukan scanning sistem. Progress Animation yang ditampilkan sangat memikat mata dan memancing ide ini untuk membuatnya. Ide ini kemudian dicoba untuk direalisasikan menggunakan bantuan Plugin jQuery Rotate buatan Wroclaw dengan framework jQuery.

Demo Progress Animation - jQuery Image Rotator

Skenario HTML

Asumsikan bahwa kita akan menggunakan sebuah latar yang kita beri class layer, kemudian sebuah wadah animasi yang kita beri class scanning, sebuah wadah gambar yang kita beri class radar, dan sebuah gambar yang berisi gambar radar sebagai objek yang akan diputar, sehingga skenario HTML-nya seperti dibawah ini:

<div class="layer">
 <div class="scanning">
  <div class="radar">
   <img src="radar.png" id="putar"/>
  </div>
 </div>
</div>

Pada skenario diatas jika kita perhatikan maka tampilan memiliki 3 lapisan; layer, scanning, radar dan objek yang akan diputar berada didalam tag img yaitu radar.png.

Skenario CSS

Agar tampilan HTML menjadi lebih menarik dan terasa hidup, dibawah ini kita beri sentuhan kode CSS yang digunakan untuk mempengaruhi masing-masing lapisan. Lapisan layer diberi latar sebuah gambar layer.png dengan tinggi (height) 100%, lebar (width) 100%, jarak tepi (margin) atas bawah 0, dan jarak tepi kiri kanan otomatis agar posisi lapisan layer seimbang berada di tengah halaman. Wadah animasi yaitu lapisan scanning diatur dengan lebar dan tinggi sesuai ukuran gambar scanning.png. Dan lapisan wadah objek yang akan diputar yaitu radar juga diatur tinggi dan lebarnya sesuai dengan ukuran objek gambar radar.png.

.layer {
 background: url(layer.png) no-repeat center center transparent;
 height: 100%;
 margin: 0 auto;
 width: 100%;
}
.scanning {
 background: url(scanning.png) no-repeat scroll center center transparent;
 height: 354px;
 margin: 100px auto 0;
 width: 346px;
}
.radar {
 height: 222px;
 margin: 100px auto 0;
 position: relative;
 top: 58px;
 width: 222px;
 z-index: 0;
}

Skenario jQuery

Dibawah ini adalah kode jQuery untuk memutar objek gambar radar.png. Perhatikan pada skenarion HTML bahwa objek gambar pada kode <img src="radar.png" id="putar"/> diberi ID putar, maka pada kode jQuery yang harus di load untuk di putar adalah yang memiliki ID putar (#putar). Sebenarnya pengaturan plugin jQuery Rotate ini banyak, namun pada artikel ini kita hanya akan membahas satu fungsi saja. Untuk informasi pengaturan lainnya silahkan kunjungi halaman Dokumentasi jQuery Rotate.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://yandex.st/jquery/easing/1.3/jquery.easing.min.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotateCompressed.js"></script>
<script type="text/javascript"> 
$(window).load(function(){
 var rotation = function (){
    $("#putar").rotate({
    angle:0, 
    animateTo:360, 
    callback: rotation,
    easing: function(x, t, b, c, d) { return (t/d)*c ; }
  });
 }
 rotation();
});
</script>

Pengaturan jQuery Rotate

Dibawah ini sekilas penjelasan mengenai kode plugin jQuery Rotate yang digunakan pada demo.

$(window).load(function(){

Kode diatas untuk memulai animasi ketika window (halaman) di load

var rotation = function (){

Kode diatas untuk membuat variabel rotation yang berisi fungsi rotasi

$("#putar").rotate({

Objek dengan ID putar diputar

angle:0, 

dengan sudut mulai 0 derajat

animateTo:360, 

diberikan animasi sebanyak 360 derajat

callback: rotation,

ketika objek telah berputar sebanyak 360 derajat maka objek akan diputar ulang

easing: function(x, t, b, c, d) { return (t/d)*c ; }

fungsi easing untuk memberikan efek natural dan lembut, lebih jelasnya silahkan bukan komentasi

});

fungsi memutar objek ditutup

}

deklarasi variabel rotation ditutup

rotation();

efek rotation di aktifkan

});

fungsi animasi saat halaman dibuka ditutup

Unduh Progress Animation - jQuery Image Rotator

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Special thanks to BitDefender for image and idea, and big thanks to Wroclaw for jQuery Rotate Plugin...

Read More

Meta Tag Title SEO Friendly

Meta Tag Title SEO Friendly

Aregnoz Blog, Karena permintaan dari teman saya untuk membuat atau yang lebih benar adalah memposting trik-trik SEO, maka pada kesempatan kali ini saya akan mencoba membagikan rahasia saya dalam mendapatkan Meta Tag dari google. Title SEO atau Biasanya Meta Tag.

Sebenarnya cara Meta Tag Title SEO Friendly ini adalah hasil dari beberapa template yang support SEO friendly dan akhirnya terkumpul selanjutnya sebagai bahan semangat untuk agan2 yang baru membuat Blog.

Dengan demikian SEO itu sangat lah penting bagi anda yang mempunya website. Kita harus sedikit mengotak-atik dan mencoba beberapa menunya. Karena sudah janji maka saya akan tampilkan Meta Tag Title SEO Friendly

<head><b:include data='blog' name='all-head-content'/><b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.pageTitle/></title><meta content='isi dengan descripsimu' name='DESCRIPTION'/><meta content='isi dengan keyword ' name='KEYWORDS'/> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/></title><meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Description'/><meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.title + &quot;, &quot; + data:blog.pageName' name='Keywords'/></b:if>
<meta content='index, follow' name='robots'/><meta content='2 days' name='revisit-after'/><meta content='id' name='language'/><meta content='id' name='geo.country'/><meta content='Indonesia' name='geo.placename'/><meta content='global' name='distribution'/><meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/><meta content='true' name='MSSmartTagsPreventParsing'/><meta content='blogger' name='generator'/><meta content='general' name='rating'/>
<link expr:href='data:blog.url' rel='canonical'/><b:skin><![CDATA[

Selamat sejauh ini anda sudah bisa melihat blog anda dengan meta tag yang cukup friendly, untuk pengembangan akan kita bahas selanjutnya. Silahkan dikembangkan Meta Tag Title SEO Friendly sesuai kebutuhan agan2 masing2.

Semoga berhasil.. Tunggu sekitar seminggu dan lihat hasilnya.

Read More

Membuat Teks Alay Dengan Cepat

Membuat Teks Alay Dengan Cepat

Aregnoz Blog, Mungkin anda sedikit aneh dengan judul "Membuat Teks Alay Dengan Cepat" yang saya buat disini, saya sendiripun juga bingung mau memberi judul apa postingan saya kali ini. Tapi yang jelas bahwa anda yang suka Alay dan suka berposting di wall fb temen dan pingin tulisan anda Alay bisa mencoba salah satu web karya anak bangsa ini tentang "Membuat Teks Alay Dengan Cepat".

The Simple "ALAY" Text Generator, anda bisa menulis layak nya anda menulis seperti biasanya, dan dengan menekan radiobox yang ada dengan 3 pilihan tulisan alay nya anda akan mudah mengcopy nya. Membuat Teks Alay Dengan Cepat, dan bagi orang awampun pasti akan lebih mudah memahaminya karena memang ini juga memakai bahasa Indonesia.

Oke Selamat mencobanya cara Membuat Teks Alay Dengan Cepat.

Berikut ini Link nya.

Tulisan Alay Generator

Read More

Konsep Dasar dan Basic Belajar CSS

Konsep Dasar dan Basic Belajar CSS

Konsep Dasar dan Basic Belajar CSS ~ Belajar dari Dasar tentang Css merupakan pikiran saya diawal mengenal sedikit tentang CSS. Walau sampai saat ini juga masih tahap belajar dan terus kesana kemari mengkopi dan mengedit referensi dari blog orang lain.

Belajar CSS memang bagi sebagian orang cukup sulit, namun jika ditekuni tidak satu bulanpun sudah cukup mengerti struktur pemasangan dan script yang ada pada CSS.

Sebuah CSS (cascading style sheet) berkas memungkinkan Anda untuk memisahkan situs web Anda (X) HTML konten dari gaya bawaan seperti biasa Anda gunakan file HTML untuk mengatur konten, tetapi semua tampilan (font, warna, latar belakang, perbatasan, format teks, efek link & seterusnya ...) kini kita akan buat dengan CSS.

Pada titik ini Anda memiliki beberapa pilihan cara menggunakan CSS, baik secara internal maupun eksternal.


Internal Stylesheet
Pertama kita akan membahas metode internal.Dengan cara ini Anda hanya menempatkan kode CSS dalam <head> ..... </ head> tag dari setiap file HTML (X) dimana Anda ingin membuat gaya dengan CSS.
Format ini ditunjukkan pada contoh di bawah.

<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>

Dengan metode ini setiap file (X) HTML berisi kode CSS yang dibutuhkan untuk gaya setiap halaman. Yang berarti bahwa setiap perubahan yang Anda ingin membuat untuk satu halaman, harus dapat dilakukan untuk semua. Metode ini bisa baik jika Anda menggunakan untuk gaya hanya satu halaman, atau jika Anda ingin halaman yang berbeda [Blogazine] untuk memiliki berbagai gaya. 

Eksternal Stylesheet

Berikutnya kita akan membahas metode eksternal. Sebuah file CSS eksternal dapat dibuat dengan editor teks atau HTML seperti "Notepad" atau "Dreamweaver". Sebuah file CSS tidak berisi (X) HTML, hanya CSS. Anda cukup simpan dengan ekstensi file. Css. Anda dapat membuat link ke file eksternal dengan menempatkan salah satu link berikut di bagian header setiap file HTML (X) yang ingin anda gunakan berhaya dengan file CSS.

<link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />

Atau Anda juga dapat menggunakan metode @ import seperti ditunjukkan di bawah

<style type=”text/css”>@import url(Path To stylesheet.css)</style>

Salah satu dari metode ini dicapai dengan menempatkan satu atau yang lain di bagian header seperti ditunjukkan pada contoh di bawah ini.

<head>
<title><title>
<link rel=”stylesheet” type=”text/css”href=”style.css” />
</head>
<body>

<head>
<title><title>
<style type=”text/css”> @import url(Path To stylesheet.css) </style>
</head>
<body>

Dengan menggunakan style sheet eksternal, semua file Anda (X) HTML file link ke satu file CSS untuk style halaman. Ini berarti, bahwa jika Anda perlu untuk mengubah desain dari semua halaman Anda, Anda hanya perlu mengedit satu file css. Untuk membuat perubahan global di seluruh situs web.

Berikut adalah beberapa alasan ini lebih baik.

• mudah Perawatan
• Mengurangi Ukuran File
• Mengurangi Bandwidth
• Peningkatan Fleksibilitas

Oke kawand sekiand dulu Perkenalan dasar CSS diatas.
Selamat berkarya. ^_^

Read More

jQuery Animation - Hover Image Caption

Artikel kali ini kita akan membahas cara memberikan caption atau deskripsi pada gambar dengan bantuan jQuery untuk memberikan efek animasinya. Ketika kita mengarahkan pinter mouse (hover) diatas gambar maka caption yang tadinya disembunyikan akan dimunculkan dengan efek slideup. Pergeseran caption juga akan menggeser posisi gambar keatas. Dan ketika pointer mouse di geser menjauh dari gambar maka caption akan kembali turun dengan efek slidedown hingga tersembunyi, sedangkan gambar akan kembali turun pada posisi semula. Demikian sekilas gambaran cara kerja jQuery Animation - Hover Image Caption, namun harus diperhatikan bahwa script jQuery ini tidak bekerja dengan baik pada framework jQuery versi 1.7.1. Silahkan lihat demo dibawah ini untuk melihat hasil akhirnya.

Demo jQuery Animation Hover Image Caption

Skenario HTML

Skenario kode HTML dibawah ini silahkan sesuaikan saja dengan kebutuhan. Hal terpenting adalah class figure-caption dan class figure-caption-text.

<div class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsfdYFGsZ3OT6zRV5tzHTRQaheTAJ2BEbiAKaups-vMoa6g2hYww4LwULVEI8DA-_ELiAWT6HvECZJjvZ0Kpe9H5qGhXsKVj9g4Bna6xHSk8U8-TPyhWTvggGnteD9BK2JVce-djpFhQ/s380/003.jpg"/>
 </a>
 <p class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </p>
</div>

Update! Skenario HTML 5

Terima kasih untuk sahabat blogger Taufik Nurrohman yang telah menambahkan skenario HTML untuk versi 5. Bagi anda yang sudah menerapkan template Blogger versi HTML5 atau bagi penggunan non Blogger yang sudah menggunakan HTML 5, skenario HTML5 dibawah ini cocok bagi yang sangat memperhatikan HTML Typography.

<figure class="figure-caption">
 <a href="http://modification-blog.blogspot.com/" title="Blogger Tune-Up" target="_blank">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHsfdYFGsZ3OT6zRV5tzHTRQaheTAJ2BEbiAKaups-vMoa6g2hYww4LwULVEI8DA-_ELiAWT6HvECZJjvZ0Kpe9H5qGhXsKVj9g4Bna6xHSk8U8-TPyhWTvggGnteD9BK2JVce-djpFhQ/s380/003.jpg"/>
 </a>
 <figcaption class="figure-caption-text">
  Blogger Tune-Up adalah teknologi blog populer yang dipelihara oleh Dede Hendriono. Topik fokus pada web design, tutorial, blogger hack dan sumber inspirasi.
 </figcaption>
</figure>

Skenario CSS

Skenario kode CSS dibawah ini silahkan sesuaikan dengan kebutuhan anda, dari mulai warna, tebal garis, lebar bingkai dan lain sebagainya. Hal terpenting adalah "position: relative" karena gambar akan di geser ke atas dengan margin negatif. Selain itu "overflow: hidden" digunakan untuk menghilangkan caption pada saat pointer mouse belum masuk ke area gambar. Sedangkan "width: 380px" silahkan disesuaikan dengan kebutuhan.

.figure-caption {
 position: relative;
 margin: 10px auto;
 border: 3px solid #999999;
 overflow: hidden;
 -moz-border-radius: 2px;
 -khtml-border-radius: 2px;
 -webkit-border-radius: 2px;
 border-radius: 2px;
 width: 380px;
}

.figure-caption-text {
 padding: 5px 10px;
 background-color: #333333;
 color: #eeeeee;
 border-top: 1px solid #666666;
 margin-top:-3px;
}

Skenario jQuery

Perhatikan script jQuery dibawah ini dengan seksama, namun sebelum itu jangan lupa memastikan bahwa framework jQuery telah terpasang pada halaman tersebut.

jQuery(document).ready(function($) {
 $('div.figure-caption').each(function(i) {
  var gambar_ = $('img', this);
  var tinggi_gambar = gambar_.attr('height');
  var tinggi_caption = $('p', this).outerHeight();
  $(this).height(tinggi_gambar);
  $(this).hover(function() {
   gambar_.animate({marginTop : -tinggi_caption}, 500);
  }, function() {
   gambar_.animate({marginTop : '0'}, 500);
  });
 });
});

Fungsi each() digunakan untuk mengumpulkan keterangan gambar pada halaman yang sedang diakses. Setelah itu, ketinggian gambar dan deskripsi gambar akan disimpan. Selanjutnya, ketingian div.figure-caption akan ditetapkan sesuai dengan ketinggian gambar, sehingga deskripsi akan disembunyikan dan tidak akan terlihat.

Fungsi hover() diakses ketika kita memindahkan pointer mouse diatas sebuah gambar, gambar tersebut akan diubah margin atasnya menjadi negatif yang sesuai dengan ketinggian deskripsi (caption), sehingga gambar akan bergerak keatas dan terpotong setinggi deskripsi. Deskripsi (caption) gambar akan set margin atasnya pada posisi 0. Dan semua pergerakan tersebut, baik itu gambar ataupun deksripsi di tentukan oleh jQuery fungsi animate().

Unduh jQuery Animation Hover Image Caption

Framewok jQuery

Ini adalah hal wajib jika anda ingin menggunakan fungsi-fungsi jQuery.

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

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Read More

Tutorial Make Tooltip Otomatis In Blogspot

Tutorial Make Tooltip Otomatis In Blogspot

Tutorial Make Tooltip Otomatis In Blogspot ~ Tooltip berjalan otomatis diblog yang mempunyai link baik link text maupun gambar. Tutorial ini saya tidak tahu persis siapa yang mempunyai awalnya karena ketika diketik dengan kata kunci tersebut sudah bejibun yang tampil dan semua nya sama.

Tutorial Make Tooltip Otomatis In Blogspot jadi saya disini hanya sekedar share juga dan pengingat untuk jika sewaktu-waktu saya butuh juga.

Caranya untuk membuat tooltip Otomatis.

Taruh script berikut dibawah <body>

<script src='http://javascript-share.googlecode.com/files/wb.js'/>
<a href='http://www.warungbebas.com' id='wb_ttauth'/><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting = {func : "Tooltip", top : 5, left : 5,maxw : 300,speed : 20, timer : 40, endalpha : 95, alpha : 0, style_plus : "#tt{border:0} #ttcont{background:#000;color:#fff}"};  /*silahkan dimodif*///]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/> <script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/>
<div id='warungbebasautotooltip'>

Kemudian Taruh diatas </body>

</div><script type='text/javascript'>wb.$_auto_tooltip(&#39;warungbebasautotooltip&#39;);</script> 

Oke simpan template anda.

Read More

Penamaan Warna CSS3

Tabel di bawah menyediakan daftar warna X11 yang didukung oleh browser populer dengan penambahan warna abu-abu (gray/grey) varian dari SVG 1.0. Daftar yang dihasilkan persis sama dengan kata kunci warna SVG 1.0. Dua kotak warna sel tabel di sebelah kiri menggambarkan pengaturan warna latar belakang dengan dua cara; kolom pertama menggunakan nilai warna dengan nama, dan kolom kedua menggunakan nilai warna dengan numerik.

Tabel Warna CSS3

N a m a	Numerik	Nama Warna	Hex	Desimal
		aliceblue	#f0f8ff	240,248,255
		antiquewhite	#faebd7	250,235,215
		aqua	#00ffff	0,255,255
		aquamarine	#7fffd4	127,255,212
		azure	#f0ffff	240,255,255
		beige	#f5f5dc	245,245,220
		bisque	#ffe4c4	255,228,196
		black	#000000	0,0,0
		blanchedalmond	#ffebcd	255,235,205
		blue	#0000ff	0,0,255
		blueviolet	#8a2be2	138,43,226
		brown	#a52a2a	165,42,42
		burlywood	#deb887	222,184,135
		cadetblue	#5f9ea0	95,158,160
		chartreuse	#7fff00	127,255,0
		chocolate	#d2691e	210,105,30
		coral	#ff7f50	255,127,80
		cornflowerblue	#6495ed	100,149,237
		cornsilk	#fff8dc	255,248,220
		crimson	#dc143c	220,20,60
		cyan	#00ffff	0,255,255
		darkblue	#00008b	0,0,139
		darkcyan	#008b8b	0,139,139
		darkgoldenrod	#b8860b	184,134,11
		darkgray	#a9a9a9	169,169,169
		darkgrey	#a9a9a9	169,169,169
		darkgreen	#006400	0,100,0
		darkkhaki	#bdb76b	189,183,107
		darkmagenta	#8b008b	139,0,139
		darkolivegreen	#556b2f	85,107,47
		darkorange	#ff8c00	255,140,0
		darkorchid	#9932cc	153,50,204
		darkred	#8b0000	139,0,0
		darksalmon	#e9967a	233,150,122
		darkseagreen	#8fbc8f	143,188,143
		darkslateblue	#483d8b	72,61,139
		darkslategray	#2f4f4f	47,79,79
		darkslategrey	#2f4f4f	47,79,79
		darkturquoise	#00ced1	0,206,209
		darkviolet	#9400d3	148,0,211
		deeppink	#ff1493	255,20,147
		deepskyblue	#00bfff	0,191,255
		dimgray	#696969	105,105,105
		dimgrey	#696969	105,105,105
		dodgerblue	#1e90ff	30,144,255
		firebrick	#b22222	178,34,34
		floralwhite	#fffaf0	255,250,240
		forestgreen	#228b22	34,139,34
		fuchsia	#ff00ff	255,0,255
		gainsboro	#dcdcdc	220,220,220
		ghostwhite	#f8f8ff	248,248,255
		gold	#ffd700	255,215,0
		goldenrod	#daa520	218,165,32
		gray	#808080	128,128,128
		grey	#808080	128,128,128
		green	#008000	0,128,0
		greenyellow	#adff2f	173,255,47
		honeydew	#f0fff0	240,255,240
		hotpink	#ff69b4	255,105,180
		indianred	#cd5c5c	205,92,92
		indigo	#4b0082	75,0,130
		ivory	#fffff0	255,255,240
		khaki	#f0e68c	240,230,140
		lavender	#e6e6fa	230,230,250
		lavenderblush	#fff0f5	255,240,245
		lawngreen	#7cfc00	124,252,0
		lemonchiffon	#fffacd	255,250,205
		lightblue	#add8e6	173,216,230
		lightcoral	#f08080	240,128,128
		lightcyan	#e0ffff	224,255,255
		lightgoldenrodyellow	#fafad2	250,250,210
		lightgray	#d3d3d3	211,211,211
		lightgreen	#90ee90	144,238,144
		lightgrey	#d3d3d3	211,211,211
		lightpink	#ffb6c1	255,182,193
		lightsalmon	#ffa07a	255,160,122
		lightseagreen	#20b2aa	32,178,170
		lightskyblue	#87cefa	135,206,250
		lightslategray	#778899	119,136,153
		lightslategrey	#778899	119,136,153
		lightsteelblue	#b0c4de	176,196,222
		lightyellow	#ffffe0	255,255,224
		lime	#00ff00	0,255,0
		limegreen	#32cd32	50,205,50
		linen	#faf0e6	250,240,230
		magenta	#ff00ff	255,0,255
		maroon	#800000	128,0,0
		mediumaquamarine	#66cdaa	102,205,170
		mediumblue	#0000cd	0,0,205
		mediumorchid	#ba55d3	186,85,211
		mediumpurple	#9370db	147,112,219
		mediumseagreen	#3cb371	60,179,113
		mediumslateblue	#7b68ee	123,104,238
		mediumspringgreen	#00fa9a	0,250,154
		mediumturquoise	#48d1cc	72,209,204
		mediumvioletred	#c71585	199,21,133
		midnightblue	#191970	25,25,112
		mintcream	#f5fffa	245,255,250
		mistyrose	#ffe4e1	255,228,225
		moccasin	#ffe4b5	255,228,181
		navajowhite	#ffdead	255,222,173
		navy	#000080	0,0,128
		oldlace	#fdf5e6	253,245,230
		olive	#808000	128,128,0
		olivedrab	#6b8e23	107,142,35
		orange	#ffa500	255,165,0
		orangered	#ff4500	255,69,0
		orchid	#da70d6	218,112,214
		palegoldenrod	#eee8aa	238,232,170
		palegreen	#98fb98	152,251,152
		paleturquoise	#afeeee	175,238,238
		palevioletred	#db7093	219,112,147
		papayawhip	#ffefd5	255,239,213
		peachpuff	#ffdab9	255,218,185
		peru	#cd853f	205,133,63
		pink	#ffc0cb	255,192,203
		plum	#dda0dd	221,160,221
		powderblue	#b0e0e6	176,224,230
		purple	#800080	128,0,128
		red	#ff0000	255,0,0
		rosybrown	#bc8f8f	188,143,143
		royalblue	#4169e1	65,105,225
		saddlebrown	#8b4513	139,69,19
		salmon	#fa8072	250,128,114
		sandybrown	#f4a460	244,164,96
		seagreen	#2e8b57	46,139,87
		seashell	#fff5ee	255,245,238
		sienna	#a0522d	160,82,45
		silver	#c0c0c0	192,192,192
		skyblue	#87ceeb	135,206,235
		slateblue	#6a5acd	106,90,205
		slategray	#708090	112,128,144
		slategrey	#708090	112,128,144
		snow	#fffafa	255,250,250
		springgreen	#00ff7f	0,255,127
		steelblue	#4682b4	70,130,180
		tan	#d2b48c	210,180,140
		teal	#008080	0,128,128
		thistle	#d8bfd8	216,191,216
		tomato	#ff6347	255,99,71
		turquoise	#40e0d0	64,224,208
		violet	#ee82ee	238,130,238
		wheat	#f5deb3	245,222,179
		white	#ffffff	255,255,255
		whitesmoke	#f5f5f5	245,245,245
		yellow	#ffff00	255,255,0
		yellowgreen	#9acd32	154,205,50

Tabel diatas diambil dari W3C Modul Warna CSS3. Klik disini untuk mengunduh tabel.

Catatan: Internet Explorer 6 (atau versi lebih rendah) hanya mampu menafsirkan warna abu-abu (gray/grey) dengan benar: darkgray, darkslategray, dimgray, gray, lightslategray, slategray, lightgrey.

Read More