faiz-tutorial demo: February 2013

Tuesday 26 February 2013

TUTORIAL LETAK TWEETS DI BLOG

Ni tutorial untuk letak tweets korang pada blogger seperti gambar kat atas ni. Senang jer..Jom buat.

1. Login ke Dashboard blogger korang.

2. Klik butang " More Options (rujuk no 1) " dan klik " Layout (rujuk no 2) ".

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3) " pada mana-mana bahagian yang korang nak letakkan tweet tersebut.

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4).

5. Copy (CTRL+C) kod dibawah:

<center><script src="https://sites.google.com/site/faiztutorial/javascript/twitter.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
width: 240,
height: 300,
theme: {
shell: {
background: '#3333FF',
color: '#ffffff'
},
tweets: {
background: '#F2F2F2',
color: '#000000',
links: '#0713eb'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME TWITTER').start();
</script></center>

6. Paste (CTRL+V) pada ruang Content (rujuk no 5)

7. Gantikan :

6 ---> Bilangan post tweet
#3333FF ---> Background color bagi tema
#ffffff ---> Color font bagi tema
#F2F2F2 ---> Background color bagi tweet post
#000000 ---> Color font bagi tweet post
#0713eb ---> Color bagi Links
USERNAME TWITTER ---> Gantikan kepada username twitter anda. [PENTING]

8.Seterusnya klik " Save (rujuk no 6 ) " dan lihat la hasilnya...........

Baca Selengkapnya »

HOVER BLOCKQUOTE (CUTE ICON MUNCUL BILA CURSOR MEYENTUH)

PENTING!
Sebelum membuat apa-apa pengubahsuaian template anda (pada Edit HTML) , anda dinasihatkan supaya mem'backup dahulu template untuk langkah keselamatan jika berlaku error semasa membuat pengekodan template. Klik SINI untuk melihat tutorial untuk membuat BACKUP dan RESTORE Template... :)

Sebelum Disentuh Cursor

Selepas Disentuh Cursor

Amacam cantik tak...korang nak...ok jom kite buat sama...ikut tutorial kat bawah ni k..

1. Login ke dashboard blogger korang.
2. Klik butang " More Option (rujuk no 1) " dan klik "Template (rujuk no 2)".

3. Klik pada " Edit HTML (rujuk no 3) "

4. Tick pada Expand Widget Templates (rujuk no 4)

5. Tekan CTRL+F atau F3 dan cari code dibawah (rujuk no 5).

.post blockquote {

6. Korang highlight dan padam kod yang sedia ada. (rujuk no 6).

7. Copy( CTRL+C ) kod dibawah dan Paste( CTRL+V ) pada area kod yang korang sudah dipadam tadi.

.post blockquote {background-image:url(URL GAMBAR BACKGROUND);padding:5px;Border:1px solid #BF00BF;colour:#FFFFFF}
.post blockquote:hover {background-color: ##A9F5BC;-webkit-transition-duration: 3.5s;background-image:url(URL GAMBAR ICON);background-position:bottom right;background-repeat:no-repeat;-webkit-border-radius: 36px 12px;-moz-border-radius: 36px 12px;-webkit-transform: skew(1.deg,1.5deg);-moz-transform: rotate(3deg);-webkit-transform: rotate(3deg);}

8. Gantikan URL GAMBAR BACKGROUND dengan link gambar background ynag korang nak. Dibawah ni ada beberapa contoh:

http://dl9.glitter-graphics.net/pub/1062/1062499y9n7hd5wy9.png

http://dl7.glitter-graphics.net/pub/2730/2730267baqumpdcd2.gif

http://dl2.glitter-graphics.net/pub/915/915132gu2cewfq0i.gif

http://sl.glitter-graphics.net/pub/658/658634cdu9wz29u9.gif

http://sl.glitter-graphics.net/pub/552/552091ziumvhzbvn.jpg

http://sl.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif

http://sl.glitter-graphics.net/pub/2734/2734521issu0wenru.png

9. Gantikan URL GAMBAR ICON dengan link icon yag korang nak. Dibawah ni ada beberapa contoh ikon:

http://dl8.glitter-graphics.net/pub/39/39368n1b2x3prdz.gif

http://dl9.glitter-graphics.net/pub/679/679789gs2dqrx3bd.gif

http://dl6.glitter-graphics.net/pub/584/584776qvkek99ty3.gif

http://dl9.glitter-graphics.net/pub/244/244519cj7iewvdtg.gif

http://dl4.glitter-graphics.net/pub/772/772194zn1mdfi11c.gif

10. Klik Preview dan kalau ok klik Save Template

SEMOGA DAPAT MEMBANTU.... :)

Baca Selengkapnya »

Monday 25 February 2013

TUTORIAL BACKUP/RESTORE TEMPLATE

TUTORIAL 1 : BACKUP TEMPLATE

1. Login ke akaun blogger anda.
2. Pada Dashboard blogger anda, klik pada butang "More Option (rujuk no 1 pada gambar 1)"dan klik "Template (rujuk no 2 pada gambar 1)" .

GAMBAR 1

3. Klik pada butang " Backup / Restore (rujuk no 3 pada gambar 2) ".

GAMBAR 2

4.Klik pada " Download full template (rujuk no 4 pada gambar 3) dan simpan template pada pc anda.

GAMBAR 3

5. Untuk mengenali fail template anda , ia mengunakan nama seperti " template-ID_BLOG.xml ". (seperti gambar 4.)

GAMBAR 4

6. SELESAI....,,,

TUTORIAL 2 : RESTORE TEMPLATE

1. Login ke akaun blogger anda.
2. Pada Dashboard blogger anda, klik pada butang "More Option (rujuk no 1 pada gambar 1)"dan klik "Template (rujuk 2 pada gambar)" .

GAMBAR 1

3. Klik pada butang " Backup / Restore (rujuk no 3 pada gambar 2) ".

GAMBAR 2

4. Klik pada " Browse (rujuk no 4 pada gambar 3) " .