Background posting berbeda - beda di homepage

Javascript jQuery sitemap Trik

buat sobat yang sedang mencari trik atau cara untuk membuat tampilan posting tampil dengan warna background yang berbeda beda di setiap lebel dan halaman depan blog saja dan suka dengan tampilan seperti ini bisa menggunakan trik mudah berikut ini.

caranya pun juga cukup mudah, silahkan buka editor template blog sobat lalu cari kode </head> dan letakkan kode di bawah ini di atas kode </head> tadi

Berikut ini kodena:

kode di bawah ini digunakan untuk merubah background posting sesuai lebel di semua halaman

1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-1718code-line:1-18<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>

untuk sobat yang hanya ingin memberi efek perbedaan background posting di halaman depan blog saja gunakan kode di bawah ini:

1code-line:2-12code-line:2-23code-line:2-34code-line:2-45code-line:2-56code-line:2-67code-line:2-78code-line:2-89code-line:2-910code-line:2-1011code-line:2-1112code-line:2-1213code-line:2-1314code-line:2-1415code-line:2-1516code-line:2-1617code-line:2-1718code-line:2-1819code-line:2-1920code-line:2-20<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>

rasanya tampilan ini lebih bagus untuk blog bertema galery jika di terapkan di template biasa tergantung selera demikian saja sedikit trik dari saya, semoga berguna....

Artikel Terkait

  • Tombol scroll back to top auto hide
    Penggunaan tombol ini sebenarnya untuk memudahkan ketika telah selesai menggulung ke bawah maka dengan menekan/klik tombol ini halaman akan otomatis tergulung keatas tampa pengunjung bersusah melakukan penggulungan keatas. kali ini saya akan berbagi untuk membuat tombol scroll back to top yang otomatis keluar ketika halaman di gulung saja, dan…
  • Background berganti otomatis dengan jQuery
    Dekorasi website Anda dengan warna menarik selalu menjadi prioritas pertama dari seorang blogger. karena dengan tampilan yang enak di pandang dan rapi para pengunjung akan betah. Ini adalah alasan, mengapa orang selalu lebih memilih template dan tema Profesional untuk situs web mereka. tidak ada salahnya untuk menambahkan bebersapa modifikasi …
  • Cara untuk membuat floating sidebar
    Bagaimana mengubah sidebar Anda menjadi sebuah bar yang mengambang?. Tutorial ini menjelaskan, cara mengubah sidebar yang ada untuk floating bar. Teknik ini dapat diterapkan untuk widget tunggal, bukan seluruh sidebar, sehingga widget hanya melayang saat kalaman digulung le atas atau ke bawah. Hal ini dapat dibuat dengan menambahkan kode Java…
  • Cara Membuat Efek Peel Away dengan jQuery
    Pertama, peel away adalah sebuah efek seperti robekan sampul. Sama seperti widget lainnya Peel ini juga akan muncul di sudut kanan atas website/blog Anda. Setiap kali pengunjung mengarahkan mouse mereka di sudut kanan atas situs web/blog Anda, maka iklan tersembunyi dengan jQuery efek peel away akan muncul. lihat screenshot berikut untuk mempe…
  • Menambahkan kode JavaScript di Blogger
    Saat menambahkan kode javascripts dalam template editor Blogger, kita sering menghadapi beberapa Kesalahan XML aneh seperti Kesalahan parsing XML, baris 768, Kolom 20: Isi elemen harus terdiri dari data karakter well-formed atau markup. Ini merupakan kesalahan yang terjadi ketika kode JavaScript tidak terbungkus dengan baik, atau kode tersebut …
  • Mempercepat loading blog dengan javascript
    Salah satu cara untuk trik mempercepat load blog yang saya temui dengan memasang sedikit javascript pada html,  Cara dibawah ini sebenarnya hantya melakukan sebuah prinsip meminimalisasi loading gambar yang ada demgan resolusi atau ukuran yang terbilang besar. Untuk mengecek sobat bisa cek seberapa lama dan berat waktu muat blog menggunak…

10 komentar

  1. jadi kurang enak dilihat kalo warnanya beda beda warna warni...
    kalo masih satu warna itu masih bagus

    BalasHapus
    Balasan
    1. bagusnya untuk template galeri sob, karo template biasa ya agak gimana gtu :)

      Hapus
  2. Kalo labelnya banyak gimana sob?

    BalasHapus
    Balasan
    1. tidak ada masalah sob, ini hanya untuk mengubah backgraund aja :)

      Hapus
  3. Ahli js dan css ya mas ? Belajar dong, hehe :)

    BalasHapus
    Balasan
    1. saya juga masih belajar kang, kalo mau lebih ngerti main deh ke http://www.w3schools.com

      Hapus
  4. <b:if cond='data:blog.url == data:blog.homepageUrl'>

    tag kondisionalnya kurang bro. ini hanya tampil di home page saja bro. pada static page tidak work, coba ganti dengan ini
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    cape, pegal linu dan segala penyakit akibat kelelahan bisa terobati dengan kode di atas

    BalasHapus
Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Back to Top
Loading...