Memasang logo blog menggunakan images atau gambar pada header

Posting lagi yuk, berhubung kang bagas96 lagi ada waktu luang jadi sempet nih buat nulis artikel dan kali ini saya akan memberi info ringan cara mengganti header text menjadi header bergambar/ logo blog images yang sempat di rekues sobat kang bagas dan kali ini saya share cara yang sederhana saja

Dan untuk caranya biasa edit css pada bagian html template dan cari kode berikut

#header-wrapper {
margin:0 auto;
color:#090;
background-color: #070;
font-weight:normal;
line-height:30px;
}

#header-inner {
background-position: left;
margin-left: auto;
margin-right: auto;
}

#header {
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:3px 3px 0;
padding:3px 5px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-weight:normal;
display:none;
color:#ff0;}

#header a {
color:#ff0;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 3px 3px;
padding:0 5px 3px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1em;
font: $descriptionfont;
color: #fff;
}

Cari kode yang berwarna merah yaitu
#header h1 dan #header .description
jika sudah ketemu tambahkan kode ini display: none
contoh

#header {
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:3px 3px 0;
padding:3px 5px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-weight:normal;
color:#ff0;
display:none;}

#header a {
color:#ff0;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 3px 3px;
padding:0 5px 3px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1em;
font: $descriptionfont;
color: #fff;
display:none; }


jika sudah tinggal save dan upload ulang sementara nanti hasilnya pada header tidak nampak judul dan descripsi blog dan langkah terakhir yaitu menambahkan logo gambar pada header

1. Login blog
2. Masuk rancangan/tataletak
3. Pada bagian rancangan lihat ada gadget header misal 'kang bagas96 (header)' dan pada sisi kanannya ada link EDIT
klik link tersebut dan akan ada menu unggah/upload gambar bisa langsung upload dari drive mmc sobat atau lewat url

tinggal sobat pilih saja jika tidak memiliki url gambar sebelumnya saya sarankan untuk memilih yang upload saja

jika sudah di upload akan muncul gambar yang sobat pilih dan terakhir simpan maka proses pembuatan logo blog header menggunakan gambar sudah berhasil dan tinggal sobat lihat hasilnya



kategori: Bedah Template

47 komentar:

  1. sebagai pertamax..dan mengucapkan beribu ribu terimakasih buat kang bagas atas request saya terealisasikan...


    sekali lagi terimakasih kang :)

    ReplyDelete
  2. Keren kang, justru cara buat logonya gmn kang, transparan, keren dan cuma 6 kb ,gmn crax buat kang? Prnh sy psg header logo tpi elek kang..hehe

    ReplyDelete
  3. Sy malah suka logonya yang di atas :D
    Klo pke hp bisa gk ya bikin logo seperti itu..

    ReplyDelete
  4. mantap lah...!!
    Kang, ari simkuring mah hoyong na tampilan blog reh rame, ku gambar sareng pernak-pernik... Tapi kumaha carana sangkan teu beurat luding sakedik kb na...?

    ReplyDelete
  5. Oke kang @amanktani silahkan di coba kalau ada kendala/kurang paham dengan penjelasan post di silahkan tanyakan lagi pada saya kang......

    ReplyDelete
  6. ohh, ;)) ngedit template oge, nya kang! Ane kira mah tinggal upload di elemen header wae, kang! :-t Nuhun inpona... :D
    elemen header wae, kang! :-t Nuhun inpona... :D

    ReplyDelete
  7. @Ilham Zone dan kang urang pasisian saya membuat logonya pakai hp kok, menggunakan IDesigner / Image designer suport membuat gambar transparan dan di hape java saya pernah nyoba potoshop.jar hampir sama dengan Idesigner symbian...
    Dan waktu penyimpanan gambar transparan saya menggunakan kompresi best jadi gambar lbh kecil kbnya.

    ReplyDelete
  8. @Elang84 kalau untuk background tiasa di kompres eula kang supados teu berat waktos lodingna...

    ReplyDelete
  9. @eksak nya langsung oge tiasa tapi kadang bentrok text sareng gambar upami gambr di palih luar panginten text katutup tapi waktos dina kompter textna jadi ageung tah logo gambar jadi dobel sareng text makana textna di hidden kang.mbar upami gambr di palih luar panginten text katutup tapi waktos dina kompter textna jadi ageung tah logo gambar jadi dobel sareng text makana textna di hidden kang.

    ReplyDelete
  10. udah di coba kang,makasih ilmu nya :)

    ReplyDelete
  11. @amanktani siplah kang mudah-mudahan bermanpaat...

    ReplyDelete
  12. hebring inpona, euy...sarebu nuhun, kang...!! :D

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. @eksak nya sawangsulna keheula kembalian 500 yeuh nuhunteh heuheu...

    ReplyDelete
  15. @Kang Bagas96 : potoshop.jar na kenging timana kang, nyuhunkeun atuh simkuring,,, :D

    ReplyDelete
  16. @ akang :D lagi nyari gambar nu sreg...

    ReplyDelete
  17. @ akang :D lagi nyari gambar nu sreg...

    ReplyDelete
  18. @Kang Bagas96 Mantaf kang tp jadulq k320i g mendukung app hrs nyari yg co2k,, solusix gmana yea kang,, kayax harus minjam hp teman dulu ninch..

    ReplyDelete
  19. @Yusup Laskar kebetulan dulu nyari di google tapi kmarenkan hapena abis di master riset jadi gak punya lagi appnya kang searcing aja di google...... Atau mungkin nanya2 sama yg pakai hp java kang,

    ReplyDelete
  20. @eksak mang nyarinya dimana kang hehe...

    ReplyDelete
  21. @Agusductank sebenernya sayateh kurang tau app java karena hp saya simbian kang, nanti deh kalau ketemu app nya saya share, mungkin coba aja dulu memanpaatkan text logo online kang....ang, nanti deh kalau ketemu app nya saya share, mungkin coba aja dulu memanpaatkan text logo online kang....

    ReplyDelete
  22. Saya ada punya, kalo ga salah potoshop jar

    ReplyDelete
  23. @amanktani nah tuh di share aja kang biar yang nyari bisa berkunjung ketempat akang.. berkunjung ketempat akang..

    ReplyDelete
  24. @eksak walah ke kengingna gambar sapatu atuh kang hehe..

    ReplyDelete
  25. kang, sakalian ath srng ttr ngadamel gmbr na. Teu tiasa heh, km ngadml nu transprn :) symbianera heh, km ngadml nu transprn :) symbianer

    ReplyDelete
  26. @Kang Bagas96 nanti di coba kang,, riquis lg kang,, tong sampah N tgl comment carax gmNa yea kang biar dibawa kamentar.. terimakasih sebelumnya N mf kalo banyak tanya

    ReplyDelete
  27. kang,,,
    help me hihii...,
    liat blog q gant..
    www.puisi4u.blogspot.com
    aku pasang fb like di dalam template html
    kok jadi nya kalo aq buka entri
    malah numpuk di bawah phostingan kang
    kayak'e aq salah penempatan
    hikhkz
    mohon pencerahan,,,,
    ..
    www.puisi4u.blogspot.com
    aku pasang fb like di dalam template html
    kok jadi nya kalo aq buka entri
    malah numpuk di bawah phostingan kang
    kayak'e aq salah penempatan
    hikhkz
    mohon pencerahan,,,,

    ReplyDelete
  28. @eka iah kang next time saya posting caranya...

    ReplyDelete
  29. @Agusductank iah kang nanti q buatkan tutorialnya hehe...

    ReplyDelete
  30. @αяιє_¢яυтz iah kang itu salah naro kodenya jadi button likenya numpuk sama posting..

    ReplyDelete
  31. @Kang Bagas96 oklek kang ntar coba benerin
    pusing kalo masalah html
    hiii :(
    lom sempat buka leippy neh
    thank's...hatur nuhun..

    ReplyDelete
  32. @αяιє_¢яυтz ea nanti lama-lama juga biasa kang hehe...

    ReplyDelete
  33. @Kang Bagas96 Makasih sebelumnya karena sudah merepotkan,, sukses selalu

    ReplyDelete
  34. Terimakasih atas tips2nya kang, sya sudah pake template bikinan akang :) cuman maw ngutak-atiknya ga bisa ;(ikinan akang :) cuman maw ngutak-atiknya ga bisa ;(

    ReplyDelete
  35. Ini dia yg lgi gw cari" http://ichiruki.infoIni dia yg lgi gw cari" http://ichiruki.info

    ReplyDelete
  36. baca-baca aja kang.............

    ReplyDelete
  37. @Mahesa ibnu_romli Pelan pelan aja sob nanti juga bisa sendiri he

    ReplyDelete
  38. Kang.. Salam pangwanoh.. Saya baru jd blogger..hehe mau nanya.. Buat pasang header pake opmin 5.1 di hape ko ngga bisa yah? Memang ada notif selesai. Tapi pas di klik lihat blog,. Teu berubah..huph kumaha ny kang?

    ReplyDelete
  39. Mantap kang... patut di coba

    ReplyDelete
  40. kang, saya di mwb bru mencoba, stlh sy bc postnya mnarik buat di ikuti, yg sy mo tyain ma kakang, ntar kt tempel dmn nya kang, kakang bs jwb postnya di almt blog sy :sapaulus.mywapblog.com. Maksh kang bagas.

    ReplyDelete
  41. http://meirisdiana.blogspot.com/

    ReplyDelete

MOHON DI BACA
Semoga anda adalah pembaca yang baik hati jika berkenan tinggalkanlah komentar untuk saya

1. Gunakan pilih nama/url pada pemilihan nama jika anda tidak memiliki blog
2. Sebisa mungkin jangan menggunakan id anonim atau id falsu
3. Di mohon komentar tidak mengandung sara, saru, spam dan kata-kata yang tidak pantas di ucapkan
4. Jika komentar tidak pantas di tampilkan admin akan menghapus komentar yang sudah ada.
5. Komentar anda merupakan motipasi bagi kelangsungan blog ini.

About blog | Feedback | Rss
Copyright 2009 - 2012 Hak cipta di lindungi UUD
Naik