NEWS
Loading...
  • Posted by : Johanes Djogan 31 Des 2010

    Trik merubah tampilan homepage dan halaman posting
    Sobat bosen dengan tampilan blog sobat?sekedar berbagi ilmu,bagaimana caranya warna background pada home page berbeda dengan tampilan saat membaca posting blog,seperti blog saya.mau tau cara'a gan?Cekidot gan...



    Untuk dapat merubah tampilan blog,cara yang kita gunakan hanya CSS3 dan HTML b:if cond yang sudah saya kasih tau di artikel 5 Kode HTML Untuk Mengatur Tampilan Blog.yang kita lakukan sekarang,hanya merubah css pada tampilan posting,kita tidak perlu menambah kode HTML lagi pada primary CSS/homepage.disini saya hanya akan share trik sederhana untuk mengganti background.

    yang kita akan gunakan adalah kode HTML:

    <b:if cond='data:blog.pageType == &quot;item&quot;'> isi widget </b:if>

    Dan CSS external dengan Style HTML:
    <style type='text/css'> Isi CSS </style>


    TRik pertama: merubah warna background pada Halaman posting.


    Sobat copy paste dulu kode HTML di bawah ini

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>


    isi CSS



    </style>
    </b:if>


    letakan kode diatas kode </head>


    Setelah itu,jangan disimpan dulu,jangan lupa copy paste CSS background sobat.

    Contoh:
    misalkan background pada blog sobat bewarna hitam=#000000; (kode hexadecimal)
    seperti dibawah ini
    <b:skin><![CDATA[/*



    body {
    background:#000000;
    }




    ]]></b:skin>

    tinggal copy paste saja CSS'a menjadi seperti di bawah ini

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>


    body {
    background:#000000;
    }


    </style>
    </b:if>


    background'a kan masih warna hitam,ganti warna backgroundnya agar beda ^^
    misalkan kita ganti ke warna Putih=#ffffff;

    contohnya menjadi seperti dibawah ini

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>


    body {
    background:#ffffff;
    }


    </style>
    </b:if>


    lalu disimpan deh,lihat hasilnya pasti halaman homepage dan halaman posting,warna'a akan berbeda ^^

    untuk trik merubah warna font,posting,navbar,footer,header,caranyapun sama,kita hanya copy css'a saja.
    saya sengaja tidak share karena tiap template,mempunyai nama css yang berbeda tiap templatenya.
    untuk body,sudah umum dan tidak pernah beda dengan template lain,
    sobat bisa berkreasi sendiri,dengan cara copy paste primary css sobat ke css external yang kita coba tadi.sobat harus pintar2 pintar nih ngeditnya ^^

    oia,satu lagi nih..kalau backgroundnya ingin diganti dengan gambar,tambahkan
    " url(url gambar); "

    Contoh:
    body {
    background:#ffffff url(http://urlgambarkamu.jpg);
    background-attachment: fixed;
    }
    background-attachment: fixed; digunakan agar posisi gambar tetap/tidak berubah saat kita scroll halaman ke atas/kebawah.contohnya seperti blog saya


    selamat mencoba,dan jangan lupa komentar kalau ada galat atau masalah,thanks...

    { 36 comments... read them below or Comment }

    1. kahiji ey n_n
      lmyan nih tambah ilmu... heheheh

      BalasHapus
    2. nice info gan ..??? contohnya yang mana gan ??

      BalasHapus
    3. Mantap nih sob....ditunggu kunjungan baliknya ya sob

      BalasHapus
    4. wow! master banget maenin CSS nya :D ane dulu juga sempet ngutak-ngatik waktu SMA, karena dapetnya teknik elektro, jadinya males lagi deh bljr2 programan2 WEB :D
      kpan2 ane coba deh sob, nice share !

      FOLLOW BACK ya :)

      BalasHapus
    5. Emang tampilannya sekarang keren banget, salut buat bagi - bagi ilmunya

      BalasHapus
    6. Oh gitu toh, ga ribet banget ternyata ..

      BalasHapus
    7. mksh ya triknya ya, tar mau nyoba ah....
      :D

      BalasHapus
    8. hi, I'm a newbie, please support me...
      thnks for your tips
      :D

      BalasHapus
    9. mohon bimbingan sobat blog, masih pemula

      BalasHapus
    10. gmana carae buat kotak komentar di blog yg keren bos. thx bget

      BalasHapus
    11. mantap masbro , salam kenal dari pecinta CSS :D , ane udah pake tag cond kaya gitu , coba dicek ya bener apa ga :D

      BalasHapus
    12. Saya Sangat Salut Dengan Johanes...

      Mantap.

      BalasHapus
    13. keren bgt tricknya dari blog ini.. yhank's ya skatrang saya udah agak mengerti CSS.. semoga blog ini maju truss. amin

      BalasHapus
    14. gan.klo ganti halaman awal blog kayak punya agan tu gmn??
      maklum msih newcomers nih gan....
      hehe...
      oia.follback yah gan...

      BalasHapus
    15. haha.. thanks sobat posting ini sangat membantusaya tunggu psoting selanjutnyamampir ke sini juga ya http://chaone-blog.blogspot.com/

      BalasHapus
    16. makasih sob buat artikelnya ,

      visit ranup-selaseh.blogspot.com

      BalasHapus
    17. gan.. saya pengen minta trik bikin hompage kayak blog ini gimana??? email ke angeloflol@gmail.com

      BalasHapus
    18. terima kasih sob, postingannya sangat membantu,, o ia untuk mengatasi double postingan itu gimana sob? mohon bantuannya..

      BalasHapus
    19. Gmana cara membuat daftar login,log out, dan register. tolong dong !!!

      BalasHapus

    "Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

    "Sorry your comment will not be replied, because this blog has been inactive. Thank you"

  • Translate

    Thank you for choosing Blogger Template from Blog Johanes! (*≧∇≦*)

    - Copyright ©DJogzs 2009-2013 - Some Right Reserve. - DJogzs - Powered by Blogger - Designed by Johanes Djogan -