Kamis, 07 April 2011

Cara pasang animasi gambar pada saat Loading Page

19.54 catur uchank

Berikut adalah langkah cepat Cara pasang animasi gambar pada saat Loading Page

Login Blog terlebih dahulu di http//draft.blogger.com
Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
Pilih Tab Edit HTML lalu Cek/Centang kotak Expand Widget Templates
Cari kode <body>
Untuk mencari kode tersebut dapat dipergunakan fasilitas Find pada web browser. Sebagai contoh pada browser Mozilla Firefox ditunjukkan pada Menu Bar -> Edit -> Find (Alt+E+F) atau dengan menekan kombinasi tombol (Ctrl + F) Ganti dengan : <body onLoad='waitPreloadPage();'> <!-- Loading with Image --> <div id='prepage' style='display:scroll;position:fixed;top:100px;left:3px'><img border='0' src='http://www.foundation33.org/images/foundation33.org/loading.gif'/></div> <!-- Ends Loading with Image -->
Cari lagi kode </body> lalu letakkan kode berikut diatas atau sebelum kode </body> <script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/>
Simpan Perubahan template lalu lihat hasilnya :)
Note : Ganti alamat http://www.foundation33.org/images/foundation33.org/loading.gif untuk mengganti animasi gambar pada saat loading halaman dan top:100px;left:3px untuk mengatur posisi letaknya




Read more »

Minggu, 03 April 2011

Membuat Tulisan Mengikuti Cursor

03.20 catur uchank

Mungkin teman2 pernah berkunjung ke suatu blog lalu tiba2 cursornya teman2 diikuti oleh suatu teks. Nah, untuk membuat yang seperti itu sebenarnya gampang sekali, karena kita hanya membutuhkan kode HTML khusus membuat efek tulisan yang mengikuti cursor. Kode HTML yang saya maksud adalah kode berikut ini:


<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='T4 Belajar Blogger'.split('').reverse().join('');

var font='Verdana,Arial';
var size=5; // up to seven
var color='#FF9900';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

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

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>

Nah, kopi-paste kode di atas ke gadget HTML-nya teman2 lalu jangan lupa disimpan. Beberapa bagian yang bisa teman2 ganti yaitu yang berwarna biru (bisa diganti dengan tulisan apa pun), hijau (ukuran font), dan orange (yaitu warna tulisan/font,)
Semoga Bermanfaat []
Read more »

Caram Memasang Tombol "Back to Top"

03.01 catur uchank

Tujuan membuat tombol back to top dalam blog adalah agar para pengunjung blog merasa lebih mudah untuk kembali ke bagian atas blog kita. Walau mereka bisa kembali ke bagian atas blog dengan cara menggulung scrool namun dengan adanya tombol back to top ini akan lebih mempermudah, yaitu cukup dengan satu klik saja, maka mereka langsung di bawa ke bagian atas blog kita.

Untuk membuat tombol yang kita maksud, kita hanya membutuhkan kode berikut:
<script type="text/JavaScript">
var topMargin = 300
var slideTime = 1200
var ns6 = (!document.all && document.getElementById);
var ie4 = (document.all);
var ns4 = (document.layers);
window.setInterval("main()", 10)

function floatObject() {
if (ns4 || ns6) {
findHt = window.innerHeight;
} else if(ie4) {
findHt = document.body.clientHeight;
}
}

function main() {
if (ns4) {
this.currentY = document.floatLayer.top;
this.scrollTop = window.pageYOffset;
mainTrigger();
} else if(ns6) {
this.currentY = parseInt(document.getElementById('floatLayer').style.top);
this.scrollTop = scrollY;
mainTrigger();
} else if(ie4) {
this.currentY = floatLayer.style.pixelTop;
this.scrollTop = document.body.scrollTop;
mainTrigger();
}

}
function mainTrigger() {
var newTargetY = this.scrollTop + this.topMargin
if ( this.currentY != newTargetY ) {
if ( newTargetY != this.targetY ) {
this.targetY = newTargetY
floatStart();
}
animator();
}


}
function floatStart() {
var now = new Date()
this.A = this.targetY - this.currentY
this.B = Math.PI / ( 2 * this.slideTime )
this.C = now.getTime()
if (Math.abs(this.A) > this.findHt) {
this.D = this.A > 0 ? this.targetY - this.findHt : this.targetY + this.findHt
this.A = this.A > 0 ? this.findHt : -this.findHt
} else {
this.D = this.currentY
}
}
function animator() {
var now = new Date()
var newY = this.A * Math.sin( this.B * ( now.getTime() - this.C ) ) + this.D
newY = Math.round(newY)
if (( this.A > 0 && newY > this.currentY ) || ( this.A < 0 && newY < this.currentY )) {
if ( ie4 )floatLayer.style.pixelTop = newY
if ( ns4 )document.floatLayer.top = newY
if ( ns6 )document.getElementById('floatLayer').style.top = newY + "px"
}
}
//-->
</script>
<div id="floatLayer" style="position: absolute; height:20px; width:15; left:650px; top:400px; z-index: 100"><a href="#"><img vspace="0" border="0" hspace="0" alt="Back to Top" width="15" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjMK8bBRzA-7yzleOFEXR98JgJHzSilnHhC4GxQj5z1_lsSSrELYf3Jj5RYOIZu9zO2o742JvUrYDw_bUyUskicI6ieRtlNLvmAzujtXRUcpodpq6Bl-fv3jAmlA5PHbJ3B7pQP134SSw/" height="25"/></a></div>

Cara memasangnya seperti biasa, login ke blogger >> Tata letak dan Tambah Gadget HTML. bagi teman-teman yang ingin mengganti gambar back to top, maka bisa diganti link yang berwarna seperti ini. tampilan dari link gambar di atas adalah seperti berikut ini:
tampilan01


Di atas adalah kode dan langkah-langkah untuk memasang tombol back to top yang letakknya mengikuti gerakan scroll browser, selanjutnya bagi teman-teman yang ingin memasang tombol back to top melayang/berada di kanan slalu (bisa diatur letaknya, NB ==> kode yg tlah saya sediakan di bawah ini sudah diatur untk tampil di bagian kanan bawah), maka tman2 bisa memperaktekkannya melaui langkah-langkah berikut: 
Login ke blogger >> Tata Letak >> Edit HTML
Kemudian letakkan kode berikut tepat di bawah kode </Body>
 
<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjMK8bBRzA-7yzleOFEXR98JgJHzSilnHhC4GxQj5z1_lsSSrELYf3Jj5RYOIZu9zO2o742JvUrYDw_bUyUskicI6ieRtlNLvmAzujtXRUcpodpq6Bl-fv3jAmlA5PHbJ3B7pQP134SSw/'/></a>



Tampilan:
tampilan02




Simpan hasil kerjaan anda!




Nb:

Teman-teman juga bisa memilih beberapa gambar back to top berikut ini



back to top02
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSkK9sYxzBclZE5SNwcpfbj5uroy4A5qBpScton0eKUH98eaTp0xef9faxeihuhPgV8w92CeFIkIiF_XBmpbblXtVRIN2xw0jiOPG5ST7shyphenhyphenBjyiRx2oq-kaZJkc1N7embzzmhY8lfID8T/


back to top03
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ip9U1hHZAg7JYLQ9C11Jujapy4xoVMaJpEHI2_hXLAsk6H1tsLCShclExdjtQ7tT7YAy_6E4ooKR-1Jwcjk7LNjLmJUu2oAlYfXb3ex1AIVVzMx8-r6Wtzi5HkstYM4WtZqjnjGL4T2e/
Read more »

Kamis, 31 Maret 2011

Cara membuat Icon Navigasi Page

23.36 catur uchank



"Cara Mengganti Tulisan Navigasi Blogger dengan Gambar". Kalau pada tutorial sebelumnya kita hanya menambah gambar tanpa menghapus tulisan navigasi yang ada, sedangkan untuk yang kali ini kita akan menghapus tulisan navigasi tersebut dan akan menggantinya dengan gambar navigasi pilihan kita. Sebagai contohnya, teman-teman bisa memperhatikan pada bagian paling bawah postingan blog ini maka ada gambar dua panah GIF yang mengarah ke kanan dan kiri serta gambar Home di tengahnya.
Jika teman-teman tertarik untuk membuat yang seperti itu silahkan untuk login dulu ke akun blogger.



1. Klik Tata Letak
2. Dan jangan lupa untuk mencentang kotak "Expand Widget Template"
3. Selanjutnya carilah kode <data:newerPageTitle/> dan kalau dah ketemu ganti dengan kode berikut
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQz6iLAbAhJ3LAfZP4CLfM8Pdo8DgyTxw9lKwCnitWI6Z6kAtDW-fTCZPBefXH3raqmSsmZT0nGkXwOYo_NabrcorZliGJar2I_9au5rHNjAxhx5balYWZX4W8IgP1mC3oYLySFrEEqqs/'/>

maka tulisan newer post-nya teman-teman akan menjadi gambar:

4. Carilah kode <data:olderPageTitle/> dan gantilah dengan kode berikut
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBDznAQ58H4URaTLU-aZrRSCdWgFxvwK8xwxPjE2orVlqewFNSE0C78kL4vTYxc-SY-zeCJj5mHbrXb6W5q2MOLbO35vNEYABPv9_uVzpWKiYgCALjumM_sCtu1CBHtwH6129vefwmQD0/'/>

Maka nanti tulisan older post pada blog teman-teman jadi seperti ini:

5. Selanjutnya cara mengubah tulisan home/halaman depan dengan gambar rumah. Silahkan untuk mencari kode <data:homeMsg/> maka nanti teman-teman akan menemukan dua kode yang sama, dan pilihkah yang paling atas - sebagai contoh, lihat susunannya berikut
-------------------------------------------
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
-------------------------------------------
maka yang telah saya tandai dengan warna kuning itu harus diganti dengan kode berikut
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgXzvmCaYXw-IRCxY5MEWy8MZ-qJjU4D0Gft7i2_2DuvValEhn5klIhDOzbHjFTlVE3rnI-LYT8nA4br1Bkd2pIFYJXJ-1T3QVzeFrHd5gRPWqqtbE48c_FaRi-Su_5_j9NY2xiZQx4g/' title='Home/Halaman Muka'/>

Dan nanti tampilan tulisan home/halaman depan akan tergantikan dengan gambar:

6. Kalau sudah selesai, jangan lupa klik simpan template. Silahkan untuk melihat tampilan blog anda, dan agar ketiga gambar tersebut bisa anda lihat maka cobalah untuk mengklik postingan mana saja yang ada di blog teman-teman dan usahakan pada postingan yang bukan paling pertama maupun postingan yang terakhir

Jika teman-teman memilki gambar sendiri untuk mengganti tulisan newer, older post, serta home/halaman depan - silahkan untuk mengganti URL gambar milik saya dengan URL gambar pilihan milik teman-teman (kalau mau lho, kalau nggak ya nggak apa2^),^_^
Read more »

Selasa, 29 Maret 2011

Cara Merubah Cursor Di Blog Versi 2

06.05 catur uchank


Hello all.. apa kabar nya neeh.. Postingan kali ini akan saya coba sedikit garing heheee.. inspirasi ini muncul ketika saya sedang browsing ke salah satu situs web milik microsoft saya gerak - gerakkan mouse nya eeh ada gambar yang bikin mata saya melotot lihat nya (mata jengkol kale bang) hehehee... Cara pemasangan nya cukup mudah ga perlu neko - neko silahkan ikuti langkah berikut :

1. Login ke Blogger + Tata Letak + Edit HTML dan berikan centang pada Expand Tempelate Widget (untuk jaga - jaga sebaik nya kamu Download Tempelate Lengkap kamu)

2. Kemudian kamu cari kode body { (untuk memudahkan pencarian kamu teken Cntrl + F di keyboard kamu)

3. Seteleh ketemu kamu letakkan Script dibawah ini di bawah kode body {

cursor:url("http://i49.tinypic.com/flvjtl.gif"),text;

NB : Tulisan yang warna biru dapat kamu ganti dengan url gambar yang kamu inginkan atau kamu ingin mengganti dengan kode gambar di bawah ini :


Ini url nya http://i46.tinypic.com/24zivc8.gif

Ini url nya http://i45.tinypic.com/330bwwn.gif

Untuk lebih lanjut silahkan kamu berkunjung disini dan kamu bisa pilih ikon cursor mouse sesuka mu kemudian upload gambar tersebut di PhotoBucket/TinyPic
Read more »

Cara Merubah Cursor Di Blog

05.39 catur uchank

Tanpa basa - basi, nh Tak kasih scriptnya
<!-- start cursor -->
<style type="text/css">
body{cursor: url(
"http://i42.photobucket.com/albums/e333/frozenfire25/cursors/GuitaR.gif"
),
default;}
</style>
<!-- end cursor -->


1. Kamu paste di gadget HTML/Javascript. Login Blog - Layout(Tata letak) - tambah gadget - HTML/Javascript.

2. Kursor dapat diganti sesuai keinginanmu (yang tulisan berwarna biru). Caranya dengan mengganti dari www.photobucket.com. Lalu, kamu tulis "cursor" di "search bar" lalu search.

3. pilih yang u suka dengan mengkliknya.

4. klik "Direct Link" N' copy paste di gadged kamu.

5. Selamat Mencoba..
Read more »

Senin, 28 Maret 2011

Cara Membuat efek "salju" di blog...

23.26 catur uchank

Hallow Kawan-kawan, apa kabarnya kalian semua. Semoga tetep sehat selalu ya..!!
Oya kawan,sekarang kita mau membahas trik untuk mempercantik tampilan blog kita. Dalam materi kali ini kadang anda sering bertanya-tanya, biasanya ada blog yang tampilannya ada salju berjatuhan.

Emz... nah mungkin anda sedang nge-search di rumahnya mbah Google dan anda dikirim ke halaman blog uchank belajar nge-blog atau memang anda sengaja sedang jalan-jalan di sini. Apapun itu tetap saja bukan hal berarti yang penting anda bisa berjumpa dengan kami untuk membahasanya.

Cara menghadirkan nuansa kutub yang di beri keindahan salju-salju yang bertaburan di blog kita sangat mudah kok kawan-kawan. Begini caranya;

1. Silahkan login ke blog anda atau klik di sini.
2. Pilih Layout / Design / Rancangan dan kemudian Pilih Edit HTML.
3. Centang Expand Widget Templates
4. Copy code berikut :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>
<script src='http://nirav07.110mb.com/jsnow.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
$().jSnow();
});
</script>

5. Paste code di atas sebelum code </head>
6. Save / Simpan Template
Read more »

Langganan: Postingan (Atom)
Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Free Web Hosting