Cara dapatkan url gambar
Apabila menguruskan sesebuah blog, tidak akan terlepas untuk meletakkan gambar. Mungkin tujuan untuk meletakkan gambar adalah pelbagai, tetapi perkara penting untuk diketahui adalah url gambar. Url gambar boleh dikatakan sebagai 'alamat' kepada sesebuah gambar.
Sebagai contoh, untuk gambar ini, urlnya adalah inihttp://3.bp.blogspot.com/_CEj8AwvwSNM/S7jQoxh5CBI/AAAAAAAAENA/UZiN0WCeDpE/blog+tutorial+bahasa+melayu.PNG
Walaupun anda boleh mengupload gambar menggunakan kaedah yang sudah tersedia, tetapi ada kalanya anda memerlukan url bagi sesebuah gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog.
Persoalan asas, bagaimana untuk mengetahui url bagi sesebuah gambar yang sudah tersedia dalam laman web.
Sebagai contoh gambar tadi, bagaimana untuk mendapatkan urlnya.
Disini diletakkan cara yang digunakan untuk beberapa browser yang berbeza.
Caranya mudah, pada gambar yang anda kehendaki dalam sesebuah laman web, right click pada gambar tersebut dan pilihan ada berbeza seperti yang ditunjukkan di bawah.
FIREFOX
GOOGLE CHROME
OPERA
SAFARI
INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)
-----------------------------
anda boleh cuba samada berjaya dengan masukkan url gambar dalam kod ini kemudian test pada ruangan post entri anda.
p/s: perlu diberi perhatian ada sesetengah laman web yang anda tidak boleh copy gambar-gambar mereka seperti fotography dan lain². Tetapi rasanya kebanyakan tiada masalah asalkan mendapat kebenaran daripada empunya.
Sebagai contoh, untuk gambar ini, urlnya adalah inihttp://3.bp.blogspot.com/_CEj8AwvwSNM/S7jQoxh5CBI/AAAAAAAAENA/UZiN0WCeDpE/blog+tutorial+bahasa+melayu.PNG
Walaupun anda boleh mengupload gambar menggunakan kaedah yang sudah tersedia, tetapi ada kalanya anda memerlukan url bagi sesebuah gambar terutamanya apabila melibatkan trick yang hendak diletakkan pada blog.
Persoalan asas, bagaimana untuk mengetahui url bagi sesebuah gambar yang sudah tersedia dalam laman web.
Sebagai contoh gambar tadi, bagaimana untuk mendapatkan urlnya.
Disini diletakkan cara yang digunakan untuk beberapa browser yang berbeza.
Caranya mudah, pada gambar yang anda kehendaki dalam sesebuah laman web, right click pada gambar tersebut dan pilihan ada berbeza seperti yang ditunjukkan di bawah.
FIREFOX
GOOGLE CHROME
OPERA
SAFARI
INTERENT EXPLORER
(agak leceh sedikit kerana ada dua step)
-----------------------------
anda boleh cuba samada berjaya dengan masukkan url gambar dalam kod ini kemudian test pada ruangan post entri anda.
<img src="Masukkan URL gambar disini" />
p/s: perlu diberi perhatian ada sesetengah laman web yang anda tidak boleh copy gambar-gambar mereka seperti fotography dan lain². Tetapi rasanya kebanyakan tiada masalah asalkan mendapat kebenaran daripada empunya.
Youtube : Video Player kepada MP3 Player
Youtube memainkan peranan penting untuk seseorang blogger untuk memaparkan video yang tertentu. Bagi kategori muzik, video dapat menambahkan lagi seri sesebuah lagu. Walau bagaimanapun, ada ketikanya paparan videonya tidak diperlukan, samada disebabkan video tersebut memaparkan gambar statik atau mungkin juga pemilik blog hanya ingin mempersembahkan 'lagu' sahaja kepada pengunjung.
Tutorial ini akan menerangkan bagaimana untuk menjadikan video dari youtube kepada bentuk mp3 player.
Contoh anda ingin menukarkan video ini dalam bentuk mp3 player.
kepada
-----------
Tutorial untuk menukarkan keadaan ini adalah:
1. Dapatkan link video (URL) dari youtube.
Contoh untuk lagu di atas:
http://www.youtube.com/watch?v=_eYj0B5LwOo
2. Buang 'watch?' dan gantikan '=' kepada '/'
Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo
3.Masukkan link yang anda telah ubah ke dalam kod berikut.
contoh untuk kod di atas.
4.Dan hasilnya.
Senang bukan.?.:)
Tutorial ini akan menerangkan bagaimana untuk menjadikan video dari youtube kepada bentuk mp3 player.
Contoh anda ingin menukarkan video ini dalam bentuk mp3 player.
kepada
-----------
Tutorial untuk menukarkan keadaan ini adalah:
1. Dapatkan link video (URL) dari youtube.
Contoh untuk lagu di atas:
http://www.youtube.com/watch?v=_eYj0B5LwOo
2. Buang 'watch?' dan gantikan '=' kepada '/'
Contoh :
http://www.youtube.com/watch?v=_eYj0B5LwOo kepada
http://www.youtube.com/v/_eYj0B5LwOo
3.Masukkan link yang anda telah ubah ke dalam kod berikut.
<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="LINK DISINI"></embed>
contoh untuk kod di atas.
<embed width="425" height="25" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/_eYj0B5LwOo"></embed>
4.Dan hasilnya.
Senang bukan.?.:)
Tutorial Perkataan Ikut Cursor
Ingin perkataan mengikut cursor anda semasa melayari blog.?
Contohnya seperti di bawah.
Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript (more info)
2. Copy dan paste kod berikut dalam html/javascript yang anda buka.
Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.
3. Save dan lihat hasilnya.:)
Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.
1.Tukar style
font-style: normal; (pilihan lain italic, oblique, atau inherit)
2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code
3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)
Contohnya seperti di bawah.
Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.
1. Dari dashboard > design > add a gadget > HTML/javascript (more info)
2. Copy dan paste kod berikut dalam html/javascript yang anda buka.
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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 = "Perkataan anda di sini";
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>
Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.
3. Save dan lihat hasilnya.:)
Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.
1.Tukar style
font-style: normal; (pilihan lain italic, oblique, atau inherit)
2. Tukar warna perkataan
color: #FF0080; (untuk code warna, rujuk entri ini HTML color code
3. Tukar jenis tulisan
font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)
Jadikan Cursor Anda Berkilauan (sparkle)
Tutorial ini akan menunjukkan bagaimana untuk menjadikan cursor anda menghasilkan 'bintang²' yang berkerlipan. Terdapat pelbagai jenis warna yang telah diletakkan untuk memudahkan pemilik blog sesuaikan dengan warna thema masing². Kata lain yang mungkin sesuai ialah untuk menjadikan cursor anda sparkle.(tak tahu istilah betul apa untuk effect ini.:)
Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)
Sebelum itu, tutorial ini juga boleh digambungkan dengan tutorial tukar cursor pada blog anda. Semestinya untuk menjadikannya lebih menarik. Sudah di'test' dan dibuktikan boleh.:)
Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Pada ruangan HTML/javascript, masukkan kod berikut.
Note: untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki
Biru - https://sites.google.com/site/unwanted86/javascript/biru.js
Hitam - https://sites.google.com/site/unwanted86/javascript/black.js
hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js
Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js
Putih - https://sites.google.com/site/unwanted86/javascript/putih.js
Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js
Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js
Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js
Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:
3. Apabila sudah masukkan kod, save dan lihat hasilnya..
Senang bukan.?
Selamat mencuba.:)
Kalau masih tidak faham bagaimana hasilnya, boleh lihat contoh gambar di bawah.:)
Sebelum itu, tutorial ini juga boleh digambungkan dengan tutorial tukar cursor pada blog anda. Semestinya untuk menjadikannya lebih menarik. Sudah di'test' dan dibuktikan boleh.:)
Tutorial untuk membuatkan cursor anda menjadi sparkle adalah seperti berikut:
1. Dari dashboard > design > add a gadget > HTML/javascript
2. Pada ruangan HTML/javascript, masukkan kod berikut.
<script src="URL JS" type="text/javascript"></script>
Note: untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki
Biru - https://sites.google.com/site/unwanted86/javascript/biru.js
Hitam - https://sites.google.com/site/unwanted86/javascript/black.js
hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js
Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js
Putih - https://sites.google.com/site/unwanted86/javascript/putih.js
Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js
Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js
Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js
Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:
<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script>
3. Apabila sudah masukkan kod, save dan lihat hasilnya..
Senang bukan.?
Selamat mencuba.:)
0 comments:
Post a Comment