tutorial : jQuery Accordian Tab Menu


kepada yang suka letak banyak gadget dan ingin blog nampak kemas walaupun dipenihi gadget .. disini lilo ajarkan buat jQuery Tab Menu . dengan ini kamu boleh gabungkan 3 gadget atau lebih dari 3 gadget dalam satu gadget HTML/Javascript so ? ini kira 3 in 1 laa . tengok contoh dibawah .. tapi ini besar tau ? bila dah letak kat sidebar dia automatik ikut size sidebar kamu . jadi jangan bimbang .



title no. 1

ini isi no. 1
title no. 2
ini isi no. 2

title no. 3
ini isi no. 3

1. Dashboard > Design > Add gadget > HTML/Javascript
2. copy codes dibawah dan paste .

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #ffffff;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FFB6D6;
margin:1px;

-moz-border-radius: 35px;
border-radius: 35px;

}
.msg_body {
padding: 5px 10px 15px;
background-color:#ffffff;
}
</style>

<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">title 1</h5>
<div class="msg_body">
<center>
Isi dalam title 1
</div>
<h5 class="msg_head">title 2</h5>
<div class="msg_body">
Isi dalam title 2

</div>
<h5 class="msg_head">title 3</h5>
<div class="msg_body">
Isi dalam title 3
</div>
</div>

  • purple warna title tab menu .
  • warna hijau ialah background tab menu .
  • warna merah untuk background isi tab menu . 
  • title 1title 2 & title 3 ganti ikut kehendak kamu .
  • Isi-2 tajuk 12 & 3 type atau letak apa-apa pun .

codes warna search SINI . then Save , TOLONG JANGAN preview melalui Rich Text , nanti tak jadi .. faham ? okay done !

tutorial : Center Header

1. Dashboard > Design > Edit html *tak perlu tick expand widget template
2. Ctrl+F search this code

/* Content


3. kemudian , paste code bawah ni sebelum code /* Content 
.Header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
4. preview dan save

tutorial : Delete Subcribe Post To (Atom)

1. Dshboard > Design > Edit html *tick expand widget template
2. search codes ini

<b:include data='feedLinks' name='feedLinksBody'/>
3. delete code tersebut , preview dan save .

tutoriak : Delete Navbar

click untuk lihat dengan jelas
1. Dashboard > Design > Edit html *tick expand widget template .
2. Ctrl+F and search code .

/* Variable definitions
3. dah jumpa ? paste codes ini diatas codes tadi . 
#navbar-iframe {
display: none !important;
}
4. preview jika tiada masalah , click save .

tutorial : Energy Saving Mode

1. Dashboard > Design > Add gadget > THML/Javascript .
2. copy codes dibawah .

<script src='http://www.vincentcheung.ca/jsencryption/jsencryption.js' type='text/javascript'></script><script type="text/javascript">if (window.jstiming) window.jstiming.load.tick('headEnd');</script>
<!-- save your energy --><script language='javascript' src='http://www.onlineleaf.com/savetheenvironment.js' type='text/javascript'></script><!-- save your energy end --><script type='text/javascript'></script><script type='text/javascript'>
3. pastekan code and click save .

tutorial : Sweet Tiles Tooltip

Assalamualaikum, okat sweet tiles tooltip ni sejenis box yang akan muncul bila cursor hover pada link..
credit to mania story .


1.Dashboard > Design > Edit HTML *tick expand widget template
2.Ctrl+F search code

</head>
3. kemudian search code ini 

<body>
4. copy salah satu code dibawah

pink colour
<link href='http://www.stormpages.com/ilaa/tolltips.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://www.stormpages.com/rojakamoi/tooltips.js' type='text/javascript'/>
<script src='http://www.stormpages.com/rojakamoi/sweettiles.js' type='text/javascript'/>
blue colour
<link href='http://www.stormpages.com/rojakamoi/sweet.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://www.stormpages.com/rojakamoi/tooltips.js' type='text/javascript'></script> <script src='http://www.stormpages.com/rojakamoi/sweettiles.js' type='text/javascript'></script>
 orange colour
<link href='http://sites.google.com/site/defaultjssite/urltooltip.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://sites.google.com/site/defaultjssite/urltooltip.js' type='text/javascript'/>
<script src='http://sites.google.com/site/defaultjssite/sweettiles.js' type='text/javascript'/>
purple colour
<link href='http://eyenamania.webs.com/FadingTooltipManiaStory.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.stormpages.com/rojakamoi/tooltips.js' type='text/javascript'></script> <script src='http://www.stormpages.com/rojakamoi/sweettiles.js' type='text/javascript'></script> 
 red colour
<link href='http://eyenamania.webs.com/SweetTooltipsByAinaaMania.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.stormpages.com/rojakamoi/tooltips.js' type='text/javascript'></script> <script src='http://www.stormpages.com/rojakamoi/sweettiles.js' type='text/javascript'></script> 
green colour
<link href='http://eyenamania.webs.com/TooltipByAinaaManiaStory.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.stormpages.com/rojakamoi/tooltips.js' type='text/javascript'></script>
<script src='http://www.stormpages.com/rojakamoi/sweettiles.js' type='text/javascript'></script>
black colour
<link href='http://rojakamoi.stormpages.com/sweet_2.css' media='screen' rel='stylesheet' type='text/css'/> <script src='http://rojakamoi.stormpages.com/tooltips.js' type='text/javascript'/> <script src='http://rojakamoi.stormpages.com/sweettiles.js' type='text/javascript'/>
5. paste salah satu code dianatara code <head/> dan <body> seperti rajah dibawah .


6. preview terlebih dahulu tau ? dan kalau tak ada masalah boleh click save .

tutorial : Change Background 3 in 1

Assalamualaikum .. hee .. kan lilo dah cakap .. hari ni hari untuk tutorial sahaja .. tak ada life story .. kalau ada pun lepas habis buat semua tutorial .. let's begin !

BACKGROUND FOR DENIM AND MINIMA TEMPLATE 

1. Dashboard > Design > Edit HTML > Tick Expand Widget Template .
2. kemudian tekan Ctrl+F cari code dibawah ..

body {
 okay kea ..? da jumpa ? kalau tak jumpa pergi cari cermin mata .. haha .. oppss ! focus-focus .. 
3. Ctrl+c and copy code ni .. paste dibawah code body {
background:$bgcolor;
Background-image:url(URL BACKGROUND);
background-repeat: repeat;
background-position:Center center;
background-attachment:Fixed;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
 4. sekarang pergi kat SINI dan cari background idaman hati anda ..  copy url background idaman hati anda tu  dan ganti dengan URL BACKGROUND 

5. preview jika tiada masalah anda boleh tekan SAVE TEMPLATE

BACKGROUND FOR TEMPLATE DESIGNER

okay ini cara yang paling mudah dan tak perlu bermain dengan code .. untuk newbie pasti mudah ! tak percaya ? jom ikut step dibawah ..

1. pergi SINI pilih background dan save image as .. bermaksud ? save jea kat lappy or pc kamu tu . 
2. Dashboard > Design > Template Designer > Background
3. click Background Image > Upload Image > Browse background yang dah kamu save tadi .. 
4. pilih Tile and click Scroll with Page .
5. okay .. lastly .. click APPLY TO BLOG

BACKGROUND SIMPLE 


haa , yang ini senang sebab copy paste aje .. tak payah main code . cuma COPY and PASTE macam abc .. eyt ? banyak lak cekadak .. jom buat !

1. pergi kat laman sesawang ni

2. copy code layout yang dah kamu pilih tadi ..
3. pergi Dashboard > Design > Add Gadget > HTML/JavaScript .
4. paste code tadi dan tekan SAVE .

nota: pada yang nak guna background yang simple ni kan .. lilo nak bagi tahu , background ni susah sikit sebab tak boleh nak re'edit .. faham kan ? biasa laa .. sebab dah kata simple ? sekian tutorial backround ni ..
yeay dah siap .. mudah kan ? kalau tak faham juga kamu boleh comment dibawah .. comment diblog ini sudah dibuka . thank you . bye bye ..

tutorial : Ringankan Blog Dengan jQuery Lazy Load

Assalamualaikum .. hari ini rajin sangat nak buat tutorial banyak-banyak ! sebab esok dah start working .. so ni hadiah sikit untuk Followers tersayang lilo .. sebab bila dah kerja mesti kurang update blog .. okay ! ikut step dibawah ..

sebelum tu nak bagi tahu .. jQuery Lazy Load ni bagus untuk ringankan blog kamu .. tutorial ni semua kena buat ! contohnya ada kat blog lilo .. kalau kamu perasan .. gambar kat blog lilo bila loadingkan warna grey ? and bila scroll baru gabar tu keluar kan ? so ?? itulah namanya jQuery Lazy Load ..

1. Dashboard > Design > Add Gadget > HTML/javascript
2. press Ctrl+ C copy code dibawah ni .. dan paste .
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery(&quot;img&quot;).lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwyqYYtXZA2LcaEaW_WzZsBq0A54GNQmSl34Atxa-TlphYFwDe1j7Xj-NIqgAXRfSkUhkf26X4KfJHvaxmMS-4lu4ShsKJkiNhZOZuK1GHZeAfNwuFkCvXZ4E0uMKJHRF1lfwvJvVs_LA/s1600/grey.gif&quot;
});
});
&lt;/script&gt;
3. tekan SAVE !

tutorial : Snow

Assalamualaikum.. nak tanya ni .. ada diantara kamu semua yang berminat dengan snow kat blog lilo tak ? kalau minat bagus laa .. sebab lilo nak buat tutorial snow .. jom ikut step dibawah.

1. Dashboard > Design > Add Gadget > HTML/javascript
2. tekan Ctrl+C untuk copy and  paste code dibawah ..
<script>

//Here you can add your own picture for snow. Just change the url
var snowsrc="URL Snow"
//how many snowflakes there will be (currently 12)
var no =47;
//How fast will the snow disappear (0 is never)
var hidesnowtime = 0;
//The height the snow will reach before it disappears ("windowheight" or "pageheight")
var snowdistance = "pageheight";
///////////////////////////////End of Settings///////////////////////////////////
var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

function iecompattest()
{
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

var dx, xp, yp;
var am, stx, sty;
var i, doc_width = 800, doc_height = 600;

if (ns6up)
{
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up)
{
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < no; ++ i)
{
dx[i] = 0;
xp[i] = Math.random()*(doc_width-50);
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
if (ie4up||ns6up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://rftactical.darkbb.com/index.htm\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
}
else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6()
{
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
for (i = 0; i < no; ++ i)
{
yp[i] += sty[i];
if (yp[i] > doc_height-50)
{
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot"+i).style.top=yp[i]+"px";
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";
}
snowtimer=setTimeout("snowIE_NS6()", 10);
}

function hidesnow()
{
if (window.snowtimer) clearTimeout(snowtimer)
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
}


if (ie4up||ns6up)
{
snowIE_NS6();
if (hidesnowtime>0)
setTimeout("hidesnow()", hidesnowtime*1000)
}
</script>

macam mana ? dah paste code tadi ? good , now gantikan URL Snow dengan salah satu URL dibawah ..

http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png
 
http://i905.photobucket.com/albums/ac251/bigadira95/snowhitam.png
 
http://i905.photobucket.com/albums/ac251/bigadira95/snowmerah.png
 
http://i905.photobucket.com/albums/ac251/bigadira95/snowbiru.png
http://i608.photobucket.com/albums/tt163/pwincess9214/snow.png
 akhir sekali tekan SAVE !