contoh hasilnya
untuk membuatnya silakan simak cara berikut ini
cari ruangan code html/javascript
masukkan code dibawah berikut ini
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
font-style: normal;
font-weight: normal;
font-family: 'comic sans';
color: #FF0080;
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 = "Followers";
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>
kemudian save dan lihat hasilnya .. . . .
Belajar NgeBloG ,, Belajar dalam penggunaan web/ Blog, serta pemanfaatan software computer free ( Open Source ) . . . .
Rabu, 11 Desember 2013
Senin, 09 Desember 2013
menjadikan kursor diikuti oleh bintang bintang
cari ruangan untuk menempatkan code html/javascript
kemudian masukkan code dibawah ini
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>
atau juga bisa
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>
kemudian save dan lihat hasilnya
kemudian masukkan code dibawah ini
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/blues.js"></script>
atau juga bisa
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/purples.js"></script>
kemudian save dan lihat hasilnya
Minggu, 08 Desember 2013
cara mengganti warna Text Highlight
misalnya
akan diganti seperti ini
---------------------
caranya masuk ke dashboard >> templates >> edit html
cari code dibawah ini
body {
kemudian masukkan code
::-moz-selection {
background: #CC3399;
color: #ffffff;
}
background: #CC3399;
color: #ffffff;
}
Sabtu, 07 Desember 2013
Membuat recent post disertai gambar pada blog
masukkan code dibawah ini kedalam rauang code html/javascript
silakan untuk mencoba
<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#ffffff;
border:solid 1px #000000;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
Jumat, 06 Desember 2013
Membuat kesan pada gambar apabila didekati kursor mouse
masuk ke dashboard >> template >> edit html
cari kode a img {
delete kode setelah a img {
gantikan dengan
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
jika tidak menemukan kode a img{
copy paste code berikut
kemudian diletakkan SEBELUM /* Headings atau /* Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}
coba lihat hasilnya pada gambar postingan blog anda
lihat perbedaanya . .. . .. .
Senin, 25 November 2013
Membuat 3 menu tab di blog
copy paste code dibawah ini;
masukkan kedalam ruangan html/javascript
semoga berhasil .. . .
save dan lihat hasilnya
<style>
.tabmenu1 {
text-align:center;
width:260px;
color:#333333
}
a.tabmenu {
background: pink;
width:84px;
text-decoration:none;
color:#333333;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font:12 georgia;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.tabmenu:hover {
background: #000;
color:#fff;
-webkit-transition-duration:0.5s;
}
#menu img { max-width:260px;}
</style>
<center><div class="tabmenu1">
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >PAGE 1</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >PAGE 2</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >PAGE 3</a>
<div id="menu" style="width:260px;color:#333333;font:12px verdana;">
WELCOME
</div>
<div id="nav1" style="display: none;">
ISI 1
</div></div>
<div id="nav2" style="display: none;">
ISI 2
</div>
</div>
<div id="nav3" style="display: none;">
ISI 3,p.
j<p>
asdaqw<p>
sd
</div></div>
</div></div>
masukkan kedalam ruangan html/javascript
semoga berhasil .. . .
save dan lihat hasilnya
<style>
.tabmenu1 {
text-align:center;
width:260px;
color:#333333
}
a.tabmenu {
background: pink;
width:84px;
text-decoration:none;
color:#333333;
display:inline-block;
padding-top:10px;
padding-bottom:10px;
text-align:center;
font:12 georgia;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
a.tabmenu:hover {
background: #000;
color:#fff;
-webkit-transition-duration:0.5s;
}
#menu img { max-width:260px;}
</style>
<center><div class="tabmenu1">
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav1').innerHTML" >PAGE 1</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav2').innerHTML" >PAGE 2</a>
<a class="tabmenu" onclick="document.getElementById('menu').innerHTML=document.getElementById('nav3').innerHTML" >PAGE 3</a>
<div id="menu" style="width:260px;color:#333333;font:12px verdana;">
WELCOME
</div>
<div id="nav1" style="display: none;">
ISI 1
</div></div>
<div id="nav2" style="display: none;">
ISI 2
</div>
</div>
<div id="nav3" style="display: none;">
ISI 3,p.
j<p>
asdaqw<p>
sd
</div></div>
</div></div>
Sabtu, 23 November 2013
Animasi text berjalan di bagian sidebar (marquee)
silakan masukkan code berikut taruh didalam ruangan html/javascript
<marquee style="background-color:FFDDFF; border: 3px solid pink; color:#FF0000; font-family:verdana; font-size:9pt; width:100px; height:25px; " direction="left" behavior="scroll" scrollamount="5" >TEXT BERJALAN ADA DISINI</marquee>
kemudian save dan lihat hasilnya
<marquee style="background-color:FFDDFF; border: 3px solid pink; color:#FF0000; font-family:verdana; font-size:9pt; width:100px; height:25px; " direction="left" behavior="scroll" scrollamount="5" >TEXT BERJALAN ADA DISINI</marquee>
kemudian save dan lihat hasilnya
Minggu, 17 November 2013
Menampilkan satu postingan dihalaman depan blogspot
lari ke dashboard
ikuti langkah berikut pada gambar . ganti dengan 1 / posting di laman utama
semoga berhasil . . . ..
Rabu, 13 November 2013
Membuat kelompok link navigasi menu
copy code berikut masukkan kedalam ruangan html/javascript
<br/><center>
<a href="LINK">About Me</a> | <a href="LINK">Profile</a> | <a href="LINK">Facebook</a><a href="LINK">Twitter</a> | <a href="LINK">Youtube </a> | <a href="LINK">Tips-Trick</a>
<center><a href="LINK">Google Plus</a></center>
</center>
jika berhasil , maka hasilnya kan seperti dibawah
<br/><center>
<a href="LINK">About Me</a> | <a href="LINK">Profile</a> | <a href="LINK">Facebook</a><a href="LINK">Twitter</a> | <a href="LINK">Youtube </a> | <a href="LINK">Tips-Trick</a>
<center><a href="LINK">Google Plus</a></center>
</center>
jika berhasil , maka hasilnya kan seperti dibawah
Minggu, 10 November 2013
Meletakkan script iklan banner bergerak di blog
cari ruangan html/javascript
masukkan code berikut
<center><center><div style=' background: #fff; border: 2px solid #fc0c92; padding: 2px; width: 710px;'><div style='text-align: center;'><marquee behavior='alternate' direction='right' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3'><a href="LINK1"><img src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" alt="" width="125" height="125" /></a><a href="LINK2"><img src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" alt="" width="125" height="125" /></a><a href="LINK3"><img src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" alt="" width="125" height="125" /></a><a href="LINK4"><img src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" alt="" width="125" height="125" /></a></marquee></div></div></center></center>
save dan lihat hasilnya
semoga berhasil . . . . ,
Senin, 28 Oktober 2013
Membuat navigasi bar di blogspot
masukkan code berikut kedalam ruangan html/javascript
save dan lihat hasilnya
semoga berhasil . .. . . .
<style>
.tingtong{
margin-right:-0px;
margin-left:-0px;
background: url(LINK BACKGROUND);top:0px;
left:0px;
text-align:center;
padding-top:10px;
padding-bottom:10px;
border: #e69fba 3px solid;
}
a.blabla{
background:#e69fba ;
text-decoration:none;
color:#fff;
padding:5px;
font:12px arial;
margin-left:5px;
margin-right:5px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;
display:inline-block;
padding-right:10px;
padding-left:10px;
}
a.blabla:hover{background:#fff;
color:#000;
</style>
<br />
<div class="tingtong">
<a class="blabla" href="YOUR LINK">PAGE 1</a>
<a class="blabla" href="YOUR LINK">PAGE 2</a>
<a class="blabla" href="YOUR LINK">PAGE 3</a>
<a class="blabla" href="YOUR LINK">PAGE 4</a>
<a class="blabla" href="YOUR LINK">PAGE 5</a>
</div>
Rabu, 23 Oktober 2013
Memberikan border style di sidebar blog
masuk kedalam edit html
cari code berikut ]]></b:skin>
kemudian paste code berikut ini tepat diatas code yang dicari tadi
.sidebar .widget {
background: #FFF;
border: 2px solid #000;
margin:5px 5px 1.0em;
padding:0px 5px 1.0em;
border-radius: 10px; }
simpan template dan lihat hasilnya ..
yang diblok hijau itu adalah lengkungan border
cari code berikut ]]></b:skin>
kemudian paste code berikut ini tepat diatas code yang dicari tadi
.sidebar .widget {
background: #FFF;
border: 2px solid #000;
margin:5px 5px 1.0em;
padding:0px 5px 1.0em;
border-radius: 10px; }
simpan template dan lihat hasilnya ..
yang diblok hijau itu adalah lengkungan border
Minggu, 13 Oktober 2013
Menempatkan Hover Over banner link didalam blog
copy paste code berikut ini, letakkan diruangan html/javascript
save dan lihat hasilnya

semoga berhasil
<style>
#bannerdiv {
z-index: 9999;
position: fixed;
bottom: -300px;
right: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-color: #000000;
padding: 5px;
margin: 4px;
border-radius: 10px 10px 0px 0px;
}
#bannerdiv:hover {
bottom: -5px;
}
#bannertitle {
text-align: center;
font-size: 11px;
font-family: verdana;
letter-spacing: 1px;
color: #ffffff;
padding: 3px 5px 15px 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
<br />
<div id="bannerdiv">
<div id="bannertitle">
GIVEAWAY</div>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" width="70" /></a></center>
</div>
save dan lihat hasilnya

semoga berhasil
<style>
#bannerdiv {
z-index: 9999;
position: fixed;
bottom: -300px;
right: 20px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
background-color: #000000;
padding: 5px;
margin: 4px;
border-radius: 10px 10px 0px 0px;
}
#bannerdiv:hover {
bottom: -5px;
}
#bannertitle {
text-align: center;
font-size: 11px;
font-family: verdana;
letter-spacing: 1px;
color: #ffffff;
padding: 3px 5px 15px 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
</style>
<br />
<div id="bannerdiv">
<div id="bannertitle">
GIVEAWAY</div>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/tanitakawkaw/simple-cute/128/box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/double-j-design/ravenna-3d/128/Box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/petalart/free-shopping/128/shipping-box-icon.png" width="70" /></a></center>
<center>
<a href="LINK ANDA"><img height="70" src="http://icons.iconarchive.com/icons/mymovingreviews/3d-movers/128/boxes-brown-icon.png" width="70" /></a></center>
</div>
Rabu, 09 Oktober 2013
Memberikan border style di sidebar dengan warna lebih dari satu
cari edit html template
cari code berikut ]]></b:skin>
masukkanm code berikut ini tepat diatas code yang dicari
.sidebar .widget {
background: #FFF;
border-top: 4px solid #F5A9BC;
border-bottom: 4px solid #A9BCF5;
border-left: 4px solid #A9BCF5;
border-right: 4px solid #F5A9BC;
margin:5px 5px 1.0em;
padding:0px 5px 1.0em;
border-radius: 10px;
}
yang tebal >> menentukan warna border style colour
blok hijau >> menentukan lengkungan border
save template . .. , dan lihat hasilnya . .. . ...
Minggu, 06 Oktober 2013
Pasang Breaking News
.newspic {background:#252525 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggrQtIuqOvcAnRx6iQGV6yJbCyidZxIDURsjNmtQck_CeZiYEbpDYFrGGl5zlVzLzsUL8-8EpTc57otqTp6ptJFmrKhFX6hqlvobETtdbRMg0CHctq805TKCQsQAamr7m7gwjwIhnHaR0/s1600/BRK+NW.png) no-repeat top left;width:979px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}
.news {width: 979px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}
.news a:link, .news a:visited{color:#000000;text-decoration:none;}
.news a:hover {color:#ddd;text-decoration:underline;}
---------------------------------------------------------------
Letakkan kode berikut diatas </head>
Jumat, 20 September 2013
Cara mengganti template blogspot
Cara mengganti template blogspot
=
=
klik open setelah itu klik unggah .. . tunggu samapi proses selesai
Rabu, 11 September 2013
Pengertian [Multimedia Content production]
Multimedia adalah penggunaan dan pemrosesan beberapa media (teks, audio, video, grafik, animasi dan interaktif) yang berbeda untuk menyampaikan informasi atau menghasilkan produk multimedia seperti (music, video, film, game, entertainment, dll).
Atau penggunaan sejumlah teknologi yang berbeda yang memungkinkan untuk menggabungkan media (teks, audio, video, grafik, animasi dan interaktif) dengan cara yang baru untuk tujuan komunikasi. Dalam kategori ini media yang digunakan bisa berbagai macam diantaranya adalah :
- Text
- Grafik
- Animation
- Video
- Music
- Visual Effect
- Sound Effect
>> Diproses dengan software >> kemudian menghasilkan multimedia produk >> PUBLIKASI
Sabtu, 07 September 2013
Round hover jika kursor menyentuh pada gambar
cari dibagian edit html
cari code berikut /* Header
silakan masukkan code berikut di atas code yang anda cari
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}
semoga berhasil .. . .
cari code berikut /* Header
silakan masukkan code berikut di atas code yang anda cari
/*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}
semoga berhasil .. . .
Membuat beraneka [aneka macam jenis border]
menentukan warna >> yang diblok hijau
untuk code OUTSET
<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code INSET
<div style="background-color:black; -webkit-border-radius: 20px;border:5px INSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code GROOVE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px GROOVE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code RIDGE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px RIDGE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code DASHED
<div style="background-color:black; -webkit-border-radius: 20px;border:5px DASHED #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code SOLID
<div style="background-color:black; -webkit-border-radius: 20px;border:5px SOLID #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code DOUBLE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px DOUBLE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
untuk code OUTSET
<div style="background-color:black; -webkit-border-radius: 20px;border:5px OUTSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code INSET
<div style="background-color:black; -webkit-border-radius: 20px;border:5px INSET #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code GROOVE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px GROOVE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code RIDGE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px RIDGE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code DASHED
<div style="background-color:black; -webkit-border-radius: 20px;border:5px DASHED #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code SOLID
<div style="background-color:black; -webkit-border-radius: 20px;border:5px SOLID #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
untuk code DOUBLE
<div style="background-color:black; -webkit-border-radius: 20px;border:5px DOUBLE #001EFF; padding:10px;">TULISAN ADA DISINI</div>
hasil:
TULISAN ADA DISINI
Rabu, 28 Agustus 2013
[Ebook] Berkreasi dengan Wordpress

Link Download terkunci, silakan buka dengan klik salah satu tombol dibawah ini:
Download paket
"Kreasi bikin situs web dari wordpress
Ukuran file ( 9,68 MB )Sumber: http://more-examples.blogspot.com/2012/11/kreasi-bikin-situs-web-dari-wordpress.html
Terkait dengan buku pelatihan
dan video belajar Wordpress
klik DISINI
- Memanfaatan templates dan plugin gratis dari pihak ketiga
- cara menambahkan music, video, visitor view dan masih banyak lagi yg lainnya
- cepat paham dengan CMS wordpress // tahapan tahapan
- Diambilkan dari berbagai sumber tutorial semoga bermanfaat
Index: [Belajar Bikin Web / Blog] (Blogspot)
Coba gunakan: Real-time HTML Editor
- Cara membuat isi posting pada blogspot
- Upload/memasukkan gambar dalam postingan blog
- njajal Upload video dalam blog
- memasukkan video dari Youtube kedalam blog
- memasukkan kode HTML/javascript kedalam blog
- Cara backup template blog
- Cara mengganti template blogspot
- Buka link baru apabila klik gambar
- membuat notifikasi komentar blog
- membuat gambar bergerak menggunakan marquee
- membuat background dibelakang tulisan blog
- merubah dan mengganti icon pada blogspot
- Beberapa situs penyedia shootbox gratis
- cara daftar dan memasang shoutbox di blogspot
- ================================
- Cara memasang Signature / tanda tangan digital Dalam Blog
- untuk mengetahui banyaknya pengunjung yang online di blog
- merubah ukuran ruang komentar pada blogspot
- membuat menu Dropdown dalam blog
- menampilkan website lain kedalam blog
- meletakkan gambar disebelah judul postingan
- membuat text bergerak (marquee text)
- membuat ruang komentar dibawah postingan
- ================================
- youtube video player jadikan mp3 dalam blog
- membuat dan meletakkan button Back To Top
- cara membuat textbox dalam blog
- Script untuk membuat populer post dalam blog
- Cara merubah kursor mouse pada blog
- widget untuk mengetahui jumlah isi postingan dan comentar
- script untuk meletakkan button share facebook dalam blog
- Meletakkan button like facebook kedalam blog
- Meletakkan button like didalam blog
- Meletakkan sitemap di blogspot
- Cara membuat scroll box di blogspot
- =============================
- Membuat judul blog bergerak
- Membuat tulisan yang bergerak mengikuti kursor mouse
- menjadikan kursor diikuti oleh bintang bintang
- cara mengganti warna Text Highlight
- Membuat recent post disertai gambar pada blog
- Membuat kesan pada gambar apabila didekati kursor mouse
- Gambar akan berubah bentuk ketika didekati kursor mouse
- Jadikan dalam bentuk icon link untuk home, older, newer post
- Bikin button follow and dashboard tumblr
- Membuat tulisan didalam fieldset
- Membuat tempat code untuk iklan / banner
- Memasang profile facebook dan blogger didalam blog
- Membuat pesan pembuka dan penutup pada blog
- Membuat Buat Scroll Box dalam postingan
- =============================
- Membuat slide navigation di blog
- Membuat Hide Navigation di blog
- Membuat 3 menu tab di blog
- Membuat navigasi bar di blogspot
- Menempatkan Hover Over banner link didalam blog
- Memberikan border style di sidebar blog
- Memberikan border style di sidebar dengan warna lebih dari satu
- Menampilkan satu postingan dihalaman depan blogspot
- Animasi text berjalan di bagian sidebar (marquee)
- Round hover jika kursor menyentuh pada gambar
- Meletakkan script iklan banner bergerak di blog
- Membuat kelompok link navigasi menu
- Memberi bingkai pada sidebar
- Memberi gambar disamping pada blog arsip
- =============================
- Membuat tab menu dengan latar belakang
- Memberikan background title pada sidebar
- Memberikan text bayangan pada judul di sidebar
- Memberikan effek animasi bubbles pada kursor mouse
- Memberi effek sparkling pada kursor mouse
- Memasang floating visitor online
- Memberikan background pada title sidebar
- Membuat background yang berbeda disetiap postingan
- Memberi bayangan pada text yang di tebalkan
- Memberi background border untuk footer
- Memasang gambar dibagian footer
- Memberi warna single pada text yang bergaris bawah
- =============================
- Bagian bawah footer
- Menghilangkan link subscribe Entri (atom)
- Desain label blogger with css
- Berbagi banner iklan untuk blog sendiri
- Menghilangkan navbar di blogspot
- Memasang twitter follow di blog
- Memberi background gambar pada blog
- Membuat kotak untuk tempat iklan
- Menempatkan iklan gambar yang bergerak
- Memasang iklan / banner posisi terapung disamping
- Membuat list html
- Cara menghilangkan tulisan diberdayakan oleh
- Menghapus subscribe to (feed link )
- Membuat link berupa tombol
- Code untuk membuat artikel random post di sidebar
- Code untuk daftar scrool pada sidebar
- Menghias text area dengan warna
- Membuat mesin pencari di blog sendiri
- Text area dengan select all
- Memasang tombol untuk kembali keatas ( go to top )
- Menyembunyikan text dengan tombol spoiler ( show hide )
Rabu, 21 Agustus 2013
Jumat, 16 Agustus 2013
Memasukkan kode HTML/javascript kedalam blog
Kamis, 15 Agustus 2013
open link in new tab ketika setelah diklik
code untuk open link in new tab
<a
href="Letakkan link untuk dibuka disini" target="_blank" >
<img src="Letakkan url gambar
disini"/></a>
Sebagai contoh, untuk kode gambar adalah
seperti ini
<a
href="https://facebook.com" target="_blank" >
<img
src="http://blog.delicious.com/wp-content/uploads/2013/07/facebook_logo.jpg"/>
</a>
Untuk gambar kedua, link akan dibuka pada
tab baru. Jika anda ingin link dibuka pada page yang sama, buang target="_blank"
Sabtu, 27 Juli 2013
Kamis, 25 Juli 2013
Rabu, 24 Juli 2013
Membuat aplikasi desktop untuk Windows
Link Download terkunci, silakan buka
dengan klik salah satu tombol dibawah ini:
Download free Contoh latihan VB.NET free source code
Ukuran file ( 5MB )
Terkait dengan buku pelatihan
dan video belajar
klik DISINI
Contoh aplikasi Desktop VB.NET
Disini terdapat beberapa contoh program sederhana guna untuk latihan logika pemrograman visual basic , pertama kali dengan cara menyimpannya kedalam bentuk ebooks .chm // semoga dengan adanya contoh program yang sederhana ini kita bisa terus semangat untuk belajar dan memahami cara kerja program tersebut
Download free Contoh latihan VB.NET free source code
Ukuran file ( 5MB )
Terkait dengan buku pelatihan
dan video belajar
klik DISINI
Contoh aplikasi Desktop VB.NET
Disini terdapat beberapa contoh program sederhana guna untuk latihan logika pemrograman visual basic , pertama kali dengan cara menyimpannya kedalam bentuk ebooks .chm // semoga dengan adanya contoh program yang sederhana ini kita bisa terus semangat untuk belajar dan memahami cara kerja program tersebut
Senin, 15 Juli 2013
Jumat, 12 Juli 2013
Cara membuat isi posting pada blogspot
Post entri ] dalam blog merupakan hal yang paling mendasar bagi seorang blogger pemula khususnya
Cara membuat isi posting pada blogspot
Berikut adalah cara bagaimana Anda akan memulai langkah untuk mengetik dalam blog Anda.
>>Buka link www.blogger.com (link ini diperlukan setiap kali Anda akan login ke akun blogger). Maukkan email dan password Anda.
>> yang terakhir tinggal tekan/klik Publish disamping isi judul postingan
>> selesai dehh ..
Cara membuat isi posting pada blogspot
Berikut adalah cara bagaimana Anda akan memulai langkah untuk mengetik dalam blog Anda.
>>Buka link www.blogger.com (link ini diperlukan setiap kali Anda akan login ke akun blogger). Maukkan email dan password Anda.
>>
A untukketikkan judul postingan
B untuk isi postingan yang akan diisi
C untuk memberikan label mengenai isi postingan misal kategori artikel, gadget dll
>> selesai dehh ..
Minggu, 16 Juni 2013
Memberi bayangan pada text yang di tebalkan
cari dibagian edit html, cari code /* Header
kemudian masukkan code berikut
b {
text-decoration:none;
text-shadow: 0 0 0.2em #FA5858, 0 0 0.2em #FA5858;
padding: 0px;
}
masukkan tepat diatas code /* Header
save dan lihat hasilnya . .
semoga berhasil
kemudian masukkan code berikut
b {
text-decoration:none;
text-shadow: 0 0 0.2em #FA5858, 0 0 0.2em #FA5858;
padding: 0px;
}
masukkan tepat diatas code /* Header
save dan lihat hasilnya . .
semoga berhasil
Sabtu, 15 Juni 2013
Memberi background border untuk footer
masuk ke bagian edit html , cari code .post-footer {
kemudian masukkan code berikut tepat dibawah code yang dicari
background: url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSaATzueHSd2rQXCWUQXFXc1sFAx3tNXBj-px5bU64D4ji5rmF6cw") repeat 2px .25em;
border: 1px solid #FF0080;
border-left: 1px solid #FF0080;
color: #000000;
font: 90%/1.4em 'Arial',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing: 0;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
padding: 6px;
margin:1em 20px;
text-transform: none;
}
save dan lihat hasilnya ..
semoga berhasil
Jumat, 14 Juni 2013
Memasang gambar dibagian footer
cari dibagian edit html
kemudian cari code <div class='post-footer-line post-footer-line-3'>
kemudian masukkan code berikut
<center><img src='http://icons.iconarchive.com/icons/adidadidu/ipad/icons-390.jpg' style='width: 320px; height: 104px;'/></center>
tepat dibawah code yang dicari tadi
save dan lihat hasilnya .. .
kemudian cari code <div class='post-footer-line post-footer-line-3'>
kemudian masukkan code berikut
<center><img src='http://icons.iconarchive.com/icons/adidadidu/ipad/icons-390.jpg' style='width: 320px; height: 104px;'/></center>
tepat dibawah code yang dicari tadi
save dan lihat hasilnya .. .
Kamis, 13 Juni 2013
Memberi warna single pada text yang bergaris bawah
cari dibagian edit html
cari code /* Header
kemudian masukkan code berikut tepat diatas code yang dicari tadi
u {
text-decoration:none;
border-bottom: 2px solid #F781BE;
padding: 0px;
}
save dan lihat hasilnya
cari code /* Header
kemudian masukkan code berikut tepat diatas code yang dicari tadi
u {
text-decoration:none;
border-bottom: 2px solid #F781BE;
padding: 0px;
}
save dan lihat hasilnya
Rabu, 12 Juni 2013
Bagian bawah footer
dibagian edit html, cari code <data:post.body/>
kemudian masukkan code berikut tepat diatas code yang dicari tadi
<b:if cond='data:blog.pageType == "item"'>
<div style='width: 400px;'> <div style='clear: right; float: left; margin-right: 5px;margin-top: 5px;'>
<!--Script Kode Iklan Anda disini-->
</div></div>
</b:if>
nanti hasilnya akan seperti terlihat pada gambar dibawah
kemudian masukkan code berikut tepat diatas code yang dicari tadi
<b:if cond='data:blog.pageType == "item"'>
<div style='width: 400px;'> <div style='clear: right; float: left; margin-right: 5px;margin-top: 5px;'>
<!--Script Kode Iklan Anda disini-->
</div></div>
</b:if>
nanti hasilnya akan seperti terlihat pada gambar dibawah
Selasa, 14 Mei 2013
Memberikan effek animasi bubbles pada kursor mouse
masukkan code dibawah ini diruangan html/javascript
save dan lihat hasilnya
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // 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>
save dan lihat hasilnya
<script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#fff", "#fff", "#fff", "#fff", "#fff"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=66; // 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>
Senin, 13 Mei 2013
Memberi effek sparkling pada kursor mouse
masukkan code dibawah ini diruangan html/javascript
save dan lihat hasilnya
<script type='text/javascript'>
</script>
<script type='text/javascript'>
// <![CDATA[
var colour="#000000";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
save dan lihat hasilnya
<script type='text/javascript'>
</script>
<script type='text/javascript'>
// <![CDATA[
var colour="#000000";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
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;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>
Langganan:
Postingan (Atom)