Bikin Background berbeda di setiap halaman


Trik ini pernah ku ulas sebelumnya. Namun ketika blogspot menambahkan fitur halaman, aku jadi kepikiran buat bikin background yang berbeda-beda pada setiap halamannya. Akhirnya setelah browsing kenana kemari, aku ketemu cara untuk menempatkan script background pada halaman tertentu. Bukan Cuma buat backround sob, buat widget juga bisa, jadi kita bisa memilah dan memilih backround mana yang akan di tampilkan di halaman depan, dihalaman selajutnya ataupada halaman-halaman tertentu sesuai keinginan kita.

Baik, karena judul di atas ngebahas soal backround, maka posting kali ini fokus kepada soal membuat background dan penempatannya. Agar lebih aman, sebaiknya sobat buat blog baru. Pakai template minima saja. Namanya juga experiment, iya ngga…
Ok, mari kita pehatikan script di bawah ini :

<style type="text/css">
{ background-color:transparent; }
body {background-image:url
('URL _GAMBARMU');
    background-attachment: fixed;
    background-position:top left;
    background-repeat:no-repeat;
</style>

Penjelasannya sebagai berikut :



Ganti tulisan URL_GAMBARMU dengan url gambar sobat.

Background attachment: fixed bisa sobat ganti dengan scrool.

Background –position: top left, boleh sobat ganti dengan center, top right, bottom left atau bottom right, sesuaikan dengan template blogmu.

Background-reapet:no-reapet, artinya background tersebut tetap/statis pada tempatnya jika sobat menaikkan atau menurunkan halaman, kalo pengen backroundnya ikut bergerak, hapus tulisan no-



Edit terlebih dahulu menggunakan wordpad atau document txt. Setelah semua kode pas, baru kita pasang ke blog dengan cara seperti memasang buku tamu misalnya, yaitu dengan mengklik customize di navbar, kemudian layout lalu klik add a new widget, pilih HTML/JavaScript. Beri nama misalnya BACKGROUND 1, kemudian kopi kode yang telah kita edit tadi lalu pastekan ke ruang konten. Kalo uda klik SAVE.


Sampe di sini, sobat udah bisa melihat efek backround tadi bila sobat menggunakan template minima. Nah sekarang misalkan kita ingin backround tadi di halaman about, sebelumnya, sobat udah harus punya atau membuat halaman khusus untuk halaman "About" tadi.



Klik About pada pages blogsobat, lihat alamatnya di adress bar, ku contohkan seperti ini nih :
http://namablogmu.blogspot.com/p/about.html kopi alamat tersebut dan pastekan ke worpad atau document txt. Selanjunya perhaikan kode di bawah ini :
 
<b:if cond='data:blog.url == &quot;URL_HALAMAN_DISINI&quot;'>

Nah, ganti tulisan URL_HALAMAN_DISINI dengan url halaman about yang kita kopi tadi. Kalo udah selesai, sekarang kita menuju ke ruang edit HTML utuk pemasangannya. Klik lagi customize di navbar, kemudian layout lalu edit HTML. Jangan lupa centeng Expand Widget Template.
Setelah sampai di ruang edit html cari kode yang kita pasang tadi dengan menekan CTRL+F di keyboad, lalu ketikkan BACKGROUND 1. Nah perhatikan cara menempatkan script tadi di bawah ini :

<b:widget id='HTML14' locked='false' title='Background 1' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://namablogmu.blogspot.com/p/about.html&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan kode :


<b:if cond='data:blog.url == &quot;http://namablogmu.blogspot.com/p/about.html&quot;'>


Yang berada tepat di bawah kode :


<b:includable id='main'>

Lalu ditutup dengan kode :

</b:if>

Yang berda tepat di bawah kode :

<b:include name='quickedit'/>

Nah, Jika sobat ingin membuat backround untuk halaman yang lain, silahkan ikuti langkah-langkah di atas, pelan-pelan aja sob. Pasti bisa. Oh iya, sekali lagi nih, trik tersebut bisa sobat terapkan utuntuk mengatur tampilan widget agar lebih teratur, maksudku biar ngga pada numpuk di halaman depan, tampilan blog kita khan jadi lebih rapi dan paling tidak bisa ngeringankan loading pagenya,

Sampe di sini, mudah-mudahan bisa dipahami. Maklum bikin postingnya buru-buru, nyambi jadi baby sitter ceritanya. Kritik saran dan masukan, koment aja deh, asal jangan dispam aja… jiakakakak… Tank's sob…
    

10 comments:

  1. Wow....keren.....setiap background menjadi lain untuk halamannya.

    Tapi, ini kan hanya untuk blogspot, kalau pake wordpress sulit....

    ReplyDelete
  2. @Jamal Hacker : Bener sob, gwa cuma ngerti blogspot doank. Kudu berguru lagi nih sama pendekar2 wordpress... Lagian juga mal, penerapannya ngga melulu buat background kok, bisa diterapkan ke widget-widget yang lain, jadi blog kita ngga terlihat kepenuhan. Coba ente lihat blog gwa, gwa sendiri aja masih bingung ngurusin "Followers" yang muncul di setiap halaman, Setengah mampus gwa utak atik biar cuma nampil di front page aja... kikikikik... bantuin yach bagi yang bisa, plizz deh...

    ReplyDelete
  3. dulu ane pake blogspot, tapi krn kawan2 sekampus pada pake wordpress semua ya jdnya pindah haluan deh... tapi kayaknya fitur blogspot jauh lebih banyak dari WP.
    Nice Post bro

    ReplyDelete
  4. Bener juga, fitur blogspot lebih banyak dibanding WP, tapi gimana yah, aku sudah kebelet pakai WP, agak berabe juga nih untuk pindah .... Nunggu aja postingan ttg WP. Aku malah ingin setiap halaman berbeda2 isinya, jangan yang berbeda hanya postingan aja; sidebar kiri atau kanannya kebawa terus ke setiap halaman .... Makasih, salam kenal.

    ReplyDelete
  5. ta cobain ah

    misi mu i coba tipsnya :)

    ReplyDelete
  6. Ora berhasil sob...............? Hehehe visit back ya............!

    ReplyDelete
  7. Wkwkwkwk ndak berhasil mas, ditunggu kunjungannya ya?

    ReplyDelete

Makasih udah mampir dan kasih komentar ....