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

  • Membuat show hide konversi kode dan emoticon
    Salam buat agan agin sobat blogger yang suka utak atik template, kali ini saya mau share cara membuat show hide konversi kode dan emoticon pada komentar blogger bagi anda yang sedang mencari trik ini silahkan saja untuk di simak. pertama buka editor template blogger lalu tambahkan css di bawah ini .box-konvert-kode-db { width:100%; …
  • Membanned spamer di komentar dengan jquery
    Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user …
  • Highlighter Language Autodetection
    Syntax Highlighter Language Autodetection ini saya dapatkan dari Software Maniacs dan saya terapkan di blog ini hanya saja tampilannya masih menggunakan Syntax Highlighter lama. seperti biasa anda mungkin sudah tau kegunaannya untuk di terapkan di blog, jadi tidak usah di jelaskan tinggal sekarang langsung saja ke cara bagaimana memasang Synta…
  • Memperbaiki ukuran thumbnail homepage
    buat sobat blogger yang mengalami masalah pada thumbnail/gambar Post.snippet dan post.thumbnail yang kurang jelas dan tidak sesuai ukuran pada tampilan posting static page/homepage, bisa menggunakan trik ini agar tampilan gambarnya bisa terlihat jelas dan sesuai. caranya cukup mudah dan gak ribet ikuti saja trik berikut perhatikan kode scrip…
  • Menerapakan jquery lightbox evolution
    Salam sobat blogger membuat postingan untuk share kali ini buat sobat yang masih bingung tentang jquery lightbox evolution. jquery lightbox ini saya gunakan di template ini pada konversi kode dan kontak bisa sobat lihat seperti apa itu jquery lightbox. untuk sobat yang tertarik dan ingin menerapkan ini untuk blognya saya akan memberikan trik…
  • Memasang kode, gambar dan video di komentar
    Buat agan yang bingung dengan judul di atas sebenarnya adalah judul tentang cara menyisipkan dan mengijinkan kode, gambar dan video di komentar blogger. jadi kali ini kita akan membahas hal tersebut, karena saya pernah berkunjung ke sebuah blog yang memasang tool konversi kode tapi tidak memasang javascript ini jadi percuma juga menggunakan to…

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