MentariSenja: Tutorial

Memaparkan catatan dengan label Tutorial. Papar semua catatan

Rabu, Mei 29

CARA MENGEDIT HTML TEMPLATE BLOGSPOT 2013 WAJAH BARU

Akhir2 ini 'Pakcik Google' kita seolah-olah sedang berinovasi, apa taknya bermula April 2013 blogger kembali berwajah baru, terkejut kita dibuatnya, ingatkan dah tersesat... Memang pening kepala pada awalnya karena expand widget template yg selalu kita gunakan dah tak berfungsi lagi. Padahal kita semua perlukan expand widget tu untuk mengedit...

Tapi tak pe...jom kita sama2 belajar macam mana nak edit HTML dgn wajahnya yg baru ini.....

Mengenal Wajah Baru Edit HTML Blogspot

Untuk lebih jelas cuba lihat gambar di bawah.... (masuk ke menu TEMPLATE dan klik EDIT HTML)

Klik pd gambar utk lebih jelas

Keterangan Gambar:

A adalah button untuk kembali ke menu TEMPLATE
B adalah button untuk SIMPAN perubahan pada TEMPLATE
C adalah fitur baru yang akan banyak membantu, iaitu LOMPAT ke code WIDGET
D dan E adalah tombol TOGGLE MODE untuk melihat versi HTML dan melihat versi 'ktrampilan' browser
F adalah button untuk menghilangkan perubahan yang sudah kita lakukan dalam satu pengeditan
H adalah button untuk mengembalikan perubahan yang sebelumnya sudah kita lakukan tapi hilang karena pemformatan
G adalah button untuk mengembalikan widget ke seting default

Ada dua perkara yang perlu kita perhatikan iaitu button lompat ke widget dan arrow berwarna hitam ► pada baris code.

#Button lompat ke widget

Button ini boleh bantu kita utk ke code widget di template. Kita klik button tersebut dan akan terbuka dropdown untuk melompat ke code HTML widget yang kita inginkan....

Klik pd gambar utk lebih jelas

Yang jadi masalah ialah bila tiba di code HTML widget tersebut,....kita akan jumpa code yang padat di ruangan yang bertanda ►... lihat gambar di bawah ini....

Klik pd gambar utk lebih jelas

Nampak tak arrow hitam kecil ► dalam petak merah di atas?....

#Button Arrow Hitam Kecil ►

Button ► ini adalah fitur baru yang akan membuka setiap code untuk lebih detail lagi. Sekiranya setelah kita klik masih lagi ada button ► di dalamnya, maka klik lagi button ► tu hingga semua code widget yang kita inginkan terbuka penuh.

Jika sudah terbuka penuh sekarang kita dah boleh mengedit code pada widget tersebut.

PENGGANTI EXPAND WIDGET TEMPLATE

Yang jadi masalah dan cukup mengganggu jika kita nak edit kode yang terlalu panjang dan mempunyai begitu banyak ► ketika itulah kita memang mengharapkan button expand widget...

Sebenarnya kita boleh buka semua kode dengan cara yang sangat mudah....

Klik kursor di dalam barisan code mana saja....
Tekan CTRL+A untuk mengeluarkan semua code
Tekan CTRL+C untuk mengcopy semua code
Tekan tombol DEL pada keyboard untuk menghapus semua code, dan
Terakhir tekan CTRL+V untuk pastekan semua code

Code yang dipaste ini akan terbuka penuh dan tidak ada panah hitam kecil, jadi hasilnya lebih kurang sama dengan tombol checkbox EXPAND WIDGET TEMPLATE yang ada pada EDIT HTML template blogspot yang lama....

Kita juga boleh gunakan button LOMPAT KE WIDGET bila semua code sudah terbuka, ini akan membantu kita untuk mengedit TEMPLATE.

CARA MENCARI CODE DI EDIT HTML BLOGSPOT (WAJAH BARU)

Kita dah tak boleh lagi mencari code dengan menggunakan CTRL+F pada browser, .... jadi klik dulu di antara barisan kode dan klik CTRL+F. Atau pun klik pada mana2 code html kemudian tekan CTRL+F... nanti akan muncul kotak search di sudut kanan atas jendela kode HTML.

Di situlah kita masukkan kode yang akan kita cari, kemudian tekan enter. Untuk lebih jelas lihat gambar di bawah ini....

Klik pd gambar utk lebih jelas

Jika kita belum jumpa code yang kita inginkan, tekan enter sampai jumpa...

Semoga bermanfaat...

credit : trikmudahseo

Selasa, Mei 28

Efek Daun Berguguran...

1. SILA login ke Blogspot .
2. Klik Design > Add a Gadget Javascript / HTML
3. Copy kod di bawah dan Pastekan kedalamnya.

<script src='http://ahmad-rifai-tools.googlecode.com/files/daun-blog.ahmadrifai.net.js'/></script>

Contoh spt yg kita bulat-bulatkan dalam gambar kat atas ni...

4. Dah siap boleh SAVE!

# Letak kod di bahagian header untuk hasil yg lebih kemas dan cantik.. :-)

credit : ahmadrifai

Jumaat, April 26

Kelopak Bunga Berguguran...

1. SILA login ke Blogspot .
2. Klik Design > Add a Gadget Javascript / HTML
3. Copy kod di bawah dan Pastekan kedalamnya.

Contoh spt yg kita bulat-bulatkan dalam gambar kat atas ni...

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).append(a).appendTo('body')});</script>

4. Dah siap boleh SAVE!

Tq Farah... credit utk awak

Isnin, Mac 4

Gantikan Bullet Dengan Icon Comel

gantikan bullet dengan icon comel - cara 1

Sebelum ni bullet yang ada hanya titik hitam tu aja. Sekarang kita nak gantikan titik hitam tu dengan cute icon...

1. Dashboard > Design > Edit HTML

2. Tekan Ctrl + f dan cari code

]]></b:skin>

3. Copy code dekat bawah ni

.post ul {list-style:none;
}
.post ul li {
line-height: 1.4em;
background: transparent url(URL BULLET) no-repeat scroll 0px 4px;
margin: 0.3em 0;
padding: 0 0 0.8em 20px;
}

4. Paste di atas code ]]></b:skin>

5. Preview & save

URL BULLET - Letak URL icon yang berkenan di hati

gantikan bullet dengan icon comel - cara 2

1. Dashboard > Post > New Post

2. Copy code di bawah...

<img src="URL ICON COMEL" />

# ABC - Tukar kepada URL icon yang kita nak

3. Buat ayat seperti biasa...

4. Klik HTML dan paste kan code <img src="URL ICON COMEL" /> sebelum ayat anda.

5. Kemudian klik compose dan lihat hasilnya.

6. Siap untuk di publish dan lihat hasilnya :)

Ahad, Mac 3

Mencantikkan Scroll Bar Blog.

Nak cantikkan scroll bar blog seperti yang ada kat dalam gambar tu :)

1. Dashboard > Design > Edit HTML

2. Tekan Ctrl + f dan cari code

]]></b:skin>

3. Copy code dekat bawah ni

::-webkit-scrollbar {
height:12px;
width: 12px;
background: #C83369;
}
::-webkit-scrollbar-thumb {
background-color: #BA55D3;
-moz-border-radius: 10px;
border-radius: 10px;
}

4. Kalau nak letak image guna kod yang ni

::-webkit-scrollbar { height:12px;
width: 12px;
background: #C83369;
}
::-webkit-scrollbar-thumb {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjCrKbaHrWC8JV3PKqLA8sc6BGDuuL9VM6LiDkLnH-rt_fdpg56Cv0rIaChatfeLxvlMU2EykgJiTPb2O-7spMa9w3Vp9sU2VJixG6JhO8Qsaa6MGfzBVnHO1PN7YH92yIsO_Iz1GbaFY/h120/Untitled.png); }
-moz-border-radius: 10px;
border-radius: 10px;
}

5. Apa yang perlu ditukar :
Warna background scroll bar : #FF1493
Warna scroll bar : #BA55D3
URL Image : ABC

Untuk pemilihan warna klik di bawah

6. Preview, kalau menjadi silalah tekan SAVE!

** Tutorial ini hanya sesuai dengan penggunaan Google Chrome sahaja !

Sabtu, Mac 2

Letak Website Lain Dalam Blog

Tutorial Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda. Fungsinya juga sama seperti Letak Laman Web Dalam Blog

Klik disini untuk lihat demo website yang diletakkan dalam blog.

Berikut adalah langkah-langkah untuk tutorial ini.
1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget
2. selepas klik pada add a gadget, pilih HTML/javascript
3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript

*Nak leatak dalam entry pun boleh, tapi pastikan klik HTML dahulu...

<a href="javascript:jumpto('http://alyazaira-mentarisenja.blogspot.com/')">ALYA ZAIRA</a> |
<a href="javascript:jumpto('http://alyazaira-mentarisenja.blogspot.com/')">ALYA ZAIRA</a> |
<script language="javascript">

</script>

- Jika nak letak lebih dari yang di atas cuma perlu tambah kod ini

<a href="javascript:jumpto('http://alyazaira-mentarisenja.blogspot.com/')">ALYA ZAIRA</a> |

- MERAH : Gantikan dengan website yang anda mahu
- BIRU : Gantikan dengan nama yang anda mahu

4. Dah siap klik save :)

Jumaat, Mac 1

Sifu Tutorial...

Kotak apa plak kat bawah ni ye?
Kalau nak tahu, cer klik mana-mana nama yang ada kat situ, apa yang kuar?

Aaaaa... inilah dia otai-otai blogger kita. Di awal 'berblogger' dulu blog diorang ni lah yang aku rajin terjah, hehe ..gantinama AKU lah plak, maaf ye :). Aku pilih diorang ni berdasarkan manisnya budi bahasa yang diorang guna pakai selaku seorang sifu yang sememangnya tak kedekut nak bagi tunjuk ajar kat orang lain, lebih-lebih lagi untuk diri aku ni lah yang pada masa tu memang betul-betul zero... Manis budi bahasa yang aku maksudkan kat sini bukanlah sopan santun dari gaya bahasanya. Tapi, hai...entah lah macam mana aku nak explain pun aku tak reti. Yang pastinya bila aku blogwalking, aku selesa dengan mereka yang kelihatan mesra dan tak kedekut. Pada sesiapa yang dah follow otai-otai kat bawah ni, tentu setuju dengan pandangan peribadi dari aku ni kan ...

Kepada otai-otai yang lain dan juga new bloggers anda juga tak kurang hebatnya.Sentiasalah kekalkan sikap ramah dan rendah diri dalam menyampaikan informasi serta tunjuk ajar, lebih-lebih lagi pada aku yang sentiasa memerlukan ...

Khamis, Februari 28

Header Hover ( Effect Senget dan Ghaib )

1. Sign in blogspot > Design > Edit HTML > Tick Expand Widget Templete..

2. Cari code di bawah dengan menekan Ctrl F...

#header {

atau

/* Header

3. Dah jumpa cari pula kod ini

.Header h1 {

3. Kemudian copy and paste kod ini di bawah kod .Header h1 {

#header:hover {
padding-left:160px;
-webkit-transition: 2.5s;
-webkit-transform: rotate(6deg);
opacity:.01;
}

# Kod yang di highlight kan tu boleh di ubah ikut kesesuaian

4. Lihat contoh di bawah ni...

5. Preview dulu, kalau takda error, boleh save.

Rabu, Februari 27

Perkataan Bergerak (Scrolling/Marquee Text)

Kod asas

<marquee>Blog Alya Zaira</marquee>

Blog Alya Zaira

Ubah pergerakan perkataan
Penambahan kod berikut diperlukan dalam kod asal.
direction="left"
direction="right"
direction="up"
direction="down"

Dari kanan ke kiri

<marquee direction="right" >Blog Alya Zaira</marquee>

Blog Alya Zaira

Ubah warna background
Untuk ubah background, perlu diletakkan kod berikut
bgcolor="#kod warna"
Senarai kod warna boleh didapati disini.

Kod yang diletakkan background,

<marquee direction="right" bgcolor="FF99CC">Blog Alya Zaira</marquee>

Blog Alya Zaira

Perkataan dalam keadaan 'anjal'
Penambahan kod berikut diperlukan ke dalam kod asal.
behavior="alternate"

Kod yang diletakkan trick ini.

<marquee behavior="alternate" bgcolor="FF99CC">Blog Alya Zaira</marquee>

Blog Alya Zaira

Ubah kelajuan perkataan.
Pergerakan juga dapat diubah dengan menambah kod berikut

scrollamount="2"

Kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="FF99CC" scrollamount="2">Blog Alya Zaira</marquee>

scrollamount="2"
Blog Alya Zaira

Scrollamount :"5"
Blog Alya Zaira

Pause apabila cursor dilalukan.
Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

Penambahan kod yang perlu dilakukan adalah

onmouseover="this.stop()" onmouseout="this.start()"

Kod dengan trick ini.

<marquee behavior="alternate" direction="left" bgcolor="FF99CC" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Blog Alya Zaira</marquee>

Blog Alya Zaira

Selasa, Februari 26

Tulisan Efek Neon

1. Login blogspot > Dashboard > Design > Add a Gadget > HTML / Java Script

2. Copy kod yang berkenaan dan pastekan di ruangan gadget HTML tadi!

Contoh seperti yang ada di kotak fieldset sebelah kanan blog ni...

<script language="JavaScript1.4">
jsver = 1.4;
var neonbasecolor=""

var neontextcolor="#33FF00"

var neontextcolor2="#3C07FB"

var flashspeed=100 // kecepatan flashing dalam milliseconds
var message="TULISAN EFEK NEON"
var flashingletters2=1 // bilangan huruf yg di flashing pada neontextcolor2 (0 to disable)
var flashingletters=6 // bilangan huruf yang di flashing pada neontextcolor
var flashpause=0 // pause diantara flash-cycles dalam milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

TULISAN EFEK NEON - Ayat / Perkataan yang diingini
#E60066 - Warna yang kita suka
100 - Kepantasan pergerakan teks

3. Dah siap SAVE !

Isnin, Februari 25

Ahad, Februari 24

Cara Membuat Cursor Sendiri (Text)

Sesetengah blog yang kita kunjungi ada di antaranya mempunyai cursor yang unik dan menarik.
Kita pun tentu sekali berkeinginan juga untuk mempunyai cursor sendiri...ye tak ?Jadi tutorial ini akan menerangkan cara-cara untuk membuat cursor ciptaan sendiri.

Untuk tutorial ini kita gunakan perisian AdobePhotoshop CS5.Ikuti cara-caranya...

1.Pada menu file pilih new dan masukkan setting seperti berikut

2. Width 80pixels,height 45 pixels,resolution 75pixels dan background content transparent.

3. Klik ok setelah memasukkannya.

4. Kemudian kita akan masukkan anak panah untuk cursor ini,pada toolbar pilih rectangle tool dan ambil custom shape dari senarai yang terpapar

5. Gunakan move tool dan tandakan (tick) pada show transform control untuk memutarkan anak panah .Kotak yang muncul membolehkan kita membesar,memutar dan mengubah kedudukan.

6. Pilih text tool, jenis tulisan, warna dan taipkan teks yang kita inginkan

7. Simpan cursor yang telah dihasilkan
Ambil menu file pilih save as masukkan nama fail pada file name dan pilih format png (boleh juga format gif) pada format dan klik save.

8. Ok dah siap pun cursor text kita.

Cursor Text Bergerak

1. Login blogspot > Dashboard > Design > Add a Gadget > HTML / Java Script

2. Copy kod di bawah dan Pastekan kedalamnya.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'ARIAL';
color: #CC0066;
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type="text/javascript">
;(function(){
var msg = "TEXT HERE";
var size = 24;
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.2;
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
</script>

Dalam kod di atas, tukarkan :

ARIAL - font pilihan kita

TEXT HERE - masukkan text kita sendiri

8D38C9 - kod warna text pilihan kita, boleh pilih kod warna di sini:

3. Dah siap boleh SAVE!

Isnin, Februari 18

Fieldset

1. Login blogspot > Dashboard > Design > Add a Gadget > HTML / Java Script

2. Copy kod yang berkenaan dan pastekan di ruangan gadget HTML tadi!

Image di bahagian atas

<fieldset><legend><img src="URL IMAGE"/></legend>YOUR TEXTS</fieldset>

Texts di bahagian atas

<fieldset><legend>YOUR TEXTS</legend>YOUR TEXTS</fieldset>

* Nak pic mini yang cute boleh ambil kat SINI

3. Dah siap SAVE !

Cute Icon Tepi Post Title

sebelum

selepas

1. Sign in blogspot > Design > Edit HTML > Tick Expand Widget Templete..

2. Cari code di bawah dengan menekan Ctrl F...

<a expr:href='data:post.url'><data:post.title/></a>

3. Copy kod di bawah ni

<img src="LinkGambar"/>

4. Kemudian pastekan seperti yang ditunjukkan kat bawah ni...

<a expr:href='data:post.url'><img src="LinkGambar"/><data:post.title/></a>

* LinkGambar - Tukar kepada URL icon yang kita suka

6. Preview kemudian SAVE template

* Kalau nak guna icon kat bawah ni ambik je...
tekan right click pilih - copy image url (google chrome)
- copy image location (mozilla firefox)