Dulu aku tidak begitu tertarik untuk merubah warna Background disetiap halaman posting, selain risikonya 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 biar 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 ibarat 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, jika untuk Template biasa mungkin terlihat gimana gitu... namun tidak ada salahnya juga jika ingin mencobanya. Bila kalian lebih jeli dan mempunyai kemampuan Programming Javascript yang handal tentu bisa mengeditnya lebih anggun lagi sesuai kebutuhan.
Oh iya jangan tanyakan lagi ya ibarat "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 :) Sumber http://www.o-om.com
EmoticonEmoticon