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

Monday, May 6, 2013

Snow Effects In Your Blog

No comments:
 

Hello world! do you know? in Indonesia, Malaysia, and Singapore has no snow! :(. But... in your site, there is a snow! i f you want it, go to Design > Layout > Add a Gadget > HTML/JavaScript

and copy this code below, and paste to the code box:
<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>
Blue: the snow image url is below:
change to the other colors

White:
http://i13.servimg.com/u/f13/11/52/70/02/snowba10.png

Pink:
http://sabarmuanas.googlecode.com/files/salju_pink.js

Friday, April 26, 2013

Cute Search Box

No comments:
 

Hi! online again! miss me? i sure you are! or not, i will... Buk! Buk! Haha.. just kidding... i'm bored today, yup! this is Friday! always online! i want to make a new tutorial again, because the old tutorial is been REDONE! this tutorial is made it by : Rana. Continue please...


 
Yup! that is the search box!

first, go to Template > Layout > Add a Gadget > HTML/JavaScript
second, copy the code below and paste in the HTML/JavaScript code box:

<form action="/search" id="searchThis" method="get" style="display: inline;">
<input id="searchBox" name="q" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="background: #fff; border: #cdeff7 dashed 1px; color: #a7a7a7; font-size: 10px; width: 230px;" type="text" value="Search~ ♡" vinput="" /> <input id="searchButton" style="background: #fff; border: #cdeff7 dashed 1px; color: #a7a7a7; font-size: 9px; padding-top: 3px;" type="submit" value="Go" /></form>
note:
red: the background color
blue: border color
green: border style (dashed, solid, dotted)
italic: the width of the box
aqua: border thickness
pink: font size
orange: border color
bold: search box name

Preview and save! i hope you enjoy!

Tuesday, August 14, 2012

Blockquote Hover (Icon Kecil Muncul)

No comments:
Huyyy.... aku punya Tutorial baru lohh... namanya Blockquote Hover (Icon Kecil Muncul) yah.. kan udah ada judul nya ini contohnya dibawah:


klik gambar untuk dibesarkan





1. Log in > Design > Template > Edit HTML > Click Expand widget template > Ctrl + F
2. Cari Code dibawah:
.post blockquote {
3. Copy Code Dibawah dan Paste kan di bawah .post blockquote {

background-color: #F5A9D0; 
border:1px solid #8000FF; 
padding: 5px; 
} 
.post blockquote:hover { 
background-image:url(YOUR PICTURE URL); 
background-position:bottom right; 
background-repeat:no-repeat; 
}

Yang merah itu untuk background
Yang Biru itu untuk border
Dan yang pink itu untuk url gambar yang kamu mau atau enggak kesini

boleh cari warna favorite disini

                                         -----oOo-----GOOD LUCK-----oOo-----

Meletak Background Pada Blockquote

No comments:
Hayyy... guys... Whatsupp? Siapa yang mau background di blockquote kayak aku harus tunjuk tangaannnn!!!... okay semuanya mau, kalau mau, ayo kita mulai!!!

1. Log In > Design > Template > Edit HTML > Click Expand widget template > Ctlr + F > Cari code dibawah:

.post blockquote {

Kalau udah ketemu, copy code dibawah, dan paste kan disebelah .post blockquote nya

background-image:url(url gambar)

yang tulisan yang aku merah kan ( url gambar ) ganti dengan gambar background yang kamu mau, atau enggak, ke sini sajahh...

CHOWW...

Monday, August 13, 2012

Mengubah Warna Highlight

No comments:
Hai.... Guyss..... ketemu lagi nih sama Kak Luna... hehehe.... aku mau kasih tahu cara ubah warna highlight...
biasanya warna highlight nya warna biru, warna highlight ku warna pink kan? preview:


 bagus kan??? simak baik - baik yah, kalau enggak, nggak berhasil deh... ayukkk....


1. Log in > Design > Template > Edit HTML > Click Expand Widget Template.
2. Click Ctrl+F dan Cari Code:
 a:link {
3. Copy Code Dibawah dan Paste di atas / sebelum a:link { itu
::-moz-selection {
background:#EF0E91;
color:#FFFFFF;
}

::selection {
background:#EF0E91;
color:#FFFFFF;
}

Note:
Warna hijau itu warna highlight dan warna biru itu warna textnya
4. Ambil code warna disini
5. Click Save Template

Cursor Berganti dengan Cursor Lain Apabila Link di Sentuh

No comments:
Haii.... ketemu lagi neehhh.... Kak Luna buat Tutorial baru nih... Ada sumbernya looohhh.....
Ayo kita mulai,,,

Log in > Design > Layout > Add Gadget > HTML/Javascript
Copy Code dibawah:

<style type="text/css">body, a, a:link{cursor:url(url cursor 1), default;} a:hover {cursor:url(url cursor 2),wait;}</style>

Paste kan di HTML/Javascriptnya

Note:

tulisan merah itu untuk cursor yang kamu pakai
kalau biru itu untuk cursor yang disentuh terus jadi ganti
Cari disini cursornya yahh...
Bye...

Sumber:
Lyssa Secret
SUKA SUKA


Saturday, August 4, 2012

Cara Add Background Di Blog

2 comments:
Hai lagi semuanyaa.... aku lagi neehhh.... Aku mau ceritain sesuatu deh tentang aku (ceileh, pake diceritain segala)
Skip dulu yah... Ayo kita mulai tutorialnya

1. Pertama kamu harus kesini dulu
2. Lalu, pilih Background yang kamu mau, nanti muncul HTML Codenya
3. Copy HTML Codenya
4. Pergi ke blogmu> Design > Layout > Add Gadget > Pilih HTML/Javascript > Paste Code Backgroundmu > Jadi deh BYEEE....
Ehh... yang ceritain tentang aku itu nggak jadi, yaudah baaaiiiiiiiii........

Thursday, August 2, 2012

Efek Link Animated Ketika di Sentuh

1 comment:
Siapa yang sudah tahu Tutorial ini? kalau sudah tahu, simak baik - baik yah... kalau ada yang nggak tahu lihat disini

Ayo kita mulai!!!
1. Sign in Ke blogger > Design > Template > Edit HTML > Click Expand Widget Template > Lalu tekan Ctrl +F
2. Search : </head>
3. Copy code dibawah, lalu Paste di atas </head>
<style> a:hover { text-decoration:blink; background:url(URL LINK ANIMATED); } </style>

4. Ganti URL LINK ANIMATED nya dengan efek animated yang sudah kami sediakan




                       http://3.bp.blogspot.com/-i-i1wXiCktA/Tj-VACvOfgI/AAAAAAAABjQ                                                                          /BjCZF1H4JS4/s1600/bicarafarah1.gif

       
             http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif


    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6mrzoOGVdVnHJ_Wc0EPBEa5BQReSRUkVtfbRlrkUugA06FFlAWoHADYqZg1kRjHGTkF6i72JE2lpgUszgUB58GkkKQIgJbQ9Ed0_1YLyBzA6il5bPvuK-epg1cW6XJY-ez7ywiQq_uAc/s1600/bicarafarah11.gif




http://i603.photobucket.com/albums/tt117/misdollymie/rainbowhover.gif


 

                          https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjubT-L9UjrIwuP8VTO2oAk9PxDd9zjcCZHyFGR9sBetShIATlLD_2oKuevONxt1VzeEpATETt3Sj0uiHTfkqvi2tlZ1v4wDYkE1sFJ4lezevFdfzJJvkLeDA2_keXLmMHzBjzF1xnR0tk/s1600/bicarafarah12.gif

  http://dl4.glitter-graphics.net/pub/1102/1102514nugaxacg8m.gif
 kalau mau lagi, pencet sini!

Wednesday, August 1, 2012

Cara Add Cursor DI Blog

No comments:
 Assalamu'alaikum wr. wb.
Hi, guys, aku pertama kali bikin tutorial, kalau mau tutorial lain, coming soon yaacchh... (Tutorial ini khusus untuk blog yang baru)
Sementara kesini dulu deh.... atau kesini
Balik ke Lap....Top...

Hari ini aku mau kasih tau cara bikin cursor diblog... cursor aku keren yah... jangan iri dong, kalau mau cursor kayak aku, simak baik - baik yah...
1.Pertama kamu harus kesini dulu
2.Lalu pilih Categories yang kamu mau
3.Dan, pilih cursor yang habis kamu pilih kategorinya dan munculah HTML Code
4.Lalu, copy HTML Codenya
5.Setelah itu, kamu harus pergi ke Blogmu, ke Design > Layout > Add Gadget > Pilih HTML/Javascript dan Paste Code cursornya > Save. Jangan lupa Save Arrangement yah...
6.Setelah itu pencet View Blog dan jadi deh...

BYE!!!!
(ingat, ini Tutorial pertama yah...)
Sekian Wassalamu'alaikum wr. wb.

Di Cursors 4U, hati - hati ada iklan ciuman