Cara membuat backround berbeda pada setiap halaman blog


Bikin background yang berbeda untuk setiap halaman blog? kenapa tidak. Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya.

 Setelah sekian lama ngilikin template minima klasik, plus belajar apa itu css background, akhirnya ide untuk membuat background berbeda di setiap halaman blog bisa aku terapkan. Mumpung lagi hangat nih di kepala, mending aku posting aja dari pada keburu hilang, ya ngga...

Agak njelimet sih bro, tapi pelan-pelan pasti bisa. Baik, sebelum anda mulai ngilikin template, ada baiknya sobat membaca postingan tentang cara mengganti background blog di sini atau di sini.

Persiapan :

1. Buat dulu sebuah blog baru
2. isi dengan sembarang posting
3. buatkan label untuk postingan tadi, misalnya, blog, blogger hack, template, article dan sebagainya.
4. Lakukan trik trik  menampilkan semua judul posting atau menampilkan hanya judul posting
5. Buat juga Readmore nya sekalian.
6. Posting tulisanmu.
7. Pasang widget label di sidebar blogmu
6. Bila semua udah selesai, sekarang kamu bisa melangkah ke tahap berikutnya

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://syahenimkojek.googlepages.com/slank_logo2.jpg"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

2. Gantilah url gambar/image yang berwarna merah dengan url gambarmu.

3. Kode center no-repeat; (Yang berwarna orange) bisa kamu ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blogmua, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh kamu hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh. Contahnya seperti gambar di bawah ini ;



5. Kalau sudah selesai ngeditnya , balik lagi ke blogmu. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan kita tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, kita sudah bisa melihat perubahan background blog kita, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog kita. Di halaman ini kita menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("
<style type="text/css">
body {background-image: url("http://s212.photobucket.com/albums/cc144/coyote6969/th_devil3.gif"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center">
Visit InfoServe for <a href="http://sangau.blogspot.com/" target="_blank">Blog Nebiak Sangau</a>.</div>

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti url gambar (kode yang berwarna merah ) dengan url gambarmu

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambarmu itu nantinya.

e. Kode no-repeat; bloeh kamu hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau aku uraikan kembali di sini. nyok ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah mau dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.


<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- 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:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>


7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... monggo mas ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya ku uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.


<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == &quot;item&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:if>
</b:includable>
</b:widget>


4. Save dan view blog untuk melihat hasilnya.


Sedikit tambahan :

A. Membuat blog baru

Ini maksudnya supaya kita tidak kelabakan kalau terjadi hal-hal yang tidak di inginkan yang diakibatkan oleh eror atau hal-hal lain yang tak terduga

B. Pemilihan Background

Backround yang di pilih sebaiknya jangan yang terlalu besar, ini untuk menghindari lamanya proses loading page. Kalau backdround dasarnya hitam, maksudku background gambar yang kita pilih dasarnya hitam, maka usahakan kedua backround yang lain juga bernuansa hitam. Agar kita tidak kebingungan mengatur huruf postingan kita nantinya. Begitu pula misalnya kalau kita memilih memakai gambar yang bernuansa putih dan sebagainya. Lebih sip lagi bagi yang udah jago mengolah gambar dengan fhotoshop. ini sangat membantu. Namun kalo kebelet pengen mencoba, sobat boleh minta bantuan abah google untuk berburu gambar. ketikkan aja kata kunci background atau free wallpaper, lalu klik kanan pada gambar dan pilih open link a new tab. Setelah tab baru terbuka, klik &quot;lihat ukuran gambar dalm ukuran sebenarnya. Tuggu hingga proses loading page selesai. Klik kanan pada gambar yang udah terbuka penuh lalu pilih copy image location. Pastekan deh lokasi atau url gambar tadi ke kode css bckroun yang kita edit.

C. Edit dengan worpad atau documen txt.

Ini berguna untuk menghindari kesalahan edit atau kesalahan letak kode tanpa mengganggu template blog kita. Plus hasil editan kita tadi bisa disimpan untuk dipergunakan nanti bila diperlukan.

D. Langkah-langkah pemasangan background.

Urutan langkah pemasangan dan pembuatan backgroun di atas ngga mutlak harus dimulai dari Memasang background utama kemudian background halaman depan lalu backgroun halaman selanjutnya. Sobat boleh langsung membalik langkah tersbut atu mencoba memanfaatka css backgrund seperti pada pemasangan untuk background halaman depan. Ini malah lebih asik. Sobat bisa mengati-ganti gambar dengan mengganti url gambarnya langsung seperti mengedit widget. Pada minima klasik, kalo kita sedang login khan ada gambar palu dengan obeng tuch. nah sobat tinggal klik aja gambar tersebut untuk mengedit kode di dalamnya. Asik kan, ganti-ganti deh sampe ketemu dengan gambar yang pas sesuai selera sobat.

E. Trik mengatur penampilan background (membuat blog lebih dinamis)

Trik ini juga sangat berguna bagi kita untuk memilah dan memilih mana widget yang harus kita tampilkan di halaman depan, mana yang boleh kita taroh di halaman selanjutnya. Ini bertujuan mengoptimalkan blog kita, biar loading page ngga terlalu berta tentunya. Trik ini ku dapat dari kang jaloe dan kuposting lagi dengan seizin beliau. Terimakasih boss ...

F. Trik menampilkan semua judul posting.

Nah trik ini ikut berperan penting dimana dengan trik ini blog kita seakan akan punya tiga halaman berbeda. Coba anda klik salah satu kategori pada label atau klik "show all post" di bawah deretan labal, maka judul posting kita akan tampil tanpa menyertakan isinya, nah backround yang akan muncul adalah backround yang kita pasang pertama kali. Tanpa kita sadari kita udah bikin Daftar Isi Blog. Asik khan, sambil nyelam minum air .... keselek ....

G. Permohonan Maaf

Berhubung bikin postingnya teburu-buru, jadi harap dimaklumi kalo penjelasannya uadi bertele-tele dan tulisannya banyak yang kurang huruf atau terbolak balik. Kritik dan sarannya kojek tunggu di ruang komen demi kemajuan kojek dalam bikin posting.

H. Ucapan terima kasih

Kojek mau ngucapin terimakasih sama Kang Jaloe yang udah ngasi izin untuk Kojek mencatut script-script di blognya.

Juga kepada rekan-rekan yang selalu ngasih suport buat Kojek. Tampa kalian Kojek bukan siapa-siapa.

Salam bloggers ...

Wassalam, Kojek

kembali ke atas


26 comments:

  1. wwwah jejnya asik juga nih..
    thx tutorialnya :D

    ReplyDelete
  2. tutorialnya mantap jek....
    but bagusnya lo artikelkan juga tentang background yang tampil secara slide show kayak di blog kamu ini.. keren abissss....

    ReplyDelete
  3. @ Ifoel

    Biasa aja foel, cuma akal-akalan doank. Pertama kali page di loading, maka yang css background yang akan di load terlebih dahulu adalah css background yg kita pasang langsung di struktur html template kita. setelah selesai loadnya, baru dech css backround yg kita pasang di sidebar bakal muncul.

    Experiment aja foel kayak isi posting ini, kalo ada kesulitan email aja he he he

    makasih commentnya ...

    ReplyDelete
  4. wah asyik nich infonya bro :-)

    ReplyDelete
  5. Keren nih blognya...
    salam kenal ya.
    hehehe...
    btw ni blog "follow" gak nich..
    numpang link nih
    visit: tutorial blogging

    ReplyDelete
  6. Assalamu alaikum mas,wahh infonya bermanfaat banget mas, salam kenal ya
    by http://bendeddy.wordpress.com
    nb:mas aku ingin bertukar link ama mas??

    ReplyDelete
  7. Assalamu 'alaikum wr wb

    Jazzakumullohu khoiron katsiro atas informasi tentang pembuatan blog nya.Sangat bermanfaat sekali bagi bloger pemula termasuk saya.TOLONG KEAHLIANNYA disebarkan ke para pemula sehingga bisa meningkat kualitas blognya.Mohon bimbingannya karena saya baru latihan membuat blog

    Wassalamu 'alaikum wr wb

    wadiyo
    bp.wadiyo@gmail.com
    http://dakwah.blogdetik.com/

    ReplyDelete
  8. Kemaren males banget nyari bginian (muter-muter dulu di paman google C'..), tapi akhirnya dapet juga tanpa disengaja...

    Thank berat Cuiy...

    ReplyDelete
  9. Dicoba ya kodenya.. thanks sudah buat tulisan ini.. keep blogging

    ReplyDelete
  10. Perlu di coba nih lam kenal bos thk info nya bagus

    ReplyDelete
  11. makasih...jd masukan buat pemula seperti saya

    ReplyDelete
  12. info yang bermanfaat
    terima kasih

    ReplyDelete
  13. makasih...jd masukan buat pemula seperti saya

    ReplyDelete
  14. Perlu di coba nih lam kenal bos thk info nya bagus

    ReplyDelete
  15. Konten menarik dan bagus meski sedikit ruwet dan jlimet, boleh dicobain dulu... ok?... kunjungi aku di http://s-surya62.blogspot.com/

    ReplyDelete
  16. @info toko surya62 ; iya sih sob, sampai ana yang nulis aja jadi bungung mo ngejelasinnye... hehehehehehehe... ntar ana siapkan posting yang lebih pendek, yg semoga mudah dimengerti

    ReplyDelete
  17. Sip dah infonya........? Hahay Visit back

    ReplyDelete
  18. gan kalau buat yang seperti di bawah ini (Blogging-Lepas-Selebihnya) caranya gmn? apa itu lewat laebl gan? pls gan posting untuk buat tutorial seperti itu ya.
    saya tunggu postingannya gan.
    makasih banyak gan.

    ReplyDelete
  19. gan maksud saya agar label bisa di pilah2 menjadi 3 kategori. dan isi label dari masing2 kategori tsb berada di kotak yg berbeda sesuai dengan judul kategorinya.
    tolong ya gan posting tentang ini.
    sekali lagi makasih banyak gan

    ReplyDelete
  20. @ saifurrofieg : Tul gan,lewat kategori.nanti kita pilih yg mana yg akan kita tampilkan...

    ReplyDelete
  21. thanks gan infonya..... visit blog ane juga http://rahmatdi99.blogspot.com

    ReplyDelete
  22. kunjungan perdana, salam kenal

    ReplyDelete
  23. Jujur aja Setelah saya browsing di mana man, baru ktm blo mas ini..tak kirain blog ini sesuai dengan yang aq ingin kan ternyata setelah aq pelajari dan aq terapkan ..jauh dari harapan q...BLOG INI BIASA SAJA ..JUJUR SAYA KATAKAN SEPERTI ITU..KL MAU MAU YANG LEBIH PROFESIONAL LAGI ...GAN BOLEH LIHAT..PADA BLOG INI...SAYA INGINKAN YG SEPERTI INI...www.Urang-kurai.blogspot.com.....Silakan kunjungi aja kl gag percaya...SAYA BUKAN PROMOSI TP INI FAKTA BROOO....maaf ya brader...aq gag ada maksud menghina..buat masukan km aja.........www.Urang-kurai.blogspot.com

    ReplyDelete
    Replies
    1. Jujur aja Setelah saya browsing di mana man, baru ktm blo mas ini..tak kirain blog ini sesuai dengan yang aq ingin kan ternyata setelah aq pelajari dan aq terapkan ..jauh dari harapan q...BLOG INI BIASA SAJA ..JUJUR SAYA KATAKAN SEPERTI ITU..KL MAU MAU YANG LEBIH PROFESIONAL LAGI ...GAN BOLEH LIHAT..PADA BLOG INI...SAYA INGINKAN YG SEPERTI INI...www.Urang-kurai.blogspot.com.....Silakan kunjungi aja kl gag percaya...SAYA BUKAN PROMOSI TP INI FAKTA BROOO....maaf ya brader...aq gag ada maksud menghina..buat masukan km aja.........www.Urang-kurai.blogspot.com

      Delete

Makasih udah mampir dan kasih komentar ....