Warna Latar Otomatis Berbeda Pada Setiap Postingan

Dulu aku tidak begitu tertarik untuk merubah warna Background disetiap halaman posting, selain akhirnya aneh..mungkin juga terkesan rada Ndeso (kata orang jawa) hehehe Tapi itu dulu ya, selera tentu bisa berubah juga khan, ini tidak lain alasannya ialah aku lagi bahagia 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 aku mulai tertarik dan mencoba sekaligus ngajarin gimana caranya semoga warna postingan blog kalian bisa berubah warna secara otomatis tanpa harus memakai banyak koding CSS apalagi  harus memakai Conditional Tag yang bikin pusing kepala aja.

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


Langsung aja ya dan caranya sangat gampang sekali...silahkan cari isyarat </head> lalu letakan isyarat Javascript dibawah ini sempurna diatas isyarat </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 menyerupai isyarat 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 aku tampilan warna berbeda pada latar setiap posting mungkin lebih cocok hanya untuk Template dengan Style Gallery, jikalau untuk Template biasa mungkin terlihat gimana gitu... namun tidak ada salahnya juga jikalau ingin mencobanya. Bila kalian lebih jeli dan mempunyai kemampuan Programming Javascript yang handal tentu bisa mengeditnya lebih manis lagi sesuai kebutuhan.

Oh iya jangan tanyakan lagi ya menyerupai "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 :)

Share this post