Showing posts with label tutorial. Show all posts
Showing posts with label tutorial. Show all posts

tutorial floating navigation bar

Tumblr_ls3ivemzce1qcm8wgo1_500_large
bestnyerr arr kalo dpt honeymoon dkt sini xD

lama dah pqah x buat tuto, tpi pqah buat ari nie sebab ada org yg request iaitu Alissa . dia nk tab menu terapung mcm pqah punye yg ada dekat kiri blog nie.. okay's let start. =D baca Bismillah dulu ye

dashboard>design> page element>add gadjet> html/javascript
letak code dkt bawah nie dkt html/javascript tu
<div style="display:scroll; position:fixed; top:80px; left:0px;">

<a href="LINK" target="_blank" rel=nofollow title="TITLE" imageanchor=1 style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE" /></a><br />

<a href="LINK" target="_blank" rel=nofollow title="TITLE" imageanchor=1 style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE" /></a><br />

<a href="LINK" target="_blank" rel=nofollow title="TITLE" imageanchor=1 style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE" /></a><br /></div>
pastu save...... dah siapkan!!
kalo korang nk tmbah tab menu tu korang  just copy code nie je
 <a href="LINK" target="_blank" rel=nofollow title="TITLE" imageanchor=1 style="margin-left: 1em; margin-right: 1em;"><img border="0" src="IMAGE" /></a><br />
letak dia dkt atas warna orange tu
warna merah tu letak link page korang
warna purple letak tajuk dia
warna hijau tu letak image icon korng , buat la cntik2 sikit.. kalo ada masa nnti pqah buat =)
 credit: Athirah

tutorial jquery top button

ello hari nie pqah buat tuto jquery scroll to top yg mcm pqah punya tu.hehehe.. cantik tak?? nnti pqah bagi freebies button tu ye... tuto nie credit dkt anis nutella

1: dashboard> design> edit html ... jgn lupa tick expand widget
2: tkn ctrl+f search code nie
</body>
3:paste code dibwh nie sebelum code diatas
<a href='#' id='toTop'><img src='URL IMAGE TOP BUTTON?t=1292762029' style='border:0;'/></a>
*url image tu gamba top button korang

4: search code nie pulak
  ]]></b:skin>
5: copy code dibwh nie sebelum code tadi
/* to top */
#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }
6: last step...hehehe korang cari code nie
</head>
7: paste code dibwh sebelum code diatas jugak =P
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>/*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive &quot;Scroll to Top&quot; link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ 
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr(&quot;href&quot;);if($(window).scrollTop()!=&quot;0&quot;){$(this).fadeIn(&quot;slow&quot;)}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()==&quot;0&quot;){$(scrollDiv).fadeOut(&quot;slow&quot;)}else{$(scrollDiv).fadeIn(&quot;slow&quot;)}});$(this).click(function(){$(&quot;html, body&quot;).animate({scrollTop:0},&quot;slow&quot;)})}}); 
$(function() { $(&quot;#toTop&quot;).scrollToTop(); }); 
</script>

tutorial scrollbar hover

Tumblr_lrznuhqybf1qhkbwvo1_500_large
waa~~ indahnya

hye, tutorial menjelma lgi...hehe
kali ni pqah nak ajar korang buat scrollbar yg ada hover\mcmpqahpunya,cantiktak=P/

dashboard> design> edit html
cari code nie ]]></b:skin>
dah jumpa code tu, copy code dibwah nie pulak

::-webkit-scrollbar {
height:12px;
width: 10px;
background-image:url(url bckgrd);
}
::-webkit-scrollbar-thumb {
background-image:url(url bckgrd);
-moz-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar:hover {
background-image:url(url bckgrd);
}
::-webkit-scrollbar-thumb:hover {
background-image:url(url bckgrd);
-moz-border-radius: 10px;
border-radius: 10px;
}
pastekan code ini diatas ]]></b:skin>
url background tu pandai la korang letak sendiri ye =)

tutorial background berbeza setiap page

tutor nie direquest oleh miera, tapi miera nie x bagi link dia dkt pqah  =(

first pegi dashboard>design>edit html
cari code nie
</head>
dah jumpa!! paste code dibawah dan pastekan diatas/sebelum code </head>

<b:if cond='data:blog.url == &quot;PAGE URL&quot;'>
<style>
body {
background-image: url(URL BACKGROUND);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>
 page url korang tukar dgn url page yg korg nk buat background berbeza
url background pulak url background yg cntik korang nk letak dkt page tu

kalau page yg korg nk buat background dia berbeza tu banyak korg hanya copy code diatas byk kali bergantung kepada jumlah page korang contoh mcm nie!!!

<b:if cond='data:blog.url == &quot;PAGE URL&quot;'>
<style>
body {
background-image: url(URL BACKGROUND);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>

<b:if cond='data:blog.url == &quot;PAGE URL&quot;'>
<style>
body {
background-image: url(URL BACKGROUND);background-position: center; background-repeat:repeat; background-attachment: fixed;
}
</style>
</b:if>


credit: nana

tutorial gambar di zoom apabila di klik

oke.. hari nie pqah nak ajar korang buat gmbar yg korang klik akan di  zoom dan xyah nak bukak new tab atau loading lama untuk  melihat gambar.. pqah rasa blog yg buat tutorial patut buat benda nie didlm blog mereka tu untuk memudahkan org lain nk ikot tuto tu mcm pqah punya nie( try korang klik gmbar nie)warning!! gambar yg boleh di zoom hanya gmbar berformat JPEG, PNG, GIF
gmbar sengaja di terbalikan =P hehe
1. design> edit html
2. cari code nie </head>
3. copy code di bawah dan pastekan diatas code </head>


<script src='http://highslide.com/highslide/highslide-full.js' type='text/javascript'/>
<link href='http://highslide.com/highslide/megik.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.allowSizeReduction = false;
hs.showCredits = false;
hs.isUnobtrusiveAnchor = function(el) {
if (el.href && /\.jpg$/.test(el.href)) {
el.className = 'highslide';
return 'image';
}
//insert the if condition code for other extensions like .jpeg, .gif, .png etc.
}
function fixBloggerImages(searchFor, replaceWith) {
var href;
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++) {
href = anchors[i].href;
if(href.indexOf(searchFor) != -1) {
anchors[i].href = href.replace(searchFor, replaceWith);
anchors[i].setAttribute("onclick", "return hs.expand(this)");
anchors[i].setAttribute("class", "highslide");
anchors[i].setAttribute("title", "Click to enlarge");
}
}
}
//]]>
</script>
dah siap save ye.. senang je kan semudah ABC =P

credit: aerol

tutorial post title hover with icon

hari nie pqah nak ajar korang buat post title  hover dgn icon comei2... nie contoh dia

gambar satu
klik tuk tumbesaran

 
gambar dua

korang tgk ada perbezaan dia... so yg ni la yg pqah nak ajar korang buat

design>edit html
1) cari code nie
.post-title {
 2) korang paste code yg nie diBAWAH code yg tadi
margin: 0px;
padding: 6px;
font-size: 115%;
font-weight: Normal;
font-color: #000000;
line-height: 1.1em;
text-align: right;
background: url(gambar background);
border-top: 4px solid #585858;
border-bottom: 3px solid #585858;
text-shadow: 2px 1px 2px #94B3FF;
}
.post-title:hover {
margin: 0px;
padding: 6px;
font-size: 115%;
font-weight: Normal;
font-color: #000000;
line-height: 1.1em;
text-align: right;
background-image:url(http://i257.photobucket.com/albums/hh205/xoxojays/smilies/crayon/pic003demoji_12716074decoojp.gif);
background-position:center;
background-repeat:no-repeat;
border-top: 2px solid #585858;
border-bottom: 2px solid #585858;
text-shadow: 2px 1px 2px #94B3FF;
-webkit-transition: 1s;}
warna ungu tu url background yg korang nak letak 
warna kuning tu warna border dia korang letak je warna- warni pun asalkan cantik
warna merah tu icon comel yg korang nk letak


kalau x jadi comment ye pqah pun dah pening buat coding nie..=(
kalau x silap pqah selepas .post title tu ada code mcm nie
margin: 0px;
padding: 6px

kalau ada korang buang ye pastu baru korang copy step no.2 tu....

Tutorial text cursor

oke hari nie teacher pqah nk ajar reader wat text cursor... tuto nie mudah jew nk wat kalau korang pandai ubah kod2 html nie
oke teacher nk mula dah murid tgk ye =P

1. mula2 pegi dkat design > add a gadget > html/javascript

2. copy coding nie oke

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'verdana';

color: #0224FE;

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 = "YOUR 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>


3.yg coding warna purple tu, korng tulis ape yg korng nk tulis=P

4. coding warna biru tu, tuk font/ jenis tulis korng... pqah syorkn korng kalau nak carik 

jenis tulis nie korng pegi jew kat microsoft word yg ade kt laptop korng tu tuk carik jenis 
tulisan

5. coding warna red tu tuk colour dye code warna leh dpt kt sini

p/s:kalau xpaham tnye ye, malu bertnya sesat jalan =P