Cara Membuat Warna Latar Otomatis Berbeda Pada Setiap Postingan Blogger




Cara Membuat Warna Latar Otomatis Berbeda Pada Setiap Postingan Blogger
Cara Membuat Warna Latar Otomatis Berbeda Pada Setiap Postingan Blogger

Sore ini saya kembali lagi berbagi mcara memebuat warna Background disetiap halaman posting Blogger. Mungkin penjelasan saya sore ini singkat saja, karena ada waktu untuk rehat sebentar. Nah kembali lagi kita ke pembahasan mengenai cara merubah warna latar belakang otomatis di blogger.

Mungkin barang kali jika anda sedang mencari pembahasan seperti judul di atas maka artikel ini tepat untuk anda. Untuk anda yang penasaran bisa melihat demo video gambar Gif di bawah ini ya.
Tampilan nya mirip sekali dengan Style Windows 8 jika anda tertarik dan ingin mencoba agar warna postingan blog kalian bisa berubah warna- warni secara otomatis tanpa harus menggunakan banyak koding CSS apalagi  harus menggunakan Conditional Tag yang membuat pikiran kita pusing, jadi bisa anda simak langkah- langkah di bawah ini.
Warna Latar Otomatis Berbeda Pada Setiap Postingan Blogger
  1. Pertama , pastikan sobat udah masuk di dasbhor sobat sendiri
  2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ini </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>
  4. Apabila anda 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>
  5. Jika sudah anda simpan, klik Save Template dan lihat hasilnya.

Saya rasa untuk  tampilan warna berbeda pada latar setiap posting barang kali lebih dominannya cocok pada Template dengan menggunakan gaya tampilan Gallery. Tetapi untuk template yang biasa- biasa saja seperti template saya ini barang kali kurang bagus sepertinya. Namun tergantung mata memandang dan penilaian dari temen- temen, 

Emm dan tidak ada salahnya juga ingin anda mencobanya. Barang kali akan terlihat bagus template blog anda. Bagi anda yang sudah pandai untuk mengedit kode-kode di html dan mempunyai skill Programming Javascript, jadi dengan senang hati bisa dengan mudah untuk mengedit lah kiranya agar terlihat tampilan warna blog anda akan lebih pres dan keren lagi seperti website detikcom yang mempunyai tampilan warna latar hanya warna biru saja.

Jika nanti ada pertanyaan dari rekan kita. oya mas jika saya menerapkan kode tersebut di blog saya apakah akan membuat blog lemot atau lambat?? nah jawaban saya sangat tentu saja lemot karena  ada penambahan koding terlebih lagi javascript tentu saja nambah size halamanan pada template kita alhasil kecepatan blog akan berkurang,. namun tidak lah seperti anda pikirkan blog menjadi kecepatan blog 100% menurun, hehe.

Nah untuk melihat perbandingan berpa persen kecepatan blog saya menurut bisa anda lihat gambar video gif di bawah ini ya.

Ini kecepatan blog saya sebelum memasang kode di atas
Ini kecepatan blog saya setelah memasang kode di atas
Jadi sekiranya sudah jelas ya berapa % penurunan kecepatan blog saya, namun saya tidak memaksa anda untuk memasang kode di atas. saya hanya berbagi pengalaman saja menggunakan kode di atas pada blog saya..
Nah mungkin sampai disini dulu penjelasan singkat saya pada sore ini semoga bisa dapat bermanfaat untuk anda, dan selamat mencoba saja. salamam blogger.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect