Sesuai judul dari artikel ini Cara Merubah Background Sesuai Kategori Label ,maka kita akan membuat background berbeda dengan kategori label tertentu ,misal kita mempunyai sebuah artikel dengan label tutorial blog dan kita ingin membuat setiap postingan yang berlabel tutorial blog warna background nya Black/hitam ,maka kita bisa tahu bahwa postingan yang background nya berwarna hitam pastilah berlabel tutorial blog .
Semua yang saya jabar kan di atas hanyalah sebuah contoh sobat bisa melakukan trik ini bukan hanya untuk merubah warna background postingan sobat bisa juga memakai trik ini untuk memunculkan iklan pada label tertentu.Saya harap sobat benar benar memperhatikan apa yang akan saya jabar kan seperti di bawah ini .
- Logiin dulu ke blogger.com
- Setelah ada di dasboard silahkan sobat menuju template terus Edit Html jangan lupa download lengkap dulu template
- Centang kotak kecil Expand Widget Templates
- Gunakan Ctrl + F cari kode
- Lalu taruh kode di bawah ini tepat di bawah nya:
- Coba sobat perhatikan kode yang berwarna merah sobat bisa ganti sesuai judul label sobat misal tutorial blog dll, untuk kode yang berwarna hijau sobat bisa beri perintah apa saja ..misal kita akan membuat background postingan yang berlabelkan tutorial blog berwarna hitam maka silahkan sobat tulis seperti ini :
.post-body{background:black;color:white ;...................dst}
maka background akan berubah secara otomatis berwarna hitam dengan text/font berwarna putih jika sobat membaca sebuah artikel dengan label tutorial blog dan akan berubah lagi jika sobat membaca artikel dengan nama label yang lain
- Lalu Save Template
<div class='post-header'> <b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "nama kategori"'>
<style type='text/css'>
Disini sobat bisa kasih perintah apa saja sesuai keinginan sobat
</style>
</b:if>
</b:loop>Demo silahkan sobat lihat pada blog ini ketika sobat baca artikel dengan label tutorial blog warna background postingan berwarna hijau dan warna header berubah juga sedang jika sobat membaca artikel dengan label berbeda maka background postingan berwarna gelap/hitam dan warna headernya juga berubah
NB : apa yang saya jabarkan di atas sudah saya praktekkan pada tempalte percobaan saya dan templte ini dan semuanya berhasil ,mohon maaf jika kurang dimengerti penjelasan nya Maklum Admin belajar tentang kode Css secara otodidak dan bukan lah seseorang yang pandai mengolah kata kata jika ada yang kurang mengerti silahkan bertanya maka akan saya jawab semampu saya (wassalam)
35 komentar
wah jdi tmbh asik'y mas lhat nya kalu sesue dngan tmplte kita.
Kalau tiap label bisa berubah warna terlihat keren ya mas, saya save dulu deh ilmunya, terima kasih mas...
kalo text font sama warna backgroundnya bisa kita rubah sesuai dg keinginan. sendiri juga ya mas
ga harus hitam n putih kan mas..maklum nih udah lama ga utak2 kode.. :)
benar sekali sob kita bisa merubah sesuai dengan keinginan
Silahkan sob
tentu saja mas silah kan di kombinasikan sesuai kenginan jangan terlalu mengikuti tutorial di atas yang penting penempatan kodenya harus benar..
iya mas bener juga postingan anda mas
y orangnya tidur mau di anterin kopi jdi gk jdi DH hehehe
sesuatu yg baru nih kang,saya pelajari dulu nih kang.
makasih infonya.
Selamat pagi admin, wah disini terdapat banyak tutorial dan cara diatas sangat mudah untuk diterapkan pada blog yang kita kelola...
Terima kasih ya....
Silahkan Sob..makasih hadirnya
Hanya sekumpulan koleksi saja sob buat pribadi biar tidak lupa saat di butuhkan dan siapa tahu ada yang bermanfaat buat yang lain..thanks ya ..
pgi mas pas,ni lgi musim dingin aq antarkan kopi D: heheh.. aq ko baru tau mas di atas ada text Frre copy seripts mas ydah aq ambil semuah eheheheh
Wuiihh, keren nih.. kira2 membebani loading blog gak ya? soalnya saya ada masalah dengan berat badan blog. Terlalu lama bula blog saya, suka kesel sendiri :/
tentu tidak lah sob dengan kita menambahkan kode ini kita kan bisa membagi widget widget mana saja yang kan kita tampilkan dan saya kira justru akan mengurangi looding blog...mengenai masalah berat looding blog sobat saya kira masalahnya adalah selain banyak nya script yang di pasang ,gambar juga sangat berpengaruh sob karena yang saya lihat di bagian header sja ada 2 apa lagi di bagian body...he he he
bagi saya ini memang sangat bagu kawan. saya save dulu nih..
tutorialnya sangat bermanfaat
terima kasih sudah berbagi
sayangnya saiia kurang begitu sabar kang klu uda urusan sama yg namanya CSS :( hiks
Belajar Photoshop
Sama sama mas terima kasih juga sudah kasih motifasi
kayaknya keren nih.. ntr coba ah
bagaimana kalau kita bertukar info bos karena saya sangat ingin belajar tentang PS..he he
Silahkan sob ..semoga bermanfaat
mantap ini mas..izin save dulu ya ntar klo ada waktu mau saya coba..trims..
Sangat Berguna NIh gan tolong kunjungan balik
tkj-cyber4rt.blogspot.com====>>Kunjungan Pertama
Mantap gan tutorialnya, cuman ane mau tanya kode yang dimasukin itu misalnya kita mau ganti warna header dan menu blogger berarti kita harus masukin kode CSS sama HTMLnya disitu,mohon bantuannya untuk contohnya mas
masukkan kode css nya saja :misal #header-wrapper{.......dst} kan kita hanya merubah warna background nya saja
disave dulu jawabannya hehehe, lagi nyari kode biar bisa naro iklan disamping related articlenya maskolis
udah ane coba cuman kok warna headline wrapper tetep ga mau berubah mas, trus ane mo nyisipin kode html pake konversi yang ada di blog ini ga bisa gan, ane pake konverter blog laen :D
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Thibbunnabawi"'>
<style type='text/css'>
.headline-wrapper{background: #9AFE2E ;width:960px;height:30px;margin:0}
.headline{line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#fff;overflow:hidden;clear:both;padding:0 10px}
.headline a:hover{color:#eace12;text-decoration:underline}
</style>
</b:if>
</b:loop>
nambahin gan, tadi udah ane coba ganti pake label lain bisa gan, cuman anehnya warna healine wrapper berubah semua ga cuma di label yang dituju
alamat blognya tolong dikirim soalnya saya lihat di profil blognya banyak he he he X@
tetep ngikutin ah :D
Tipsnya akan saya terapkan. Biar kelihatan profesional dikit, hehe :D Salam kenal untuk mas Mahfid. Kunjung balik dan komentar balik ke blog saya ya mas.. http://kang-hilman.blogspot.com/ :)
kalau untuk merubah 1 warna permanen setiap label gimana mas,, mohon pencerahannya..
?
kalo mau merubah lebal yang lainnya gimana cara menambahkan kodenya mas??
orang ini aja copas, mana ngerti kalo ditanya
Posting Komentar
Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>