Versi 1 :
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
Versi 2 :
#rec { margin:20px;padding:20px;}
.hint {
border: 1px solid #4AB7FF;
font-size: 11px;
color: #191919;
background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center;
font-family: Verdana, sans-serif, "Courier New";
line-height: 125%;
margin: 5px 0px 0px;
padding: 12px 12px 12px 40px;
display: block;
font-weight: 400;
width: 85%;
}
Versi 3 :
#rec { margin:20px;padding:20px;} .hint { border: 1px solid #4AB7FF; font-size: 11px; color: #191919; background: #BFE5FF url(http://i280.photobucket.com/albums/kk162/mochal_nl_2008/info.gif) no-repeat 5px center; font-family: Verdana, sans-serif, "Courier New"; line-height: 125%; margin: 5px 0px 0px; padding: 12px 12px 12px 40px; display: block; font-weight: 400; width: 85%; }
Sangat jelas sekali perbedaannyakan, nah sekarang tinggal bagaimana cara membuatnya dan kelebihan dari versi 3 ini.
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Masukkan kode ini di bawah <!-- end outer-wrapper --> 3. Kemudian simpan hasil pekerjaan sobat, nah sekarang tinggal bagaimana mengaplikasikannya.
Gunakan tag kode ini setiap ingin memposting kode HTML-an atau CSS,dan javascript atau kalau mau lebih jelas mampir ke sini
<pre name="code" class="css">HTML/CSS/javascript </pre>
Kelebihan dengan memakai metode ini kita tidak perlu lagi memparse/encode kode HTML-annya langsung taruh saja sesuai kode mentahnya, dan kalau mau ambil kodenya klik view plain, terus kalau mau ngeprint klik print.
Ok bro, cukup kayaknya postingan kali ini soalnya saya sudah mengantuk berat nih, and btw anyway buzway happy blogging dan selamat menunaikan ibadah puasa.
Saya dapat ilmu ini dari sini.
pertamaxxx pluss
ReplyDeletenanti aja komennya sekarang ngantuk
K
ReplyDeletee
d
u
a
x
x
x
x
!
!
!
n
a
n
t
i
k
o
m
e
n
t
n
y
a
.
.
.
banyak versi juga ya?tapi menarik semua kok...
ReplyDelete@ oesoes > kekekekkeke siip om di tunggu komentar pamungkasnya
ReplyDelete@ jovie > boros amat komentnya kekekekekkeke
@ kristina > yups tinngal di pilih mba :D
wuaa.... ini versi beda lagi... puyengg.... dah... hiks bantuin donggg.... tapi ntar kayak Jovie puyeng utak atik blogku :D
ReplyDeletezzzzzzzzz...... (ktiduran kang, maap....)
ReplyDeleteNih komentar pamungkas saya kang, bagus nih versi3nya, i like that. tak tunggu tampilan versi 4,5,6,7 dstnya OK. setelah baca-baca gitu doang ya........??(sok pinter padahal gak bisa n belum praktek)hehehehhehee
ReplyDeletesebelum kabur aku bookmark dulu ya kang.
*kabur*
wah chal.. sekali2 kasih humor dong, jgn html semua, ntar muka di jidad lo ada tulisannya "master html" lho.. :P
ReplyDelete(sori OOT)
akankah ada yang ke 4??? hehehhe ga salah niyh cc milih roommate.. :D
ReplyDelete@ Lyla > wekekekeke nambah pusyeng yak mba :p
ReplyDelete@ Gus > set dah om gus ngorok di sini wakakakaka
@ Oesoes > nantik tampilin langusng versi 100 nya kang wekekekekekek
@ masih menfin ada tulisan "master HTML" dari pada "master mesum" :p
hehehe.. sip..sip.. saya kantongin neh.. cmn ada tambahin dikit ngga ada yang langsung copy-nya.. mungkin nanti yach versi empat-nya
ReplyDelete@ unieq> langsung yang ke seratus cc, ya iyalaaah ga salh milih teman sekamar :P
ReplyDelete@ jaloee > sebenarnya ada kang copy to clipboard nanti tak update dah, btw bisa juga copynya dari view plain ko kang tinggal ambil kodenya dari situ
makin pinter ajah maen scripts aneh gitu? he..he... siip,,, mantab
ReplyDeleteWajib di bookmark tutornya
ReplyDeleteIni buat apa ya??(bingung mode neh). Balik lagi ah keyang pertama...
ReplyDeleteWah, bagus bgt nie..
ReplyDeleteSalam kenal
keren bro.... aku iri.. hehe
ReplyDeleteWaaaahhhh.. ternyata banyak caranya yah...
ReplyDeleteMmmm... kang... tuh tempelen nomer urut komentator diposting juga dunk caranya... pengennn... bagus banget soalnya...
Terimakasih kang dah sharing...
@ masenchip > ya giotu deh bro :p
ReplyDelete@ abi bakar > bisa aja om abi
@ herro > kekekekekkek
@ pengembara > salam kenal juga
@ anang > iri kenapa mas ?
@ riasmaja > yup banyak cara menuju roma, mmmm Insya Allah tak posting mengenai hal tersebut
wah asyik banget nih tips.. makasih banyak kang.. :D
ReplyDeleteYang ini jg menarik mas.. Hebat.. Salute buat mas subagya.. Acak2 ah postingannya.. Kali aja nemu yg keren lg.. Hehehe
ReplyDelete☆┌─┐ ─┐☆
ReplyDelete│▒│ /▒/
│▒│/▒/
│▒ /▒/─┬─┐
│▒│▒|▒│▒│
┌┴─┴─┐-┘─┘
│▒┌──┘▒▒▒│
└┐▒▒▒▒▒▒┌┘
└┐▒▒▒▒┌┘
●●JoVie●●
Peace Man...!!!
heubat bener nie tutorialnya, mantap dah sampai geleng kepala saya, semua jempol di serahkan unutk bilang GOOD
ReplyDelete@ fachia > thank om :D
ReplyDelete@ jovie > weeeks maksud looh wakekekekek
@ kapanpun > thank mas
Trim's tutorialnya, tp aq belum berhasil keluar coment "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
ReplyDeleteXML error message: The element type "body" must be terminated by the matching end-tag ", sedangkan aq tdk mengubah tag pd template lainnya
@ pake lucky > saya mengambil code di atas dalam template saya jadi kayanya mungkin anda kurang lengkap mengambil codenya.. coba klik view plain terus ambil code tsbt dapn pastekan di end outerwrapper
ReplyDeletekang keren nie tutorialnya..wadohhh..muantebbb..ciamik..
ReplyDeleteduh ampe ga bisa bilang saya..hehehe..
salut bro..sukses :)
Om, saya udh dpt save template-nya dng menambah tag penutup "script" sbl. no.6 ttp saya praktekkan kok tdk bisa ?????? & apa betul yg saya lakukan mengganti "subagya" dengan nama blog saya "tutorial-bloger" (sbg praktek awal)???.
ReplyDeleteOm, sbenernya saya malah udh pasang bannernya sejak baca blog om yg penuh dng ilmu ini.
Oh ada yg kelupaan apa ada tambahan code pd skin-nya (klo saya tdk salah istilah orang yg pinter code css-nya ya Om, maklum lah Om tdk belajar ilmu ini cuma modal copy paste tutorial & hafalan sedikit2 spt ini, yg pendek2 maksudnya).
ReplyDelete/baca lengkap dach infonya
ReplyDeletekayak baca serial aja/hihi
/koprol
ReplyDeletethanks atas semuanya Bos Mochal/hore
ogut mau kerja dulu/lari
jangan lupa Bosa mochal infonya/hihi
letak kode warna backgroung di template
biar ogut bisa ganti dg yg warna terang
dach bosan gelap terus
he..he..he..
ogut malas nanya ma Amanda
/lari
mantap nie tutorialnya om topi aku miringkan :)
ReplyDeleteWah lenkap euy infonya.. sip dah.. oiya mas mas.. boleh di share ga ni artikelnya (n_n).. salam kenal.. success buat semua cahyo..
ReplyDelete@ segalanya > silahkan mas :D
ReplyDeleteom mochal
ReplyDeletethx atas tutorialnya
berguna bgt buat saia
best regard D_Kills
ngambil codenya kok pake view plain sih.....
ReplyDeleteyang praktis-praktis aja kaya blogger lainnya jangan dibikin macem-macem biar hemat waktu
Hmmm.. sepertinya menarik neh :)
ReplyDeletedicoba2 ah
mantap
ReplyDeletegeboli.blogspot.com
k
ReplyDeletee
r
e
n
ini yang saya cari cari
ReplyDeleteNice trik bisa tak terapin buat blog contoh proposal usaha milik saya gak ya?
ReplyDeletewah, baru tau bisa seperti itu. salam kenal gan
ReplyDeleteboleh nyoba ga nih kawan. nyoba dulu ach. ohya lupa. salam kenal. newbie
ReplyDeletemaaf mau tanya mas, Gimana cara Menampilkan kode HTML/Javascript yg otomatis di blok itu mas?
ReplyDelete