Cara Membuat Template Blogger
Saturday, June 20, 2009Gimana si Bong cara membuat template blogger / blogspot sendiri? Pertanyaan itu sering mampir. Cara membuat template blog, jujur, binun aku njawabnya kekekekeke soale bikinnya ga sistematis, ya pertama belajar tentunya edit template minima yang udah ada (anggep aja sebagai kerangka, toh itu ga ada designnya, cuman kerangka kode aja) . Tentu aja bikin template dengan sistem coba coba ngabisin waktu dan banyak errornya *ekting mewek* . Lalu lama lama menjadi terseteruktur. Langkah membuat design template blogger sendiri menurut diriku ya kek gini loh
Ngitung Ukuran
Seperti halnya mau merancang baju, kita pan musti tau ukurannya dulu. Tentukan dulu template nya mau dua kolom (main post dan satu sidebar) atau tiga kolom (main post dan dua sidebar). Seperti ini screenshootnya itung itunganku hehehehe
Nggambar Design
Bagian ini menurut diriku yang susah.Yaitu design. Silahkan dipikirkan masing masing pengen design kaya apa. Design meliputi, pemilihan warna (jangan sampe tabrakan tur ga metcing) , layout, gambar, element tambahan (menu, search, feed). Design kemudian di gambar sesuai dengan ukuran yang tadi uda ditentukan. Ini pas diriku nggambar designnya pake inkscape. Kalau buat template yang banyak menggunakan gambar dan tentunya pengen unik ya musti nggambar design dulu, kecuali buat cowok yang lebih banyak main garis ama warna aja. Hehe..
Partisi Design
Maksude apa Bong? Kok kaya harddisk aja dipartisi. Maksudnya memisah misah gambar sesuai ukuran masing masing elemen. Jadi gambar buat background header, dipisah, buat footer dipisah, buat sidebar juga. Kalo pake photoshop ada tools yaitu slice untuk mengiris ngiris gambar sesuai ukuran design. Kalo pake inkscape, ya tinggal di grouping aja di export jadi format png.
Upload Gambar
Setelah jadi gambar untuk backrgoundnya, silahkan diupload ke imagehosting masing masing. Misalnya Photobucker, Imageshack, Tinypic, dan lain lainnya. Yang diperlukan nantinya adalah URL gambar tersebut untuk dipasang di HTML nya.
Edit HTML
Silahkan create new blog dan pilih template minima. Kok ga pake software Bong? kaya dreamweaver gitu? Lah kita kan belajar praktis. Kalok pake Dreamweaver atau software webdesign lain lhak musti belajar tools toolsnya dulu, hehehe kalo ini kan kita udah disuguhi struktur kerangka layout yang siap diolah, tak iye. Hayoook jadi lanjut ga nih? Baiklah Bong. Lanjutkan, Lebih Cepat Lebih Baik Bong. (ngakak dot kom aku je)
Kenali Struktur HTML
Pada dasarnya template cukup dengan 4 elemen yaitu header, sidebar, post, dan footer. Untuk lebih lengkapnya silahkan kunjungi Catalog Kang Jaloee , baca dulu sebelum nanya ya. Curhat colongan, sebel juga kalau ada yang nanya sedangkan dia nya belum baca, padahal semua sudah ditulis lengkap. Pengen tak iris tipis tipis type orang kaya gini.
Sekarang silahkan di edit ukuran lebar masing masing elemen sesuai dengan itungan awal misal header 920px, sidebar 170px, main-wrapper 500px.
Menambah Background
Setelah semua ukuran sudah pas, silahkan di edit color, font, sesuai yang diinginkan. Lalu kita pasang background gambar yang sudah dibuat tadi.
body {
background:url(http://URL-gambar yang sudah diupload) ;
}
header-wrapper {
background:url(http://URL-gambar untuk header yang sudah diupload);
}
begitu seterusnya.
Ini hanya gambaran step step globalnya aja. Hehehe semakin banyak elemen, semakin banyak menu, semakin banyak detail, semakin njlimet lah pekerjaan itu. Selamat berkarya membuat template blog sendiri
124 comments
:f: yihaaaaa petromaxxxx
ReplyDeleteini yg aku cari,makasih ya bong! Mau belajar bikin template nih. Suatu saat nanti nongol dgn template sendiri tp saat ini mo off dulu...
ReplyDeleteIso tak prakteke i.. daripada mumet ngedit2 tapi hasile urak memuaskan yo mbak..
ReplyDeletewkekekekkeee...
Wah wah mantep banget tutorial bikin desain blognya nih..
ReplyDeleteSmangat terus ya berbagi tutor dengan teman-teman blogging.. :)
boleh juga dicoba nih..dari dulu saya pengen buat template hasil karya sendiri....
ReplyDelete:f: hihihi... keenam....
ReplyDeletebaru baca lagi.... nanti komen juga hohoho...
Nyimak doank, soal buat'x diserahkan langsung ke mbak e.... Hahahhaahaa.... :f:
ReplyDeleteketujuh... hihihi... ilmu yang keren bgt mbak bong... nanti aku coba dehh...
ReplyDeletekeren,, bagi2 ilmunya.. heheheheohoho
ReplyDeleteseep bong
ReplyDeletemakasih ya gak pelit share ilmu
cebong baek deh
:)
wah ini ada tutor sederhana,, makasi bong,, :j:
ReplyDeleteselama ini masi ngedit template orang muluw =.= semoga kedepan ada kreasi asli bikinan dewek..
eh domain baru, mampir ya.
Mangtapppsss... huehue, ditunggu edisi selanjutnya :h:
ReplyDeletemakasih ebong sayang udah bagi-bagi ngelmu..wes tak bookmark ya sapa tau mau mbajak template orang xixixixixi
ReplyDeleteheader, sidebar, post, dan footer itu apa to mbak Bong..??? Kwakkk..kkk...
ReplyDeleteNtar ku iris tipis2.....biar langsing aku mbak Bong...he..he...
KOde HTML kok bikin Prof keder ya...???
wah diriku gak pinter gambar kii piyeee
ReplyDeletemumet mbak bong....
ReplyDeleteoiya nanya neh, cara masang banner gimana yak....terus bikin banner gimana ya.....kalo pertanyaannya salah aku jangan di iris2 tipis ya mbak....please....
@buwel: silahkan di cari di label sok tutorial ya kang buwel..sudah tak tulis
ReplyDeleteAkhirnya cebong buka rahasia juga :e:
ReplyDeletekok saya baca dari atas sampai bawah sudah 5x masih gak ngerti-ngerti ya? ... ah enakan nunggu hasil kerja mba' adminnya aja deh, gak perlu repot-repot belajar lagi ... :D
ReplyDelete/* kaburrr ahhh sebelum mbak adminnya iris-iris diriku ... */
hihihi, aku jangan diiris tipis2 bong ... takuuutt ... *sering nyusahin cebong dengan pertanyaan gak pentingnya* :p
ReplyDeleteAnyway, itu bisa ya satu page gituh ?? waaah baru tau :p, coba aaahh :D
wah harus langsung praktek nih
ReplyDelete@om agus: woiyo...monggo
ReplyDelete@fenty:whehehehe bukan dirimu mbak e , satu page yg mana yak?
@nomercy:jgn gitu mas, kan dirimu malah bisa bikin WP, :a:
@jengsri:hehehhe kita kan cewe feminin ya jeng :f:
@taktiku:besok buka warnet
aduh.. liat itung2annya dah mumet duluan,
ReplyDeletebelom lagi desain nya,
amatir, gak bisa,
yang terima jadi aja dch, tapi kapan2 aku mo buat sendiri juga ah,
pasti lebih puas, hasil sendiri mah ya,
muter lagi ah, nyari inspirasi.
Yup !
thanks atas informasinya , lam kenal ya
ReplyDeleteItung2ane koq pake sisa, maksud-e piye to Bong.?
ReplyDeletecool!!!
ReplyDeletentar aku cobain...
makasih y mbak ebong....
seneng deh sering2 maen ke sini...
wah aku ngga ngerti,
ReplyDeleteitu yang notepadnya buat apa? (katro mode : on)
waduw banyak banget yah tahapan-tahapannya..
ReplyDeletebong bikinin template dong... gratissss yaaaaa :D
ReplyDeletekayaknya muda tp klo di coba susahhhh...... pake dreamweaver yahhh
ReplyDeletewalah aku ra ngerti bong
ReplyDeletera tau pake wordpress
he3x..
eh dukung aku kontes SEO Stop Dreaming Start Action
iki link e nek gelem
http://annosmile.jogloabang.com/kontes-seo-joko-susilo-keyword-stop-dreaming-start-action.jsp
matur nuwun....
Pusing duluan sebelum mencoba. Takut eror.. Terima nasib aja dah!
ReplyDeletebingngung bong
ReplyDeleteKeren nuy Mbak... Bookmark dolo... :D
ReplyDeleteAyo lanjutkan, lebih cepat lebih baik. Ditunggu selanjutnya Mbak. Saya pro MbaBong.
ReplyDeletejiaaaaaaaaaaaaaah... mbak ebong!! keren2... :d:
ReplyDeleteni dia nih, yang ditunggu tunggu... xixixixixixiix.... ;))
angel bonk...kalo gambarnya pake paint bisa gag
ReplyDeletetop bong! mantap!
ReplyDeletehuaa.. ndak mudeng aku bak bacanya,, hikz.. :i:
ReplyDeleteudah deh aku pake templet yang ada aja deh,, lagian tempelt dari mbak kan bagus2,, aku suka warna2nya..
matur nuhun bong tutorial'e. kapan-kapan *kapan ya?* kalao punya kompi sendiri tak belajar. kalao belajar nang warnet banyak gannguan, engga bisa konsen *sejak kapan Eros bisa konsen?* suer saya pingin bisa bikin template sendiri bong.
ReplyDeletebingungggg akuuu...
ReplyDeletesing plenting komeng sek ahhh...:c:
Waaaaaaau... ngunu wi yo kerjone wong Desainer Web... aku dadi pengen ki mbak... Nggawe sing Wordpress... tapi sik, belajar ngeblog dhisik wae... kare jalan, eh mlaku :D
ReplyDeletehehehe.. puyeeeeng.. kliyengan.. susah yaaaa
ReplyDeleteSalam Sayang
Nice Post, Mantab, artikel yang bermanfaat <----- *komengku rodho nggilani yo ben* :c:
ReplyDeleteHe..he.. agak telat dikit posting tentang sherina :P
ReplyDeletewahh.. tipsnya keren banget.. buat wordpress donk skalian...
ReplyDeletesip..sip..suuuuiiittt...mantap tutorialnya..thx mbak
ReplyDeleteaku sudah baca, jangan diiris tipis-tipis loh...
ReplyDeleteThanks yach infonya :) ...
ReplyDeletesiiip mbak bong...makasih, langsung di cari....
ReplyDeletemakasih atas saranya embak
ReplyDeleteIm follow
ReplyDeleteAda cara untuk membuat template untuk wordpress enggak??aku juga mau buat template sendiri niih hehehe
ReplyDeleteWaduh pke linkscape aku gak mudeng mb' tp nek potosop raiso....ki piye mb' trusen (pikiren dewe)
ReplyDeleteNice tutornya mb', salam kenal
@wh:salam kenal mas, makasi kunjungannya, dan makasi sudah bener manggil mbak wkwkwkkw
ReplyDelete@hamster:ron, maap blum bekunjung, ndak loding2 buka blog mu
@ajiee: sara azhari kah? xxixiixx
@buwel:weehhehehe silahkan ngubek2 saya jg lupa jundulnya, search aja ituh, kek nya cara membuat banner
@bisnis:sama sama
@advintro:endak kok, paling tak pecel
@dio:makaci yah
@senoaji:heleh es tede dweh
@mas seno:gpp mas penting nyantol
nice post...makane master gawe templit kui pancen kudune posting ngene..
ReplyDeletehai bong..
wah ebong ngularin ilmunya..
ReplyDeletewah mantabb tips yang sangat bermanfaat
ReplyDeletetrus, pertanyaan berikutnya :
ReplyDeletegimana sih, biar bisa komen urutan atas di blog ini?
how can i create my own template?
ReplyDeletehttp://wetemplate.blogspot.com/
aaah...... binguuuung...hahaha :D
ReplyDeleteaku mau pake punya cebong aja ah, yg udah jadi...tapi belum ada waktu buat kutak katik hihihihi....
ReplyDeletebikin ndiri mah katrok aku bong...mmm minta bikinin yg kupu2 warna ungu ada gak? huakakakakaka (kaburrr takut di lempar sendal)
muantapzzz sob postingannya.....
ReplyDeletedicoba2......
thx ya
Keren nich.......... hebat Bong!!!!!!!!
ReplyDeleteWach baru keren nich tutorial.........
ReplyDeletewah, seru juga nih mba kecebong,,,
ReplyDeletepingin nyoba :D
biar tutore sederhana tapi esih mumet bae jere.
ReplyDeletewah keren banget neh, makasih master dah mau bagi-bagi ilmu
ReplyDeletekumplit...serasa dapat sesajen dari banteng hi hi hi :e:
ReplyDeleteBaru baca sekali n gak mudeng.
ReplyDeleteOon kali diriku ya bong.
Ayo.. diwoco meneh..
:Mugo2 gak diiris2 tipis2:
Nambahi komeng,
Dirimu sdh ta'add di blogku bong.
Sudikah dirimu addku balik?
Klo gak diadd, asli.. ngko ta'iris2 tipis2. Ben.
Waduuuuu...puyenggg,,
ReplyDeleteAq mbok gawekke template sing sip bong..:)
begitu seterusnya??? beh, lha seterusnya ki opo bong???
ReplyDeletemenunggu kiprah dirimu menulis tentang cara membuat template wordpress... wekekke..
ReplyDeletesoale nek aku, yang saya lakukan hanya replace dan replace gambar yang sudah ada.. hahahaha...
nek ukurane lebar post dan sidebare gak pas, yo tak pas-pasne karo sing tak inginkan.
seringkali sih mlorot... hahaha...
This comment has been removed by the author.
ReplyDeletemakasi infonya . mo di coba ni . :h:
ReplyDeleteKowe kok mlethik tenan tho utheke Bong? :C:
ReplyDeleteUdah tergambar sekarang mbak ebong...soale saya udah belajar CSS cuman malesnya itu lho...aku ga ahli ngerancang-ngerancangan..ngemodif aja dhe...
ReplyDeletenice template ..........
ReplyDeletefunny scraps
A blog for all about humor and funny scraps….
harusnya sekarang ngangguk ngangguk sambil bergumam "oh gitu..." tapi nyatanya ga bisa karena aku belum mengerti. intinya, belum mengerti.
ReplyDeleteharus belajar lagi :b:
mbok nggawe sing ono slide-e bong..
ReplyDeletekoyo nggonku kaw lho..
*nggonku garek copas, ora gawe DW*
@aprie: males prie, ndak berpungsi, arep tak isi opo jal ekekkeke, enek wi ning free template ku, tpi nek blog personal ndak wes
ReplyDelete@mocca:semangaaat
wah.. posting mbak CebongIpiet menggugah niat saya tuk nghidupin blog blogspot saya yg cuman saya bukak doang, lalu saya tinggal.. :c: :c: :g:
ReplyDeletewaduh gak mudeng babarblas aku
ReplyDeletekayanya aku calon yg bakal diiris tipis2 nih mba.. hihihi..
ReplyDeleteTerimakasih ya..talah berbagai
ReplyDeleteInfo menarik
ReplyDeletemasih burem ngikutin petunjuknya..., mending make yg udah kamu bikin ajah bong. sedot, jreng langsung kerennn!!!
ReplyDeleteinkscape? cari dulu ah... moga gratisan....
ReplyDeleteThis comment has been removed by the author.
ReplyDeletehuahhh ..
ReplyDeletemasih ngga ngerti. :k:
tapi makasi yaa da ngasih tahu carany :h:
bgs bgd de. lam kenal ..
mw d'cba dch...
ReplyDeletehuahahhaha thz abang cebong
ReplyDeletegitu dong!! bagi bagi ilmu!! mencerdaskan kehidupan bangsa *halah
thz berat bro^^
Thanks bro.....
ReplyDeleteMesti nyobain nih, biar blogku punya ciri sendiri.
:g:
mbak cebong pinter bgt euy..
ReplyDeleteacarin mbak,newbi nii..:a:
udah buka Catalog Kang Jaloee pi bingung mw buka yang mana. kenapa dikasih link yang spesikif.... :h:
ReplyDeletekakak...ajarin dunk...
ReplyDeletebingung ni masalah ukuran ma desainnya tu gmn...
maklum masih amatiran.hehehehe...
wah mba bong jago corel ya?
ReplyDeletesalut dah....
patut ditiru.... tak bookmark dulu dah yang disini
:f:
ReplyDeleteketawa dulu ah....
mba bong, bentar lagi puasa nih
:c:
maafin slam kalo ada banyak salah yang disengaja ya, serta tutur kata yang tidak berkenan...
mohon maaf lahir batin
:c:
maksudnya recent comment tuh kan nampiLin comment yg udah ada...
ReplyDeleteudah ada darimana??? :b:
baLes di sini
ada ga
ReplyDeletegmn klo langsung make buatan bu ebong ajah, hohoho, kyknya lebih praktis thu, susahnya yah, mbingungin pek, tapi apa salahnya belajar :D, jgn jgn di Btemplates thu punya bu ebong semua hahahah
ReplyDeletekudu baca pelan-pelan, biar mudheng. baydewey, gambar di pojokan kiri, boleh juga tuh.. bikin mata betah di blog ini.. :d
ReplyDelete:d:
ReplyDeleteberinformasi..tapi,saya tak berapa faham bahasanya..
ReplyDeletetambah bingung Bong .......
ReplyDeletesaya harus mulai dari mana ??
anyway thanks untuk informasinya
kayaknya gampang ni
ReplyDeletewoi mantap tutorialnya....jadi pengen buat template sendiri......kayaknya lebih memuaskan deh buat blog kita
ReplyDeletegood sharing
wah.. thx nih dah share, sekarang jadi ngerti dah...
ReplyDeletegood articles.......i wanna try your tips
ReplyDeleteGAAAAAAAAAA MUDENG :h:
ReplyDeletetetep gx ngerti tuh :h:
ReplyDeleteklo struktur codingnya sama ga c kaya kalo kita mau bikin website..soalnya aku pernah buat template buat tumblr, tp sistem kodingnya beda..nah klo blogspot ini gmn ya sistem codingnya? :m:
ReplyDeletera dong..:a:
ReplyDeletehttp://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif
ReplyDeletecacad
:k:
ReplyDeletekonntol
waduh...keren ni tipsnya....
ReplyDeletesaya coba ya...
kebetulan saya juga pengen bisa ni bikin template sendiri..he..he..he...
salam kenal...
pengen iconne aku bung......
ReplyDeletekeren tutorialnya !!! :j:
ReplyDeleteTerimakasih banyak atas cara bikin themnya...
ReplyDeleteya...dijelasin lagi dong....biar lebih detatill...jelas..gitu...
ko aku kagak mudeng mudeng ya?
ReplyDeleteapa salah makan?
tolong jelasin yang lebih detail downg, biar blog aku bagus ....
ReplyDeletehttp://kanghamdan.blogspot.com/
thanks infonya,,
ReplyDeletehttp://www.dije.web.id
makasih gan semoga bermanfaat ane baru buat blog 5 menit yang lalu tapi bingu apa yang mau dilakukan
ReplyDeleteterima kasih mbak, jadi bisa belajar membuat template :D
ReplyDelete