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 == "URL_HALAMAN_DISINI"'>
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 == "http://namablogmu.blogspot.com/p/about.html"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://namablogmu.blogspot.com/p/about.html"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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 == "http://namablogmu.blogspot.com/p/about.html"'>
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…
Wow....keren.....setiap background menjadi lain untuk halamannya.
ReplyDeleteTapi, ini kan hanya untuk blogspot, kalau pake wordpress sulit....
@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...
ReplyDeletedulu 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.
ReplyDeleteNice Post bro
mampir bro...
ReplyDeleteBener 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.
ReplyDeleteta cobain ah
ReplyDeletemisi mu i coba tipsnya :)
Ora berhasil sob...............? Hehehe visit back ya............!
ReplyDeleteWkwkwkwk ndak berhasil mas, ditunggu kunjungannya ya?
ReplyDeleteNice post with awesome points! Can’t wait for the next one.
ReplyDeleteToshiba - Satellite 15.6" Touch-Screen Laptop - 4GB Memory - 500GB Hard Drive - Satin Black (C55Dt-A5307)
Toshiba - Satellite 15.6" Laptop - 4GB Memory - 500GB Hard Drive
susah....
ReplyDeletesmm panel
ReplyDeletesmm panel
iş ilanları
İnstagram takipçi satın al
Hırdavatçı burada
Https://www.beyazesyateknikservisi.com.tr
servis
tiktok jeton hilesi
Good content. You write beautiful things.
ReplyDeletehacklink
hacklink
korsan taksi
vbet
sportsbet
vbet
mrbahis
mrbahis
taksi
Success Write content success. Thanks.
ReplyDeletekıbrıs bahis siteleri
deneme bonusu
canlı slot siteleri
betpark
betmatik
betturkey
kralbet
Önemli giriş adreslerine buradan ulaşabilirsiniz.
ReplyDeletebetturkey giriş
betpark giriş
D5J6
manavgat
ReplyDeletemilas
yalova
çeşme
mardin
S06NZK
yurtdışı kargo
ReplyDeleteresimli magnet
instagram takipçi satın al
yurtdışı kargo
sms onay
dijital kartvizit
dijital kartvizit
https://nobetci-eczane.org/
İNİ8D
kars
ReplyDeletekütahya
niğde
urfa
aydın
ZOKWR8
salt likit
ReplyDeletesalt likit
dr mood likit
big boss likit
dl likit
dark likit
7GSZV
salt likit
ReplyDeletesalt likit
XY1
salt likit
ReplyDeletesalt likit
H6R
güngören
ReplyDeletearnavutköy
rize
serdivan
sultangazi
0N5QB