O-OM.COM | Blogger Tutorial Plus Blogger Templates |
Warna Latar Otomatis Berbeda Pada Setiap Postingan Posted: 13 Jul 2013 07:31 AM PDT Dulu 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 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'/> Jika kalian hanya ingin merubah warna posting pada halaman utama saja kalian tinggal gunakan saja conditional tag seperti kode dibawah ini:<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 cond='data:blog.url == data:blog.homepageUrl'> 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.<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> 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 :) |
You are subscribed to email updates from Blogger Tutorials To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 komentar:
Posting Komentar