cara-cara buat header transparent (video tutorial)

Assalamualaikum,salam sejahtera dan salam 1malaysia.



.seperti mana yang aerol janjikan pada rakan-rakan blogger hari tu,aerol akan buat satu tutorial header transparent dari hasil gabungan video tutorial yang aerol ajar sebelum ni,bagaimanapun,video kali ini aerol buat agak laju sedikit untuk menjimatkan masa dan memori video tersebut.



.kalau korang yang terlepas video tutorial yang lalu,korang boleh click pada pautan bawah ni. kerana video tutorial yang lalu ada sedikit kaitan dengan video yang versi ketiga ini :).sebab itu lah aerol buat video versi ketiga ini agak laju,selain dapat melatih korang bagi pengunaan adobe photoshop agar lebih mahir,lagi-lagi kepada newbie yang baharu berjinak-jinak dengan dunia blog dan adobe photoshop ni.



1st video: cara-cara buat 3D font di adobe photoshop



2st video: cara-cara buat gambar PNG (portable network graphic) serta effect stroke



.bagi korang yang ada adobe photoshop,korang boleh click sini,(adobe photoshop cs5 portable)..korang tak perlu risau dengan adobe photoshop cs5 yang aerol beri ni,ianya percuma 100%. .korang tak rasa beruntung ke segalanya adalah free hahahaha ^^

Mula tutorial dah.

.kalau korang ada cadangan atau permintaan tutorial,korang boleh pm Inbox facebook aerol (facebook).

.aerol minta maaf pada korang jika ada kesilapan didalam video tutorial ini,apa pun aerol nak ucap terima kasih banyak-banyak sebab menonton video ini.soo,selamat mencuba! ^^

p/s: video ini mengambil masa lebih pada 3jam untuk dihasilkan,untuk menghargai tenaga aerol,korang just perlu ucap terima kasih jew ^^

Support Aerol hafiezi:http://aerol-rianbow.blogspot.com/

Auto readmore bergambar

 

Hari ni aerol nk tunjuk ckit cara-cara pasang read more bergambar.... .trick ni memang agak lapuk sedikit..huhu bagi sesiapa yang belum tahu cara nak buat.. .ikut step-step bawah..

1.pergi ke design/edit html. ..

2.tekan expand widget dulu untuk mengembangkan segala html..

3.cari kode </head>
  (untuk menyenangkan pencarian,tekan ctrl dan f secara serentak,lalu paste code tadi kat kotak find)
4.salin kode bawah ni,dan paste di atas/sebelum </head> tadi

<script type='text/javascript'>

var thumbnail_mode = "float" ;

summary_noimg = 350;

summary_img = 450;

img_thumb_height = 140;

img_thumb_width = 140;

</script>

<script type='text/javascript'>

//<![CDATA[

/*
*/

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

4.cari code ni <div class='post-body entry-content'>


5.dah jumpa.. . salin code bawah dan ganti kan code step 4 tadi...

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='http://i1117.photobucket.com/albums/k588/Aerol_Hafiezi/readmoreversiaerol-1.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6.kalau korang nak pakai imej read more t'sendiri,korang boleh gantikan tulisan yang warna biru tu pada url gambar kesukaan korang..then save template... .soo,jika korang ingin mengemukakaa soalan atau cadangan tutorial,korang boleh ccari aerol difacebook (sini)

Read more: cara-cara nak buat read more bergambar. ~ Aerol Hafiezi http://aerol-rianbow.blogspot.com/2011/02/cara-cara-nak-buat-read-more-bergambar.html#ixzz1NdhMIGMR

komen blog orang sambil menaikkan traffic blog anda

Assalamualaikum,salam sejahtera dan salam 1malaysia.

>Aerol rasa macam dah lama sangat aerol tak buat posting tentang tutorialkan,okeyh,aerol minta maaf lr pada yang telah menegur aerol hari tu,bukan aerol dah tak nak buat posting tutorial lagi,tapi aerol rasa posting tutorial ni mendapat tempat yang kurang memuaskan berbanding posting aerol yang lain.


>cara-cara dia, pertama sekali,pergi ke mana-mana blog,komen posting orang tu (jangan publish dulu).dan salin code bawah ni 

TAJUK: <a href="LINK POSTING ORANG"><b>TAJUK POSTING</b></a>

>Sebelum itu,gantikan tulisan yang aerol telah bold kan pada code tersebut.. .

>kemudian,selepas menukar Tajuk,Link posting korang dan tajuk postingtu.korang paste code tersebut pada kotak komen orang,dan bentuk komen korang akan berbentuk macam gambar di bawah ni

Contoh dia

>Kelebihan tutorial ni,adalah boleh menaikkan sedikit sebanyak traffic pada blog korang,soo bergantung lr berapa banyak komen pada posting orang... .Kalau ada sebarang cadangan atau permintaan tutorial,korang boleh tanya aerol difacebook (click)

Support Admin aerol:
http://aerol-rianbow.blogspot.com/

tutorial letak radio ERA online dalam blog

ramai yang bertanya berkenaan tutorial meletakkan radio dalam blog.disini,saya sediakan kode html untuk radio era.fm sahaja.namun,jika ada yang inginkan radio selain daripada radio era,buleh buat permintaan pada bahagian komen ye =)
kode untuk radio era.fm
<div>era.fm</div><div><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="200" height="170">                   <!--<![endif]-->                   <param name="quality" value="high" />                   <param name="wmode" value="transparent" />                   <param name="swfversion" value="9.0.45.0" />                   <param name="expressinstall" value="Scripts/expressInstall.swf" />                 </object>
</div>

*yang warna merah tu boleh ubah mengikut kesesuaian blog*pastikan tiada tool bar radio di mozillafirefox / google crome / internet explorer , sebab ia akan menyebabkan hang atau tersekat.
~tq~~aqu_slumbers~

PENGUMUMAN: THE FACEBLOG GEMPAK BLOGLIST!!!!

Assalamualaikum & salam sejahtera
disini,kami ingin mengumumkan bahawa the faceblog akan mula membina bloglist untuk para blogger sekalian. kepada yang berminat untuk menyertai bloglist the faceblog, korang boleh ikut step mudah dibawah :
buat satu entry berkenaan bloglist the faceblog seringkas yang mungkin =)tajuk entry: THE FACEBLOG GEMPAK BLOGLIST (JUN)pastu letak banner dibawah dan linkkan banner tersebut ke entry ini. 

last sekali,letak link entry korang tersebut pada bahagian komen dibawah :) 

CONTOH ENTY:

saya telah menyertai bloglist gempak the faceblog :)

 jom ramai2 sertainya!!

(banner)

mudah kan :) 

bloglist ini untuk bulan jun.

bloglist tersebut akan dikeluarkan di blog :

 tfaceblog gempak bloglist

(klik untuk ke blog  tfaceblog gmpak bloglist)

tarikh tutup gempaq jun: 30 jun 2011

terima kasih =)

tukar warna background dengan menekan butang

salam u all..huhuhu hari ni aerol nk tunjuk ckit cara nak tukar background dengan menekan button jeww..mcm gmbar kat atas..ehehe seronok kan.. .okeh.. .mari kita cuba..

1.first,pergi ke design/page element/click add a gadjet/then pilih html java scrpit.. .

2.copy code kat bawah ni. ..dan paste kat add gadjet. .

<center><script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>

Tukar warna background

<table border="2" width="200" height="20" bordercolor="black">
<tr bordercolor="#4BFE78"> <td
onclick="bgChange('#72FE95')" bgcolor="#72FE95">
<td
onclick="bgChange('#FE8BF0')" bgcolor="#FE8BF0">

<td
onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
<td
onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
<td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

<td
onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">


</td
onclick="bgchange('#ffc0cb')"></td
onclick="bgchange('#d3d3d3')"></td
onclick="bgchange('#ffdab9')"></td
onclick="bgchange('#87cefa')"></td
onclick="bgchange('#fe8bf0')"></td
onclick="bgchange('#72fe95')"></tr>
</table>

<div class='clear'></div></center>

4. u all nmpak kan tulisan yang telah dibold dan dibesarkan tu. .okeh..u all boleh tukar dengan warna kesukaan u all ..lau nk taw code warna click sini

5.dan gantikan pada code warna yg telah dibold dan dibesarkan kt ats..

p/s:tutorial ini hanya bekerja jika korang memakai default background sahaja,harap maklum, jika korang nak request tutorial,korang boleh pm inbox aerol di facebook (here) atau apa-apa sahaja pertanyaan.

Read more: cara nak tukar background blog dengan menekan butang sahaja. ~ Aerol Hafiezi http://aerol-rianbow.blogspot.com/2011/02/cara-nak-tukar-background-blog-dengan.html#ixzz1NSfl8iYz

Tutorial Membuat Transparent Blog Header Versi Video

Tutorial dari eastbulletdotcom yang ringkas dan mudah untuk membuat transparent blog header menggunakan adobe photoshop.http://eastbullet.com

tutorial- Animated Recent Post Widget Untuk Naikkan Pageview Blog Anda

Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

(tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)


Berikut adalah cara-cara untuk menggunakan widget ini.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. copy code berikut dan paste di ruangan HTML/javascript

<center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='javascript'>

imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://URL BLOG.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
</div>
</center>
<small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>

Note: gantikan URL BLOG dengan url blog anda..

3. Save dan lihat hasilnya.

-------------------

PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

Harap blog anda boleh menggunakan widget ini.
Selamat mencuba.:)
KREDIT: UNWANTED

recent post,recent comment,dan popular post dalam 1

 

salam u all .. rinie aerol nak ajar cara nak buat recent post,recent comment dan popular post dalam satu ..mcm kat gambar atas tu.. .okeh.. lau nk ikut jum follow step2 kat bawah..

1.mcm biasa,pergi ke design/click add a gadjet(letak tempat sessuai) dan pilih html/javascript.

2.copy code kat bawah ni .. .

Sebarang masalah korang boleh rujuk pada aerol di facebook (click)

<style>
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td {

vertical-align:baseline;
}

#container{
width: 100%;
line-height:12px;
font-size: 12px;
font-family: Arial;
margin:0pt;
cursor:pointer;
overflow: hidden;
}
.clear{
clear: both;
height: 0;
visibility: hidden;
display: block;
}
a{
text-decoration: none;
}

#container ul{
list-style: none;
list-style-position: outside;
}
#container ul.menu li{
float: left;
margin:0 0px 0 0px;
}

#container ul.menu li{
font-weight: 600;
display: block;
padding: 5px 2px 2px 2px;
background: #000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;
margin-bottom: -1px;
margin-left:2px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
border: 1px solid #d0ccc9;
border-width: 1px 1px 1px 1px;
position: relative;
color: #898989;
cursor: pointer;
}
#container ul.menu li.active{
background: #fff;
top: 1px;
border-bottom: 0;
color: #5f95ef;
}
.content{
margin: 0pt auto;
background: #efefef;
background: #e5e5e5 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png)repeat-x 0 0;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
border: 1px solid #d0ccc9;
text-align: left;
padding: 10px;
padding-bottom: 20px;
font-size: 11px;
}
.content h1{
line-height: 1em;
vertical-align: middle;
height: 26px;
padding: 10px 10px 10px 35px;
font-size: 15px;
}
.content.news h1{
background: transparent url(http://1.bp.blogspot.com/_LZtXSNcp76A/TCjLUUUd0dI/AAAAAAAABIs/8WmIVGH7LIY/s320/favorite.png) no-repeat scroll left top;
}
.content.news{
display: block;
font-size: 11px;
color: #000000;
text-align: justify;
}
.content.news a{
font-size: 11px;
color: #5f95ef;
text-align:left;
padding: 0 0 0 0px;
}
.content.tutorials h1{
background: transparent url(http://3.bp.blogspot.com/_LZtXSNcp76A/TCjK0IkUeqI/AAAAAAAABIk/BWPeCZIQ93M/s320/heart.png) no-repeat scroll left top;
}
.content.tutorials{
display: none;
color: #000000;
text-align: justify;
}
.content.tutorials a{
color: #5f95ef;
text-align: left;
padding: 0 0 0 0px;
}
.content.links h1{
background: transparent url(http://2.bp.blogspot.com/_LZtXSNcp76A/TCjmfB9PY3I/AAAAAAAABI8/-OiGzMea9_o/s320/comment.png) no-repeat scroll left top;
}
.content.links{
display: none;
color: #000000;
font-size: 11px;
text-align: justify;
}
.content.links a{
color: #5f95ef;
text-align: left;
}
</style>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/javascript10/tabs.js"></script>


<div id="container">

<ul class="menu">
<li id="news" class="active">Recent</li>
<li id="tutorials">Popular</li>
<li id="links">Comments</li>
</ul>
<span class="clear"></span>
<div class="content news">

<h1>Recent Posts</h1>
<ul>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/files/recentpostswidgetv1.js'></script><script style='text/javascript'>var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://aerol-rianbow.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts'></script>
</ul>
</div>

<div class="content tutorials">
<h1>Popular Posts</h1>
<ul>
<script language='javascript'>
aBold = false;
numposts=1000;
maxshowresult=5;
home_page = "http://aerol-rianbow.blogspot.com/";
</script>
<script src='http://sites.google.com/site/testingsahaja/toppost.js' type='text/javascript'></script>
</ul>
</div>

<div class="content links">
<h1>Recent Comments</h1>
<ul>
<script style="text/javascript" src="http://sites.google.com/site/testingsahaja/recentcomments.js"></script><script style="text/javascript">var numcomments = 5;var showcommentdate = false;var showposttitle = false;var numchars = 40;</script><script src="http://aerol-rianbow.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</ul>
</div>
</div><em>Design By<a href=http://aerol-rianbow.blogspot.com/
</div></center>target="_blank">Rianbow</a></em></div>

3.kat bahagian tulisan bewarna merah yg besar tu korang tukar gan url blog masing2. .dan tekan save!
:D

nak lagi?Read more: cara cara nak buat recent post,recent comment dan popular post dalam satu. ~ Aerol Hafiezi http://aerol-rianbow.blogspot.com/2011/02/cara0cara-nak-buat-recent-postrecent.html#ixzz1NA6B8K9k

Letak Button Like Untuk Blog Anda

Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



Tutorial untuk meletakkan button ini seperti di bawah.

1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://URL-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

note: Gantikan URL-ANDA dengan url blog anda

3. Save dan lihat hasilnya.:)

p/s: Apabila seseorang 'like', akan keluar di wall orang yang like tentang blog anda dan secara tidak langsung dapat meningkatkan trafik blog anda.:)
kredit: UNWANTED

Tutorial - Nama 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.

<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)

kredit: UNWANTED

gambar transparents dan effect stroke pada gambar (tuto video versi)

Assalamualaikum,salam sejahtera dan salam 1malaysia.



> Pada posting yang lepas aerol ada tunjukkan cara nak buat 3D font do adobe photoshop :). .hinie aerol nak ajar korang pulak cara nak buat gambar transparents dan effect stroke pada gambar,





> Kat sini aerol nak terangkan kenapa aerol patut ajar kaedah stroke tu pada korang,okeyhh,kalau kita cut atau padam sebahagian bentuk gambar tu mesti dia akan ada kopak atau cacat cela pada sisi gambarkan,dan effect stroke tu boleh tutup sikit bahagian cacat tu pada gambar korang nnti :) .. ...jum mulakan tutorial ni.










 



> jika korang memerlukan software adobe photoshop macam aerol pakai ni,korang boleh download di sini.Dan jika korang ada sebarang pertanyaan atau soalan,korang boleh tnya aerol di facebook (click) dan aerol berharap sangat,jika korang yang masih ragu-ragu atau ingin menyampaikan pendapat atau cadangan ,korang bolehlah tingglkannya di kotak komen :) ..aerol akan balas dengan segera jika tiada sebarang halangan :)

Hak milik Admin aerol :)

3D font,dan software adobe photoshop percuma :)

Assalamualikum,salam sejahtera dan salam1 malaysia :) .



Hari ni aerol nak buat sedikit pada perubahan tutorial aerol :),mulai sekarang aerol nak buat tutorial lebih kepada video,supaya korang lebih faham cara memfollow tutorial dari aerol :). .



okeyh,memandangkan ini adalah video tutorial pertama aerol,aerol akan tunjukkan cara membuat 3D font di adobe photoshop :).. .tutorial ni teramat mudah sekali kepada new bie yang baru berjinak-jinak dengan adobe photoshop..soo aerol harap korang enjoy! :) .....jika ada sebarang pertanyaan,korang boleh tanya aerol di facebook(click sini) atau tinggal persoalan korang di kotak komen.dan aerol akan segera membalas persoalan korang (jika tidak ada sebarang halangan)  :).Jika korang tiada adobe photoshop,korang boleh download di sini.Click here. .(adobe photoshop cs5 versi portable)














Tutorial 3D font ni korang boleh mengaplikasikan untuk membuat menubar dan sebagainya bagi menambah kecantikkan serta keunikkan pada blog..

Nak lagi tuto macam ni lagi?pergi ke blog admin aerol :)

tutorial _cara pasang widget FB like box dalam blog anda

fan page blog on FB

fan page ni bertujuan utk update entry2 kita dlm facebook.means org yg takde blog pun still boleh follow kita

melalui fan page ni.

sebenarnya ada yang kata

eleh,setakat blog personal jer, perlu fan page bagai ape la kan

tapi bia la apa org nak kata

blog kita kita punya suke la nak buat ape kan?heee

so, ta kira lah sama ada blog personal ke, blogshop ke hape ke.kalo nak buat fan page buat jer

fan page ni pun salah satu cara nak tingkatkan traffik dlm blog kita

hah.kan tetiba jadik mata duitan jap. hahaha

oke. da da cukup2 la mukadimah tu. meh sini lisa ajar sikit cara nak buat like box ni yer

yg da tawu tu tengok jer.kalo salah betolkan.jgn kutuk2.hihi

mula-mula login ur fb dulu,

then klik link

http://www.facebook.com/pages/create.php

pastu korang akan didedah *apa ayat aku ni* dengan halaman ini

klik pada artist,band or public figure.

pastu korang masukkan apa nama fan page korang.

cth mcam lisa buat unique and dynamic

pastikan ada simbol " diawal dan akhir perkataan tajuk tu yer

oke.pastu tekan get started!

so, fan page blog korang pun akan terhasil la.korang invite la kawan2 fb korang especially yg takde blog tu utk ajak diorg follow blog korang.means bile diorg like diorg akan dpt update daripada blog korang pada wall fb diorg::)

korang nmpak ta url fan page blog korang tu?sila copy dulu.

da siap copy skrol lagi kebawah, then tengok step no 5 tu. sila la tekan button yg lisa bulatkan tu yeee:)

the,korang akan jumpa halaman facebook developer ni

1st step:pastekan code yg korang copy tadi pada kotak facebook url tu

2nd step: adjustkan kelebaran like box korang.tengok la korang punye kotak sidebar besar mana.jgn smpai terlebih pulak yer:)

3rd step: choose colour scheme. sekiranya background sidebar blog gune warna gelap ,korang plih la light.kalo background sidebar warna terang korang pilih dark.baru la mantul like box korang nnti.heheeh* ini cume saranan.terpulang pada kehendak korang yer:)

4th step:show faces. haaaa.yg ni pulak. korang klik kalo korang nak gambar ahli2 facebook yg like korang punye fan page tu terpapar dlm like box tu.kalo tanak ta yah klik.

5th step:stream.maksudnya kalo nak update terpampang dlm like box tu,korang klik je.tanak tayah klik.senang.

6th step:show header.kalo nak gmbar profile pix fan page korang tu dipaparkan dlm like box tu, sila klik saje yer.ta nak tak payah klik. hee

oke.da siap?

sila la tekan get code

sila copy code iframe.

then korang log in blog korang

DASHBOARD-->DESIGN--->PAGE ELEMENT--->ADD A GADGET--->HTML/JAVASCRIPT

paste kan code tadi tu, then klik SAVE.

so, bila korang update blog, rajin2 la update dlm fan page blog korang dlm fb tu. makna nya setiap kali korang update.klik link post entry korang yg terbaru tu, then postkan dlm wall FB  fan page blog tu yer.

dapatlah follower2 fb korang terima update blog korang walaupun diorang takde blog. kan kan?

so,selamat mencuba yer:)

EMPUNYA TUTORIAL:  LISA

~jom singgah blog lisa ramai2~

entry khas untuk hari guru- Puisi untuk Guru di Hari Guru

Puisi 1

Bila murid duduk
cikgu berdiri
bila murid diseligi
cikgu pulak kena gari
murid datang naik BMW 7 siri
cikgu datang motor buruk cukai jalan pon mati
murid belajar sampai PhD
cikgu baru berkira nak sambung degree
namun begitu
di dunia cikgu berbakti
moga di akhirat syurga menanti

Puisi 2

Guru bagaikan NTV7
kerana “Ceria Selalu”
Guru juga kadang kala seperti TV 3
kerana “menjadi inspirasi hidupku”
yang pasti
Guru bagaikan serifm “sentiasa di hati”
dan yang paling penting
guru bagaikan pakej astro kerana
“macam macam ada”

Puisi 3

Waktu pelajar sakit,
guru menjadi doktor
waktu pelajar buat kes,
guru menjadi polis
waktu pelajar bayar yuran,
guru menjadi akauntan
waktu pelajar berkhemah,
guru menjadi rambo
waktu pelajar keliru,
guru menjadi penunjuk arah
Teruskan perjuangan yang mulia
ikhlaskanlah hati
selamat hari guru
untuk semua warga pendidik

kredit: http://mzfaizal.org/blog/?p=804

top page!

Harinie aerol nk tunjuk satu tutorial cara nak letak button up to page. ..

1.pergi ke design/edit html/click expand widget skali.. ..

2.cari code </body> ini di edit html. .untuk permudahan pencarian. .kamu tekan ctrl+f serentak ... .dan pastekan di kotak find. ..kalau dah jumpe. ...kamu pilih dulu contoh2 button untuk to up page kat bawah ni.. .

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='80' src='http://i1117.photobucket.com/albums/k588/Aerol_Hafiezi/totop.png' width='80'/></a>

 

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='80' src='http://4.bp.blogspot.com/-wKeHAUDuKWw/TXdpRbk5inI/AAAAAAAAAY4/REek5GGdB-o/s1600/button.png' width='80'/></a>

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='80' src='http://4.bp.blogspot.com/-uxEmnniNhUo/TXdpRsRMc8I/AAAAAAAAAZA/GcvZMO_DbNA/s1600/button4.png' width='80'/></a>

 

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='90'src='http://4.bp.blogspot.com/-uxEmnniNhUo/TXdpRsRMc8I/AAAAAAAAAZA/GcvZMO_DbNA/s1600/button4.png' width='90'/></a>

 

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='80' src='http://2.bp.blogspot.com/-aBOR-TLJdm4/TXdpSBSAbPI/AAAAAAAAAZQ/6sm83UbF7Bc/s1600/buttonup3.png' width='80'/></a>

 

<a href='#' style='right: 0px; position: fixed; bottom: 20px;' title='Back to Top'><img border='0' height='100' src='http://3.bp.blogspot.com/-vQzAeFFe5lI/TXdpSQg4INI/AAAAAAAAAZY/BR2jIB2htI0/s320/upbutton2.png' width='100'/></a>

3.Dah pilih satu gambar atas ni. ..ambil code html tu..dan paste tepat2 di atas </body> yang kamu cari tadi :D.. .korang boleh tetapkan sendiri width dan lenght yg bersesuain blog korang.

notif:aerol harap kamu semua puas hati dengan kerja aerol..huhuhu .. .(first time buat tutor prees to up page)

Papew hal korang boleh tnya Admin aerol riabow kat Fb ye :D ..click here

Nak tutor lagi Read more here: cara-cara nak buat button up to page(versi aerol) ~ Aerol Hafiezi http://aerol-rianbow.blogspot.com/2011/03/cara-cara-nak-buat-button-up-to.html#ixzz1MKWon8H1

TUTORIAL- Cara Buat Bubble Cursor Pada Blog

Cursor untuk blog anda memang boleh dipelbagaikan. Samada untuk menukar icon cursor sahaja, atau menjadikannya sparkle. Dan juga tidak ketinggalan untuk menjadikan cursor anda menghasilkan bubbles.


Ikuti tutorial mudah di bawah untuk letakkan bubble cursor di blog anda.

1. Dari dashboard > design > add a gadget > HTML/javascript

2. Copy code bubble cursor di bawah, kemudian paste di ruangan HTML/javascript.
(code ini bubble warna biru. Untuk tukar warna bubble, sila ikuti tutorial sehingga habis)

<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">

// <![CDATA[

var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles

var bubbles=100; // maximum number of bubbles on screen



/****************************

* JavaScript Bubble Cursor *

* (c) 2010 mf2fm web-design *

* http://www.mf2fm.com/rv *

* DON'T EDIT BELOW THIS BOX *

****************************/

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var bubb=new Array();

var bubbx=new Array();

var bubby=new Array();

var bubbs=new Array();



window.onload=function() { if (document.getElementById) {

var rats, div;

for (var i=0; i<bubbles; i++) {

rats=createDiv("3px", "3px");

rats.style.visibility="hidden";



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="1px";

div.left="0px";

div.bottom="1px";

div.right="0px";

div.borderLeft="1px solid "+colours[3];

div.borderRight="1px solid "+colours[1];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.top="0px";

div.left="1px";

div.right="1px";

div.bottom="0px"

div.borderTop="1px solid "+colours[0];

div.borderBottom="1px solid "+colours[2];



div=createDiv("auto", "auto");

rats.appendChild(div);

div=div.style;

div.left="1px";

div.right="1px";

div.bottom="1px";

div.top="1px";

div.backgroundColor=colours[4];

div.opacity=0.5;

if (document.all) div.filter="alpha(opacity=50)";



document.body.appendChild(rats);

bubb[i]=rats.style;

}

set_scroll();

set_width();

bubble();

}}



function bubble() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<bubbles; c++) if (!bubby[c]) {

bubb[c].left=(bubbx[c]=x)+"px";

bubb[c].top=(bubby[c]=y)+"px";

bubb[c].width="3px";

bubb[c].height="3px"

bubb[c].visibility="visible";

bubbs[c]=3;

break;

}

}

for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);

setTimeout("bubble()", 40);

}



function update_bubb(i) {

if (bubby[i]) {

bubby[i]-=bubbs[i]/2+i%2;

bubbx[i]+=(i%5-2)/5;

if (bubby[i]>sdown && bubbx[i]>0) {

if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {

bubb[i].width=bubbs[i]+"px";

bubb[i].height=bubbs[i]+"px";

}

bubb[i].top=bubby[i]+"px";

bubb[i].left=bubbx[i]+"px";

}

else {

bubb[i].visibility="hidden";

bubby[i]=0;

return;

}

}

}



document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sleft;

x=(e)?e.pageX:event.x+sdown; }



window.onresize=set_width;

function set_width() {

if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (typeof(self.innerHeight)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

else {

swide=800;

shigh=600;

}

}



window.onscroll=set_scroll;

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

}



function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}

// ]]>
</script>

3. Save dan lihat hasilnya.:)



Note:
Bagi yang hendak tukar bubble dengan warna yang anda kehendaki selain 4 warna di atas, caranya.

Cari kod di bawah dari code yang anda paste tadi, kemudian tukarkan code warna seperti yang dihighlight


Hendak cari kod warna.?
Rujuk code warna diSINI
KREDIT UNTUK UNWANTED