Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Launching ZoomQueries Beta 1.0 - Professional Tool For Testing Your Responsive Web Design

rwd
Mencoba hasil tampilan dari desain Responsive pada blog atau website pada beberapa perangkat berbeda rasanya sangat mustahil, coba saja bayangkan mungkin saat ini sudah ada sekitar puluhan bahkan hampir ratusan jenis perangkat Smart Phone dan Tablet dengan berbagai Merk yang berbeda. Mungkin saya juga sama seperti sobat semua yang hanya memiliki 1 sampai 3 saja perangkat ponsel pintar dalam genggaman dan saya yakin kalian juga pastinya sudah mencoba sendiri desain blog kalian di SmartPhone atau Tablet kalian masing-masing dan tentu saja hasilnya pasti bagus dan sesuai dengan harapan, tapi jelas ada tapinya apakah desain yang kalian rancang juga bakal sesuai di perangkat yang belum pernah kalian coba sebelumnya misalkan pada perangkat iOS, BB10 atau pada perangkat Android dan Windows 8 yang tentu saja banyak sekali jenis varian perangkatnya? Nah kalau belum pernah berarti kalian harus mencoba Tool terbaru yang saya beri nama ZOOMQUERIES Beta 1.0 yang berguna untuk mengetahui seberapa bagus hasil Desain Responsive Blog kalian jika dicoba pada beberapa perangkat dan merk yang berbeda pula.

ZoomQueries Beta 1.0 merupakan salah satu Testing Tool Responsive Web Design dengan hasil 90% nyaris akurat karena dirancang dengan pendekatan sebenarnya dan menggunakan algoritma yang terbilang rumit, bagaimana tidak..karena hampir 1 bulan saya melakukan riset dan mempelajari beberapa istilah yang sebenarnya juga asing buat saya pribadi, terutama untuk istilah CSS PIXEL RATIO, PHYSICAL RESOLUTION, LOGICAL RESOLUTION, RETINA DEVICE dan VIEWPORT. Setelah beberapa istilah yang asing saya mengerti barulah saya bisa merancang tool ini agar bisa sesuai dengan keadaan resolusi perangkat sebenarnya.


Jika dibandingkan dengan Testing Tool Responsive Web Design sejenis yang hanya mengandalkan Pixel nyata dan kebanyakan langsung ditampilkan pada resolusi perangkat PC tentu saja hasil akhirnya juga akan berbeda dengan perangkat SmartPhone dan Tablet sebenarnya, misalkan perangkat BlackBerry Z10 dengan resolusi 768x1280 ini hanyalah merupakan PHYSICAL RESOLUTION dan resolusi sebenarnya yang ditampilkan adalah LOGICAL RESOLUTION dimana pada layar bukan sebagai 768x1280 namun yang tampil pada layar nyata adalah 324x571 hal ini karena BlackBerry Z10 mempunyai CSS Pixel Ratio 2.24 bukan CSS Pixel Ratio 1 seperti pada layar PC kebanyakan. Jika kalian bingung dengan penjelasan teknis diatas berarti kita "SAMA" saya yang nulisnya juga bingung hehehehe


Pada ZoomQueries Beta 1.0 saya juga menanamkan fasilitas untuk mempermudah kalian semua memperbaiki dan mengedit secara langsung desain yang sedang dibuat, karena disitu sudah tersedia HTML ONLINE EDITOR yang support untuk mengedit HTML, CSS dan Javascript asalkan bukan PHP dan ASP ya :), selain itu kalian juga bisa menentukan diarea mana desain itu ingin ditampilkan karena dsitu sudah tersedia juga dua Mode pilihan yaitu SIMPLE MODE dan DEVICE MODE. Kalian juga bisa mencobanya langsung secara online dengan memasukan alamat URL atau secara offline dalam area Localhost.

ZOOMQUERIES BETA 1.0 Features:
  • Custom Viewer Mode (Simple Mode or Device Mode)
  • HTTP and Localhost Support
  • Fast Reloading Page
  • Easy HTML Editor (CSS and Javascript Support)
  • Viewport Size Info for Browser or Device
  • Custom Resize Handle
  • Support Locked for Browser Resize
  • Rotate Portrait or Lanscape
  • Device size Area for 240px, 320px, 480px, 768px, 1024px, 1216px or Full Screen
  • 50+ Device Viewport Size (Mobile, Tablet, Desktop)
  • Support Fullscreen Browser
  • Simple Bookmark and Share Url

Untuk mencoba tool ini tidak ada yang perlu saya jelaskan secara rinci yang kalian lakukan hanya memasukan URL alamat blog atau web saja dan biarkan ZoomQueries yang bekerja.

Silahkan sambangi langsung dengan Link dibawah ini:
http://zoomqueries.com/
http://zoomqueries.com/?url=http://www.o-om.com

Akhir kata terus terang tool ini jauh dari kata sempurna dan hanya sobat semualah yang bisa menilainya, mohon juga masukannya dan informasi bugs agar saya bisa mengembangkan tool ini jauh lebih bagus lagi.

Kalau suka dengan ZoomQueries.com kasih jempol Like-nya ya :D

Baca Selengkapnya →

Rahasia Responsive Web Design (RWD) dengan HTML5 dan CSS3

rwd Responsive Web Design (RWD) semakin populer sekitar pertengahan 2010 lalu, ini berawal dari sebuah artikel Design Web Responsive yang ditulis oleh Ethan Marcotte pada website alistapart.com. Pada artikel tersebut dia mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri ukuran tampilan pada perangkat Mobile dan Desktop secara Fleksibel tanpa harus membuat dua desain untuk perangkat berbeda dengan konten yang isinya sama, dari permasalahan itulah maka lahirlah konsep Responsive Web Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda.

a list apart
"The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things."
John Allsopp, “A Dao of Web Design
Jumlah pengguna perangkat mobile seperti Smartphone dan Tablet setiap hari semakin meningkat, mulai dari berbagai macam Netbook, BlackBerry, iPhone, iPad dan berbagai macam perangkat dengan sistem operasi Android sepertinya tidak akan ada habisnya. Sebelum adanya Responsive Web Design seperti saat ini jika memang harus mendesain dan menyesuaikan semua perangkat tersebut mungkin bagi saya pribadi adalah sesuatu yang konyol dan tampak bodoh, dan akan lebih baik buat saya hanya fokus pada desain yang hanya ditampilkan pada layar desktop saja.

Para pengembang web diluar sana tentu tidak tinggal diam untuk mengatasi masalah ini, maka lahirlah istilah Responsive Web Design dari hasil pengembangan pada fitur CSS terbaru yaitu CSS3 yang memiliki dukungan penuh untuk mengatasi berbagai resolusi pada layar dengan teknik terbaru yang diberi nama Media Queries.

Ada 3 unsur inti yang harus ada pada Responsive Web Design agar bisa bekerja dengan baik, yaitu pada Flexible Grids, Fluid Images dan Media queries. Dari ketiga unsur tersebut diharafkan sebuah desain nantinya bisa beradaptasi pada berbagai layar berbeda, tidak peduli beberapapun banyaknya perangkat yang ada, dengan Responsive Web Design semua bisa dikontrol hanya dalam satu desain saja.

responsive web design


Bekerja Dengan Flexible Grid / Flexible Layout
Pilar dari Responsive Web Design sebenarnya terletak dari Fleksibelitas Grid itu sendiri , jika kalian bingung dengan istilah Grid kita bisa menggunakan alternatif lain dengan istilah yang lebih mudah yaitu Flexible Layout / Template. Sebelum Desain Web Responsif populer seperti sekarang ini dulunya para Web Programmer terpaku dengan layar desktop dengan lebar desain yang tetap dan cenderung pada desain terpusat. Jika dulu biasanya para web desainer lebih banyak menggunakan satuan px (pixel) untuk ukuran Layout dan Text namun untuk Desain Responsif saat ini para pengembang lebih banyak mengunakan satuan % (percent) sebagai penggantinya, ini dimaksudkan agar desain pada Layout tidak tampak kaku dan bisa Flexible ketika ditampilkan pada resolusi layar yang berbeda.

Kalian mungkin berencanan untuk mengganti desain lama dengan desain yang lebih Responsive, sebaiknya urungkan saja niat tersebut karena desain yang lama masih bisa kok dibuat Responsive yang penting asal mengerti saja rahasianya :). Perlu diketahui bahwa Desain Responsif hanyalah bermain-main dengan CSS, jadi bagaimanapun bentuk template yang sekarang kalian gunakan semuanya bisa dibuat Responsive hanya dengan hitungan jam saja, gak percaya? buktikan saja :)

Formula perhitungan sederhana pada Flexible Grid
Desain yang belum Responive biasanya lebih banyak menggunakan satuan px seperti dalam contoh CSS dibawah ini:
.sidebar{
width:300px;
}
.content{
width:700px;
}
.wrap{
width:1024px;
}

Diatas lebar Grid utama adalah dalam reolusi width:1024px dan untuk sidebar width:300px dan content width:700px. Disini saya coba jelaskan formula dan kalkulasi sederhana dalam mengkonversi nilai px (pixel) agar bisa diganti dengan satuan % (percent)
target / context = result
300px / 1024px = width: 29.296875%; /* 300 (originally 300) / 1024 */
700px / 1024px = width: 68.359375%; /* 700 (originally 700) / 1024 */
Dari hasil kalkulasi diatas maka bisa didapatkan nilai percent dalam koding CSS seperti dibawah ini
.sidebar{
width:29.29%;
}
.content{
width:68.35%;
}
.wrap{
width:1024px;
}

Formula diatas sebenarnya bisa juga digunakan untuk menghitung ukuran text (font size), Katakanlah konteks normal untuk ukuran font dalam body adalah 16 piksel. Jika kalian ingin menetapkan bahwa H1 harus 24 pixel, maka kalian bisa mengganti dengan satuan em dengan cara menghitungnya sebagai berikut:
24px / 16px = 1,5em
Dengan gaya CSS akan didapat koding seperti ini:
h1 {
font-size: 1.5em;
}

Sebenarnya ada juga cara yang lebih mudah untuk menghitung formula diatas yaitu dengan menggunakan Responsive Web Design Calculator, kalian bisa langsung sambangi alamatnya disini


Bekerja Dengan Media Queries
CSS Media Query adalah salah satu fitur dalam CSS3 yang memungkinkan kalian untuk menentukan kapan aturan CSS tertentu harus diterapkan. Hal ini memungkinkan untuk menerapkan CSS khusus untuk perangkat Mobile. Media queries bisa dikatakan otak dari Design Web Responsive karena diarea inilah kita memiliki kontrol penuh terhadap Design Responsive Template kita nantinya.

Ada 3 cara untuk pemanggilan media queries:
1. Menggunakan @import untuk mengimport aturan Style dari Style Sheet lainnya.
@import url(style768min.css) screen and (min-width: 768px);

2. Pemanggilan Style Sheet secara langsung dalam koding HTML dan biasanya ini pendekatan paling umum yang paling banyak digunakan pengembang saat ini.
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}

Dalam rancangan media queries max-width sebaiknya penempatan kode akan lebih baik dari resolusi besar ke resolusi yang lebih kecil atau kalian bisa juga menggunakan media queries min-width, dengan catatan menggunakan queries ini urutannya dari resolusi kecil ke resolusi yang lebih besar. Hal ini disarankan agar kalian lebih mudah merancang queries berdasarkan urutan resolusi layar.
@media screen and (min-width:240px){
/* CSS styles */
}
@media screen and (min-width:320px){
/* CSS styles */
}
@media screen and (min-width:768px){
/* CSS styles */
}

3. Pemanggilan melalui link untuk Style Sheet secara terpisah.
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 768px)" href="style768.css" />

Dari ketiga memanggilan media queries diatas mana yang lebih baik? menurut saya pribadi, saya tentu memilih yang no.2, selain gak ribet biasanya koding dalam Style Sheet juga tidak terlalu banyak dan bisa dikatakan hanya beberapa baris saja.


Menggunakan meta tag viewport
Dalam Design Web Responsive Meta Tag Viewport peranannya sangat penting karena meta tag ini berguna untuk mengontrol tata letak pada Browser Mobile. Saat pengguna mengakses blog kalian melalui Browser Desktop Meta Tag ini tidak memiliki pengaruh sama sekali tetapi cerita akan berbeda saat mereka mengakses blog kalian via Mobile Browser. Dibawah ini merupakan meta tag viewport yang paling sering digunakan.
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

Without Viewport
Contoh tampilan Facebook tanpa Viewport

With viewport
Contoh Tampilan Facebook dengan Viewport

Desain web yang tidak menggunakan skala yang ditentukan akan terlihat berantakan jika diakses pada versi mobile untuk itulah kita perlu menambahkan meta ini. Untuk lebih jelas pada bahasan Meta Tag viewport coba sambangi aja disini.

Agar lebih mudah kalian untuk memahaminya kalian bisa melihat contoh sederhana penerapan viewport dan media queries. Dicontoh ini saya menggunakan versi HTML5.
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<style type='text/css'>
/* ==== CSS UTAMA DISINI =====*/
body {
........
}
/* ==== RESPONSIVE DENGAN MEDIA QUERIES =====*/
@media screen and (max-width: 3000px){
/* CSS styles */
}
@media screen and (max-width: 1300px){
/* CSS styles */
}
@media screen and (max-width: 1024px){
/* CSS styles */
}
@media screen and (max-width: 992px){
/* CSS styles */
}
@media screen and (max-width:880px){
/* CSS styles */
}
@media screen and (max-width:768px){
/* CSS styles */
}
@media screen and (max-width:600px){
/* CSS styles */
}
@media screen and (max-width:480px){
/* CSS styles */
}
@media screen and (max-width:320px){
/* CSS styles */
}
@media screen and (max-width:240px){
/* CSS styles */
}
</style>
</head>
</body>
....
</body>
</HTML>

Kenapa saya hampir semua menggunakan resolusi pada layar? jawabannya cukup simple, bukankah kita ingin desain template kita bisa tampil sempurna, jadi kenapa harus tanggung-tanggung dengan hanya menentukan beberapa resolusi saja dan kenapa harus membatasinya jika bisa dilakukan sekaligus! bekerja satu kali tentu lebih baik dari pada berulang-ulang dengan desain yang sama :)

Saat yang tepat menentukan resolusi responsive Web Desain pada perangkat Mobile

Resolusi yang paling tepat saat pengguna mengakses dengan perangkat mobile biasanya pada resolusi 768px . Saya pribadi memiliki kontrol penuh saat berada diresolusi ini, perubahan yang terlihat jelas terutama pada desain menu yang langsung mengecil dengan gaya DropDown ketika User mencoba mengecilkan lebar layar dibrowser dan ini sama halnya ketika user mengakses dengan perangkat Mobile.


Responsive Menu Navigation
Responsive Menu Navigation merupakan salah satu Responsive Web Design yang paling menonjol yang pertama kali terlihat, perubahan ini jelas begitu nyata ketika pengguna beralih dari versi dekstop ke versi mobile. Banyak cara sebenarnya untuk merubah tampilan menu ini, mulai hanya dari kontrol CSS sederhana sampai dengan menu yang sangat komplek menggunakan Jquery.

responsive menu

Membuat Responsive Menu Navigasi dengan CSS tanpa Javascript.


Untuk melihat contoh nyata hasil dari Responsif Menu Navigasi diatas silahkan coba dengan mengecilkan lebar layar browser kalian.

Membuat menu navigasi sederhana dan responsive seperti diatas sangatlah mudah, kalian bisa menggunakan CSS dibawah ini:
/* -- Menu Navigation -- */
.menu {
width:100%;
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}

Cara memanggil kode CSS diatas sebagai berikut:
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Forum</a></li>
</ul>
</nav>
</div>

Jika menu responsif diatas terlalu sederhana dan sangat tidak menarik saya coba merujuk ke tutorial lain diluar sana yang lebih komplit bahasannya. Silakan sambangi langsung 15 link responsive menu terbaik yang saya temukan dilink ini: Sidr, Navgoco, FlexNavSmartMenus, jQuery Menu Aim, Side Toggle Menu, JQuery slimMenu, PanelMenu, Flaunt.js, Naver, TinyNav.js, Responsive-Menu, HorizontalNav, jQuery.mmenu, MeanMenu



Responsive ADSENSE
Awal Agustus 2013 kemaren Google Adsense resmi memberikan support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih dalam tahap versi Beta dan menurut saya pribadi masih banyak kekurangan dimana iklan yang ditampilkan harus sesuai dengan ukuran Pixel yang sudah kita tetapkan sebelumnya. Responsive Adsense tidak mengalir dan menggulung seperti Responsive yang telihat pada gambar dan video, misalkan kita ingin menampilkan iklan dalam media queries max-width:350px berarti kita harus menentukan iklan yang memang mendukung dan sesuai dengan resolusi ini, misalnya pada ads unit 250x250 atau 320x50. Perlu diperhatikan dalam mencoba beberapa desain iklan kalian harus mengecilkan browser secara manual sesuai dengan resolusi yang sudah ditetapkan dan jangan lupa untuk melakukan refresh pada browser untuk melihat tampilan iklan. Contoh dibawah ini merupakan standar Source Code adsense dalam mode responsive, seperti milik saya dibawah ini:
<style>
.oom-responsive { width: 320px; height: 50px; }
@media(min-width: 500px) { .oom-responsive { width: 468px; height: 60px; } }
@media(min-width: 800px) { .oom-responsive { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- OOM-RESPONSIVE -->
<ins class="adsbygoogle oom-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bagaimana cara untuk memodifikasi agar tampilan Responsive Adsense bisa sesuai dengan Desain responsive milik kalian? mudah saja, kita tinggal memodifikasi CSS dan menentukan diresolusi mana iklan yang ingin ditampilkan sesuai size-nya dalam media queries dan dibawah ini adalah contoh CSS editan milik saya:
<style>
@media(min-width: 240px) { .oom-responsive { width: 234px; height: 60px; } }
@media(min-width: 320px) { .oom-responsive { width: 250px; height: 250px; } }
@media(min-width: 480px) { .oom-responsive { width: 468px; height: 60px; } }
@media(min-width: 768px) { .oom-responsive { width: 728px; height: 90px; } }
@media(min-width: 1024px) { .oom-responsive { width: 468px; height: 60px; } }
@media(min-width: 1216px) { .oom-responsive { width: 728px; height: 90px; } }
</style>
<div style="text-align:center">
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- OOM-RESPONSIVE -->
<ins class="adsbygoogle oom-responsive"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxx"
     data-ad-slot="yyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>

Ingat! untuk .oom-responsive itu adalah nama adsense unit milik saya, silahkan ganti dengan milik kalian masing-masing :)


Responsive Image / Gambar
Gambar (image) dengan menggunakan satuan em dan px misalkan width:400px dan height:500px tidak akan bekerja baik dengan Responsive Web Design, langkah termudah adalah dengan mengganti satuannya menjadi % contoh: width:100% dan height:100%. Tapi yang harus diingat tidak semua gambar harus menggunakan % kalian bisa menggunakan alternatif auto sebagai gantinya. Agar gambar tidak keluar dari unit induknya kalian bisa menggunakan max-width:100% cara ini digunakan agar ukuran gambar bisa menyesuaikan sendiri secara proporsional. Prinsip ini juga berlaku untuk iframe, objects dan video.
img{
max-width:100%
}

Atau untuk menampilkan ukuran gambar sesuai size aslinya kalian bisa menggunakan kode ini:
img{
height:auto;
width:auto;
max-width:100%
}

beautiful mountains Contoh responsive gambar, silahkan coba dengan mengecilkan lebar jendela browser.



Responsive Video, Iframe, Embed dan Object
Untuk video, iframe, embed dan object pada intinya hampir sama caranya dengan responsive pada gambar yaitu tetap memberi satuan %. Saat ini embed video yang paling banyak digunakan adalah Youtube, namun terlepas dari youtube ada juga yang menanam langsung pada Self Hosting dan biasanya untuk pemanggilannya mengunakan tag <video>. dibawah ini merupakan contoh embed code yang paling banyak digunakan:
<video width="500" height="400" src="..."></video>
<iframe width="500" height="400" src="..."></iframe>
<object width="500" height="400" src="..."></object>
<embed width="500" height="400"  src="..."></embed>

Membuat responsive pada video dalam iframe sangatlah mudah, seperti menangani responsive pada gambar kita tinggal mengontrolnya langsung melalui koding CSS. Dibawah ini merupakan contoh koding CSS untuk penampilkan video dalam ukuran penuh sesuai dengan ukuran lebar div diblog saya saat ini dan kalian bisa saja menyesuaikan sendiri kodingnya sesuai dengan kebutuhan :)
.ResponsiveWrapper {
 position: relative;
 padding-bottom: 56.25%; /* 16:9 */
 padding-top: 25px;
 height: 0;
}
.ResponsiveWrapper iframe, video, object, embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Contoh penerapan kontrol koding pada iframe pada embed video VIMEO
<div class="ResponsiveWrapper">
<iframe src="//player.vimeo.com/video/64208870" width="500" height="281"></iframe>
</div>


Contoh penerapan kontrol koding pada iframe pada embed video YOUTUBE
<div class="ResponsiveWrapper">
<iframe height="480" src="http://www.youtube.com/embed/m5_AKjDdqaU?rel=0&hd=1" width="700"></iframe>
</div>




Responsive Tag Heading dan Responsive Font Size
Mengontrol Responsive Font size dalam elemen Heading mulai tag h1, h2, h3, h4, h5 dan h6 sangatlah mudah, ada 2 cara yang akan saya jelaskan setelah ini. Seperti yang kita ketahui sebelum desain responsive mewabah biasanya kita terpaku dalam satuan px, em, pt dan % dan cenderung menentukan satuan yang tetap dan sebenarnya itu tidak menjadi masalah, dalam melakukan responsive font size ukuran yang mana yang kalian pilih sebenarnya sama saja namun untuk tag heading saya menyarankan sebaiknya menggunakan satuan em, pt atau % dan cara terbaik untuk menangani masalah ini adalah dengan menanam langsung dalam media queries. Sebagai contoh CSS dibawah ini dalam media queries dengan resolusi layar max-width:768px adalah nilai dari font size milik saya saat ini dan kalian bisa mengubah sendiri nilai tersebut termasuk juga satuannya.
@media screen and (max-width:768px){
h1 {font-size:2em}
h2 {font-size:1.8em}
h3 {font-size:1.7em}
h4 {font-size:1.6em}
h5 {font-size:1.5em}
h6 {font-size:1.4em}
}

Sebenarnya ada juga penerapan Responsive Font Size terbaru yaitu dengan satuan vw, vh, vmin dan vmax menggunakan fitur dari CSS3 namun saya sendiri tidak menggunakannya karena beberapa browser lama tentu saja tidak support dengan satuan ini. Satuan terbaru dalam CSS3 ini bekerja secara otomatis ketika user mencoba mengecilkan dan melebarkan resolusi layar.
h1 {font-size: 5.9vw;}
h2 {font-size: 3.0vh;}
p {font-size: 2vmin;}

dimana rincianya sebagai berikut:

1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger


Agar Media Queries Support pada Browser IE

Saat ini saya sudah mencoba tampilan Responsive blog ini di beberapa browser terbaru seperti Firefox, Opera, Safari, Chrome bahkan sampai dengan browser Baidu di android saya dan semua bekerja dengan baik namun tidak demikian dengan Internet Explorer (IE) yang tidak support Media Queries tapi sekali lagi itu tidak masalah karena kita masih bisa menggunakan script dibawah ini untuk menyelesaikan masalah tersebut.
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Kalian bisa menambahkan script diatas dibawah elemen tag <head>


Contoh Responsive Web Design dengan HTML5
Ok! saya rasa kalian paling tidak sudah mengerti beberapa tehnik Responsive Web Design pada penjelasan diatas, kini saatnya kita mencoba dalam praktek secara langsung. Disini saya coba memberikan contoh sederhana dimana pada tampilan awal desktop yang jika diperkecil akan bergulir secara proporsional jika ditampilkan pada perangkat mobile dengan resolusi 768px.



Langkah yang pertama kita mencoba merancang struktur desain dengan CSS:
/* -- Flexible Grid / Layout -- */
*{ 
margin:0;
padding:0; 
}
body {
background-color:#000;
color:#fff;
}
#wrap{
width:1024px;
background-color:#333;
margin:0 auto;
padding:10px;
}
.header{
height:150px; 
width:auto;
background-color:#0069B6;
margin-bottom:1px;
}
.main-wrap{
background-color:#770DB7;
}     
.content{
float:left;
width:68.35%;
background-color:#770DB7;
margin-bottom:1px;
}
.sidebar{
overflow:hidden;
float:right;
width:29.29%;
background-color:#54A743;
}
.footer{
clear:both;
height:150px;
background-color:#D95445;
width:auto;
}
/* -- Menu Navigation -- */
.menu {
width:100%;
margin-bottom:1px
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}

Langkah yang kedua adalah karena teknik ini flexible sesuai resolusi jadi kita harus menentukan kondisi layout dari resolusi dengan menggunakan CSS media queries
/* -- RESPONSIVE DENGAN MEDIA QUERIES -- */
@media screen and (max-width: 1024px){
/* CSS styles */
#wrap{
width:90%;
}
}
@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}

Langkah ketiga mari kita membuat struktur HTML dasar. Seperti yang kalian lihat desain layout atau template ini terdiri dari enam blok yaitu Wrapper, Header, Menu, Content, Sidebar dan Footer.
<div id="wrap">
<div class="header">
<h1>Header</h1>
</div>
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Help</a></li>
<li><a href='/'>Forum</a></li>
</ul>
</nav>
</div>
<div class="content"> 
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi aliquet euismod nulla. Maecenas facilisis consectetuer purus. Nulla vestibulum molestie elit. Pellentesque pellentesque. Donec congue tempus velit. Sed aliquet risus ut sem. Vivamus et diam eu dui tincidunt viverra. Mauris malesuada pede nec justo. Nulla pulvinar. Pellentesque tincidunt nisi sit amet odio.</p>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>

Jika dituliskan secara lengkap dalam HTML5 kalian bisa mempelajari contoh koding dibawah ini:
<!DOCTYPE html>
<HTML>
<head>
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<title>Belajar Responsive Web Design (RWD)</title>
<style type='text/css'>
/* -- CSS UTAMA DISINI -- */
*{ margin:0;padding:0; }
body {
background-color:#000;
color:#fff;
}
/* -- Flexible Grid / Layout -- */
#wrap{
width:1024px;
background-color:#333;
margin:0 auto;
padding:10px;
}
.header{
height:150px; 
width:auto;
background-color:#0069B6;
margin-bottom:1px;
}
.main-wrap{
background-color:#770DB7;
}     
.content{
float:left;
width:68.35%;
background-color:#770DB7;
margin-bottom:1px;
}
.sidebar{
overflow:hidden;
float:right;
width:29.29%;
background-color:#54A743;
}
.footer{
clear:both;
height:150px;
background-color:#D95445;
width:auto;
}
/* -- Menu Navigation -- */
.menu {
width:100%;
margin-bottom:1px
}
#nav {
font-weight:bold;
background-color:#FFC40D
}
#nav ul {
height:auto;
margin:0;
padding:0
}
#nav li {
list-style:none;
display: inline-block;
margin:0;
padding:0
}
#nav li a {
display:block;
line-height:30px;
text-decoration:none;
color:white;
padding:0 15px
}
#nav li a:hover {
color:black
}
/* -- RESPONSIVE DENGAN MEDIA QUERIES -- */
@media screen and (max-width: 1024px){
/* CSS styles */
#wrap{
width:90%;
}
}
@media screen and (max-width:768px){
/* CSS styles */
.sidebar, .content{
float:none;
display:block;
width:auto;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="header">
<h1>Header</h1>
</div>
<div class="menu">
<nav id='nav'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='/'>About</a></li>
<li><a href='/'>Help</a></li>
<li><a href='/'>Forum</a></li>
</ul>
</nav>
</div>
<div class="content"> 
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi aliquet euismod nulla. Maecenas facilisis consectetuer purus. Nulla vestibulum molestie elit. Pellentesque pellentesque. Donec congue tempus velit. Sed aliquet risus ut sem. Vivamus et diam eu dui tincidunt viverra. Mauris malesuada pede nec justo. Nulla pulvinar. Pellentesque tincidunt nisi sit amet odio.</p>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>Nunc adipiscing venenatis lorem. Sed sit amet tortor vel enim lacinia mattis. Aliquam dapibus rhoncus turpis. Etiam tincidunt quam ut urna. Aenean vel tellus. Morbi risus. Vestibulum ut nunc. Praesent orci. Curabitur pharetra, quam ut euismod tempor, augue ligula convallis massa, ut dictum arcu augue in tellus. Donec condimentum mi a magna. In velit. Curabitur accumsan mattis ante.</p>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</body>
</HTML>


Responsive Web Design Testing Tools
Dengan mengecilkan lebar browser itu sebenarnya salah satu cara termudah melihat cara kerja Resvonsive Web Design, Namun kita akan kesulitan melihat tata letak ukuran dan berapa resolusi lebar layar saat itu, Alternatif lainnya bisa menggunakan 4 tools yang sering saya gunakan seperti dibawah ini:
1. responsivepx.com
2. ami.responsivedesign.is
3. Dimensions
4. Responsive mobile view

Tools untuk testing desain responsive pada browser mulai dari yang online sampai Add-Ons Firefox dan Chrome Web Store banyak sekali, namun tidak ada yang lebih baik selain mencobanya langsung pada perangkat mobile.

Membuat Responsive Web Design sebenarnya sama mudahnya dengan mendesain web atau blog seperti biasa, disini yang dibutuhkan hanyalah kejelian kalian dalam merancangnya. Dengan melakukan uji coba secara berkala saya yakin kalian bisa mendapatkan hasil yang maksimal, karena serumit apapun struktur HTML sampai HTML5 pada intinya hanya focus pada 6 bagian saja yaitu Wrapper, Header, Menu, Content, Sidebar dan Footer.

Semoga tutorial ini bisa memudahkan kalian merancang sendiri dan belajar cara Responsive Web Design valid HTML5 dan CSS3 yang lebih Professional :)

Baca Selengkapnya →

Menampilkan Screenshot Preview Responsive Web Design dengan Am I Responsive

rwdMungkin saat ini kalian sudah berjuang keras agar blog kalian bisa tampil Responsive dan tampil sempurna disemua resolusi layar. Nah biasanya jika sudah sukses yang dilakukan selanjutnya adalah tentu saja mengujinya sekaligus memamerkanya dalam bentuk Screenshot. Beberapa waktu lalu saya juga sempat bingung bagaimana saya membuat Screenshot Preview untuk Responsive Web Design dibeberapa perangkat desktop dan mobile, setelah browsing sana sini ternyata paling banyak cuman nemuin tools untuk testing Web Design Responsive dan bukan untuk menampilkan Preview-nya :(

responsive web design

Am I Responsive? ya ini dia tool yang baru saya temuin dan cukup bagus buat kalian yang ingin menampilkan preview desain blog dibeberapa perangkat sekaligus dan tool ini sebenarnya bukan hanya untuk preview saja tetapi sekaligus buat melakukan testing secara nyata, Namun sayangnya tool ini lebih ditujukan bagi pengguna produk Apple, tapi itu bukan masalah, yang kita butuhkan khan hanya Screenshot-nya bukan perangkatnya :)

Untuk menggunakan tool diatas caranya sangat mudah kita hanya memasukan URL alamat blog atau website dan selanjutnya biarkan tool tersebut bekerja otomatis menampilkan Screenshot-nya, selain itu kita juga bisa mengatur letak posisi perangkat dengan hanyak menggesernya. Untuk hasil Screenshot karena tidak ada fasilitas untuk menyimpan gambar cara termudah tentu saja hanya menekan tombol PrintScreen dan simpan hasil gambarnya dikomputer kalian.

Untuk mencobanya silahkan sambangi langsung demonya disini

Baca Selengkapnya →

Perbaikan Asynchronous Javascript Loading untuk Tombol Like Sosial Media

dev check Tutorial kali ini hanya untuk memperbaiki sekaligus mengganti ketidaksempurnaan metode Asynchronous Javascript Loading Untuk Tombol Like Twitter, Facebook dan Google+ yang saya tulis sebelum ini dan terus terang kode tersebut tidak berjalan sebagaimana yang saya harapkan. Saat saya mencoba ngecek menggunakan PageSpeed Tool dari Google dan ternyata tool tersebut tetap memberi laporan bahwa blog ini masih menggunakan metode Sinkron dan tentu saja untuk menghindari pencekalan penguraian halaman terpaksa saya harus merombak ulang metode lama dan menganti dengan metode Asynchronous Javascript Loading yang benar-benar bekerja sebagaimana mestinya.

Mungkin kalian juga mengalami hal yang sama dan sudah terlanjur menggunakan Script sebelumnya dan alangkah baiknya ganti saja dengan script yang bekerja dengan baik seperti dibawah ini.

Jika kalian sebelumnya sudah memasang tombol like untuk Facebook, Twitter, Pinterest dan Google+ silahkan cari kode seperti dibawah ini dan hapus semuanya:

http://connect.facebook.net/en_US/all.js
http://platform.twitter.com/widgets.js
http://assets.pinterest.com/js/pinit.js
https://apis.google.com/js/plusone.js

Lalu ganti dengan script dibawah ini dan letakan kode dibawah ini diatas tag </body>

<!-- Asynchronous Javascript Loading for Facebook, Twitter, G+ -->
<div id='fb-root' />
<script type='text/javascript'>
// Async Facebook
(function() {
    var fb1 = document.createElement('script');
    fb1.type = 'text/javascript';
    fb1.async = true;
    fb1.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1', 'facebook-jssdk';
    var fb2 = document.getElementsByTagName('script')[0];
    fb2.parentNode.insertBefore(fb1, fb2);
})();
// Async Twitter
(function() {
    var tw1 = document.createElement('script');
    tw1.type = 'text/javascript';
    tw1.async = true;
    tw1.src = 'http://platform.twitter.com/widgets.js';
    var tw2 = document.getElementsByTagName('script')[0];
    tw2.parentNode.insertBefore(tw1, tw2);
})();
// Async Pinterest
(function() {
    var pt1 = document.createElement('script');
    pt1.type = 'text/javascript';
    pt1.async = true;
    pt1.src = 'http://assets.pinterest.com/js/pinit.js';
    var pt2 = document.getElementsByTagName('script')[0];
    pt2.parentNode.insertBefore(pt1, pt2);
})();
// Async Google+
(function() {
    var gp1 = document.createElement('script');
    gp1.type = 'text/javascript';
    gp1.async = true;
    gp1.src = 'https://apis.google.com/js/plusone.js';
    var gp2 = document.getElementsByTagName('script')[0];
    gp2.parentNode.insertBefore(gp1, gp2);
})();
</script>
<!-- End Asynchronously Javascript -->

Untuk pengguna platform non Blogger Script diatas bisa kalian pasang tanpa ada masalah dan untuk platform Blogger ada sedikit masalah terutama pemanggilan script pada Google+ (https://apis.google.com/js/plusone.js) terus terang dengan mengunakan metode Asynchronous Javascript diatas tidak akan berkerja karena pemanggilan script tersebut sudah include langsung didalam koding Blogger, saya sebelumnya pernah mencoba menghapusnya dan usaha tersebut sia-sia saja :)

Selanjutnya kalian bisa memasang dimana saja tombol Like Button Facebook, Twitter, Pinterest dan Google+ dengan kode dibawah ini (ganti http://www.zoomtemplate.com dibawah dengan alamat blog kalian) :

<!-- Google+ -->
<div class="g-plusone" data-size="medium" data-count="true" data-href="http://www.zoomtemplate.com">
<!-- Twitter -->
<a href="https://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-url="http://www.zoomtemplate.com">Tweet</a>
<!-- Facebook -->
<div id="fb-root"></div>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="1" data-show-faces="false" data-href="http://www.zoomtemplate.com"></div>
<!-- Pinterest -->
<a data-pin-config='beside' data-pin-do='buttonPin' href='http://pinterest.com/pin/create/button/?url=http://www.zoomtemplate.com'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

Untuk memasang Tombol Like Facebook, Twitter, Pinterest dan Google+ dalam halaman postingan silahkan gunakan kode dibawah ini:

<!-- Google+ -->
<div class='g-plusone' data-count='true' data-size='medium' expr:href='data:post.url'/>
<!-- Twitter -->
<a class='twitter-share-button' data-count='horizontal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
<!-- Facebook -->
<div id='fb-root'/>
<div class='fb-like' data-layout='button_count' data-send='false' data-show-faces='false' data-width='1' expr:data-href='data:post.url'/>
<!-- Pinterest -->
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>

Untuk contoh nyata penggunaan Asynchronous Javascript Loading kalian bisa melihatnya langsung diblog saya saat ini Blogger Tutorial atau disini Blogger Templates 2013.

Ok, semoga setelah mencoba tutorial ini loading halaman sobat semua bisa jadi makin cepat :)

Baca Selengkapnya →

Responsive Blog Design ala o-om.com

responsiveSetelah sekian lama bertahan dengan desain blog yang lama saya tergiur juga ingin melakukan redesign blog ini dengan gaya baru yang lebih fresh dan tentu saja saya juga menyematkan teknik Responsive Web Design yang sedang populer biar gak ketinggalan jaman hehehe dan inilah penampakan hasil desain blog yang baru saat ini (entah sampai kapan): responsive blog design Silahkan berimasukan untuk Responsive Blog Design ala O-OM.COM ini. Thanks :)

Baca Selengkapnya →

Tools Gratis Untuk Blogger Pemula

dev checkTools yang saya buat dibawah ini sangat berguna sekali bagi rekan blogger pemula atau yang sudah expert sekalipun untuk membantu memudahkan kegiatan Blogging-nya. Semua tools ini saya buat hanya dalam waktu seminggu jadi mungkin masih ada beberapa error dan bug yang belum saya temui. Semoga kedepannya akan hadir tools-tools lainnya yang lebih bagus lagi. Selamat Mencoba dan beri masukan berupa kritik dan saran yang membangun ya :).

Silahkan langsung mencobanya semua tools disini Free Tools for Blogger

Blogger Sitemap Generator ( XML Sitemap untuk Blogger)
Tool ini saya buat khusus untuk memudahkan kalian membuat Sitemap xml pada Blogger dan hasil kode xml Sitemap dari tool ini bisa langsung dimasukan kedalam pengaturan Sitemap pada Blog kalian atau bisa juga digunakan pada Sitemap Google Webmaster Tools. Fungsi dari sitemap ini membantu mesin pencari melakukan index kesemua halaman lama kalian dan bukan hanya untuk posting terbaru saja.

Blogger-Sitemap-Generator
Silahkan login pada Blogger kalian -> Setelan -> Preferensi Penelusuran ->  robots.txt khusus -> Aktifkan -> lalu masukan saja hasil XML sitemap yang sudah kalian buat menggunakan alat diatas.

Cara Pasang Sitemap di Google WebmasterTools:
Silahkan login pada Google Webmaster Tools -> Perayapan -> Peta Situs -> Pilih Buttton Tambahkan/Uji Peta Situs -> lalu masukan Url XML Sitemap yang sudah dibuat satu-persatu.


CSS Compression Tool (CSS Compressor)
Cascading Style Sheets atau disingkat CSS adalah bahasa pemrograman Stylesheet yang digunakan untuk menggambarkan presenstasi dokumen yang ditulis dalam bahasa markup. Istilah mudahnya Css merupakan cara mudah untuk menata ulang desain pada tampilan halaman. Semakin kompleks suatu halaman biasanya menggunakan koding Css yang banyak pula, ini juga salah satu yang menyebabkan kerja pada sisi Web Browser menjadi semakin berat. Cara terbaik untuk mengurangi ukuran Css adalah dengan melakukan kompresi pada file tersebut agar load halaman menjadi semakin cepat. Silahkan gunakan CSS Compression Tool yang sudah saya buat untuk memudahkan kalian melakukan tugas tersebut.

CSS-Compression-Tool.pn
Google PageRank (PR) Checker
Google PageRank adalah peringkat halaman web yang diberikan oleh Google (antara 0 sampai 10). PageRank merupakan faktor penting pada mesin pencari untuk menilai suatu halaman, peringkat PageRank yang lebih tinggi akan mendapatkan SERP (halaman hasil mesin pencari) posisi yang lebih tinggi. PageRank biasanya tergantung pada jumlah backink yang mengarah pada suatu halaman. Disini saya juga sudah membuat tool sederhana untuk melihat seberapa bagus nilai Pagerank pada alamat blog kalian.

Google-PageRank-(PR)-Checker
Get Favicon From Blog or Site
Favicon adalah ikon kecil yang tampil dibrowser disamping judul halaman pada tab browser, atau di address bar sebelah URL-nya. Hal ini juga digunakan ketika kalian melakukan Bookmark pada halaman. Untuk memudahkan kalian melihat, mengambil atau sekaligus mencari favicon pada alamat blog atau website tertentu kalian bisa menggunakan tool sederhana yang sudah saya buat untuk memudahkan tugas tersebut. Jujur saja saya juga tidak tau persis alat ini berguna apa tidak, tapi jika kalian misalkan membuat blog Aggregator tentu favicon dari alamat situs tertentu sangat penting untuk ditampilkan.


Get-Favicon-From-Blog-or-Site
Blogger Ad Code Converter Tool for AdSense, AdBrite and Chitika
Alat konverter Iklan ini adalah yang paling penting bagi semua blogger dan membantu para blogger untuk mengubah kode iklan kemudian menempatkan iklan tersebut dalam posting Blogger. Alat ini bekerja secara otomatis untuk mengkonversi kode iklan dalam bahasa javascript ke dalam format yang benar sehingga kalian dapat menanamkan langsung pada halaman template html blog kalian. Alat ini sempurna untuk mengkonversi AdSense, AdBrite, Chitika atau kode javascript iklan lainnya yang mungkin kalian miliki.

Blogger-Ad-Code-Converter-Tool
Html Color Codes Generator (HTML Color Picker)
HTML Color Picker adalah tool untuk memilih warna dalam heksadesimal, RGB, HSV dan nilai CMYK dan kalian dapat mengubah gaya apapun pada banyak aspek pada tampilan Blog atau Website! Cara mencari warna sesuai keinginan sangat gampang, tinggal pindahkan slider vertikal untuk memilih warna dan kemudian klik warna disebelah kiri untuk mendapatkan kode warna HTML untuk warna yang diinginkan.

Html-Color-Codes-Generator.png
Semoga tools yang saya buat diatas berguna ya, dan tunggu saja untuk tools-tools lainnya :)

Baca Selengkapnya →

Warna Latar Otomatis Berbeda Pada Setiap Postingan

dev checkDulu saya tidak begitu tertarik untuk merubah warna Background disetiap halaman posting, selain kesannya aneh..mungkin juga terkesan rada Ndeso (kata orang jawa) hehehe Tapi itu dulu ya, selera tentu bisa berubah juga khan, ini tidak lain karena saya lagi senang ngedit template dengan tampilan nyerempet bergaya style Windows 8 ala Metro UI yang lebih berwarna-warni namun tidak sedikitpun menghilangkan kesan elegan pada tampilannya.

Nah dari Style Windows 8 itulah saya mulai tertarik dan mencoba sekaligus ngajarin gimana caranya agar warna postingan blog kalian bisa berubah warna secara otomatis tanpa harus menggunakan banyak koding CSS apalagi  harus menggunakan Conditional Tag yang bikin pusing kepala aja.

Contoh penerapannya bisa kalian lihat pada Blog Gallery Templates milik saya di zoomtemplate.com

windows metro ui
Langsung aja ya dan caranya sangat mudah sekali...silahkan cari kode </head> kemudian letakan kode Javascript dibawah ini tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>

Jika kalian hanya ingin merubah warna posting pada halaman utama saja kalian tinggal gunakan saja conditional tag seperti kode dibawah ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
function get_random_color() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.round(Math.random() * 14)];
}
return color;
}
$(function() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>
</b:if>

Menurut saya tampilan warna berbeda pada latar setiap posting mungkin lebih cocok hanya untuk Template dengan Style Gallery, kalau untuk Template biasa mungkin terlihat gimana gitu... namun tidak ada salahnya juga kalau ingin mencobanya. Bila kalian lebih jeli dan memiliki kemampuan Programming Javascript yang handal tentu bisa mengeditnya lebih bagus lagi sesuai kebutuhan.

Oh iya jangan tanyakan lagi ya seperti "bikin berat loading ya om?" namanya juga ada penambahan koding, terlebih lagi javascript tentu saja nambah size halamanan..tapi itu bukan berarti bikin berat loading khan :)

Baca Selengkapnya →
 

Back to Top