Sunday, January 22, 2012

Tutorial : Edit Washed Denim Full.Part 1.



Assalammualaikum


Ha, bile dah lame tak update, macam ni lah rasenye, rase macam na sembang kekosong je, so aku cadang nak buat tutorial je, at least ade gak something useful aku buat kan, dari dok melanguk fikir pasal masa depan je, hehe, 
Jadi tutorial ape yang kita bincangkan hari ini, harap maaf aku nak jadi poyo sesikit hari ni, walaupun tenet lembab, and aku rasa kalau tenet lawan dengan siput, siput boleh menang, siapa boleh kalah dengan siput kan? 
Tutorial yang bakal aku buat nih, banyak orang dah buat, terlampau banyak sehingga tak terkire dengan jari jemari menyusun jari, okeng termenyanyi lak, tapi aku taw kebanyakan follower aku adelah newbies, i knewlah, sebab saya selalu singgah blog follower saye, saya tak sombong kan kan?
Tapi korang haruslah berhati hati dan banyakkan bersabar, sebab bile kite follow tuto, kite kene follow dari atas ke bawah kalau tak hasilnye akan berlainan, jadi please be more accurate and patient.So here we go, hari ni saya nak buat Tutorial : Edit Washed Denim Full.
Dulu aku pernah tutorial nih, tapi aku rase tutorial tu kurang membantu jadi aku bertindak dengan memadam tutorial tuh.Bebel banyak banyak tapi ape pun tak start lagi.:)

Tutorial : Edit Washed Denim Full.

ATTENTION : CODING KAT BAWAH NI SEMUENYE DARI BASIC WASHED DENIM YE, SO KALAU BERLAINAN DENGAN KORANG MAKSUDNYE, KORANG DAH EDIT.

1. TUKAR TEMPLATE #harus, kalau korang nak follow tuto aku.:)
Bagi penggune template lain, kalau korang teringin nak gune washed denim tapi tak taw camne nak tukar, so korang followlah step dibawah ye.
LogIn/ Design/ Edit HTML/
dekat bawah kotak coding tu ade link Select Layout Template, sila klik.Kalau tak taw, sile refer gambar dibawah.
klik yang berkalerbiru biruan tuh.

Dah klik? Okeyh die akan keluar satu page seperti di bawah, 

Nampak kan aku da list kan mane kene tekan dulu, mane kene tekan kemudian so korang ikut je, kalau korang nak pilih template lain pun boleh tapi tutorial aku ni washed denim, so pilihlah washed denim kalau nak follow tuto aku.:)
Selesai Save Template, korang klik balek Edit HTML , so dye akan keluar kotak code balek, so jom kite mulakan tutorial sebenar benarnye.

2. HILANGKAN NAVBAR # kalau korang nak gune tumblr button.
Taw tak navbar tu ape? Navbar tu adelah seperti dibawah, 



So mari kita hilangkan navbar tuh, carenye macam ni, 
search code <head>
lepas tuh paste code kat bawah ni dekat bawah code <head>
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
#navbar {
height:0px;
visibility:hidden;
display:none;
}
</style>
Settle? Mase aku buat tuto ni ade orang tanye, kalau navbar hilang nak follow gune ape? Remove navbar ni pilihan memasing, kalau yang remove dye pakai ala ala tumblr button tuh, macam mane nak buat coding ala ala tumblr tuh, bentar.


3. BUAT BUTTON ALA ALA TUMBLR #kalau korang remove navbar.

Login | Design | Add a Gadget | HTML/ Javasript


Pacte code kat bawah ,
<div style="position: fixed; top: 5px; right: 100px;"><a class="linkopacity" href="http://www.blogger.com/follow-blog.g?blogID=BLOG ID KORANG" target="_blank" rel="nofollow" title="Follow NH !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img src="URL IMAGE FOLLOW BUTTON"/> <div style="display:scroll; position:fixed; top:5px; right:2px;"><a class="linkopacity" href="http://blogger.com/home" target="_blank" rel="nofollow" title="uR Dashboard !" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"> <img src="URL IMAGE DASHBOARD BUTTON"/></a></div></a></div>
BLOG ID KORANG : gantikan dengan blog id korang, kalau tataw, boleh study kat > sini <
URL IMAGE FOLLOW BUTTON : gantikan dengn url korang, aku ade buat freestuffs > here <
URL IMAGE DASHBOARD BUTTON : gantikan dengan url korang , aku ade buat freestuffs > here <



4. HILANGKAN WARNA DEKAT HEADER
Kalau template denim memang jelaslah ade warne biru kat bahagian header kan, kalau washed denim tak jelas selagi kite tak letak background image, so care nak hilangkan warne biru or putih kat header tuh cmni, 

search code /* Variable definitions
bawah code /* Variable definitions, ade banyak perenggan kan? cari yang dimulakan dengan code  <Variable name="headerBgColor" description="Page Header Background Color", dah jumpe, full perenggan tuh yang ni 
<Variable name="headerBgColor" description="Page Header Background Color"
           type="color" default="#ffffff" value="#ffffff">
 <Variable name="headerTextColor" description="Page Header Text Color"
           type="color" default="#333333" value="#333333"> 
 <Variable name="headerCornersColor" description="Page Header Corners Color"
           type="color" default="#ffffff" value="#ffffff">
so korang delete je code kat atas nih, so nanti header korang akan jadi okeyh.

5.LETAK BACKGROUND BLOG
Search code body {, paste kan code dekat bawah ni kat bawah body{

Background-image:url(url image);
url image tuh korang gantikan lah dengan background yang korang nak, kalau korang cari kat photobucket, copy direct link ye, kalau nak senang, amek je kat freestuffs aku, > here <

6. TUKAR WARNA LINK
Berdasarkan pengalaman aku, aku rase tutorial tukar warna link yang aku buat dulu terbukti berkesan dan difahami, so korang study kat sini > here <, dah faham? Bagi yang malas nak buka tabs bebanyak meh sini aku simplify kan, 

search code a : link {, kat bawah tu ade code ni kan color: $linkColor;  bahagian $linkColor korang gantikan dengan code kaler, boleh ambil kat sini, > here <.Bile korang view ade underline kan bawah link, so korang letak code text-decoration:none;, kat bawah color: $linkColor;

begitu juga dengan a:visited {a:visited { ni maksudnye bile kite masuk sesebuah blog, then kite tekan ape ape link, next time kite datang blog dye, warna yang akan keluar ialah warna a:visited {
, bukan lagi warna a : link {, ayat mudah : a : link { kite tak pernah tekan link tuh, a:visited { kite pernah tekan link tuh, paham?





7. RESIZE SIZE CONTENT, POST DAN SIDEBAR WRAPPER.
info : size content merangkumi size post dan sidebar, jadi bile resize, pastikan size post dan sidebar apabile ditambah berada dalam lingkungan size content.Faham?

 Resize content wrapper.
Content wrapper ni kotak yang melitupi bahagian post dan sidebar.Search code #content-wrapper { , kat bawah tuh ade code width : 760px kan, 760px tu korang gantikanlah dengan size yang korang suke, kalau aku 900, lagi besar lagi puas.:)

Resize Post
search #main-wrapper {, kat bawah tu ade code width: 468px; kan, 468px tu korang tukarlah dengan size yang korang nak, kalau aku antara 500-600px, lagi besar lagi best.:)

Resize sidebar 
search #sidebar-wrapper {, kat bawah tu ade code width: 240px; kan? Korang tukarlah 240px tu ke size yang korang nak, kalau aku 280px, lagi besar lagi syok.:)
Assumelah korang amek 600 px untuk post dan 280 px untuk sidebar, bile ditambah sizenye jadi 880px kan? So size tu berada dalam lingkungkan content, 20px yang terlebih tu akan jadi pemisah antara sidebar dan post.



8. BUAT BORDER UNTUK CONTENT

Dekat bawah code #content-wrapper {, ade code  border-top: 0; ni kan? Delete ye, tolong jangan tanye kenape.:p, lepas tuh ade code border: 1px solid $borderColor; kan? Code $borderColor tu korang gantikan dengan code kaler, 1px tu ketebalan border tuh, solid lak jenis border, solid tu boleh tukar, > here <, kalau nak designkan border, korang boleh study kat > sini <, kalau korang nak yang design A, korang copy code design border A and pastekan kat bawah code border: 1px solid $borderColor;, then viewlah.
Jadi codenye jadi macam ni, setelah diedit.
 border: 2px solid #708090;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
Faham? Kalau tak paham tanye ye.

9. CUSTOMIZE POST TITLE DAN SIDEBAR TITLE.


Aku harap korang bersabar ye, memang banyak step.:)
untuk post title
search code .post-title {, pastekan code kat bawah ni kat bawah .post-title {
Background-image:url(URL IMAGE);   , URL IMAGE tu korang gantikan la dengan url korang.
Nanti bile korang view , bahagian post title tuh nampak sempit kan, sila padam code padding: 0; dan gantikan dengan   padding: 10px 10px 10px 10px;
Kalau original templates sebelum post title diedit ade code ni kan ,  font-weight: bold;, code tu memang memburukkan, korang padam je, lepas size post title dalam bentuk peratus kan? Korang tukar ke bentuk px, contohnye font-size: 125%;, 125% tu korang tukar dengan 13px, try in errorlah ye, takkan semue aku nak suapkan? :p

untuk sidebar
untuk bahagian sidebar korang search code .sidebar h2 {, lepas tuh paste kan code kat bawah untuk background dye,

Background-image:url(URL IMAGE); , kalau korang nak letak border lak, korang letak code border: 2px dashed #2F4F4F;  , nak designkan border tuh boleh g sini > here <, korang copy code border tuh then pastekan kat bawah code border: 2px dashed #2F4F4F; ,
Nanti bile dah selesai buat background bile korang preview, ia akan jadi macam kat bawah kan?



cube korang tengok bahagian atas kotak followers tuh rapat kan?
Korang search code content-wrapper { lepas tuh paste code kat bawah ni kat bawah code margin,   padding: 10px 10px 10px 10px; , then padam code padding: 0 0 15px; so ia akan jadi macam kat bawah;

Nampak kan perubahan dye? Tak usahlah aku nak terangkan, 

10. CUSTOMIZE FONT AND SIZE.


so cute.Jangan pening pening nak buat tuto nih
Step 10 will be the last fer Part 1 okey? Aku tak nak kasi korang pening pening, so Part 2 coming soon okeyh.
Original template yang belum diedit menggunakan font Times New Roman kan? So korang search code .post {,  then cube korang tengok kat bawha code .post { ade code padding-bottom: 1.5em; kan? Pastekan code kat bawah ni kat bawah code padding-bottom: 1.5em;

font-family: Trebuchet MS;
font-size: 12px;
Trebuchet MS tuh jenis font, korang boleh tukar, 12px tuh size font pun korang boleh tukar.

So the end Tutorial : Edit Washed Denim Full.Part 1. Nanti aku akan buat Part 2, so tunggu taw, insyaallah in a few days aku buat eh.:), untuk pengetahuan korang sepanjang aku buat tutorial ni, aku buat design blog aku yang satu lagi, so tutorial ini terbukti berkesan pada aku.:)
http://thelullubaby.blogspot.com/
Okeh ? Itulah hasilnye ye kawan kawan.:)

4 comments:

Athir Athirah said...

salam...sy dh ikut dh cara dlm ni..tp xboleh...sy xtau mcm mne nk tukr ke templete denim...sbb sy baru buat blog dan new outlook untuk dashboard,,harap beri tunjuk ajar...

Cik Siti said...

sy pun tatau macamnana nak tukar ke WASHED DENIM TEMPLATE ni..huhu..:-(

Marha Safwah Amni said...

trima kasih daun keladi
!!!!

Mojat Cerewet said...

cmne nak tukar ke washed denim eh .. template dah berubah skrg ni .. ?? boleh bgtau saya kat fb https://www.facebook.com/yellow.mania.cerewet94?ref=tn_tnmn