Assalamualaikum and hi ^___^
Kebosanan melanda sebab idea nak update blog makin menipiss piss piss. Jadi aku nak buat tutorial buat blogskin sendiri ! Suka tak suka tak? lulz ;p
Sebenarnya kan, dah lama kan, Jesica정수연MeMiy request tutorial ni kan, tapi kan, baru sekarang I update. Maf maaf. Aku cuma jawab "search je pakcik Gugel". Cuba u olls cari kat mana-mana ada ke nama Pakcik Gugel. Memang tak dapat lah Memiy nak cuba buat blogskin sendiri, kan? Kalau ingat balik waduhh betapa kejamnye aku tak share ilmu dalam kepala otak ni T______T (terasa berdosa)
Tapi jangan risau yer kakak2 dan adik2 sekalian :) Student Kecik akan membantu kalian bagaimana mahu membina blogskin sendiri. Haa kan dah keluar ayat budak nerd. Wakaka . Codes from Lettha. Saya ubah sikit-2
Step pertama : Log In Dashboard > Template > Scroll ke bawah sekali > Klik Revert to classic template (klik aje, no worries lah)
Step kedua : Kalau kauorang klik Review Blog, anda akan menyaksikan blog yang amat huduh. Sorry ayat begitu lurus bendul. Jadi, korang delete semua kod di dalam ruangan template anda. (Delete je semua)
Step ketiga : Copy kod yang aku suruh copy kejap lagi SATU PERSATU ! Tak perlu nak tergopoh-gapah sangat lah kan .. takkan lari gunung dikejar
- JOM MULAKAN DENGAN LAFAZ BISMILLAHIRRAHMANIRRAHIM -
Step pertama : Copy kod di bawah dan paste di ruangan template anda.
<html>MERAH : URL HEADER anda
<head>
<center><img src="URL HEADER" /></center>
<title>NAMA BLOG</title>
BIRU : NAMA BLOG anda . Contoh lah kan aku buat nama (My Wonderland) Bahan rujukan di bawah
Step kedua : Copy kod di bawah dan paste di bawah kod atas tadi ok?
<style type="text/css">MERAH : URL BACKGROUND anda
#navbar-iframe {display: none;}
body {
background: url(URL BACKGROUND);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
-webkit-transition-duration: 0.5s;
color: #666;
}
</style>
<body><br>
BIRU : KOD WARNA boleh cari di sini
Noww, blog aku dah jadi macam ni
Step ketiga : Cari kod </style> dan pastekan kod bawah nie dekat ATAS nya.
.mainblog {Fuchsia : Warna font dalam post dan sidebar. Uolls boleh guna warna hitam atau warna kelabu or something like cokelat pekat.
background:#ffffff;
color:#666666;
padding:14px;
width:500px;
border-radius:10px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;
color: #666666;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic;
font-size:10px;
margin-bottom:2em;
}
MERAH : Widht main blog uollss. Bsar besar pun boleh =3
OREN : Widht untuk sidebar uollss
HIJAU : Warna untuk post title. Uolss cari lah sendiri ok.
Step keempat : If dah sudah, cari kod <body> dan paste kod ni di BAWAH nye taw.
<table style="line-height: 17px;" width="880" border="0" align="center" cellspacing="5">MERAH : Itulah widht keseluruhan blog anda. Boleh ditukar kalau mahu.
<tbody><tr>
Step kelima : Now, copy kod nie dan paste di BAWAH kod tadi.
<td valign="top" width:550px;">Nota : Selalu tutup dengan </td> ok. Boleh tukar warna merah dengan ayat anda. Warna biru pun sama =3
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>
Sekarang, time untuk cipta SIDEBAR ! Copy kod nie dan paste di bawah kod tadi.
<td valign="top" width="250px">Boleh tukar kan mana yang patut. Nak lagi kotak sidebar? Nah letak kod nie di bawah kod tadi. Ulang aje dengan kod yang sama >///<
<div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>
<div class="sidebarblog">
<div class="title">Tajuk Sidebar</div>
ISI SIDEBAR</div>
<br>
Jom terjah blog yang baru aku edit !
Haa lawakan-lawakan ? lulz -.-
Step keenam : Kalau nak tutup coding sidebar tadi, pastekan kod nie, okey?
</td>Step terakhir iaitu ketujuh : Paste kan kod bawah ni di bawahhh sekali !
</table></body></head></html>
Okey, dah sudah. Nanti sambung part 2 punya. Nak buat page about me, stuff, exchange link and blah blah blah di tutorial seterusnya .. Good luck !
FREEBIES : Ni yang versi bodo bodo style punya tau. Nak yang lain sila cek di list freebies.
<html>
<head>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH029Zl4KmepNJ38c7vrWLBAjXuxU_pWLSBvT_LZD80YsBJukTOvYKGhZXzo2EKu-BUU-4fRK7VSly61M6ilkWDU5Nloo-VcfQdg66Vj-c-oaDh6lX554vp5Zy9-dbNYFIAJOaGl4jeK8T/s1600/12oeJ2.png" /></center>
<title>My Wonderland</title>
<style type="text/css">
#navbar-iframe {display: none;}
body {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vzY0JvOYK1Wt1anMZMKvtUAbPhGBwwR3fV2VZl4Z_VDKdjzNKczv-SwOCPW8wprg9v5eGhZmUwfodw_Rn7L5Qt_URcQeohX6KnzBf0xkKAxcUMPJhooPelNJ7RUKHOUEqN5vrZZmCg/s1600/04.gif), auto;
background: url(http://i1074.photobucket.com/albums/w419/amaninaonly/th_polkadotpink-1.gif);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vzY0JvOYK1Wt1anMZMKvtUAbPhGBwwR3fV2VZl4Z_VDKdjzNKczv-SwOCPW8wprg9v5eGhZmUwfodw_Rn7L5Qt_URcQeohX6KnzBf0xkKAxcUMPJhooPelNJ7RUKHOUEqN5vrZZmCg/s1600/04.gif), auto;
-webkit-transition-duration: 0.5s;
color: #000;
}
.mainblog {
background:#ffffff;font-size: 11px;
color:#000;
padding:14px;
width:600px;
border-radius:13px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;font-size: 11px;
color: #000;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
letter-spacing: 2px;
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #a9a9a9;
}
.title2 {
color:#a9a9a9; letter-spacing: 2px;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic; font-family: trebuchet ms; letter-spacing: 2px;
font-size:10px;
margin-bottom:2em;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #6c5656;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #fff;
border: 1px solid #fff;
}
blockquote {
-webkit-transition:2s;
color:#111;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
border-left:9px solid #ffa1c2; border-right:9px solid #eee; border-top: 1px dashed #ffcaca; border-bottom: 1px dashed #ffcaca;
padding:8px;
border-radius:8px;
}
blockquote:hover {
box-shadow:0px 0px 25px #ffa1c2;
color:#000000;
border-right:9px solid #ffa1c2; border-left:9px solid #eee;
padding:8px;
border-radius:10px;
}
</style>
<body><br>
<table style="line-height: 17px;" width="880" border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" width:550px;">
<div class="mainblog">
<blogger><div class="title"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>
<div class="date"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> | <$BlogItemDateTime$> | <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$>comments</a></BlogItemCommentsEnabled></div>
<$blogitembody$></blogger><br>
<center><OlderPosts><a href=<$OlderPosts$>>Older Post</a> </OlderPosts> <NewerPosts> | <a href=<$NewerPosts$>>Newer Post</a></NewerPosts></center></div>
</div>
</td>
<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title2">Welcome here</div>
<center> Helo, Assalamualaikum. Sila ketuk pintu sebelum masuk. Eh tak da pintu? Ketuk tingkap LOL ;p</center>
<center><b> Change this with your own </b></center></div>
<br>
<div class="sidebarblog">
<div class="title2">Le'Cbox</div>
<center> Your cbox code, here</center></div>
<br>
<div class="sidebarblog">
<div class="title2">Credit's</div>
<center>Blah blah blah </center></div>
<br>
</td>
</table></body></head></html>
##UPDATE TERKINI : Sebenarnya ada pembetulan dalam coding yang anis lupa nak mention. Siapa yang pernah try, search kod .mainblog { dan .sidebarblog { , pastekan kod nie di bawah tu.
font-size: 11px;***Sebab? tulisan korang akan jadi besar macam elephant . Maaf ! :)
131 comments:
bole tahan jugak sshnye :(
kurang phm kot hihi
@huny madu a'ah mmg susah sikit ;) Kena tunggu sampai 3 bulan tau nak terer kod blogskin nie XD hehe
tak jadi pun buat...
@EIQA ada orang tu buat jadi je. Mungkin tersilap langkah / tersalah kod kut. Try banyak kali ye ? :)
Faie mintak basic code yang kat atas tu yea ? Code ni lagi simple and mudah nak faham , thanks ^ ^
Ok Faie :) dah tgok blog awak. COngrates !
akak,kalau nak tambah-tambah code lain boleh tak?
@Gadis Terengganu : boleh dear :)
@Balqis Sama-sama .
Akak , part 2 tak ada eh ?
@Natasya Aina :) akak dah tgok blog adik. nnti insyaAllah akak sambung part 2 punya eh :)
thanks :D
@Sabrina SA u're welcome :D
hi ! kita guna code awak ni untuk saya punya skin eh? thanks !
ok gunalah :) welcome ^^
Yeayyy ... menjadi la kak ... thanks .
http://partthreemiama.blogspot.com
@mojat cerewet yeay welcome dik :)
awak saya xjadi la .. acannea erk ?
wak .. saya punya xjadi la .. accannea erk ?
awak . saya punya xjadi la .. mcm mane yea
@❀◕‿◕❀khaty cupiidangle❀◕‿◕❀ awak copy semua kod yg terakhir/(full) tu yer senang sikit nak design :)
Bila nak buat part 2 punya ?
@Jung Haneul maaf la kalau lewat. sy tak free lagi time nie :\
Nak try buat blogskin haha . btw saya budak baru nak hidup dengan blog bieh . haha kalo sudi follow la saya http://yongatira.blogspot.com/
@Yong Atira hehe try lah blogskin cantik maa :) dah follow sana ^^
akak anis, yang last sekali tu #Update terkini tu tak faham. terangkan lagi kak :))
@Anis Maisarah oh yang tu, adik cari kod .mainblog { then pastekan kod tu bawah dia. Kalau tak nanti size tulisan adik jd besar tau :) Yg 11px tu boleh besar/kecilkan.
akak mcm mana nak letak gambar? ajar lah, buat tutorial la kalau boleh :))) thankyouu akk :))))
@Anis Maisarah InsyaAllah akak buatkan tutorialnye ye :)
saya guna yang awak bagi tapi macam mana nak buang 'comment' tu?
@myung yeol buang kod ni | ><$BlogItemCommentCount$>comments :)
kenapa orang tak boleh nak comment?
U kena pergi ke Settings > Post n Comments > TIck Pop up Window, done :)
so,bila u nak buat sambungan blogskin ni? :-((
Boleh tolong buatkan , saya tak reti and tak paham
yeay !! Dah Jadi !!
salam..seriously susah nk fham..tolong lah
salam..saya x faham..susahnya
@Alia Arjuna insyaAllah one day :(
@Afirah Dellina maaf sy agak bz lah. aw copy yg full code tu je then paste kan dlm tu :)
@Zira Luv 2ne1 yeay ! alhamdulillah :D
@Hamba Allah nak saya tolong apa, ye ?
@anis Sk hehehe..saya org baru..so bnyk bnde lah saya x tahu..
heheheh..saya org baru so..bnyak bndelah x tau..
@Hamba Allah hehe awk follow je dari step pertama tu ye :) kalau ada apa2 tanya lah yg mana sy patut terangkan ^^
Asyik Tak Jadi Je Akk :( Kenape Eh ?
@Bella Lee Aik ? Try betul2 tau ikut step :)
Akk , Nape Sidebar jadi melintang ??
@Anonymous ehh melintang ? ada silap kod tuh =)
lepas dh buat smua tuh.. nk tkn ape?
ke nak tkn preview?
preview dulu than kalau jadik save =)
adeiii.. x jadi r
lau x jadik copy full kod yg saya bagi tu ok ? =)
Eh jadi lahhhh :D thankss ya kak .
@Izzah Alya yeay jadi ! sama sama adik =)
:D bagus lah tutorial nie ... thanks
Hmm, mcam mana nak cipta header ya?
Macam mana nak masukkan header daripada album computer ye?
And macam mana nak masukkan gambar dekat sidebar tepi tu?
And macam mana nak jarakkan antara satu post dengan post yang lain?
Sila cari di list tuorial ye / kalau tak jumpa, cari dioogle. Maaf ! :)
wow. amazing sis. thanks a lot :* ni hasil :-
asmaazera.blogspot.com
tima kasih
awk hebat lah~
sagat membantu
happy !
kenapa xbleyh copy pun kod kat atas tu??
thanks
mampir2 ke blok saya
http://www.apartmen-tmj.blogspot.com/
thanks
mampir2 ke blok saya
http://www.apartmen-tmj.blogspot.com/
Kalau nak buat header atas tuh tulis nama sendiri dan gambar sendiri macam mane ye?
most welcome :))
Assalamualaikum . student kecik . . :D singgah sini . jumpa blog awak dalam google :) singgah sini and follow awak . terima kasih tau . beri tunjuk ajar untuk buat blog sendiri :)
assalamualaikum.. yey! thanks tau student kecik.. dah menjadi pun blogskin saye.. hihi
hye student kecik.salam.. dh lame cari tuto ni baru jumpe.baru ku taw cane nak godek cod.. btw ikut step tu blog jd x brape comey sbb salah url image kot. so, sy amk je la sample coding tu nk pinjam dulu la ye..hee.
popyoyo.blogspot.com
assalammualaikum...kenapa saya copy kod tu tak boleh?
Waalaikumsalam semua .. Alhamdulillah jadi si SK nie ajar. Hihi. Kalau nak copy ctrl+c yer dear . Maaf sy buat disable right click T---T
Assalam.. xreti la nak buat .. tlong buatkan ? haraf boleh tolong :) . terima kasih
Waalaikumsalam aliyq. Anis mmg nk tolong tp anis x bkk blog skrg nie. Hehe
Yey jadi !! Thanks awak !! :*
Erm, tak boleh nak copy erk?
ctrl+c to copy ye :)
mcm mne nk copy&paste ? sy tekan belah kiri x kluar pon tmpt yg nk tkn copy&paste?
URL background tu ape?
@Nur Syafiqah maaf anis buat disable right click. ctrl+c untuk copy ye :)
@Syafiqah URL background tu link utk background tu. klik background, right click dan copy image url. :)
kak :(( ape url header?? cannot find it lorhh :((
Adikkkkk, cmne nak letak gambar gerak2 kat side bar ? please ajar, sbb akk copy url dia tak jadi pun .hmmm :/
thanks ! menjadi !
@Nur Aqidah url header tu , right click pada header dn copy image url . :)
@Aeen Amalina sy tgok blog akak dh dapat buat kan ^__^
@nurhazimah Hanan ure welcome ! =)
Yay ! jdii jgakk kak ! thanx ye ;) jgan lpe singgah blog Aniss nk tggk hasilnyee~ http://inicaraaniss.blogspot.com
Menjadi lah :) Thanks yaa. Kalau sudi, singgah la ye. Trimas banyak-2 ya akak.
Okey alhamdulillah sama sama. InshaAllah saya singgah ^_^
saya guna kod nie ye? menjadi la...tp warna putih tu,lau nak wat warna lain tu boleh x?
@umi julia okey :) warna putih yg mana ye ? Yg background body ke apa ?
jadik tp saia mbek code versi yg bodo tu ye? hhhhe thanks genius !
aah.lau nk tukar came? saya follow awak.follow la saya balik,if can? hehehe
@jue lieya hehe okay ambillah. Sama sama. Saya akan follow back soon ! InshaAllah =)
Kak? Boleh tak saya ambil kod ni buat belajar? Atau copy basecode ni boleh tak?
@Tinarsih Hutami yess sureee :)
Akak. Lisa nak mintak izin nak buat sebagai basecode ye. Lisa dah letak creadit tu. thanks ea kak
@Lisa Seoby okeyhh sama sama lisa :)
Saya kurang faham sangat la pasal edit templates sendiri.. tolong ajar dengan lebih jelas lagi boleh x ? dan tolong ajarkan cara buat cursur name... please.
@Azzawa inshaAllah no prob. .Sy ajarkn dgn lebih trperinci. Kalau cursor nama tu ada d list tutorial just cari cursor. :)
Salam ...tq untuk totorial tu..saya akan cb u tuk blog baru saya,, saya da follow blog awk,, jom la follow blog lama saya dan tengok la nuby punya blog heheh,.hehe saya lah tu
Http://miyrass.blogspot.com
Tinggalkan jejak kt komen box ye..saya tunggu
asal susah nak copy nye punnn :3
Maaf anis dh xbuka blog ni pun rply guna fon.
Lau nk copy highlight smua + Ctrl+c (keyboard)
Akak nak Copy boleh nanti saya creditkan ^___^
Akak,saya nak minta email akak boleh?
@gadis bertudung oren Okay silakan cik adik manehh. Email : anismeow98@yahoo.com
salam dik, nak tnya url background tue yg mne satu ye?
@Nurdiana Mohamad Wassalam, url background tu ialah link bagi gmbar background, contohnya dekat background akak tkan right klik(mouse) lpstu 'Copy Image URL'
awaak !! terima kasihh banyak banyak yee buat tuto nihh , sayaa dah buat dan hasilnya amat memuaskan . thank you again . terima kasiihhhhhhh !!!!!!!!1
@Aisyah Mardiah sama sama aisyah : D Amboi excited nauu hihi
Tapi saya dah ikut semua step tu. Tak nak save dulu. Takut tak jadi.. Saya cuba preview. Dia memang suruh kita post at least 1 entry dulu ek? Sebab cuba preview, dia kata kena post at least 1 entry.. Thanks ajar :)
@Anonymous ye awakk.kena buat 1 post dulluuu
ok thx, dh jdi..
tq so much... sy copy paste je awak punya code cer tengok http://kedai-kit.blogspot.com testing je... mcmana nak buat tab page bar?
ok jika header warna pink polka dot, adakah keseluruhan page akan jd pink polka dot?? harap jawab segera ye... maceh
@Iezman Aries - untuk blogskin nk buat tab menu ada tutorial khas utk blogskin sndiri n sungguh2 tak ssuai nk guna tutor t.designer TT ada banyak di blog2
ok kalau header, dia tk beri kesan pun pada keseluruhan page.. Jd kalau header pink polkadot, background blog masih kekal background kita.. Yg memberi kesan tuh tgok pada kod body bg blog ^_~
Hi awakk , saya amk code yee , and creditkan untk awak
@shue suhaida huii awaa okey awaa
thank you very much...blog adik sangat membantu akak...rujukkan adik adalah untuk rekabentuk dan penerbitan web akak di kolej tok subjek multimedia.. tapi adik punya tuto ni pakai CSS CODE bukan HTML...btw akak perlu edit balik..dan tuto adik mudah tuk difaham..keep it up.. ;)
@Afiqah leman welcome kak, alhamdulillah. gudluck buat web boleh edit kasi lawa lagi. hee tenkiu =)
assalamualikum adik, akak ada masalah dengan blogskin akak, dah cari masalah tapi tak jumpa. biasalah, guna yang orang tapi xreti nak edit balik. harap adik dapat bantu akak <3
@Rara Amira waalaikumussalam, err maaf ya kak, anis dah jarang-2 aktif blog sekarang. maaf sangat sangat :(
terima kasih atas tuto yg mudah faham!
:)
saya guna ya...
terima ksaih!
@sofie adie sama sama :)
dearrr... saya ambil code awak ye . btw thank you so much . sangat mudah d faham! :)
yeayyy. akhirnya dapat jugak buat blogskin sendiri. thanks sis!
@Faeyzaallasa orait halal heee ! ur welcome
@janah khan yahuu alhamdulillah. sesama kasih sis =)
Kita kan..kan..suka la..
Tima kasih..
@Mad Malaysia sama sama :))
Kak, macam mana nak buat blog archieve mcm akak tu? boleh ajar tak? Ke akak dah pernah buat? Kalau dah nak link boleh?
Akhirnya.... TTvTT
Saya mencari2 tutorial seditail ini...
Arigato!! Kalau sudi singgah la ya- http://isyaht.blogspot.com
Dik , copy awa punya ni :)
hai thnx for ur tutorials. im using this okay. :)
Okayy semuaa :)
Post a Comment