2015 TuToRiaL Background For PosT TitLe

Hi Again.. Tutorial seterusnya adalah cara nak letak background pada tajuk post dgn menggunakan blogger template designer.. Check it out..

Sebelum:

Selepas:

1. Memula sekali pastikan korg da ada design utk diletakkan sebagai background pada posting title tu. Macam fy, fy design sendiri guna adobe photoshop dan save guna format png. Lepas tu upload dekat photobucket untuk dapatkan link.

2. Masukkan code untuk background dlm blogger template designer. Ikot link kat bawah:
 
    Dashboard -> Template -> Customize -> Advanced -> Add CSS -> tambahkan code dekat bawah ni dalam kotak Add CSS tu.

_______________________________________________________________________________

h3.post-title {
background: url(your photobucket URL); /*Masukkan link dalam step 1 pd perkataan merah*/
background-position: top center; /*kedudukan background adalah di tgh, atas*/
background-repeat: no-repeat; /*setkan background untuk x repeat if tajuk terlalu panjg*/
height: 45px;   /*tinggi background sepatutnye sama dgn format design gambar*/
text-align: left; /*tulisan pd tajuk boleh setkan - left, right atau center*/
padding-left: 27px;  /*jarak antara perkataan dgn border - left atau right*/
padding-top: 14px; /*jarak antara perkataan dgn border - top atau bottom*/
}
_______________________________________________________________________________
P/s: perkataan y di highlight dgn warna biru ni boleh korg delete. Just nak explain maksud code tu. X effect pada result nanti.

Lepas tu boleh boleh save dgn klik butan apply to blog (Atas kiri warna orange)
Sekian terima kasih 

2015 TuToRiaL Border For SiDeBaR WidGeT

Bersungguh-sungguh sgt plak fy malam ni kan..eh da pg da kot.. Lantak..Mari kita teruskan dgn tutorial border utk sidebar.

Sebelum:

Selepas:

Sila ikut step di bawah

  1. Dashboard -> Template -> Customize -> Advanced -> Add CSS -> pastekn dlm kotak tu code             dekat bawah ni (jgn delete/kacau code2 y da sedia ada)

_____________________________________________________________________________

.sidebar .widget {
border-bottom: 1.5px dashed #ed10a7;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

_____________________________________________________________________________

2. Untuk tulisan Orange:

    

    kalau nak border untuk setiap sisi boleh la tambah coding tu. Contoh

   

  

     a) border-bottom = border bawah

     b) border-left = border kiri

     c) border-right = border kanan

     d) border-top = border atas

3. Untuk tulisan Hijau:

   Item ni adalah untuk ketebalan garisan tu. So terpulanglah nak letak berapa pon. Cuba main2 dulu        dari 0.5px-8px. then nilaikan la mana y korg rasa cantik. Pixel kecil bermakna saiz garisan makin        kecil, kalau pixel besar pulak nnt garisan makin tebal.

4. Untuk tulisan Biru

   Ada beberapa jenis garisan y korg boleh pilih. Fy tunjuk contoh separuh je, balancenye korg cubela      explore sendiri ye..hehe..(double, inset and outset)

Dashed

Dotted

Groove

Ridge

5. Lastly untuk tulisan warna purple: Korang kene letak code warna garisan y korg nak guna.       Boleh refer sini

Nanti da siap ikot step kat atas ni, boleh la terus save dengan menekan butan orange kat atas kanan tu. Thats all for today. Selamat tido 

2015 TuToRiaL BackGrounD FoR SiDeBaR TiTLe

Da hampir 2 tahun x update blog ni. Bila tiba2 datang mood berblogging semula, maka bykla benda kene ubah. Template y da 3,4 tahun pakai ni mmg nak kene tukar la kn. Y jd leceh bila byk benda blogger da update termasukla utk edit template. So fy delete je template lama dan guna je template dr platform blogger iaitu blogger template designer.

Tp biasala, amik y free ni memang dapat template basic jela. Nak WOW kan memang kene edit sendiri. Mula2 nak edit tu memang rasa nak nangis sbb xjmpe button "Expand Template Widget". Bahana blogger update and da lama x bukak blog. Da ketinggalan zaman. Korek punye korek berjaya jgk edit. So 1st post utk 2015 ni adalah utk edit title pd sidebar. Contoh:


Sebelum:

Selepas:

Nampak kan beze dia? so camni caranya. Xpyh susah2 nak study coding bagai. Ikot je step kat bawah ni.

1. Dashboard -> Template -> Customize -> Advanced -> Add CSS -> pastekn dlm kotak tu code dekat bawah ni.

_______________________________________________________________________________

.sidebar h2 {

background-image:url(your photobucket URL); 

background-position: top center; 

background-repeat: no-repeat; 

height: 45px;  

text-align: center;  

text-transform: sentence case; 

padding-top: 8px 

}

_______________________________________________________________________________


2. utk tulisan warna merah
    
      a) cari background y korang suka. kalau edit sendiri lg puas hati sbb senang nak dpt warna dan               design y minat..knkn???
      b) save picture & upload. cth:: save dekat photobucket
      c) amik code dekat image y korg upload td. Cth spt di bawah.

3. utk tulisan warna purple - ada beberapa pilihan sebenarnye utk text case, boleh pilih ikut cita rasa         masing2 nak tulisan besar ke, kecik ke, campur..

     a) sentence case



 
       b) lowercase

 

 
       c)  uppercase

 


4. Untuk tulisan dan saiz, korang kene godek2 dekat sini.

     ----> Dashboard -> Template -> Customize -> Advanced -> Gadgets


5. Da puas hati boleh save dgn klik butan apply to blog (Atas kiri warna orange)


Itu saja..Sonangkn? Thanks sbb sudi baca.

TuToRiaL LaBeLs uTk SeTiaP eNTrY

a. Dashboard -> Edit Post -> sila ikut step di bawah

1. pergi ke edit post

2. click pada post y mahu dilabel

3. klik Label Action
4. pilih New Label

5. Tuliskan label y anda rasa sesuai dengan post
6. ok & preview blog anda

b. Dashboard -> Design -> Add a Gadget -> Labels

1. klik butang + & save
2. view blog anda

3. klik pada perkataan tutorial dan window baru akan di paparkan

4. Lepas tu bolehla tambah labels ikot keperluan korg..sukati :)

TuToRiaL BeSaRkaN iMeJ PaDa PosT

aritu fy ada jmpe satu tutor cara nak besarkan imej dekat post bila hover lalu dekat imej tu..so, fy pon ikot je tutor tu and walla..jadi..heee..but the beberapa lepas, ada org minta fy ajar cara nk besar kan imej tu..fy mmg xingt fy amik kat blog mana, so fy xdpt nak bg kredit..sorry n thanx utk tutor tu..kat bawah ni fy wat tutor pendek cara utk besarkn imej tu..

1. Dashboard -> Design -> edit HTML-> klik expand widget

2. taip control f dan search perkataan ni <head>

3. then paste kn coding ni kat bawah <head>

<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
</style>

4. save n publish

DONE! enjoy it :)

TuToRiaL CuTe CoMMenT BoX

beberapa hari lepas fy ada wat tutorial pasal post entry background.. lepas tu ada org request fy untuk buat kotak komen macam y fy letak kat atas ni..nak masukkan icon cute2 gitu..nak tau sape y request..? hehehe..

sila ikut step di bawah satu persatu okies?

     1.  Sila download full template sbg back up
     2.  Dashboard -> Layout -> edit HTML -> tick Expand Widget Template
     3.  Cari code di bawah ini ( Ctrl f )

]]></b:skin>

     4.  Kemudian, copy code di bawah ni dan sila pastekan sebelum code td (3.)

#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#ed004d !important;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #ed004d;
}
#comments-block .comment-body{
margin: 0;
font-size: 12px;
border-left: 1px solid #ed004d;
border-right: 1px solid #ed004d;
margin-top: -5px; /*position*/
padding: 5px;
background:url(sila isi url icon)no-repeat top left;
}
#comments-block .comment-footer{
margin:0 ;
font-size: 13px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px solid #ed004d;
border-right: 1px solid #ed004d;
border-bottom: 1px solid #ed004d;
-moz-border-radius-
bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#ed004d !important;
}

     5.  untuk tukar warna tulisan cari code ni and tukar ikot kesukaan masing2

 #ffffff

     6. untuk tukar warna border cari code ni plak

#ed004d

     7.  jgn lupa paste url icon korang dekat sini (semak coding dekat 4. )

background:url(sila isi url icon)no-repeat top left;

     8.  kemudian save la ye..tp xsiap lagi..pergi Setting -> Comments
     9.  tick Embedded below post untuk Comment Form Placement.

     
 
     10.  untuk mencari icon2 y comel boleh cari kat sini -> glitter-graphics ataupun myniceprofile
     11.  untuk mencari colour code boleh tgk sini -> colour code

     12.  itu sahaja..all the best ;)

TuToRiaL PosT TiTLe BackGrounD

nak xtukar post title dari yang ni

kepada yang ni?


kalau nak, bolehla cuba tutorial dekat bawah ni.. ;)

a) Cara Pertama:

1. Dashboard-> Design-> Edit Html-> tick expand widget template
   
2. Search .post h3 { ataupun h3.post-title {
3. Kalau dua2 kod ni xjd, boleh paste kod di bawah ini kat bawah h4 }
   
4. Copy and paste code ni di bawah .post h3 { ataupun dibawah h4 }

border:0px dashed #cc99cc; text-align: center; margin:.5em 0 .5em; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.2em; background:url(URL BACKGROUND); color:$titlecolor; }

     5. Bagi sesiapa yang mencari kod ini-> h3.post-title {
         pastekan kod di bawah ni, dekat bawah kod td

border: 3px solid #C0C0C0; background: url(URL BACKGROUND);

b) Cara kedua:

1. Dashboard-> Design-> Edit Html-> tick expand widget template
   
2. Search .post h3 a, .post h3
3. korang akan jumpe coding macam kat bawah ni
   

.post h3 a, .post h3 a:visited, .post h3 strong {

display:block; text-decoration:none;

color: $titlecolor;

background-color: #ffffff; }

   4. tukar

background-color: #ffffff;

      kepada

background: url(URL BACKGROUND);

     untuk ubah suai ketinggian background supaya bersesuaian dengan saiz tulisan, korang kene buat macam ni.

      5. search coding dekat bawah ni

} .post-title { margin:.2em 0 .25em; padding-bottom: 15px; font: $title; line-height:1.4em; color:$titlecolor; text-align: center;

6. dekat line height tu, korang pandai2 la setting berapa y korg nak supaya muat2 dgn tulisan..

setiap blog mempunyai coding yang berlainan..kene rajin la study coding blog masing2..selamat mencuba ye.. :)

TuToRiaL SeMaK TaRikH LuPuT DoMaiN

ingat lesen memandu je ke ada tarikh luput? domain pon adala..fy sendiri xpernah ingat bila fy beli domain..da tentu2 la tarikh luput dia fy lagi xingat..hehehe..biasanya domain kene renew every year..ada kot y beli domain 2 thun punye..i xmampu la nak beli domain mahal2..hosting apetah lagi..sebelum fy merapu dgn lebih panjang, jom ushar cara dia..

1. klik sini -> http://www.whois.com/

2. korang akan nmpk page mcm y kat atas ni.

3. isikan nama domain korg mcm kat atas ni. then klik search.

4. perasan x kat bawah tu kuar satu box baru? pegi dekat url blog korg dan klik whois.

5. taip semula security key y diaorg bg tu..

6. tara..da tau da tarikh luput blog..

senang je kn? byk lagi kot cara nak cek tarikh luput domain..ini adalah salah satu darinya..hehe.. fy pon baru belajar..tgk2 da nk expired da..ada lebih krg 11 hari je lg..so lepas ni, domain hunting..chow..

TuToRiaL LisT EnTry

sebenarnye tutorial ni da lama seorang teman blogger minta..sian dia, beria-ria minta fy tolong ajarkan..siap add fy dekat ym and fb lagi..tp jarang sgt kitaorg on9 pada masa y sama..bila teronline sama2, ada je halangan..untuk memudahkan dia dan teman-teman blogger y laen, fy sediakan tutorial list entry ni..cth dia ada dekat bawah ni..

1. Dari Tab Menu = Klik Tutorial

2. Tutorial Page = List Tutorial

STEP 1: mula2 kene buat page baru..macam di atas, Page Tutorial..

Dashboard -> Edit Posts -> Edit Pages -> New Page


Page Title: cth "Tutorial"

tulis tajuk entry y korang nak letak dalam list.

view entry y nak dibuat list tu and copy url dia mcm kat atas.
pastikan entry tersebut telah dipublish..
kalau x macam mana nk dapat url dia kn?

pergi balik dekat page baru dan highlighkn tajuk entry y kite buat td..
lepas tu terus klik link mcm pic kat atas ni..

paste url td dan klik ok

lepas tu korang bleh la adjust kaler, size etc ikot kesukaan korang.

lastly, klik PUBLISH..

kalau nak tambah link, ikot je step ni dr mula..xsusah pon..kn? itu sahaja tutorial kita pada malam ini..segala soalan dan teka-teki sila komen ye..sekian terima kasih..have fun blogging allz..

TuToRiaL uNTuK BuaT LiNk PaDa TaB MeNu

WARNING: TUTORIAL INI ADALAH KESINAMBUNGAN DARI

TUTORIAL TAB MENU..

sila klik untuk ke tutorial tab menu

ingat tak lagi dengan tutorial tab menu y fy wat tak lama dulu? dalam tutorial 2 fy ada bgtau kene gune link pada labels kn? tapi mungkin salah fy sebab xbgtau secara details cara nak cari link 2.. ada beberapa cara nak dapatkan link 2..so fy harap semua boleh ikot tutorial ni..

A) Buat Labels Pada Setiap Entry Mengikut Kategori

a. Dashboard -> Edit Post -> sila ikut step di bawah

1. pergi ke edit post
2. click pada post y mahu di label

3. klik Label Action
4. pilih New Label

5. Tuliskan label y anda rasa sesuai dengan post
6. ok & preview blog anda

b. Dashboard -> Design -> Add a Gadget -> Labels

1. klik butang + & save
2. view blog anda

3. klik pada perkataan tutorial dan window baru akan di paparkan

4. dah dapat link untuk menu bar tutorial.. (^_^)

B. Page Baru Pada Blog (ex dr blog fy : Blog List & Banner)

a. Dashboard -> Edit Posts

1. kalau perasan, dekat sebelah Edit Posts ada Edit Pages, klik je..
2. kemudian klik pulak NEW PAGE

3. nanti korang akan nampak form ni.
4. dekat page title 2 boleh la letak "BANNER" atau ape2 je y korang suka.
5. da siap boleh la PUBLISH PAGE.

6. pilih No gadget
7. Save & Publish
8. klik semula Edit Pages
9. then View Page

10. highlight url and dapatla link kn? (^_^)

sekian saje tutorial panjang fy pada malam ni..if ada kekeliruan jangan malu, jangan segan, adukan aje pada kotak komen nnt fy reply..thnx =]