Warna Latar Thumbnail Otomatis Berbeda Beda - Blog Kang Fatur

Warna Latar Thumbnail Otomatis Berbeda Beda

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.

21 comments:

  1. Ohh ini to caranya makasih gan sangat membantu

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

    ReplyDelete
    Replies
    1. Ia om Rully, untuk warna tertentu Insya Alla menyusul

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

    trims ah, bisa saya coba nanti....

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

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

    ReplyDelete
    Replies
    1. Untuk Warna insya Allah tidak akan mempengaruhi pada loading,

      Delete
  6. 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

    ReplyDelete
    Replies
    1. ok thanks this my email kangfathur_tea@yahoo.co.id

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

    ReplyDelete
  8. 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

    ReplyDelete

Subscribe Our Newsletter

Notifications

Disqus Logo