Mendesign Template Sesuai Selera

    Sebelumnya anda harus membuat keempat komponen yang akan dijadikan background. Cara buatnya gimana? Anda harus bisa menggunakan software image editor seperti Photoshop, Corel, Paint dll. Cara pembuatan desainya lebih jelasnya seperti ini:
    1. Buat desain berupa gambar sesuai keinginan
    2. Pada bagian background usahakan bersifat "Tile / Pattern" (kecil dan berulang-ulang).
    3. Untuk Main dibagi lagi menjadi beberapa kolom, boleh 2 kolom, 3 kolom atau terserah deh. Dan biasanya terdiri dari bagian utama (posting) dan sidebar.
    4. Kemudian potong-potong perbagian.
    5. Untuk bagian Header motongnya harus full.
    6. Bagian background, main dan footer motongnya sedikit aja karena bersifat "tile"
    7. Upload potongan-potongan tersebut pada sebuah webhosting atau layanan penyimpanan file lainya. Contohnya Photobucket dll.
    8. Masuk ke blogger dan ke menu "Edit HTML".(biasakan untuk memback up template anda)

    Sekarang kita memasuki ke tahap penyusunan di blogger. gini langkah-langkahnya. 

    • Mengganti background body:
    Cari kode seperti ini:(supaya lebih mudah gunakan ctrl+F)
      body { margin: 0px; padding: 0px; text-align: left; font:$bodyfont; color:$textcolor; background: #323232 url('http://media.photobucket.com/image/komputer/Yeremiyah/komputer-srodek-1.jpg') repeat-x top left; }
      NB :Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.


        • Mengganti background latar posting:
        Cari kode seperti ini :(supaya lebih mudah gunakan ctrl+F)
          #center {background: #ffffff url('http://media.photobucket.com/image/komputer/Yeremiyah/komputer-srodek-1.jpg') repeat-y top center;}
          NB :Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
          • Mengganti background header

          Cari kode seperti ini:(supaya lebih mudah gunakan ctrl+F)
          #header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://media.photobucket.com/image/komputer/Yeremiyah/komputer-srodek-1.jpg') no-repeat top center; }
          NB :Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.
          • Mengganti background footer:

          Cari kode seperti ini:(supaya lebih mudah gunakan ctrl+F)
          #footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') repeat-y top center; }
          NB :Ganti text yang dicetak tebal dengan lokasi gambar background yang kamu buat.



          • Mengatur tinggi blog
          Masih ada beberapa hal yang harus kamu perhatikan. coba cari kode-kode berikut:
          #outer-wrapper { width: 898px; margin: 0px auto 0; text-align: justify; }
          kode width: 898px menunjukkan lebar dari blog kamu, kamu bisa mengubahnya sesuai keinginanmu, tapi harus disesuaikan dengan lebar desain gambar yang kamu buat.


          • Mengatur lebar blog 
          #main { float: left; width: 445px; margin: 5px; padding: 0px 0px 0px 10px; line-height: 1.5em; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; }
          kode width: 445px; adalah lebar daerah main yang berisi posting, kamu bisa merubahnya.


          • Mengatur sidebar kanan dan kiri
          #sidebar { float: right; width: 153px; padding-right: 50px; font-size: 83%; color: $sidebartextcolor; line-height: 1.4em; word-wrap: break-word; overflow: hidden; }
          #ads-wrapper {float: left; width: 195px; padding-left: 10px; word-wrap: break-word; overflow: hidden; }
          kode width: 153px; adalah lebar sidebar bagian kanan. Dan kode width: 195px; adalah lebar sidebar bagian kiri. Terus kode padding-right: 50px; jarak antara tulisan atau isi sidebar sebelah kanan dengan garis batas kanan. Dan kode padding-left: 10px; adalah jarak antara isi sidebar kiri dengan garis batas kiri.
          #header { margin: 0; height:196px; width:898; color: $pagetitlecolor; background: url('http://kendhin.890m.com/template/head.jpg') no-repeat top center; }
          kode height:196px; width:898; adalah ukuran tinggi dan lebar bagian header, kamu bisa menyesuaikannya dengan ukuran header kamu.
          #footer { margin: 0; width: 898px; height:80px; padding: 0px; background: url('http://kendhin.890m.com/template/foot.jpg') no-repeat top center; }
          kode width: 898px; height:80px; adalah ukuran lebar dan tinggi bagian footer.

          • Mengganti Gambar pada Address Bar
          Bagi sobat yang bingung apa maksud dari trik kali ini adalah bagaimana cara kita mengganti gambar/icon pada address bar  ketika kita sedang membuka sebuah blog/ web site seseorang  atau bahkan blog kita sendiri. Jika kita perhatikan jika kita  menggunakan blogger maka pada address bar terlihat simbol blogger seperti ini
          untuk sobat yang tidak puas atau pingin menggati gambar tersebut bisa  kok emang itu tujuan trik kali ini. oke caranya seperti ini:
          1. Jika sobat ingin membuat sendiri gambarnya maka ukuran gambar haruslah 24x42 pixel sampai 32x32 pixel. setelah itu silahkan di upload gambar tersebut dan catat  alamatnya, bagi sobat yang belum tahu mau upload dimana silahkan saja  coba Web Hosting berikut.
          000webhost
          Photobucket
          Flickr
          2. Log in http://blogger.com/ , Rancangan, Edit HTML, cari kode

          </head>

          3. Pastekan kode berikut sebelum kode no 2

          <link href='http://Lokasi gambar ' rel='SHORTCUT ICON'/>

          NB: Ganti tulisan yang berwarna merah dengan url gambar anda.
          12. Nah kalo udah selesai coba di preview template kamu, sudah sesuai kah? atau hancur?
          13. Kalo sudah di Save.
          14. Lihat hasilnya.


          0 komentar :

          Posting Komentar

          Langganan: Posting Komentar ( Atom )