Tutorial : Cara membuat gambar avatar di ruangan komen berpusing (rotate).



Bismillah,


Assalamualaikum semua…dan salam sejahtera, cecewah…hari ni ibu nak buat tutorial yang pertama-tama-tama kalinya dalam sejarah bila ada geng blogger yang tanya ibu cemana nak buat gambar avatar kat ruangan komen berpusing-pusing 360 darjah…ibu tak ingat ibu ambik tutor ni kat mana yek?…tapi takper, tutor ni simple jer…ibu tunjuk kejap kat sini ya.



shoutbox
cik diba yang menanya….



Tutorialnya ~

1. “Design” dan terus ke “Page Elemen”

 2. Kemudian click “Add Gadget”

3. Lepas tu pilih “HTML/JavaScript” dan copy/paste masukkan script dibawah ini :


<style type="text/css">

.avatar-image-container img, comments .avatar-image-container img {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
</style>

<script src="https://sites.google.com/site/javascript10/mootools-1.3.js"></script>

<script>
window.addEvent("domready",function() {

// "Globals" - Will make things compress mo-betta
var $random = function(x) { return Math.random() * x; };
var availableWidth = 0, availableHeight = 0;
var cssPrefix = false;
switch(Browser.name) {
case "safari":cssPrefix = "webkit";break;
case "chrome":cssPrefix = "webkit";break;
case "firefox":cssPrefix = "moz";break;
case "opera":cssPrefix = "o";break;
}

// The Icons
var icons = $$(".avatar-image-container img, comments .avatar-image-container img ");
// Apply opacity
var zIndex = 1000;
// Randomize each link
icons.each(function(element,index) {
var startDeg =(360);
var resetPlace = function() {
element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");
}
element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex);
resetPlace();
element.addEvents({
mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");},
mouseleave: resetPlace});
});
});
</script>


4. Tekan butang “SAVE”
Selesai….


Akak rasa tutor ni ada kat link Apit Bieber nie lah...korang gi terjah blog dia ya..ada banyak lagi tutor best2!!
http://diarykoyak.blogspot.com/

P/S ku : mudah jer kan?…selamat mencuba yer cik diba……

kalau suka LIKE k... :D

21 cuties - nak komen? KELIK SINI pon boleh!!:

Syat0za Zai berkata... Reply To This Comment

sumber dari maribinablog ke kak? O.o thanks :D


nk tanya ni plak, camne nk buat author::shiela latiff blablabla tu? yg yg bawah tuu..

cik diba berkata... Reply To This Comment

tak buleh copy

Shiela Latif berkata... Reply To This Comment

@Syat0za Zai bukan dari minablog...akak dah tak ingat ka mana...apit2 gitu nama dia...huhu...yang author nyer tutor tu awak gi link : http://whiteymommy.blogspot.com/

kat situ ada tutor nya :)

Shiela Latif berkata... Reply To This Comment

@cik diba okey..leh copy skang :)

Shiela Latif berkata... Reply To This Comment

@Shiela Latif cuba awak gi link ni : http://diarykoyak.blogspot.com/

kat sini kot :)

Syat0za Zai berkata... Reply To This Comment

@Shiela Latif ohh.. ok,, trimas :D

Shiela Latif berkata... Reply To This Comment

@Syat0za Zai sama2 :)

tengkorakemas berkata... Reply To This Comment

patutla kepala TE macam pening2 lepas komen kat blog ni..ada sape2 yg hover avatar TE ke?

Shiela Latif berkata... Reply To This Comment

@tengkorakemas kih kih kihhhhh ;D

mommyYen berkata... Reply To This Comment

ooh..avatar tungang tebalik tu eh Ibu..cute aa..ekekek

larradanish berkata... Reply To This Comment

tentiu makshiela..mmuah2..

♥Leily|Ummi Alya Husna♥ berkata... Reply To This Comment

10s sheila..
nk try gak r.. =)

アヌム ちゃん~~ berkata... Reply To This Comment

Salam.jalan2 singgah sini..nice blog :)
jom tengok sakura dekat blog saya^^
http://frommetoyou85.blogspot.com/

~ Lady ell ~ berkata... Reply To This Comment

tutor lah pulak...mcm2 propesen ko nak cebur....tahniah! :)

qellissa berkata... Reply To This Comment

wah Babe, sudah buat tutorial pulok ke?perbanyakkan lg ye tutorial2 tu..senang nak refer nt..hihihi

Shiela Latif berkata... Reply To This Comment

@mommyYen iye mommy..ekeke

Shiela Latif berkata... Reply To This Comment

@larradanish sama2 maklarra :)

Shiela Latif berkata... Reply To This Comment

@♥Leily|Ummi Alya Husna♥ sama2...try eh?... :)

Shiela Latif berkata... Reply To This Comment

@アヌム ちゃん~~ tq yer...insyaAllah, ti ibu gi jenguk ya :)

Shiela Latif berkata... Reply To This Comment

@qellissa iye leeee...

Shiela Latif berkata... Reply To This Comment

@~ Lady ell ~ naper??...tak boleh ker??

Related Posts Plugin for WordPress, Blogger...