Membuat Header Berbeda Setiap Postingan

Kembali lagi ke blog trik, setelah membahas beberapa hal mengenai error shoutmix, dan static page di blogspot, juga info mengenai perpanjangan .co.cc gratis, kini saaatnya saya memberikan trik kepada Ada, bagaimana membuat header yang berbeda untuk postingan tertentu. Seperti biasa, agar lebih mudah silahkan lihat contoh dengan klik, Forum: Lesehan Wae. Perhatikan bagian artikel forum tersebut, bagian header berubah dari header bertulisakan Mas Doyok, menjadi Lesehan Wae.


Bagaimana bisa terjadi? Mudah saja, itu memang dua gambar yang berbeda. Dan saya hanya memanggil gambar bertema Lesehan Wae untuk postingan tertentu.

Untuk membuatnya Anda ikuti tutorial berikut ini,
1. Temukan CSS Header Anda
Anda harus bisa menentukan mana yang merupakan kode css untuk header Anda. Kodenya akan mirip seperti ini:
#header-wrapper{
    ..............................
..........................

............................
background: url (alamatgambaranda);
}

Namun kode di atas bukan harga mati, bisa saja Anda menggunakan template yang gambar kepala masuk dalam body seperti template saya. Intinya temukan kode untuk gambar kepala Anda.

2. Aplikasi Header Hanya Untuk Postingan TErtentu
Masukkan kode berikut ini di atas </head>

<b:if cond='data:blog.url == &quot;http://urlpostingananda.com/urlpostingananda.html&quot;'>
<style>
#header-wrapper{
    ..............................
..........................
background: url (alamatgambaranda);
}
</style>
</b:if>


Nah, isi kode berwarna merah pertama dengan alamat postingan Anda yang akan Anda rubah headernya.
Kode merah kedua adalah kode css untuk header Anda. Jadi sekarang, Anda mempunyai dua kode css header,yang pertama untuk umum dan yang baru saja Anda tambahkan hanya bekerja untuk postingan yang Anda tentukan.

Anda bisa melakukannya untuk hal-hal lain seperti sidebar dan bagian postingan Anda. Hanya butuh penyesuaian css saja. Semoga bermanfaat.

Komentar

  1. Nice tips mas. Makasi. Berati klo halamannya banyak, code nya juga banyak ya?

    BalasHapus
    Balasan
    1. sepertinya sih seperti itu, kalo ada 5 model berarti buat 5 script *CMIIW* :)

      Hapus
  2. OK makasih mas doy . . . ini yang sedang aku cari - cari . . .

    BalasHapus
  3. @1989097506370486721.0
    Akhirnya pertamax juga. he..

    BalasHapus
  4. mmh gitu och, baru tau,,
    hx ya mass,,
    tetpa berkaya

    BalasHapus
  5. @6475579720423406392.0
    ya mas, kalau banyak pakailabel saja kan :D

    BalasHapus
  6. @3542278742187555657.0
    enggak dit :D
    hehehe

    BalasHapus
  7. @745895446575620390.0
    sip mas udah ketemu jodoh tinggal lamaran berarti

    BalasHapus
  8. @2659181195790487787.0
    ihsan
    oek semoga bermanfaat utk blog barumu :D

    BalasHapus
  9. @1073170741495992225.0
    Bener juga mas. Makasi ya.

    BalasHapus
  10. gak ada demonya nih...kurang maknyus...wuekkekkekekek

    BalasHapus
  11. mantap mas,,,

    aku coba dulu ah,,
    tp di postingan aku yg mana ya ???

    BalasHapus
  12. wah mantap ternyata di masukkan pada body nya ya ... wkwkwkw baru tau aq mas doy wkwkwk

    BalasHapus
  13. ooo g bisa otomatis ya mas doy@... kalo satu2 gitu bisa menuhin n beratin blog tu sob...

    BalasHapus
  14. Makasih mas infonya...

    Info yang bermanfaat.

    GAGAL PERTAMAX!

    BalasHapus
  15. @3344080518015853026.0
    iya mas
    :D
    sip deh
    semoga bermanfaat ya :D

    BalasHapus
  16. @3817089148002972084.0
    kan sudah ada contohnya

    http://www.masdoyok.co.cc/2010/01/kopi-tjap-cangkir-ngobrol-seputar.html

    BalasHapus
  17. @7153066929346921634.0
    ichan ya terserah klamu
    bagusnya mau dicocokin dengan yg mana :D

    BalasHapus
  18. Wah keren mas doyok... kapan2 tak coba ahh.

    BalasHapus
  19. @1314858230464346278.0
    kalau punyakugitu lex
    buat ngiritload jgua :D
    sekalian hehe

    BalasHapus
  20. @5613518350027291512.0
    kalau ini utk tertentu
    kalau mau banyak pake label mas :D

    BalasHapus
  21. @4063388073176028362.0
    yang penting bacanya kan riz :D
    makasih sudah setia di blog ini

    BalasHapus
  22. @8572936583996714075.0
    sedikit beda mas
    ini mengganti :D
    kalau itu kan keselruhuan kodewidget :D

    ini cssny saja yg dibedakan widgetnya sama :D

    BalasHapus
  23. @6079414624130319331.0
    oke khatam silahkan
    semoga jadi makin cantik blognya

    BalasHapus
  24. wah ilmu lagi nih...terima kasih

    BalasHapus
  25. @aryanto aj
    sama sama
    terima kasih dukungannya mas :D

    BalasHapus
  26. wwoow mantap jua nih perlu di coba nih agaar lebir menarik keliatan tampilan blog saya hehe thx info nya

    BalasHapus
  27. berarti tinggal cari img yg pas bwt tiap postinganya ya mas.. :)

    BalasHapus
  28. @1089670942945095458.0
    oke kang udin
    monggo mas :D

    BalasHapus
  29. @4647471935401512038.0
    iya
    tapi jgn semua post jgua
    karna pastinya akan tambah berat

    kalausayacuma saya gunakan utk forum :D

    misl bisakamu gunakan utk post gallery
    atau contac us kan

    BalasHapus
  30. @ROSMANA
    oke silahkan semoga bermanfaat

    BalasHapus
  31. Ini mas doy URL nya http://mxwan.web.id

    Oia info dan triks baru ki ?? tiap hari maen htm po mas doy
    Gus Ikhwan wae kalo mau ngedit OFFLINE kalo Online takut lupa backup
    Rissing Star ki Mas Doyok is Rissing Star
    Amin
    Sukses terus mas doy

    BalasHapus
  32. salam sahabat
    wah kalo dipikir n saya kaji ulang bisa mempengaruhi loading juga masDoy..siip dech my luv eh ra oleh my best Mas thnxs ya

    BalasHapus
  33. sip kang nanti aja tapi tak coba
    komen dulu

    BalasHapus
  34. @6829889298187313223.0
    gus ikhwan kalau bisa ol YM
    mau saya pasang fotonya di author

    BalasHapus
  35. @1973285366382705069.0
    iya memang dhana :D
    bisa mempengaruhi load :D
    tapi bagi yg penegn ok ok aja

    BalasHapus
  36. @one2
    oke monggo wan semoga iso iso

    BalasHapus
  37. @1914461940801316113.0
    nek ra iso takon aku mbek njenengan

    BalasHapus
  38. mas doy:.. sips..dech... postingan yang aku suka.. besok2 giliranku ya ... nice info n share because useful for us all.

    BalasHapus
  39. @2924975865046033666.0
    oke didik silahkan
    semoga bermanfaat ya

    BalasHapus
  40. Walau udah koment td diatas,

    tp koment lagi ah,,
    hhahahaha

    BalasHapus
  41. @7329337168660299188.0
    maksude apa kuwi
    hahaha
    oke deh ie chan
    saking semangatnya ya

    BalasHapus
  42. @7991218514683156188.0oke semoga bermanfaat saja ya

    BalasHapus
  43. @7991218514683156188.0
    semoga bermanfaat saja chord

    BalasHapus
  44. @8106559343446586100.0
    semoga berguna jitu juga

    BalasHapus
  45. @5641908258653427528.0
    iki contohne YOK http://ben-tools.blogspot.com
    nah cuma suggestion ajah nih yok, kalo bisa jgn pakek yg random2 ato ganti2 deh....kurang good ke mbahnya tuh....trst me trust me....wekekekekkkkk

    BalasHapus
  46. @2290173261420341800.0
    biar yg ini satu aja BEN
    utk forum biar rada beda hehehe

    BalasHapus
  47. wah tutorialny keren mas...

    BalasHapus
  48. Gus Ikhwan siapa lagi tu kang, kok baru ahu sebagai author apa dulu d hiden ya ????
    Cara bikin kotak komentar pada gus ikhwan gimana mas doy, kok ada matematikanya pada kotak komentarnya ???
    Postng triksnya dong ??
    Di form kotak komentar juga ada tulisan terakhir si tukag kommentarnya

    BalasHapus
  49. Untuk header saya sama ratakan saja mas doy, karena saya pernah hack template untuk besar kecil font, ternyata malah pengaruh ke header dan title....

    BalasHapus
  50. @Angga
    untuk wordpreess sudah berbeda lagi :D

    BalasHapus
  51. @315134848085662111.0
    semoga bermanfaat van :D

    BalasHapus
  52. @499440910170581431.0
    mungkin salah kode bbb ? :D
    pengaruhnya gimana?

    BalasHapus
  53. kalo saya ada 5 page mau di begitukan gimana mas? tadi saya udah baca di atas,katanya paki label,maksudnya gmana sih? cara pakai label gmana? wokaokwoakw...maklum udah banyak lupa struktur blogspot.. di bookmark dulu dah ni posting

    BalasHapus
  54. @jopi
    ya kan kalau kamu posting bisa dikasih label
    nah ke lima postingan itu diberi label yang sama

    lalu di kodenya di alamt postingan diganti dengan alamt label
    misal:
    http://www.masdoyok.co.cc/search/label/namalabelmu

    BalasHapus
  55. ini co.cc licensi yaa mas?..keren abizzz

    BalasHapus
  56. @1166838828822436732.0
    licensi gimana mas

    BalasHapus
  57. @4540023099716485907.0
    semoga bermanfaat saja mas

    BalasHapus
  58. ok mas doy.. sangat bermanfaat nih...
    Mas Doy emg ok... selalu menghadirkan hal yg baru.. bravo Mas Doy...

    BalasHapus
  59. Menarik sekali tipsnya mas...
    saya juga baru bikin HEDAER dengan nuansa imlek mas...

    http://universal.hermantan.com
    mas, dikunjungi yah, sekalian kasih komen gimana headernya bagus egk..

    thx sebelumnya mas...

    BalasHapus
  60. @6289615632198562712.0
    sebenernya hal lama mas :D
    cuma dibahs ulnag utk konteks berbeda
    biar lebih jelas

    BalasHapus
  61. @2042949246808948437.0
    up date juga headernya ya mas
    gak cuma beritanya
    sip :D

    BalasHapus
  62. aq dari kemaren pelajari ini masih bingung mas doy.....

    oy ada post baru d blog aq, kalau sempat mampir mas doy

    BalasHapus
  63. trims Mas Doyok atas ilmunya, sangat bermanfaat sekali n membantu niih... smg sukses selalu n tetap semangat

    BalasHapus
  64. @2441734524773821722.0
    semoga saja bermanfaat mas :D

    BalasHapus
  65. @7054807334210500825.0
    oke rizky kalau gak nanti lewat YM saja
    biar enak :D

    BalasHapus
  66. @6028229134315347530.0
    terima kasih sekali mas hartoatas dukungannya :D

    BalasHapus
  67. @6986203511934027702.0
    makasih mas
    semoga bermanfaat

    BalasHapus
  68. mas doyok, tipsnya mantap banget. sangat membantu, terutama bagi kami yang masih pemula. Terima kasih

    Sukses selalu buat anda.

    BalasHapus
  69. @7041676977377833334.0
    alhamdulillah
    semoga bermanfaat ya bungjamil

    BalasHapus
  70. @7463507684091623689.0
    alhamdulillah kang :D

    BalasHapus
  71. asik nih bisa nambah keren nih tampilan blognya ntar, thanks mas ntar bisa dicoba.

    BalasHapus
  72. @tovazone
    oke mas
    semoga bermanfaat ya

    BalasHapus
  73. Kalaau menghilangkan semua widget kayak di forum Lesehan Wae itu gimana caranya kang

    BalasHapus
  74. @8782959810370501308.0
    tak posting nanti malam deh insyaAlloh

    BalasHapus
  75. salam kenal dari saya yang baru coba membuat blog dan masih edit edit template,untuk artikel saya nantinya dan mohon kritik saran di blog saya kang,dan mohon izin mengcopy tutorialnya untuk dapat saya pakai,sekali lagi trimakasih bookgaul

    BalasHapus
  76. cara mendesain header buat postingan tertentu gimana mas???? saya gak ngerti mohon penjelasannya

    BalasHapus
  77. Salam kenal mas.. Saya pendatang baru di blogger, artikelnya banyak memberi mamfaat.. Apakah boleh di copas?. Kalau boleh, terimah kasih dan semoga ilmunya selelu bertambah..

    BalasHapus
  78. artikel na semwa brmanfaat ..tpi msih krank ngerti..hhe
    mksud dari kode Css tu apa mas?
    bagaimana cara kita melihat kode css kita n ada dimana kode itu terletak
    mohon panduannya mas.. boleh kirim ke email saya mas jawabannya di
    mangazic.download@gmail.com

    BalasHapus
  79. Mas di kode ini #Header-Wrapper enggak ada url background header blog ku mas,lantas gimana dooong?cari url dimana mas?Tolong ya dibantu ya?

    BalasHapus

Posting Komentar

Postingan Populer