Tutorial : Mencantikkan Comment Box Part 2

Preview : 

Tuto ini boleh digunakan untuk Simple dan Denim Template :)
Kalau nak guna tuto ini mesti kena ubah setting comment ke pop up window dulu yer :D

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Cari kod ini : 

Denim Template

/* Comments

Simple Template 

#comments .comment-author {

3. Copy code di bawah dan gantikan dengan semua code yang ada di bawah code yang dicari :

#comments h4{
margin:1em 3em; font-weight:bold;
line-height:1.4em; color:#000
}
#comments-block{
margin-left:1.5em; line-height:1.6em; background:transparent;
color:black; padding:1em;
border:0px solid #fff
}
#comments-block .comment-author{
margin:.5em 0
}
#comments-block .comment-body{
margin:.25em 0 0;
background:#fff
}
#comments-block .comment-footer{
margin:-.10em 0 1em;
line-height: 0.1em;font-size:11px;
}
#comments-block .comment-body p{
margin:0 0 .60em; padding:5px 5px 5px 5px; background:url(http://i1125.photobucket.com/albums/l597/cotcet96/20070320_313973.gif) repeat top left;
-moz-border-radius:20px 20px / 20px 20px;
border-radius:5px 5px / 5px 5px; border:2px solid #FE2E64;
}
.deleted-comment{
font-style:underlined;
color:transparent
}
.feed-links{
clear:both;
line-height:2.5em
}
#blog-pager-newer-link{
float:left
}
#blog-pager-older-link{
float:right
}
#blog-pager{
text-align:center
}

 Edit :

ABC : Url background

ABC : warna border

*kod warna cari di sini

4. Preview... Kalau tak ada apa-apa .. 

5. tekan SAVE ! :)

good luck ! :D

Header Transparent Gimp 2

 Hmm , actually bila aku tanya mana nak buat header transparent yang macam ini mesti abang , adik akak blogger kan cakap download photoshop CS3 dulu...  sebenarnya tak ada photoshop pun boleh buat transparent juga :)  yang penting korunk kena download software ini ... free jek ! download GIMP

Jadi ada siapa-siapa nak tahu macam mana .. mari ikut cara ini :

1. cari dan click File > New (adjust height and width [.saiz korunk buatlah 900 weight 300 height ... depends on korunk punya saiz blog lah yer] .)

2. Then Right Click Mouse> Layer pilih pula  Transpency > Color To Alpha

3.Click OK..

Berubah jadi ultraman tak ??? Ehhh salah-salah , means background putih tadi dah jadi kotak-kotak macam ni :

Bagus kalau berjaya , yang masih tak berjaya.. jangan teruskan step seterusnya , cuba dan cuba lagi.. ok ? :)

Next step , Layer yang dah transparent tadi biarkan ajee...

4. Now , Click File > Open > Choose your favorite picture..

5. Tekan Selection Tool .. Crop section gambar yang perlu sahaja..

6. Done Cropping ! Right Click mouse awak tuh > Edit > Cut !

7. Back to Transparent layout yang awak dah buat tadi.. Then Right Click Mouse > Edit > Paste !

Ada muncul tak crop picture yang korunk dah crop tadi ?

After that ,awak membebel lah apa yang awak nak tulis dalam header awak tuh. Pergi jer dekat tool yang ada huruf A besar untuk tulis-tulis ... :D Dah puas edit segalanya... Cara nak save image senang saja...
8. Go to File > Choose Export to..
9. Sila rujuk gambar di bawah , pergi bahagian yang dikotakkan merah , Select File Type > Choose PNG images ! Click Export !

10. haa ! Jadilah header transparent macam nie ... comel kan... hehehehe :) 

http://i.imgur.com/mmvL9oJ.png

Width : 350px , Heigth : 900px

Nak ambil header di atas nie ? ? Silakan , tapi bagitahu Nurrul taw.. :D Amacam ? Dah berjaya buat header Transparent belum ? ? Harap tutorial Ini sangat membantu... Komen kalau jadi , tak jadi pun j=bagitahu.. biar aku check apa yang silap...Happy Blogging ! :D

Alert Message Say 'Hi'

tuto ini untuk siapa-siapa yang nak buat smile warm dengan blogwalking :) apa benda tuh ? ...

senang cerita kata-kata mukadimah sebelum baca entry kOrunk lah kepada semua readers...

1. Dashboard --> Layout --> Add a Gadget --> Html JavaScript

copy code bawah ini (crtl + C) :

2. Paste coding dibawah dalam gadget tuh..

<script type="text/javascript">

alert(' Masukan ayat korunk ')

</script>

<noscript>Enable javascript in your browser to view an important message.</noscript>

EDIT :

ABC : Ayat yang Mesra ! :)

3. Save and Preview :D

Mudah jer kan ? GOOD LUCK !

Tutorial : Scroll Bloglist

Scroll bloglist sama function dengan blog archive untuk buat blog korunk nampak kemas...tak der lah serabut bila ada blogwalker datang bertandang...tak jemu-jemu dia nak kemari lagi... hehehe .. contoh scroll bloglist aku nie....

1.Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Cari code ini :

<div class=’widget-content’>

PERHATIAN ! ! ! !

Sebelum cari code di atas ... cuba korunk cari nama tajuk yang korunk tulis dekat bloglist korunk tuh dulu ea....’

dah jumpa baru korunk cari code yang di atas... macam gambar di bawah ini.. petak yang pertama title blog korunk yang kedua petak.. copy coding bawah nieh...

3. gantikan code dibawah ini dekat tempat yang korunk cari code tadi.. faham kan ?

<div class='widget-content' style='overflow:auto; height:300px'>

EDIT :

ABC : panjang yang korunk mahu..

4. Preview dulu. kalau tak ada error..

5. Save !

Tutorial : Assalamualaikum Di Setiap Post

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Cari code

<data:post.body/>

3. Dan code ini

<div class='post-body entry-content'

4.  Kalau dah jumpa copy code ini pula

<div align='center'><a href='' target='_blank'><img src='URL IMAGE' style='border: 0 !important; background: transparent;'/></a></div>

EDIT :
ABC : gambar kome

5. Copy paste antara <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'> dan  <data:post.body/> ala .. kod-kod dia dekat-dekat saja ..

click untuk tumbesaran :)

6. Preview dan save ! :))

NAK ? ? Ambil lah dekat bawah ini :))

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT7l_O6-HgzHZ2YPk_GDhyphenhyphen2oa35TROnKLxeU3DKIV6NW4Y1zLNjzjRvUji_LFSt_h-SfVcc0hzpxKpUA7iE_kBZ5TJW8Lc6ucOzncCghqF55lN-KJSbeNSCy6ZBPyqCOm4v2aKkFnp3lKb/s1600/1.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2AnabsSAmVYmqEUuDNKdM1EF0mbu7A62pix4YH2aAdVfSuAqZQeh8wDmvJAQenUSN2vr614CjkJyFqBGygcUaCuoPLAYcM7BuQZvwk3BkGWG1k4akfGZWmRXJ6bUIznBCEgcQQRHivch1/s1600/freebieseeda.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjZ00GIwuJ05C1O2uJIc-POYvYUoReokqoopiCTg5DdnrTVq5M9uLSCXVDNYE9lmGbLhNMP4DF_moTqrF01UMnR94xaBGoHWk4pvztC5srbdajDsNfZKN2esyhAELNrnIflVKJ68kr2GE/s1600/asalamualaikum%25281%2529.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc1Bdy1GlnCXYVPBIdUgrvOlQ_AJ2Uya7uUSOs440pj8TAH18kmsuR2Lp7dhMF9Sq31EFbp7bxXDHZ7NMNrUxK16TH5-07QY-j2jAkJMT8lX7EB_eh2PY36z96lvTWApx6Kunbu1KqT_I/s320/hello+guys+%25281%2529.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPF4K8U0eQrDMPrZ3H_KmBPap07DMwtBxe49kr0YNxsJPH994zTdLMkzDbclPKPRwssSh7pdkCJLAPolUlcCRA8S51eZ5NcWQPlkEwnrGOi6T3MseKJdIP8UoHWMxYfSY7QY1MQ7wBvNw/s320/welcome+here+%25281%2529.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2g8nJp7v33MeVSa6m7BTE2pqmxy0NFqkCT3SWV5b8HReEPi_ezHkBXsWuc14eDtgNprfIWp84BXsjgOqb2zV2K1FJvF8SMfMPH-ORkUj9uPlp3hCuOMqLhNVqaP3ueAYar9J3nWLf6k0/s320/with+smile+%25281%2529.png

nak amik lah letak dekat korunk punya..

Tutorial : Letak ayat di Bawah Post

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Korunk Tekan Ctrl + F dan cari kod ini

<data:post.body/>

3. Kalo sudah jumpa , korunk copy kod kat bawah ni , and paste di bawah kod<data:post.body/> td :)

<hr/><center>AYAT KORUNK</center><hr/>

4. Preview dulu oke :)

5. If dh jadi , SAVE k ^_^

Tutorial : Menukar Home , Older + Newer Post kepada Icon Yang Comel

Hey dear ! Nak tahu macam mana nak.. Tukarkan Home, Older + Newer Post kepada Icon Comel?

Oke ! boleh teach korunk skunk jgk .! hehe~

FOKUS taww ?

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Then , tekan Ctrl + F and cari perkataan :

<data:newerPageTitle/>

3. Tukarkan kod diatas ni dengan kod ni :

<img src="http://i880.photobucket.com/albums/ac7/justgee89/FAVICON/icon/3289d358.gif"/>

 * Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :)

4. Then , Tekan Ctrl + F lagi sekali dan cari perkataan :

<data:olderPageTitle/>

5. Gantikan kod di atas dengan :

<img src='http://i880.photobucket.com/albums/ac7/justgee89/FAVICON/icon/68a6fe47.gif'/>

* Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :) 

6. Last sekali , untuk buttom home pulak , korang cari

:expr:href='data:blog.homepageUrl'><data:homeMsg/>

7. Gantikan kod yang berwarna pink tu dengan kod di bawah :

<img src='http://i561.photobucket.com/albums/ss52/angelicxmelody/Web%20materials/home1.png'/>

*Warna merah tu , korang boleh tukar kan dengan korang punya URL Gambar ok :)

8. If sudah siap , korang try preview dulu taw. kot2 lah tak jadi ke , susah pulak kang .! HAHA!

  If dah belek and menjadi , terus je SAVE :)

Tutorial : Hilangkan "Subscribe to : Posts (Atom)"

Korang tahu ke , apa itu Subscribe to : Posts  (Atom) ??Tak tahu ? Cuba korang intai blog korang , kat bahagian bawah post tuh , ada tak tulis.. Subscribe to : Posts  (Atom) ?

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. Tekan Ctrl + F , and korang cari kod kat bawah ni :

<!-- feed links -->

3. And automatik dia akan terhighlight kan ? Then , korang tukarkan kod yang ini :

<!-- feed links
    <b:include name='feedLinks'/>

kepada kod yang ini

<!-- feed links
    <b:include name='feedLinks'/>   -->

4. Jap ! Jangan Save lagi ! Click Preview dulu..

5. Kalau menjadi , terus je SAVE ok ?:)

Tutorial : Buang Images Border

ada border . nampak burokk oh ;)

Oke , now ,  nak ajarkan oke .?

Simple Template

1. Template --> Edit Html --> Tick Box Code --> CRTL+F

2. korang cari salah satu kod di bawah ini

.post-body img, .post-body .tr-caption-container,

3. After korang jumpa kod tuh , korang akan nampak kod yang ada kat bawah ni juga.

.BlogList .item-thumbnail img {
padding: $(image.border.small.size);
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);

Denim Template
Cari Kod

.post img, table.tr-caption-container {

Then bila dah jumpa , ala-ala macam nie kodnya :

  padding: 4px;
  border:1px solid $borderColor;
}

4. No yang dimerahkan tuh , korang tukarkan dengan no 0 taw ...

5. Lepas dah siap  , SAVE .and lihat hasilnya yea! :)

Tutorial : Download Front

1. korang masuk dafont.com.. korang pilih la nak font ape k.. banyak font2 gojes kat sane tu.. scha slalu dowload kat sini je la..

2. bile korang dah masuk, banyak lah kan font cantik2 kat situ.. lepas tu korang download je lah.. mesti nampak punyer, dy tulis 'DOWNLOAD' tu..

3. Then, bile dah dowload.. korang EXTRACT file tu.. korang COPY macam kat  bawah ni k :

4. dah Copy? kalau dah, korang cari macam kat bawah ni.. then ,

 

korang search CONTROL PANEL.. then dia akan kuar macam ni pulak :

5. bila dah dapat font, dy mesti akan keluar macam ni pulak :

 

6. DONE ! dah siap pon. senang je kan? bila korang dah paste kat dalam tu, boleh la nak guna dalam photoscape korang ke.. kat mane2 je lahh..

 Font Comel ada di ruangan freebies ya :)

Tutorial : Cara buat Link Pages

Link Pages ? Senang cerita yang macam blogger lain buat satu page khas untuk Cerita pasal diri sendiri , Kongsi Info/Tips.. Kemudian diowg linkkan pages tersebut di navigation tab yang comel-comel.. :)

Beza Link Post Entry dan Link Page Entry
Post Entry - http://youismysoul.blogspot.com/2010/08/my-pets-mikus-dan-awan.html
Page Entry - http://youismysoul.blogspot.com/p/biography-of-owner.html .

Dah faham apa bezanya post dengan pages , so jom dapatkan link pages korunk :
1. Pergi ke Pages > Click New Pages > Choose Blank page

2. Terpaparlah page entry seakan post entry , tapi bezanya page akan tertera Page - Page Title .. Kalau entry Post - Post  Title .. *Rujuk gambar supaya lebih jelas 
Tulis lah segala isi-isi yang korunk nak share di dalam page korunk tuh ..

3. Lepas dah pentat menaip , tekan Publish / Update ..

4. Terpapar macam gambar yang aku labelkan pada After  .. Apa yang korunk perlu buat , Click pada perkataan view pada page yang korunk baut tadi , dan save link page korunk...

Contoh  :

Bila dah copy link , bolehlah korunk share page link korunk  dengan letakkan link page di navigation tab or letak link dalam post entry :)  Simple saja kan ? Harap ianya membantu ... Happy Blogging !!