Capid Marshall: Tutorial

Showing posts with label Tutorial. Show all posts

Tutorial Gambar Membesar

Boboiboy

Tutorial Blog Gambar Membesar bila Cursor Menyentuh Gambar

tutorial kali ini mudah ja..

untuk mencantik dan memeriahkan lagi entry dalam blog anda..

caranya adalah.

1. Login --> Dashboard --> Design --> Edit Html

2. find (ctrl + f) <head>
3. copy code dibawah ini dan Paste di bawah <head> tadi

<style>
.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
</style>

4. Save templates anda..

mudah kan kan kan.. ?

# Sumber : Jiwa Rosak

Tutorial Add New Page Di Blog

Klik Dashboard>New Post>Edit Page(sebelah edit post)

Klik New Pages..

Savekan page.

Then pergi ke design> add a gadjet> pilih pages..

Boleh settingkan page tab kat sidebar atau kat bahagian bawah header..

Contoh tabs page yang ada kat blog Capid

Tutorial Floating Shoutbox

Caranya sungguh mudah...

tekan dhashboard>design>add gadjet>html/javascript

<style type='text/css'>a.linkopacity img {filter:alpha(opacity=50);-moz-opacity: 0.5;opacity: 0.5;-khtml-opacity: 0.5;}
a.linkopacity:hover img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;-khtml-opacity: 1.0; }</style>
<div style='display:scroll; position:fixed; top:20px; right:-0px;'><br /><a class='linkopacity' href='http://wanhazel.blogspot.com/2010/07/tutorial-ajax-float-lebih-cepat-nak.html' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='get shoutbox ajax float'><img border="0" src="http://i1009.photobucket.com/albums/af215/wanhazel252909/iconlink.gif" /></a><br />


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();

//Get the A tag
var id = $(this).attr('href');

//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();

//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});

//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();

//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);

//transition effect
$(id).fadeIn(2000);

});

//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();

$('#mask').hide();
$('.window').hide();
});

//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});

});
</script>
<style>
img { border: none; }
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}

#boxes .window {
position:fixed;
left:0;
top:0;
width:440px;
height:100px;
display:none;
z-index:9999;
padding:10px;
}
#boxes #wanhazelshoutbox {
background:url() no-repeat 0 0 transparent;
width:355px;
height:410px;
padding:20px 0 20px 0px;
}
#closesb {
padding:4px 0 0 0;
}
#author {
padding:8px 0 0 140px;
}
</style>
<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="URL GAMBAR YANG KORANG SUKA" border="0" /></a> </center> </ul>
<div id="boxes">

<div id="wanhazelshoutbox" class="window">
<center>

MASUKKAN CODE SHOUTMIX/SHOUTBOX KORANG KAT SINI!

</center>
<div id="author">
<div id="closesb"><input type="button" value="CLOSE" class="close" />
</div></div>

<div id="mask"></div></div>
</div></div>

tulisan yang warna merah tu mesti tukar dengan kod html box korang.
yang lagi satu tu boleh guna picture sendiri atau kat bawah ni...

http://i1117.photobucket.com/albums/k592/Nabeyla_Hanibah/U.png

http://i1117.photobucket.com/albums/k592/Nabeyla_Hanibah/Untitled-1-2.png

credit to Cik Beyla Nabiella

Tutorial Energy Saver

Kengkadang kita ada tengok blog orang lain ada energy saver. Tak rasa jealous ke tengok blog dieorang? Bukan susah pun nak buat. cuma tak tahu apa html kod dia kan?

1. Dari dashboard > design > edit html.
(backup template untuk langkah berjaga²)

2. Dengan menggunakan fungsi Find (ctrl + F), cari kod </head>

3. Copy kod di bawah dan paste SEBELUM kod </head>

<script language='javascript' src='https://sites.google.com/site/unwanted86/javascript/savetheenvironment.js' type='text/javascript'/>

Contohnya macam ni ye.

Save. siap..
Dalam tempoh seminit energy saver akan keluar kalau kita tak menggerakkan panah.

Tutorial Effect Salji Dalam Blog

Anada semua boleh menceriakan blog dengan memacam tutorial dan widget. Ada yang guna kesan khas kat kursor, pada header, pada gambar dan background atau template.

Kali ni Capid nak kongsi effect salji pada blog.

Dashboard> Design> Add Widget> HTML Code

Salji Putih

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

Salji Purple

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

Salji Hitam

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

Salji Biru

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

Salji Merah

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

Kalau nak ikutkan Capid nak buat Saljinya rupa camni.

Selamat Mencuba.

Tutorial Kelopak Bunga Berguguran

Ok tutorial ni cukup mudah. Tak susah pun sampai nak kena edit html code.

Dashboard> Design> Add Widget> HTML Code
Then, letakkan kod kat bawah ni dalam petak html yang korang dah bukak tadi ye

<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>if(!image_urls){var image_urls=Array()}if(!flash_urls){var flash_urls=Array()}image_urls['rain1']="http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png";image_urls['rain2']="http://4.bp.blogspot.com/-teXCIicWPF4/TpWcLLg0A2I/AAAAAAAAG0U/IPPCr1gponc/pinkpetal2.png";image_urls['rain3']="http://3.bp.blogspot.com/-3JG9HLECCRU/TpWcLZGSYtI/AAAAAAAAG0g/zIJINua93TE/redpetal1.png";image_urls['rain4']="http://2.bp.blogspot.com/-BByhQEK5E24/TpWcLux4xRI/AAAAAAAAG0s/x2hIr1AV_Ac/redpetal2.png";$(document).ready(function(){var c=$(window).width();var d=$(window).height();var e=function(a,b){return Math.round(a+(Math.random()*(b-a)))};var f=function(a){setTimeout(function(){a.css({left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100)}).animate({top:(d-10)+'px'},e(7500,8000),function(){$(this).fadeOut('slow',function(){f(a)})})},e(1,8000))};$('<div></div>').attr('id','rainDiv')
.css({position:'fixed',width:(c-20)+'px',height:'1px',left:'0px',top:'-5px',display:'block'}).appendTo('body');for(var i=1;i<=20;i++){var g=$('<img/>').attr('src',image_urls['rain'+e(1,4)])
.css({position:'absolute',left:e(0,c)+'px',top:'-30px',display:'block',opacity:'0.'+e(10,100),'margin-left':0}).addClass('rainDrop').appendTo('#rainDiv');f(g);g=null};var h=0;var j=0;$(window).resize(function(){c=$(window).width();d=$(window).height()})});</script>
<script>if(typeof jQuery=='undefined'){document.write('<'+'script');document.write(' language="javascript"');document.write(' type="text/javascript"');document.write(' src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">');document.write('</'+'script'+'>')}</script><script>$(document).ready(function(){var a=$('<img>').attr({'src':'http://2.bp.blogspot.com/-IQXNv-_CBLE/TpWcK7LL4VI/AAAAAAAAG0I/bcxYcqc_uI0/pinkpetal1.png','border':0});$('<a></a>').css({position:'absolute',right:'0px',top:'22px','z-index':'90'}).attr({'href':'http://tutorialuntukblog.blogspot.com/2011/10/tutorial-kelopak-bunga-berguguran-di.html'}).append(a).appendTo('body')});</script>

Bunga Ros
#sekadar hiasan

Kenapa Lelaki Suka Melihat Payu Dara Perempuan

Sudah bukan rahsia lagi kalau lelaki menyukai payudara wanita. Kajian pun membuktikan hal itu.
Dalam Daily Mail, menurut kajian, saat bertemu wanita, 47% lelaki langsung mengarahkan matanya pada payudara. Penelitian itu dilakukan oleh University of Wellington, New Zealand.
Dalam penelitian itu, para responden lelaki diminta untuk melihat enam gambar wanita yang sama. Saat itu, para peneliti merakam ke mana mata lelaki tertuju untuk pertama kalinya, berapa kali mereka melihat dan berapa lama tatapan itu berlangsung.

Hasilnya? “80% mata responden langsung melihat pada payudara dan bahagian tengah tubuh. Lelaki secara konsisten melihat pada payudara berbanding bahagian tubuh yang lain,” ujar salah satu peneliti.

Lantas apa yang membuat lelaki begitu tertarik pada payudara? Berikut ini jawapan beberapa lelaki seperti yang dimaklumkan di iVillage:
1. Menenangkan
Sejumlah lelaki menganggap payudara bahagian tubuh yang menenangkan. Hal itu sendiri berkait dengan fungsi bahagian tubuh itu, iaitu untuk menyusui. Payudara mengingatkan mereka pada fungsi tersebut dan kehangatan ibu saat sedang memberikan bayi susuan badan.
2. Simbol Kesuburan
Lelaki menganggap payudara adalah simbol kesuburan, pengasuhan dan kelangsungan hidup seorang makhluk hidup. Wanita yang memiliki payudara dianggap memiliki kemampuan untuk menghasilkan keturunan.
3. Kunci untuk Membuat Wanita Ghairah
Lelaki-lelaki tentu paham kalau wanita akan berghairah saat payudaranya di sentuh. Oleh karena itu, lelaki suka pada bahagian tubuh itu, apapun ukurannya. Dengan hanya menyentuh payudara, lelaki yakin mereka bisa membuat keinginan wanita meningkat.
4. Lelaki Makhluk Visual
Tidak seperti wanita yang bisa berghairah hanya dengan membaca novel romantis, lelaki memerlukan gambaran yang lebih jelas bagi meningkat keinginannya. Payudara lah yang dianggap dapat menjadi punca kenaikan tersebut. Payudara dianggap bahagian tubuh yang paling indah.
5. Payudara Dianggap Seksi
Menunjukkan bahagian tubuh, terutama bagian intim seperti payudara, dianggap seksi untuk beberapa kalangan. Oleh kerana itu, lelaki semakin ingin tahu. Semakin ditutup, lelaki akan semakin mencari tahu.

Icon pada title post

Ok,hari ni kebosanan yang teramatlah sangat.So,aku nak share satu tutorial dengan korang.Tutorial ni macam dah lapok lah kan.Tapi,tak pe la.

Aku nak ajar korang cara nak pasang icon dekat title post macam dalam gambar tu.

1.Dashboard >Design >edit html

2.Korang tick pada 'Tick Expand Widget'

3.Dah tick,korang cari

<a expr:href='data:post.url'>

4.Dah jumpa kod tu,korang akan nampak kod

<data:post.title/></a>

5.Letakkan kod di bawah antara

<a expr:href='data:post.url'>

<data:post.title/></a>

letak kod ni.

<img src="URL ICON"/>

6.Tulisan yang warna merah tu boleh tukar dengan url yang korang suka.

Dah siap?Save kan.Senang je kan?

Disable Right Click

Okay,sekarang ni nak ajar cara nak disable right click pulak.Sebenarnya memang tak ada cara yang boleh buat entry kita tak dicopy.Tapi,ni sebagai cara untuk percubaan mencegahlah kan.So,mencegah lebih baik daripada merawat T________T tak ada kene mengena LOL.

Ada tiga jenis disable right click yang aku nak ajar ni.Malas nak buat banyak-banyak entri,so aku sumbat je semua kat sini. :P

Still boleh copy,cuma tak boleh right click je
Cara pemasangan:
1.Pergi dashboard>design>edit HTML
2.Korang cari code

<body>

3.Korang tukarkan code kat atas tadi dengan kod ni.

<body oncontextmenu="return false;">

4.Savekan.Dah siap.
Boleh copy jugak,tak boleh right click,macho sikitlah sebab ada pop up window yang keluar
Cara nak pasang:
1.Pergi dashboard>design>add gadget>HTML/javascript
2.Pastekan code kat bawah ni dalam kotak HTML/javascript

<script language='JavaScript'>  </script>

3.Text yang aku highlightkan tu boleh ditukar mengiku sesedap rasa korang yek.Contoh "hoi,kau nak kene FLYING KICK ke?"
4.Savekan.

Siap!

Tak boleh highlight,tak boleh right click

Cara nak pasang:
1.Pergi ke dashboard>design>edit HTML
2.Cari code.

<head>

4.paste kod kat bawah ni lepas jumpe kod atas tu ye.

<script type="text/javascript">
//form tags to omit in NS6+:
//http://eking.in
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

4.Savekan.

Dah siap.Good luck ye.Kalau tak boleh,bagi tau tau!

Nak copy gunakan Ctrl+C. ok...!!

Facebook Like Button

Firstly pegi kat Design> Edit HTML> Tick Expand Widget

Then cari kod ni

data:post.body

Then copy kod bawah ni dan paste bebetul bawah kod yang ade kat atas tadi tu.

<iframe allowTransparency='true'

expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&layout=standard&show-faces=true&width=530&height=60&action=like&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Preview dulu baru save tau.

Blockquote Tutorial

Ok kali ni aku nak ajar korang macam mane nak buat blockquote. Benda ni senang je nak buat. Tapi kalau tak faham tu je yang merumitkan keadaan.

Ok follow care yang aku nak tunjukkan nih. Jangan silap pulak tau.

Pergi Design> Edit HTML

]]></b:skin>

Copy dan search kod atas tadi dengan menekan button Ctrl + F

Then kat atas kod yang ko dah jupe tadi korang pastekan kod yang ade kat bawah ni pulak.

.post blockquote {background:url(URLGAMBAR);-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;padding: 6px;Border: 1px solid #ff0d62;margin:1em 20px;}

URL Gambar yang tulisan kaler biru tu korang boleh la tukar tanpa segan silu dengan background yang korang minat. Boleh cari kat sini.
Ambik yang direct link tau.. Jangan silap pulak

Effect Bubble Pada Cursor

Halo dan hai kepada pembaca yang setia.

Ni sebenarnya first time nak try buat tutorial untuk bagi blog cantik dan futuristic gitu. Jadi, untuk tutorial pertama kita buat bubble effect kat cursor blog. Asyik tengok effect salji je kat blog, rasa boring pulak kan!!

step 1

click "dashboard"

step 2

click "design"

step 3

click pada "Add a Gadget"

step 4

click pada "HTML/JavaScript"

step 5

copy code kat bawah nie

<noscript></noscript><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">// <![CDATA[
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=30; // 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>

Step 6

pastekan je kat html box tuh.

Step 7

Save je.

PERINGATAN

warna merah untuk warna bubble

warna biru untuk jumlah bubble

Kod Warna