Membuat warna background posting populer

Membuat warna background posting populer

Trik

Trik ini akan mengubah warna latar belakang blog Anda ketika posting/artikeln yang paling banyak dilihat di blog anda dibuka. Untuk melihat posting/artikel terpopuler atau paling banyak dilihat bisa dilihat dari widget popular post blogger, jika sobat belum tahu silahkan tambahkan widgetnya karena trik ini membutuhkan widget tersebut.

Metode 1: Gunakan JavaScript.

Tambahkan kode berikut sebelum tag </ body> dalam template Anda

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
var bgU=location.href;bgPP=document.getElementById('PopularPosts1');bgTN=bgPP.getElementsByTagName('a');if(bgTN){bgH=bgTN.item(0).href;if(bgU.indexOf(bgH)!=-1){document.write('<style type="text/css">body{background:#800000!important}</style>')}}
//]]>
</script>
</b:if>

Metode 2: Menggunakan XML Blogger.

Tambahkan kode dibawah ini sebelum kode tag <b:if cond='data:showThumbnails == &quot;false&quot;'> di dalam template Anda.

<b:if cond='data:post.href == data:blog.url'>
<style type='text/css'>body{background:#800000!important}</style>
</b:if>

Sebaliknya 800000 warna latar belakang ini silahkan anda sesuaikan dengan kode warna pilihan Anda.

Gunakanakan salah satu trik di atas, dua cara di atas sama - tidak memberatkan loading blog anda.

Selamat berexperimen sob...

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%; …
  • Breadcrumb Microdata valid HTML5
    Fungsi dari breadcrumb pada blog adalah untuk mengetahui sedang dihalaman mana sekarang pengunjung berada. Dengan breadcrumb, maka urusan navigasi link bisa lebih mudah. Selain itu, breadcrumb juga sangat baik untuk SEO blog karena memperkaya kata kunci dalam postingan. Hal ini terbukti dari beberapa postingan blog sesepuh seperti, kang ismet,…
  • Cara membuat judul header untuk tag pre
    Selamat malam sobat blogger kali ini saya mau berbagi tentang cara dan trik membuat judul pada tag pre demo lihat blog ini, biar blognya tambah keren dan terlihat bagus. untuk demo dan hasilnya silahkan lihat di blog ini. cara dan langkahnya cukup mudah silahkan saja ikuti trik di bawah ini. pertama silahkan buka editor template blogger sobat…
  • Cara membuat penomoran otomatis pada tag pre
     Setelah sebelumnya saya share cara membuat header judul pada tag pre kali ini saya mau berbagi tentang cara bagaiman memberi urutan nomor pada tag pre yang bisa langsung hanya dengan menambahkan css saja dan sedikit penambahan kode html pada elemen tag pre. untuk bagaimana hasilnya silahkan di lihat di blog ini. langsung ke topik pembah…
  • Pencarian dengan tombol bersihkan
    Salah satu yang membuat blog kita menjadi user friendly adalah dengan adanya kotak pencarian, Kotak pencarian ini sangat penting untuk memudahkan pengunjung menjelajahi blog Anda atau mencari artikel lainnya di blog Anda. Fungsi kotak pencarian untuk saya sendiri adalah untuk mempermudah mencari posting yang akan saya tambahkan sebagai link i…
  • Membatasi jumlah posting di halamam label
    Seringkali terkadang jumlah posting yang muncul di halaman search label blogger melebihi jumlah yang sudah kita terapkan di pengaturan dasar, ketik kita telah mengatur jumlah posting yang muncul di halaman beranda blogger dengan jumlah maksimal misalkan sepuluh posting maka poating yang akan muncul di halaman label akan tetap berada di jumlah…

10 komentar

  1. Unknown16 Maret 2014 pukul 23.46

    ijin untum mencoba mas salam kenal

    BalasHapus
  2. PerumJogja.info17 Maret 2014 pukul 00.07

    ijin nyimak dulu sob,..
    kunjungn bliknya ditunggu :) salam kenal

    BalasHapus
  3. Mizz Aiza17 Maret 2014 pukul 00.28

    terima kasih di atas sharing ini.. :D

    BalasHapus
  4. Claresta17 Maret 2014 pukul 02.51

    keren mas tutornya bikin bacground most popular, ijin belajar ya, hehehe :D oya gimana tuh cara bikin READ ME seperti di atas :) makasih bantuannya :)

    BalasHapus
    Balasan
    1. Dafin defandaky17 Maret 2014 pukul 03.16

      silahkan mbak semoga berguna, pakek lightbox evo trus buat html yang di host di google drive... :-bd

      Hapus
    2. Claresta20 Maret 2014 pukul 20.20

      wah tapi gak tau caranya nih mas, hehehe :D oke deh makasih petunjuknya :)

      Hapus
    3. Dafin defandaky20 Maret 2014 pukul 20.26

      haha, cari cari aja dlu tutor semua trik di atas mbak nnti trus di phami... :)

      Hapus

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