Saturday, March 31, 2012

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

Friday, March 30, 2012

Jasa Design Blog 2012 GRATIS

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.

Wednesday, March 28, 2012

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.

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...


Selamat mencoba dan semoga berhasil. Happy Blogging :)

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

Tuesday, March 27, 2012

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...
jQuery Author Threaded Comments Highlight

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 :)

Saturday, March 24, 2012

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.
Menggunakan jQuery on dan off
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.
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

Friday, March 23, 2012

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
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 [+]

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.

Thursday, March 22, 2012

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.

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


Selamat mencoba dan semoga berhasil. Happy Blogging :)

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

Tuesday, March 20, 2012

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.

Saturday, March 17, 2012

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.



Friday, March 16, 2012

Konsep Dasar dan Basic Belajar CSS

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. ^_^


Thursday, March 8, 2012

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.

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/AVvXsEgUMKEH00YSvv4QzHV8Vsb4g87KphTPOH5UuWAqm3yOMYOCjUXxFjXKAS-bSdicDsJjTWacOilfK290fka72fpSTz14dNGku4sVHBTKVMq5J_LF2HemmcGwzBOBjf7srNrbfI6rHN88TFU/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/AVvXsEgUMKEH00YSvv4QzHV8Vsb4g87KphTPOH5UuWAqm3yOMYOCjUXxFjXKAS-bSdicDsJjTWacOilfK290fka72fpSTz14dNGku4sVHBTKVMq5J_LF2HemmcGwzBOBjf7srNrbfI6rHN88TFU/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().

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 :)

Tuesday, March 6, 2012

Tutorial Make Tooltip Otomatis In Blogspot

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.

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 NumerikNama WarnaHexDesimal
aliceblue#f0f8ff240,248,255
antiquewhite#faebd7250,235,215
aqua#00ffff0,255,255
aquamarine#7fffd4127,255,212
azure#f0ffff240,255,255
beige#f5f5dc245,245,220
bisque#ffe4c4255,228,196
black#0000000,0,0
blanchedalmond#ffebcd255,235,205
blue#0000ff0,0,255
blueviolet#8a2be2138,43,226
brown#a52a2a165,42,42
burlywood#deb887222,184,135
cadetblue#5f9ea095,158,160
chartreuse#7fff00127,255,0
chocolate#d2691e210,105,30
coral#ff7f50255,127,80
cornflowerblue#6495ed100,149,237
cornsilk#fff8dc255,248,220
crimson#dc143c220,20,60
cyan#00ffff0,255,255
darkblue#00008b0,0,139
darkcyan#008b8b0,139,139
darkgoldenrod#b8860b184,134,11
darkgray#a9a9a9169,169,169
darkgrey#a9a9a9169,169,169
darkgreen#0064000,100,0
darkkhaki#bdb76b189,183,107
darkmagenta#8b008b139,0,139
darkolivegreen#556b2f85,107,47
darkorange#ff8c00255,140,0
darkorchid#9932cc153,50,204
darkred#8b0000139,0,0
darksalmon#e9967a233,150,122
darkseagreen#8fbc8f143,188,143
darkslateblue#483d8b72,61,139
darkslategray#2f4f4f47,79,79
darkslategrey#2f4f4f47,79,79
darkturquoise#00ced10,206,209
darkviolet#9400d3148,0,211
deeppink#ff1493255,20,147
deepskyblue#00bfff0,191,255
dimgray#696969105,105,105
dimgrey#696969105,105,105
dodgerblue#1e90ff30,144,255
firebrick#b22222178,34,34
floralwhite#fffaf0255,250,240
forestgreen#228b2234,139,34
fuchsia#ff00ff255,0,255
gainsboro#dcdcdc220,220,220
ghostwhite#f8f8ff248,248,255
gold#ffd700255,215,0
goldenrod#daa520218,165,32
gray#808080128,128,128
grey#808080128,128,128
green#0080000,128,0
greenyellow#adff2f173,255,47
honeydew#f0fff0240,255,240
hotpink#ff69b4255,105,180
indianred#cd5c5c205,92,92
indigo#4b008275,0,130
ivory#fffff0255,255,240
khaki#f0e68c240,230,140
lavender#e6e6fa230,230,250
lavenderblush#fff0f5255,240,245
lawngreen#7cfc00124,252,0
lemonchiffon#fffacd255,250,205
lightblue#add8e6173,216,230
lightcoral#f08080240,128,128
lightcyan#e0ffff224,255,255
lightgoldenrodyellow#fafad2250,250,210
lightgray#d3d3d3211,211,211
lightgreen#90ee90144,238,144
lightgrey#d3d3d3211,211,211
lightpink#ffb6c1255,182,193
lightsalmon#ffa07a255,160,122
lightseagreen#20b2aa32,178,170
lightskyblue#87cefa135,206,250
lightslategray#778899119,136,153
lightslategrey#778899119,136,153
lightsteelblue#b0c4de176,196,222
lightyellow#ffffe0255,255,224
lime#00ff000,255,0
limegreen#32cd3250,205,50
linen#faf0e6250,240,230
magenta#ff00ff255,0,255
maroon#800000128,0,0
mediumaquamarine#66cdaa102,205,170
mediumblue#0000cd0,0,205
mediumorchid#ba55d3186,85,211
mediumpurple#9370db147,112,219
mediumseagreen#3cb37160,179,113
mediumslateblue#7b68ee123,104,238
mediumspringgreen#00fa9a0,250,154
mediumturquoise#48d1cc72,209,204
mediumvioletred#c71585199,21,133
midnightblue#19197025,25,112
mintcream#f5fffa245,255,250
mistyrose#ffe4e1255,228,225
moccasin#ffe4b5255,228,181
navajowhite#ffdead255,222,173
navy#0000800,0,128
oldlace#fdf5e6253,245,230
olive#808000128,128,0
olivedrab#6b8e23107,142,35
orange#ffa500255,165,0
orangered#ff4500255,69,0
orchid#da70d6218,112,214
palegoldenrod#eee8aa238,232,170
palegreen#98fb98152,251,152
paleturquoise#afeeee175,238,238
palevioletred#db7093219,112,147
papayawhip#ffefd5255,239,213
peachpuff#ffdab9255,218,185
peru#cd853f205,133,63
pink#ffc0cb255,192,203
plum#dda0dd221,160,221
powderblue#b0e0e6176,224,230
purple#800080128,0,128
red#ff0000255,0,0
rosybrown#bc8f8f188,143,143
royalblue#4169e165,105,225
saddlebrown#8b4513139,69,19
salmon#fa8072250,128,114
sandybrown#f4a460244,164,96
seagreen#2e8b5746,139,87
seashell#fff5ee255,245,238
sienna#a0522d160,82,45
silver#c0c0c0192,192,192
skyblue#87ceeb135,206,235
slateblue#6a5acd106,90,205
slategray#708090112,128,144
slategrey#708090112,128,144
snow#fffafa255,250,250
springgreen#00ff7f0,255,127
steelblue#4682b470,130,180
tan#d2b48c210,180,140
teal#0080800,128,128
thistle#d8bfd8216,191,216
tomato#ff6347255,99,71
turquoise#40e0d064,224,208
violet#ee82ee238,130,238
wheat#f5deb3245,222,179
white#ffffff255,255,255
whitesmoke#f5f5f5245,245,245
yellow#ffff00255,255,0
yellowgreen#9acd32154,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.