Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Mengganti atau Merubah Gambar Header Blog: Tutorial Desain BloGGeR

Serius menekuni profesi blogger atau dengan istilah lain serius ngeblog memang memunculkan banyak tantangan baru. Bukan hanya waktu yang harus banyak diluangkan untuk membuat posting saja, tetapi upaya untuk membuat sebuah blog yang lebih mempunyai citra diri atau identitas diri akhirnya jadi tantangan yang lebih besar lagi. Rasa tak puas akan desain asli bawaan blogger sebenarnya wujud dari semangat luar biasa yang menunjukkan keseriusan seorang blogger untuk menekuni aktifitas ngeblog. Sebuah vitalitas yang harus terus dipompa supaya nggak mudah kempes ditelan kerikil keputusasaan atau kejenuhan.

Memanfaatkan desain blog gratis yang banyak ditawarkan memang menjadi sebuah solusi untuk memperlihatkan keberbedaan dari desain asli blogger. Tetapi cara inipun akhirnya tak juga memberi kepuasan dan kebaggaan yang hakiki. Kalian tak perlu menyesali kejadian seperti ini. Semua orang waras pastilah ingin mempunyai jati diri. Sesuatu yang tumbuh dari dasar hati. Coba... Apa bangganya kalau sampeyan bisa ngetop hanya karena misalnya wajah sampeyan di operasi plastik hingga mirip Thukul? atau mungkin sampeyan yang wanita jadi terkenal karena melakukan operasi plastik supaya lebih mirip Mpok Atik?

Tantangan bukan harus dijauhi atau dihindari. Hadapilah tantangan itu supaya muncul sebuah solusi yang membuat sampeyan tambah ilmu dan keyakinan diri. Tak ada satupun di dunia ini yang nggak bisa diatasi atau dipelajari. Hanya butuh satu kunci untuk melakukannya : Hadapi segala hal dalam hidup dengan penuh semangat, keberanian, kecerdikan, ketekunan dan jangan pernah menyerah.

Untuk melakukan perubahan desain blog hanya dibutuhkan keberanian untuk mengothak athik template, sedikit mempelajari kode html (terutama css) dan teknik-teknik sederhana mengolah gambar. Di blog ini sudah ada beberapa materi posting yang berkaitan dengan semua hal di atas, silahkan sampeyan buka dan seandainya ada yang perlu untuk diulas lebih dalam bisa disampaikan lewat kolom komentar. Moga-moga saja apa yang masih jadi ganjalan bisa kita pelajari bersama.

Cara Merubah gambar Header Blog :

Untuk mempelajari ini, kita akan menggunakan template TicTac Blue bawaan blogger :
  1. Login ke Blogger (login to Blogger)
  2. Dasbor (Dasboard)
  3. Rancangan (Design)
  4. KLIK Edit HTML
  5. Amankan Template (Bacup Template) :
    Mengamankan template dimaksudkan untuk memudahkan mengembalikan template ke keadaan semula apabila perubahan yang dilakukan tidak sesuai dengan rencana atau harapan yang diinginkan. Cara mengamankan template bisa sampeyan buka di sini.
  6. Header : Cari KODE syntax #header
    Gunakan Ctrl + F supaya lebih mudah saat mencari KODE. Kalau belum tahu bisa lihat caranya dengan KLIK di sini.
    Bentuk KODE lengkap syntax #header adalah seperti di bawah ini:
    #header-wrapper {
    margin: 0;
    padding: 0;
    font: $pagetitlefont;
    background: #e0e0e0 url(http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif) no-repeat $startSide top;
    }
    • URL gambar background header :
      http://www.blogblog.com/tictac_blue/top_div_blue_$startSide.gif
    • Karena KODE css tersebut masih memanfaatkan fungsi Variable Definitions, ubahlah $startSide menjadi left, sehingga menjadi URL yang sebenarnya :
      http://www.blogblog.com/tictac_blue/top_div_blue_left.gif
  7. Properties : buka URL tersebut di address bar untuk melihat bentuk gambar background.
    Lihat ukuran gambar background header dengan Letakkan cursor pada gambar yang telah dibuka, KLIK kanan mouse kemudian buka propertiesnya. Ukuran gambar akan kita ketahui : 847px (width) x 240px (height)
    Gambar background header :

    KLIK untuk memperbesar gambar!
  8. Buat Gambar : Karena ukuran gambar sudah diketahui dengan jelas, maka untuk merubahnya sampeyan harus membuat gambar baru dengan ukuran seperti gambar background header di atas.
      Cara buat gambar :
    • Buat gambar sendiri menggunakan software.
    • Buat gambar menggunakan layanan online gratis (Online Photo/Image Editor). Bila sampeyan ingin menggunakan cara ke-2 ini, silahkan kalian bisa berkunjung ke :
      - http://www.pixlr.com/editor/,
      - http://www.online-image-editor.com/ , atau
      - http://www.imageeditor.net/.
  9. Upload : Upload di file hosting apabila gambar sudah selesai dibuat. Copy paste URL-nya dan gunakan untuk mengganti URL yang ada di syntag #header.
  10. Save : KLIK Simpan Template (Save Template).
  11. Lihat Blog : Buka Blog dan lihat hasil perubahan yang sudah dilakukan.

Catatan/Keterangan :

- Panduan dan tutoroal ini diperuntukkan bagi yang menggunakan Template Tata Letak (Layout Template).
- Usahakan membuat gambar dengan beban minimal sehingga tidak terlalu membebani loading blog.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:




Update » Rebo LEGI, Maret, 28, 2012

» Happy Blogging - gubhugreyot «

30 komentar:

  1. kerrenn.
    gan cra bkin vsitor yg bsa bca komputer pemakai donk..
    thks y...

    BalasHapus
  2. http://www.asammaniscinta.co.cc

    BalasHapus
  3. iya keren banget gan blog nya

    BalasHapus
  4. gan berapa hari menata blog nya cb bagi ilmunya gan>>>>

    BalasHapus
  5. salam
    saya baru mengenal blog, belajar secara otodidak dan melelui blog beri kepuasan tersendiri bagi saya. bagi saya blog merupakan salah satu cara kita berbagi pengetahuan, dan beragam hal bisa kita tuliskan dan saya sangat menyukai tulisan anda serta info yg saya tidak tahu menjadi tahu, terimakasih mas. salam kenal dari saya.

    BalasHapus
  6. cuma satu kata KEREN....tapi saya masih bingung nih ma'lum gaptek. sukses selalu ya....

    BalasHapus
  7. ga berhasil OM GB.
    ngomong2 berat bgt mw masuk linknya
    share bwt smuanya
    http://www.blognyafazri.co.cc/2011/04/tes-pengukuran-web-atau-blog.html

    BalasHapus
  8. thx gan visitback http://www.musicandnews.co.cc/

    BalasHapus
  9. nice blog,,,keren abiz,,izin sedot ilmunya gan :)

    BalasHapus
  10. alhamdulillah sukses gan....

    BalasHapus
  11. thanks yah...!!! Bermanfaat banget!!!!, sukses terus !!!!

    BalasHapus
  12. sipz..
    thank's 4 the info na..
    kpn2 maen k blog q iaa,
    http://lets-share-with-me.blogspot.com
    trus kasih masukan
    heeee..

    BalasHapus
  13. misi gan,bisa dipandu pake gambar g gan cara mengganti gambar header blog ntu...
    bingung nie,dari td nyari Tata Letak (layout ) d step 3 g ktemu temu..
    tolong d bantu y gan..

    BalasHapus
  14. saya baru mengenal blog, dan saya tidak tau membuat tampilan blog saya agar yang terlihat disitu cuma judul-judulnya saja buakn isinya. misalkan saya bikin halaman statis tutorial ,lalu ketika di klik muncul isi tutorial, itu gimana sii caranya?? tolong donkk

    BalasHapus
  15. kak, saya baru mengenal blog, dan saya mau minta bantuannya donk buat mendesain blog saya agar lebih rapi dan indah. gimana si cara mengisi halaman statis, misalnya saya punya bagian tutorial, saya pengennya ketika bagian itu di klik muncul tutorial sbg isi.

    BalasHapus
  16. thanks atas irformasinya yang bermanfaat dan bermutu sekali, salam kenal

    BalasHapus
  17. terima kasih atas infonya yang sangat bermanfaat sekali, visit me back

    BalasHapus
  18. tQ agan atas infonya, udah berhasil ak terapin tuh di templatQ, tQ tQ tQ, , ,
    visit me too yak..
    NB: blognya KEREN!!!

    BalasHapus
  19. Ok makasih infonya gan kunjungi blog ku ya..

    BalasHapus
  20. postingan yang bagus tentang mengganti gambar header blog

    BalasHapus
  21. oke gan, langsung praktek nih...

    BalasHapus
  22. kalo diganti sama iklan gimana?

    BalasHapus
  23. terimakasih sob buat tutorialnya, sangat membantu..
    http://obattpenyakit.com/obat-ambeien-herbal-terbaik/

    BalasHapus

 
GR | Edited by | gubhug reyot