Tutorial Membuat Recent Comment Seperti Paparan Message Di Windows 8

Tutorial:

1. Login ke Dashboard blogger.

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

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

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

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<style type="text/css">
#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}
</style>

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnHJArQ3aKPmRi-nqjSPNlHc3fAtBoj-Q7qnEICNx0EzHI3jQgqtwbqltweSPlS0iRSdaBgF4lJjHpPdm_-1QwD7GOTlOzgCH_thWMJQRTzp59auyQ-5ejQ8Tcg5GaP_uu4_BTlQOA38/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

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

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Baca Selengkapnya »

Tutorial Membuat Related Post Dengan Thumbnail Dan Tooltip

Contoh Related Post

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 ]]></b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]></b:skin>

/* Related Post */
.related-post .post-thumbnail {
z-index: 1; position: relative;
width: 108px;
height: 108px;
margin: 0; display: block;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 2px 2px 5px #444;
-moz-box-shadow: inset 2px 2px 5px #444;
box-shadow: inset 2px 2px 5px #555;
}
.related-post {
float: left; position: relative;
width: 108px;
height: 108px
margin: 0 10px 10px 0;
background: #F6F6F6;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.related-post .related-post-title {
display: none;float: left; background: #00B366;
color: #fff;
text-shadow: none;
font-weight: bold;
padding: 10px;
position: absolute;
top: -20px;
left: 40px;
z-index: 2;
width: 200px;
-webkit-box-shadow: 0 0 2px #444;
-moz-box-shadow: 0 0 2px #444;
box-shadow: 0 0 2px #444;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.related-post:hover .related-post-title {display: block;}

7. Seterusnya, cari kod dibawah:

<div class='post-footer-line post-footer-line-1'/> 

atau 

<div class='post-footer-line post-footer-line-2'/>

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah selepas kod  <div class='post-footer-line post-footer-line-1'/> atau kod <div class='post-footer-line post-footer-line-2'/> .

<!-- Related Posts with Thumbnails Code Start-->
<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';
rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';
rcomment='comments';
rdisable='disable comments';
commentYN='no';
var dw='';
titles=new Array();
titlesNum=0;
urls=new Array();
timeR=new Array();
thumb=new Array();
commentsNum=new Array();
comments=new Array();
function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqJFzWkEwoAYsCzZQSQ5k0wLIjUdMbJMv6pgJ2NFRk0nMdQfVxfjjddZrBplPvz92fFjqTZSMxhMdCIF-wq3M1e0MvlAdT1GAc6ATasMi34nj1wYoZa-PDLeTNqaTgilo_L6ojBhUPiIfR/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates();
printRelatedLabels(&#39;<data:post.url/>&#39;);
</script>
</b:if>
</div>
<div class='clear'/>
<!-- Related Posts with Thumbnails Code End-->

Keterangan:

width: 108px; - Ukuran lebar thumbnail (gambar)

height: 108px - Ukuran tinggi thumbnail (gambar)

var maxresults=5; - Bilang related post yang dipaparkan

9. Klik Save Template

#Selesai :)

Baca Selengkapnya »

Tutorial Membuat Energy Save Mode Menggunakan CSS3

Pada entri yang lepas saya ada share tutorial Energy Saving Mode menggunakan javascript . Kali ini saya ingin kongsi satu lagi tutorial mengenai Energy Saving Mode dengan hanya menggunakan CSS3. 

Screenshot

Tutorial:

PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada butang More Option dan klik Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 ]]><b:skin> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  ]]><b:skin>

/* Credit By ZTO Edited by faiz-tutorial.blogspot.com */ body::before, body::after { position: absolute; position:fixed; content: ""; background: #000; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; z-index: 9999 } body::before { border: 10px solid #ccc; border-left:none; top: 0; left: 50%; right: 0; bottom: 0; } body::after { top: 0; left: 0; border: 10px solid #ccc; border-right:none; right: 50%; bottom: 0; } body:hover::before { left: 100% } body span.sme { position: absolute; position:fixed; right:0; left: 0; top: 47%; border: 5px solid #ccc; margin: 0 0 0 -1px; z-index: 99999; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -moz-transition: all 3s ease-in; -o-transition: all 3s ease-in; -webkit-transition: all 3s ease-in; transition: all 3s ease-in; -moz-box-shadow: 0 0 20px 3px #00FF33; -webkit-box-shadow: 0 0 20px 3px #00FF33; box-shadow: 0 0 20px 3px #00FF33 } body span.smeblog { position: absolute; position:fixed; right:0; left: 0; top: 47%; border: 5px solid #ccc; margin: 0 0 0 0px; z-index: 99999; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -moz-transition: all 3s ease-in; -o-transition: all 3s ease-in; -webkit-transition: all 3s ease-in; transition: all 3s ease-in; -moz-box-shadow: 0 0 20px 3px #00FF33; -webkit-box-shadow: 0 0 20px 3px #00FF33; box-shadow: 0 0 20px 3px #00FF33 } body:hover::after { right: 100% } body:hover::before, body:hover::after { visibility: hidden } body:hover span.sme { visibility: hidden; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; top: 0; } body:hover span.smeblog { visibility: hidden; -moz-transition: all .2s ease-out; -o-transition: all .2s ease-out; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; top: 100%; } body span.ok3 { width:35%; border-bottom: 5px solid #ccc; border-top: 5px solid #ccc; padding:10px; background:#000; font-size:25px; color:#fff; text-align:center; position: absolute; position:fixed; left: 32%; right:45%; top: 40%; bottom: 45%; margin: 0 0 0 0px; z-index: 123455543123445556888; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; -moz-transition: all 3s ease-in; -o-transition: all 3s ease-in; -webkit-transition: all 3s ease-in; transition: all 3s ease-in; -moz-box-shadow: 0 0 20px 3px #00FF33; -webkit-box-shadow: 0 0 20px 3px #00FF33; box-shadow: 0 0 20px 3px #00FF33 } body:hover span.ok3 { visibility: hidden; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out; -webkit-transition: all .7s ease-out; transition: all .7s ease-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; right: 0; z-index:99999999 }

7. Cari kod dibawah:

 <body> 

8. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah selepas kod  <body>

<span class='sme'></span>
<span class='ok3'>Energy Saving Mode<br/><span style='font-size:12px;color:#fff'>Sila Sentuh Halaman Ini Untuk Masuk Ke Halaman Blog</span></span>
<span class='smeblog'></span>

9. Klik Save Template

#Selesai :)

Baca Selengkapnya »

Tutorial Membuat Double Klik Untuk "Back To Top" Pada Blog

Biasa kita lihat pada sesuatu blog, pemilik blog akan meletakan satu ikon "back to top" pada bawah halaman blog untuk memudahkan visitor kembali scroll ke halaman atas setelah scroll ke bawah halaman blog. Disini saya akan sertakan tutorial untuk membuat fungsi Back to Top hanya dengan duoble klik sahaja.

Tutorial:
PS: PASTIKAN ANDA BACKUP DAHULU TEMPLATE BLOG ANDA UNTUK LANGKAH KESELAMATAN . Lihat sini >> http://faiz-tutorial.blogspot.com/2013/02/tutorial-backuprestore-template.html

1. Login ke akaun blogger anda.
2. Klik pada butang More Option dan klik Template

3. Klik Edit HTML

4. Klik pada ruang edit html dan tekan CTRL+F untuk paparkan ruang search

5. Cari kod dibawah:

 </head> 

6. Copy (CTRL+C) dan Paste (CTRL+V) kod dibawah sebelum kod  </head>

<script language="JavaScript1.2">
function dblclick() {
window.scrollTo(0,0)
}
if (document.layers) {
document.captureEvents(Event.ONDBLCLICK);
}
document.ondblclick=dblclick;
</script>

7. Klik Save Template

#Selesai :)

Baca Selengkapnya »

Tutorial Burn File Image ISO Menggunakan PowerISO

Untuk entri kali ini, saya ingin berkongsi satu tutorial untuk burn file image ISO menggunakan aplikasi PowerISO. Aplikasi ini mempunyai pelbagai fungsi seperti dapat membuka , mengekstrak , burn , membuat , mengedit , memampat , split , encrypt dan convert fail ISO. Dengan aplikasi ini juga ia mampu mount fail ISO pada virtual drive yang suda sedia terpasang semasa anda install aplikasi ini.


Download:
Tusfile
PowerISO 5.7
Password (jika diperlukan) : 

Tutorial:
1. Install aplikasi PowerISO dan buka aplikasi tersebut.

2. Klik ikon Burn

3. Tick pada Image File dan klik pada ikon Browse

4. Pilih file image ISO dan klik Open

5. Masuk cd@dvd kosong pada cd/dvd drive .

6. Pada bahagian Burning settings:

• Pada bahagian Burning drive , pilih cd/dvd drive yang anda gunakan.
• Pada bahagian Burning speed, pilih speed kelajuan burning yang anda mahukan atau biarkan maximum(default) .
• Pada bahagian Verify written data, tick jika anda mahu pengesahan data selepas proses burning.

7. Klik butang burn dan tunggu proses burning selesai.

Baca Selengkapnya »

[Tutorial Windows] Reset Logon Password (XP/VISTA/7/8)

Pernahkah anda terlupa kata laluan ketika logon windows anda? . Mungkin ada yang pernah mengalaminya. Oleh itu, saya ingin berkongsi satu cara untuk reset semula kata laluan windows logon anda.Terdapat beberapa cara yang boleh kita lakukan untuk reset semula kata laluan windows logon , disini saya menggunakan satu aplikasi yang saya telah cuba sendiri dan ianya berhasil, aplikasi tersebut adalah NTPWEdit 0.3 yang terdapat dalam satu toolkit Hirens Boot. Pada tutorial ini , saya menggunakan Hirens Boot 15.1.

Tutorial:
1. Download tools dibawah:
- Hirens boot 15.1 [Download] [Latest Version 15.2]

2. Burn file ISO HBCD pada cd. [Baca Tutorial Burn File Image ISO Menggunakan PowerISO]

3. Boot cd HBCD pada laptop anda dan pilih Mini Windows XP dan klik Enter.

4. Klik 2x pada HBCD Menu >> Klik Pada Programs >> Pilih Password/Keys >> Pilih Windows Login >> Klik NTPWEdit (Reset XP/Vista/7 User Password)

5.  Pada bahagian Path to SAM file klik butang Browse. Pergi pada C:\Windows\System32\Config (Jika tiada pada drive C:\ , cuba cari pada drive lain misalnya D:\ )

6. Klik pada file SAM dan klik Open

7. Pilih Username yang anda mahu ubah password nya dan klik Change password .

8. Isikan password anda pada ruang New password dan Verify , selanjutnya klik OK

9. Klik Save changes .

10. Restart pc@laptop anda dan boot pada windows anda. Cuba login windows anda menggunakan password baru anda. Kalau dapat login bermaknanya anda telah berjaya. hehe.

###Kalau xphm sila komen ok.  :)

Baca Selengkapnya »

GIVEAWAY WELCOME TO MY BLOG by AWLA MUKHLISAH BEAUTY SHOP

SYARAT-SYARAT WAJIB tetapi sangat SIMPLE :

1. - Warganegara Malaysia yang mempunyai alamat tetap di Malaysia.

2. - Mempunyai Blog sendiri

3. - Wajib Follow blog Awla (kalau dah follow tu teruskan follow Awla ya :)

4.     - Wajib LIKE Page " Awla Mukhlisah Beauty Shop "

5.     - Wajib Follow twitter Awla bagi yang ada Twitter : " https://twitter.com/AwlaMukhlisah "

6.     - Copy banner kat atas dan letakkan dalam entri.

7.     - Buat Entri bertajuk "GIVEAWAY  WELCOME TO MY BLOG BY AWLA MUKHLISAH BEAUTY SHOP "

8.     - Letakkan link entri segmen di ruangan komen di entri GIVEAWAY ini sahaja. 'pastikan WORD VERIFICATION takde ye'

ANTARA HADIAH LUMAYAN UNTUK PARA PEMENANG ! 

- Anti Aging Gold by AuraMaya

- BB Cream by Aura Maya

- Health Care Minyak AnginAromatheraphy Non-Alkohol

- SUPRA color foundation

- Lip tint

- Eyeliner

  " yang paling HOT.. "

# Pemenang akan dipilih melalui perkhimatan RANDOM.ORG 
& 
melalui Awla Mukhlisah Beauty Shop sendiri :)

P/S : Kalau nak dapatkan hadiah yang lumayan ini, kena rajin2 la share ya.

 In Sha Allah akan ada peluang nanti ! ;)

 All The Best ya ! :)

Regards Luv,
Awla Mukhlisah Beauty Shop :)

Baca Selengkapnya »

[ANDROID APPS] GPS Fix Deluxe 2.4.1

- GpsFix adalah aplikasi yang dapat membantu untuk mengurangkan masa yang diperlukan untuk menetapkan kedudukan.
- Ia mengekalkan GPS / AGPS penerima dihidupkan sehingga lokasi ditetapkan.
- Ia amat berguna apabila aplikasi navigasi anda mengatakan "waiting for location" terlalu kerap.
- Ia menunjukkan status gps telefon anda.
- Ia membantu untuk bekerja dengan Papago M9/11, Google Maps, RMaps, OsmAnd, Sygic, Peta Yandex dan lain-lain navigasi.

Link Download:
[Tusfiles]

• GPS FIX Deluxe 2.4.1 (17kb)

Password: faiz-tutorial.blogspot.com

## Anda boleh menggunakan aplikasi ini ketika menggunakan Papago M11

Baca Selengkapnya »

Tutorial Membuat Recent Post Dengan Thumbnail , Comment dan Timestamp

Tadi saya ada cuba satu widget ni , nampak cun juga. jadi, entri kali ini saya akan kongsi Tutorial Membuat Recent Post Dengan Thumbnail , Comment dan Timestamp seperti screenshot diatas. Ok sekarang kita mulakan tutorialnya.

Tutorial:

1. Login ke Dashboard blogger.

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

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

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

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:

<div style="border: 0px solid rgb(153, 153, 153); overflow: auto; width: 330px; height: 450px; text-align: left;">
<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;
float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style>
<script style="" src="https://krishcarasoul.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>
<script style="">
var numposts = 10;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;</script>
<script src="http://faiz-tutorial.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs"></script></div>

## Gantikan:

• http://faiz-tutorial.blogspot.com - Tukarkan kepada URL blog anda.
• var numposts = 10; - Nombor berwarna adalah jumlah entri yang akan dipaparkan
• width: 330px; height: 450px; - Nombor berwarna adalah saiz lebar dan tinggi recent post.

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

GAMBAR 4

7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..

Baca Selengkapnya »