Tampilkan postingan dengan label widget blog. Tampilkan semua postingan
Tampilkan postingan dengan label widget blog. Tampilkan semua postingan

Sabtu, 28 April 2012

Panduan Cara Membuat Animasi Tulisan Berpuatar Mengelilingi Cursor




  • Login ke dashboard Blogger kamu
  • Klik Tata letak
  • Klik Tambah gadged
  • Pilih Gadget / Widget HTML/JavaScript
  • Kemudian masukkan semua script / kode tulisan mengikuti cursor berikut pada widget tadi.
<style type='text/css'>
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #999;

/* End Optional */
/* Start Required - Do Not Edit */
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;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/
;(function(){
// Your message here (QUOTED STRING)
var msg = "unntukmu";
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
v`r rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
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>
 
 
SELAMAT MENCOBA SEMOGA SUKSES 

Rabu, 25 April 2012

Cara Buat Gambar Di Kiri Halaman Pada Blog


Btw, sudah tahu kan apa yang saya maksud dengan gambar tetap di kiri halaman blog ..
Contohnya bisa anda lihat di blog saya ini. Tepatnya di kiri bawah halaman blog ini.
Yang gambarnya foto saya (kartun) itu. Gambar itu akan tetap berada di pojok, walaupun halaman blog discroll ke atas bawah. Selain itu, gambar itu juga akan tetap hadir di setiap halaman blog.
OK, saya anggap anda sudah mengerti. Sekarang bagaimana cara membuatnya ?

Berikut adalah step-stepnya.

1. Silahkan masuk (login) ke Blogger. (Disini saya hanya akan menjelaskan untuk blog bermesin Blogger/ Blogspot saja ya)
2. KLik tata letak > edit html.
3. Centang "Expand Template Widget".
4. Kemudian cari kode ]]></b:skin>. Untuk mempermudah pencarian, anda bisa gunakan fungsi FIND, dengan menekan CTRL+F.
5. Sudah ketemu ? Kalau sudah, copy dan paste kode di bawah ini tepat di atasnya.

#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

6. Kemudian cari lagi kode </body>. Copy dan paste kode ini tepat diatasnya.

<div id="trik_pojok">
<a href="http://unntukmu.blogspot.com/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivSOX41bEzRgyiZ1jrGOc3a6pYeQ13pgcKh98UUIQLr5q1B4I0L3rD8TMDvBikC_lqSEbYQDLvRFG2FE_aygvbZznOrr6Wxrvq7qE-nUxzjnYUwoifMAJtC6jblYSCtgqjfWkX_w1WYU/w180-h300-k/Blogkiran+copy+copy.png" border="0" /></a>
</div>

7. Kemudian ganti http://unntukmu.blogspot.com/ dengan alamat blog anda. Dan juga ganti "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgivSOX41bEzRgyiZ1jrGOc3a6pYeQ13pgcKh98UUIQLr5q1B4I0L3rD8TMDvBikC_lqSEbYQDLvRFG2FE_aygvbZznOrr6Wxrvq7qE-nUxzjnYUwoifMAJtC6jblYSCtgqjfWkX_w1WYU/w180-h300-k/Blogkiran+copy+copy.png dengan alamat gambar yang ingin anda jadikan gambar tetap di kiri halaman blog anda.

OK, Save. Selesai. Sekian tutorial (perbaikan) ini. Semoga anda berhasil menggunakan trik saya ini.