Blog Inspirasi Digital

Blog Inspirasi Digital

Tutorial Mikrotik, Hotspot, Blog, SEO, WEB 2.0, HTML, CSS, Javascript dan Inspirasi Digital

Warna Latar Otomatis Berbeda Pada Setiap Postingan

dev checkDulu 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

windows metro ui
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() {
$(".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 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() {
$(".post").each(function() {
$(this).css("background-color", get_random_color());
});
});
//]]>
</script>
</b:if>

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.

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 :)

49 komentar:

  1. Balasan
    1. Template semakin keren Om, hasil karya yang luar biasa

      Hapus
  2. kunjungan malam gan, terima kasih sharingnya....
    tapi saya masih newbi, jadi belum paham,hehe
    salam blogger, semoga sukses

    BalasHapus
  3. mantapp om.....hasilnya luar biasa...bisa di CEK ....

    BalasHapus
  4. Tapi sayang nih mungkin bikin blog berat ya kang?

    BalasHapus
  5. mantep,,injin copas dulu kang :)

    BalasHapus
  6. mantap mas keren .....

    BalasHapus
  7. Mungkin lain kali akan saya coba Om, soalnya jadi penasaran..
    Saran saya sih simpan file JavaScript nya di hosting sendiri, terutama hosting gratis milik Google. Agar file JS yg panjang tidak terlalu membebankan koding pada template :)
    Mungkin itu aja saran dari saya, sebelumnya saya ucapkan terima kasih atas tutorialnya Om Agus !!!

    BalasHapus
    Balasan
    1. mungkin menurut saya dihosting atau di blogger sama aja size-nya, saat browser melakukan cek file JS di hosting luar itu juga masuk hitungan size halamam lho :)

      Hapus
    2. Emang benar si, saat blog lagi di load browser juga membaca file yg di hosting keluar..
      tapi sekarang zoomtemplate sudah nggak pake warna latar otomatis lagi kayaknya :D

      Hapus
  8. Hmmmm keren.. makasih dah share...

    BalasHapus
  9. Makasih Om atas ilmunya yang keren bangets, simpen dulu deh, nanti untuk template blog yang baru, selamat menjalankan ibadah puasa ya om, semoga semuanya lancar, amin

    BalasHapus
  10. waahh,, ini seperti blogazine ya pak???

    BalasHapus
  11. ilmu baru nie, coba saya terapkan.. :)

    BalasHapus
  12. Anonim14/7/13

    ctrl+d dulu kang,,

    BalasHapus
  13. ilmu baru lagi nih,. mantap o-om ..

    BalasHapus
  14. top markotop om :)

    BalasHapus
  15. Mantep. Dijadikan bookmark dulu :D

    BalasHapus
  16. coba pasang ach...
    pengen liat hasilnya

    BalasHapus
  17. Klo sekalian dengan warna tulisannya ikut berubah bisa gak gan??
    Klo bisa dibuat warna fonts'x ikut menyesuaikan diri dengan background pasti lebih mantap lagi....
    :)

    BalasHapus
    Balasan
    1. kalau itu saya belum tau caranya, soalnya warna yang keluar secara acak (random):)

      Hapus
  18. terima kasih atas informasinya teman

    BalasHapus
  19. Wah mantap mas Oom. Makn sukses aja terus ya :)

    BalasHapus
  20. boleh dicoba nih, tipsnya

    BalasHapus
  21. wah prinsipnya random warna ya mas!

    BalasHapus
  22. izin nyimak dan nyedot kode html dan cssnya yah mas

    BalasHapus
  23. Anonim16/7/13

    langsung praktekin om biar kagak lupa

    BalasHapus
  24. Anonim17/7/13

    oke nih...
    dicoba dulu..

    BalasHapus
  25. Mantap, makasih informasinya. Langsung dicoba.

    BalasHapus
  26. Css bisa merubah segalanya termasuk dari warna latar otomatis tutorial yang dibuat ini.

    BalasHapus
  27. Langsung menuju kode Pak :)

    BalasHapus
  28. Lanjut lagi Kang tutorialnya mudah dimengerti ini.

    BalasHapus
  29. Tumben aktif lagi mas, udah lama ga posting neh :)

    BalasHapus
  30. Kalau class yang ingin dirubah lebih dari satu, misal ".post" ditambah lagi dengan ".breadcrumb" dst itu penulisan JavaScript lengkapnya bagaimana ya?

    BalasHapus
  31. gak minat om soalnya bikin loading blog berkurang hehehhe...

    BalasHapus
  32. Tutorialnya simpel banget tapi manfaatnya gede banget,,, makasih om, ane praktekin utk blog gue..

    BalasHapus
  33. Ga berani pake om.. ini aja udah agak berat rasanya klau dibuka om :D

    BalasHapus
  34. perlu di terapkan nih di blog gue

    BalasHapus
  35. om oom ada ga yang scriptnya lebih simple...biar loadingnya ringan

    BalasHapus
  36. asyik,,jadi nanti blog saya unik ya...hehe :)

    BalasHapus
  37. keren mas templatenya, bikin sendiri ini?

    saya pikir website self hosting tadi,

    BalasHapus
  38. Menurut saya cara ini bagus sebab membuat tampilan blog menjadi berwarna-warni tapi kekurangannya bisa membuat loading blog menjadi berat apalagi ini pakai java script. Kalau sudah banyak java script dipasang di template blog kita akan bikin blog kita semakin lola. Salam kenal dari saya, mas.

    BalasHapus
  39. Anonim27/8/13

    mejeng di blog Master O'om ah.. :D

    BalasHapus

Silahkan beri komentar dengan bijak dan sesuai dengan topik artikel, karena semua komentar akan saya moderasi terlebih dahulu sebelum ditampilkan. Thanks :)

 

Back to Top