<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #CCCC33; /* warna huruf */
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'>
//<![CDATA[
;(function(){
var msg = " webdesainonline "; /* tulisan yang akan muncul */
var size =15; /* ukuran huruf */
var circleY = 0.75; var circleX = 2;
var letter_spacing = 5;
var diameter = 10;
var rotation = 0.4;
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
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>
<style type="text/css">
<style type="text/css">
ISI
<style type="text/css">
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
<style type="text/css">
ISI
ISI
ISI
ISI
ISI
OR
ISI
ISI
ISI
ISI
ISI
<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">ISI</div>
GRADIENTS 1
GRADIENTS 2
<style type="text/css">
<style>
ISI
<style type="text/css">
<b:skin><![CDATA[
<b:section class='sidebar1' id='sidebar1' showaddelement='yes'>
<b:section class='sidebarcontent' id=' sidebarcontent ' showaddelement='yes'>
Background
Kedap-kedip
Panjang slide
Tinggi slide
Horizontal center
Vertikal center
Dari kanan
Dari kiri
Bolak-balik horizonta
Akan berhenti 1x
Akan berhenti 2x
cepat
Akan hilang
Bounce
<p style="background-color:#66FF99">
<marquee bgcolor="#FFFF00">Background</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrolldelay="500">Kedap-kedip</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee width=20%>Panjang slide</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee height=50>Tinggi slide</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee hspace="100px">Horizontal center</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee vspace="10px" >Vertikal center</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction=left>Dari kanan</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction=right>Dari kiri</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee behavior=alternate>Bolak-balik horizonta</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee direction="up" behavior="alternate" height="100px" scrolldelay="10" hspace="200"><center>
Bolak-balik vertikal</center></marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee behavior=slide>Akan berhenti 1x</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee loop="2" behavior="slide" scrolldelay="50" >Akan berhenti 2x</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrollamount=50>cepat</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee loop=1 >Akan hilang</marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee hspace="200" behavior="alternate" direction="up" onmouseover="this.stop()"height="100" onmouseout="this.start()" ><center>
Disentuh berhenti</center></marquee>
<!------------------------->
<p style="background-color:#66FF99">
<marquee scrolldelay="10" behavior="alternate" direction="up" scrollamount="2" height="100px"><marquee scrolldelay="10" behavior="alternate" direction="left" scrollamount="2">Bounce</marquee></marquee>
<b:section class='sidebarfooter' id=' sidebarfooter ' showaddelement='yes'>
<div class='post-header-line-1'/> <div class='post-body entry-content'> <p><script type='text/javascript'> summary_noimg = 800; summary_img = 650; img_thumb_height = 150; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 0px 0px;margin-bottom:0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <!--isi post --> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <!--link isi post--> <div><a expr:href='data:post.url'>Selengkapnya »</a></div> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if></p><br/> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <b:if cond='data:post.hasJumpLink'> <div class='jump-link'> <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </div> </b:if>
<b:skin><![CDATA[
<?xml version="1.0" encoding="UTF-8" ?>
shadow-example
<style type="text/css">
#shadow-example {
text-shadow: rgba(64, 64, 64, 0.496094) 6px 7px 5px;
-webkit-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
-moz-box-shadow: rgba(0, 0, 128, 0.246094) 8px 6px 3px;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 300px;
height: 200px;
padding: 50px;
font-size: 35px;
}
</style>
<br />
<br />
<center>
<div id="shadow-example">
shadow-example </div>
</center>
Pertama-tama anda haruslah memiliki
akun dan code shoutmix/ cbox atau lainnya terlebih dahulu, jika belum ada, silahkan
Registrasi/ daftar terlebih dahulu.
Kemudian :klik Page ElementsJavaScript ",
< style type="text/css"> background :url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRUvyMQV8CWyevV4vnC-942MU1z8eoosa7dQQDZn_qV_2BMheHqnrcp-66jlE1_YAD3K6cEjgdszfUrzPWknoGWDSAUbNUDM3zYP6Ltt5qPQ1a0XgCeQojpuIe9GFpUH3sWronr7285iL0/ ') no-repeat;toString () + "px";
<!-- Masukkan Kode Shoutmix/cbox disini-->
<br/>
<br/>
<a href="http://info-infounik.blogspot.com">.
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[ close ]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>
keterangan :
jika ingin merubah logo buku tamu silahkan ganti url yang berwarna biru dengan url gambar anda hapus kode berwarna hijau dan masukkan kode shoutmix/cbox anda , untuk mengatur posisinya. Ubah saja nilai atribut top-nya. jika ingin lebih ke atas sedikit, rubah menjadi 30px atau 20px.
selamat mencoba...
