Senin, Juli 11, 2011

Pasang Banner di Header Blog

Beberapa hari yang lalu, sempat ada salah seorang sobat meninggalkan pesan Offline pada YM milik saya yang isinya kira-kira seperti ini :

"Bagaimana caranya menyimpan banner pada header blog"

Sebuah keinginan yang saya anggap wajar bagi seorang pemilik blog, karena sudah barang tentu merupakan suatu kebahagiaan tersendiri apabila banner yang sangat kita sukai dapat di tempatkan pada blog kebanggan kita. Jika ada pertanyaan lain "apakah kita bisa mengganti atau menambahkan banner sendiri kedalam blog?" jawabannya adalah bisa, akan tetapi tentunya kita harus sedikit bercape ria mengotak-atik kode template.

Lagi-lagi karena template terbagi dua yaitu template klasik dan template baru, maka saya akan membagi dua bahasan tentang bagaimana caranya menambahkan atau mengganti banner yang ada di header.

Sebelum menginjak kepada proses editting template, langkah awal tentunya sobat harus mempunyai banner yang akan di pakai. Untuk membuat sebuah banner, sobat bisa menggunakan berbagai program desain grafis yang sobat kuasai, apakah itu photoshop, coreldraw, ataupun program-program yang lainnya yang sejenis yang penting judulnya adalah program yang bisa membuat banner.

Karena template bentuknya ratusan atau bahkan mungkin ribuan, tentunya tulisan ini tidak akan bisa mewakili untuk pemakaian template, akan tetapi mungkin akan sedikit memberi gambaran bagaimana cara menambahkan atau merubah banner yang ada di header. Sebagai proyek percontohan (kaya kerjaan saja ya pake proyek segala), saya akan mengambil contoh template Minima yang di desain oleh Douglas Bowman, dan template ini merupakan template asli blogger.

Untuk Template Klasik

Seperti yang saya sebutkan di awal bahwa langkah pertama yang dilakukan adalah membuat banner, gambar banner terserah kepada sobat, mau gambar pemandangan, laut, atau photo sobat sendiri juga boleh. Langkah kedua adalah meng upload banner tersebut, bisa di upload ke blogger sendiri atau ke hosting lain. Untuk cara upload gambar sudah saya terangkan di sini dan di sini. Sebagai contoh, saya sudah upload banner di www.photbucket.com dan mempunyai alamat banner seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif

dan gambar bannernya seperti ini ( gambarnya dalam skala kecil):





Untuk cara penempatannya silahkan ikuti langkah-langkah berikut :


  1. Sign in di blogger


  2. Klik menu Template


  3. Klim menu Edit HTML


  4. Copy seluruh kode HTML yang ada lalu paste pada notepad kemudian save, ini sebagai backup data apabila kita melakukan kesalahan dalam proses edtitting template


  5. Sisipkan kode berikut pada style sheet css sobat. Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan


  6. /* Header ----------------------------------------------- */
    @media all {
    #header {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif) no-repeat top center;
    }
    }


  7. Jika sobat ingin menghapus garis yang berada di tepi banner, sobat harus menghapus kode berikut :


  8. #blog-title {
    margin:5px 5px 0;
    padding:20px 20px .25em;
    border:1px solid #eee; <-- hapus (delete)
    border-width:1px 1px 0; <-- hapus (delete)
    font-size:200%;
    line-height:1.2em;
    font-weight:normal;
    color:#666;
    text-transform:uppercase;
    letter-spacing:.2em;
    }


    #description {
    margin:0 5px 5px;
    padding:0 20px 20px;
    border:1px solid #eee; <-- hapus (delete)
    border-width:0 1px 1px; <-- hapus (delete)
    max-width:700px;
    font:78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
    text-transform:uppercase;
    letter-spacing:.2em;
    color:#999;
    }

  9. Klik tombol Pratinjau untuk melihat perubahan


  10. Jika sudah OK, klik tombol Simpan Perubahan Template


  11. Selesai.



Untuk template baru

Bagi sobat pengguna template baru, bisa menggunakan dua cara.

Cara pertama :

  1. Sign in di blogger


  2. Klik menu Layout


  3. Klik menu Edit HTML


  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


  5. Klik kotak kecil di samping tulisan Expand Template Widget


  6. Tunggu beberapa saat sampai proses selesai



  7. Tambahkan kode berikut pada style sheet css sobat.Yang warna hitam adalah kode asli dan yang merah adalah kode yang harus di tambahkan


  8. /* Header -----------------------------------------------
    */

    #header-wrapper {
    width:660px;
    margin:0 auto 10px;
    border:1px solid #ccc;
    background:url(http://i162.photobucket.com/albums/t253/rohman24/banner_8.gif)no-repeat top center;
    }
    }

  9. Klik tombol Pratinjau untuk melihat perubahan yang ada


  10. Bila sudah OK, klik tombol SIMPAN TEMPLATE


  11. Selesai.


Langkahnya diatas sama dengan yang di template klasik.


Cara kedua :

  1. Sign in di blogger


  2. Klik menu Layout


  3. Klik menu Edit HTML


  4. Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data


  5. Klik kotak kecil di samping tulisan Expand Template Widget


  6. Tunggu beberapa saat sampai proses selesai



  7. cari kode berikut pada template sobat :




  8. pada kode maxwidgets='1'. Rubah angka satu menjadi angka 2, sehingga kodenya menjadi seperti ini :



  9. Klik tombol SIMPAN TEMPLATE


Nah itu langkah pertama, langkah selanjutnya adalah :

  1. Klik menu Elemen Halaman


  2. KLik tulisan Edit yang ada pada elemen Header


  3. Tunggu beberapa saat


  4. Pilih radio button yang ada di samping tulisan dari komputer Anda


  5. Klik tombol Browse...


  6. Pilih banner yang telah di buat yang ada pada komputer sobat


  7. Tunggu beberapa saat sampai proses selesai.


  8. Gambar banner sobat akan di tampilkan


  9. Klik tombol SIMPAN PERUBAHAN


  10. Selesai.


Nah silahkan sobat lihat hasilnya!

jika sobat merasa banner tersebut, maka sobat bisa menggantinya lagi, ulangi saja langkah-langkah di atas.

Ok sobat, mungkin pembahasan tentang cara mengganti banner sudah selesai, untuk melihat contoh blog yang sudah saya tambahkan banner silahkan klik di sini. Pembahasan diatas adalah untuk menambahkan hanya satu banner saja, apabila sobat tertarik membuat banner yang bisa berubah-ubah, silahkan baca di sini. Untuk melihat contohnya silahkan klik di sini

Selamat mencoba sobat !

1 komentar:

Bacaan Aneh Unik Menarik

makasih infonya bang.. sangat membantu. langsung ane coba ya..

Posting Komentar

Jangan lupa kasih komennya : }

Posting Lebih Baru Posting Lama Beranda
  1. Panduan membuat Blog
  2. Cara setting blog di blogger
  3. Cara Custom Domain di Blogger / blogspot
  4. Cara Mengganti Template di blogspot
  5. Cara memposting artikel
  6. buat Read more pada template klasik
  7. Cara membuat Text Area
  8. Cara membuat menu dropDown
  9. cara Upload foto
  10. Cara membuat Link(1)
  11. Cara membuat Link(2)
  12. Cara membuat marquee (text berjalan)
  13. Cara membuat efek Refresh
  14. Kode HTML tampil pada postingan
  15. Masalah posting artikel
  16. Simbol Yahoo! Emoticons
  17. Simbol Blogger Emoticons
  18. Cara Pasang jam
  19. Cara membuat banner animasi
  20. Cara membuat buku tamu
  21. HTML Tutorial
  22. Free Download
  23. Foto animasi
  24. Cara pasang Statistik & Tracker
  25. Perlunya IE dan FireFox
  26. Cara pasang musik
  27. Logo & Button
  28. Membuat Menu D Tree (menu mirip pada windows explorer)
  29. HTML Tutorial(2)
  30. Membuat Read more pada template baru
  31. User Online status
  32. Cara membuat blogroll Alternatif
  33. Cara pasang gambar
  34. Cara membuat Icon YM
  35. cara pasang Video
  36. Daftar Mybloglog
  37. Membuat Navigasi dengan CSS
  38. Template baru VS template Klasik
  39. Membuat Penggalan Artikel
  40. Membuat Link Untuk Download
  41. Menu Dropdown dengan JavaScript
  42. Menu Dropdown dengan JavaScript (2)
  43. Cara Membuat Favicon
  44. Pasang Recent Comments
  45. Text Berjalan di Bar menu
  46. Rotating banner
  47. Cara membuat kategori (label)
  48. Read more versi baru
  49. Pasang Link di New Blogger Template
  50. Cara Pasang Feed di Blog
  51. Pasang Banner di Header Blog
  52. Membuat Banner Bertaburan
  53. Tips Menghilangkan Border Image
  54. Cara membuat Navigasi Dengan Css (2)
  55. Mengatur Perataan Posting Artikel
  56. Tips Mengganti Background Blog
  57. Pasang Image pada judul Artikel
  58. Membuat link satu halaman
  59. Photo profile berbingkai
  60. Photo profile berbingkai
  61. Gambar berbingkai
  62. Image dalam kode marquee
  63. Pasang kode tuker link
  64. Cara daftar search engine
  65. Cepat terindeks di google
  66. Pasang Kalender
  67. Hilangkan garis bawah Link
  68. Ubah Warna Link
  69. Pelacak IP Address
  70. Pasang Jadwal Sholat
  71. Mengubah lebar kolom template
  72. Daftar Google Sitemap
  73. Daftar Feedburner
  74. Pasang Snaps Shots
  75. membuat navbar
  76. pasang label cloud
  77. Membuat tulisan bergaya koran
  78. horizontal dropdown menu
  79. membuat marquee text dalam gambar
  80. Marquee dengan Javascript
  81. Siapa yang pasang link ke blog kita
  82. Kotak komentar dengan haloscan
  83. Cara membuat daftar isi blog
  84. Cara menghilangkan Subcribe to
  85. Tips menambah kolom pada template baru
  86. Setting Widget Mybloglog
  87. membuat kursor animasi
  88. Download Mini Icon
  89. Menyisipkan Mini icon pada label
  90. Lebih jauh mengenai Read more
  91. Cara menghilangkan navbar Blogger
  92. Cara membuat frame iklan
  93. Cara mengganti warna sidebar pada template minima
  94. menyisipkan Icon pada View Profile
  95. Baca feed melalui Google Reader
  96. Cara Upload data ke Google Page Creator
  97. Cara membuat ONLINE BOOKMARK
  98. mengenal perintah Iframe
  99. Cara menampilakan karakter khusus
  100. tutorial software HTML Color V.1.4
  101. Cara pasang search engine di blog
  102. Membuat sidebar ada di kiri dan kanan
  103. Tutorial software scott box shot maker
  104. Menambah emoticons di shoutbox
  105. Tips membuat multi kolom
  106. Cara membuat tabel di blog
  107. Horizontal tab menu j
  108. Horiontal tab menu 10
  109. POp up generator
  110. Backup blog secara Online
  111. Atasi error widget harus unik
  112. Backup data dalam widget
  113. Pasang fasilitas print
  114. Trik mudah membuat Read more
  115. Pasang google talk di blog
  116. Pasang feed dalam kode marquee
  117. Pasang yahoo messenger (2)
  118. Pasang google talk di blog (2)
  119. Hilangkan angka dalam label
  120. Tips Search Engine Optimization (SEO)
  121. Pasang Game di blog
  122. Free CSS menu tabs 6
  123. Setor muka via gravatar
  124. membuat gambar thumbnail
  125. Read more sejajar dengan posting
  126. Pasang tombol digg
  127. Drop down menu sama lebar
  128. Drop down menu dengan CSS
  129. membuat daftar isi (2)
  130. Pasang widget post terbaru dan komentar terbaru
  131. pasang yahoo emoticon (2)
  132. install assteg emoticon ke post editor
  133. membuat background posting berbeda-beda
  134. Pasang iklan google adsense di bawah posting
  135. Pasang iklan kliksaya.com di bawah read more
  136. cara membagi dua kolom header
  137. Install Emoticon More-smilies Cosa aranda ke Editor Posting
  138. Buat Tulisan bergaya web 2.0 secara Online
  139. Ziddu - free file hosting
  140. Tutorial navigasi : Dynamic-FX Slide-In menu
  141. Free Logo Maker
  142. Cara Membuat Favicon (2)
  143. Atasi error copy paste kode wordpress
  144. fitur-fitur baru dari Blogger.com
  145. Setting komentar di bawah posting
  146. Kotak Komentar di bawah Posting
  147. membuat efek Photo Blur
  148. Mengubah Lebar Arsip Dropdown
  149. Cara mengcopy gambar di layar monitor
  150. menyimpan widget di bawah header
  151. Cara membuat elemen Persis di bawah header
  152. Mengatur Tampilan Judul Sidebar
  153. Google Docs : pasang data excel di blog
  154. Mengatur tampilan judul posting
  155. Widget baru mybloglog
  156. fitur baru blogger
  157. Membuat warna link berkedip
  158. Cara Modifikasi Kotak Komentar
  159. Revisi: Cara Modifikasi Kotak Komentar
  160. Alternatif Warna Kotak Komentar
  161. Memilah Milah Komentar
  162. Zoom Efek Dengan Script Fancy Zoom
  163. Cara membuat Contact form / Kontak Kami
  164. Elemen Halaman Mempunyai Fungsi Scroll
  165. Tips Menghilangkan Pesan Pencarian Blogger
  166. Membuat Read more Plus Judul Artikel
  167. Membuat Sidebar Dalam Kotak-Kotak Terpisah
  168. Free Template : Magazine Template 2
  169. Tanya Jawab seputar Template magazine 2
  170. Menghilangkan Icon Obeng dan Tang / Quick edit Blogger
  171. Tanya Jawab Seputar Template Magazine 1
  172. Pasang Skrip Alert Di Blog
  173. Pasang Google Toolbar
  174. Free Icon Untuk Blog Dan Website
  175. Asyik Ngeblog Bersama Windows Live Writer
  176. Tanya Jawab Seputar Windows Live Writer (WLW)
  177. Buat Kolom Diatas Kolom Posting Pada Magazine template 2
  178. Buat Kolom Dibawah Header Pada Magazine Template 2
  179. Blog Pertama Kang Rohman
  180. Free html dan PHP Editor
  181. Apa sih Alexa Rank atau Peringkat Alexa Itu?
  182. Tutorial Pasang Widget Alexa di Blog
  183. Tips Meningkatkan Alexa Rank
  184. Apa Sih Situs Social Bookmarking Network Itu?
  185. Solusi Mengatasi Kotak Komentar Yang bermasalah
  186. Tutorial Membuat Horizontal Navigasi

FREEDOM PALESTINE

 

Follow Me

bLOGGER

Sitemeter

Statistik

Arsip Blog