Warna Latar Thumbnail Otomatis Berbeda Beda

2/13/2014 Javascript JQuery Tutorial
Tutorial kali ini saya akan memberikan tips sederhana dan mudah yaitu membuat Warna Latar Thumbnail Otomatis berbeda seperti Style Windows 8. Atau kalau pingin lihat contohnya silahkan klik Beranda atau Label yang berada di Blog Saya ini, pasti di setiap thumbnail warnanya berbeda.

Saya tertarik menggunakannya dan sekaligus membagikan gimana caranya agar Warna Latar Thumbnail Otomatis Berbeda tanpa harus menggunakan banyak kodening CSS apalagi harus menggunakan Conditional Tag yang bikin pusing kepala aja.
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() { $(".thumbnail").each(function() { $(this).css("background-color", get_random_color()); }); }); //]]> </script>

Jika sobat hanya ingin merubah warna Thumbnail pada halaman utama saja sobat 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() { $(".thumbnail").each(function() { $(this).css("background-color", get_random_color()); }); }); //]]> </script> </b:if>

Perhatian : Kode yang ditandai silahkan sobat ganti dengan nama thumbnail yang berada ditemplate sobat, karena ini kadang berbeda.

OK hanya itulah tutorial singkat kali ini semoga dapat membantu dan bermanfaat.

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

22 comments

Ohh ini to caranya makasih gan sangat membantu

Balas

yg jadi masalahnya script itu hanya warna acakan mas .. !!
kalau mau memasukan warna tertentu ??

Balas

wah jadi makin menarik ya kang, kalo demonya kaya di blog ini ya kang...

trims ah, bisa saya coba nanti....

Balas

Kontennya Manteb - Manteb Gan. Sukses Selalu.

Salam Kenal Ya Bradher. Di Tunggu Visit Backnya Gan Visit Back KORAN GRATIS

Balas

Wah, ternyata sederhana ya gan.. Akan saya coba lah kapan-kapan, hehe :D #Blogwalking ya gan ke blog saya :)
http://kang-hilman.blogspot.com/

Balas

Ia sangat sederhana SOB, selamat mencoba aja :D. ke TKP

Balas

Blognya kayak ada konser gan ramai banget. Oh ya, Warna Latar Thumbnail Otomatis Berbeda Beda itu apa tidak berpengaruh pada loading blog?

Balas

Untuk Warna insya Allah tidak akan mempengaruhi pada loading,

Balas

Hey, I had a great time reading your website. Do you have an email address that I can contact you on? Thank you and hope to hear from you soon.

Regards,

Joel
JHouston791 gmail.com

Balas

Ia om Rully, untuk warna tertentu Insya Alla menyusul

Balas

ok thanks this my email kangfathur_tea@yahoo.co.id

Balas

Tets Gambar http://1.bp.blogspot.com/-FyxH5zHQbLE/VDCy96YxvCI/AAAAAAAAASw/UNG_dK3OlOI/s1600/1.PNG

Balas

ada apa dengan gambarnya bos?? :D

Balas

Apakah Anda dalam setiap kesulitan keuangan? Apakah Anda perlu pinjaman untuk memulai bisnis atau untuk membayar tagihan Anda? Kami memberikan pinjaman kepada orang-orang yang membutuhkan bantuan. Terapkan sekarang Via Email: elenanino07@gmail.com

Terima kasih dan Tuhan memberkati
Ibu Elena

Balas