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

  • Memgenal javascript dan cara menggunakan
    Dalam artikel ini Anda mempelajari dasar-dasar JavaScript dan membuat program JavaScript pertama Anda. Apa itu JavaScript? JavaScript adalah bahasa scripting yang digunakan untuk script sisi klien. JavaScript dikembangkan oleh Netscape pada tahun 1995 sebagai metode untuk memvalidasi bentuk dan menyediakan konten interaktif ke situs web. yan…
  • Klik kanan hanya berfungsi di tag pre
    Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya…
  • Filter otomatis kata - kata kotor dalam komentar
    Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan d…
  • Blokir otomatis link aktif di dalam komentar
    Blogger memang sudah memberi fasilitas moderasi untuk mengontrol kegiatan komentar di dalamnya, namun jika blog anda tergolong sebuah blog yang memiliki aktifitas komentar yang ramai tidak mungkin anda akan memeriksa satu persatu, selain memakan waktu juga menambah pekerjaan. Tidak semua pengunjung blog memiliki itikad baik, santun dan memahami…
  • Mematikan link aktif di komentar dengan jQuery
    Jika Anda telah bosan berurusan dengan semua jenis komentar spam dan Anda begitu sibuk untuk meninjau semua komentar, maka trik blogger hack baru ini akan membantu Anda untuk itu dengan menghapus link yang disertakan dalam komentar dan menggantinya dengan teks biasa menggunakan jQuery. Cara Hapus Link Dalam Komentar Dengan jQuery 1. Masuk k…
  • Memasang alert untuk mengaktifkan javascript
    Tutorial ini berguna untuk para pengunjung blog anda yang menon-aktifkan fungsi javascript di web browser mereka. misalnya, ketika blog anda tidak memiliki tampilan maksimal saat fungsi javascript di web browser pengunjung anda dinon-aktifkan, maka para pengunjung blog anda harus mengaktifkan fungsi javascript di web browser mereka dengan men…

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