X-ZONE TIPZ: Juli 2012

X-BLOG~ Cara memasang widget animasi di blog

Diposting oleh Adee

X-Blog kali ini akan membahas Cara memasang widget animasi di blog yang toturialnya sangat mudah dipelajari.bagi anda yang tidak sabar lagi ikuti langkah langkah di bawah ini :

Langkah 1 : Login ke Blogger

Langkah 2 : Klik menu Tata letak

Langkah 3 : Klik Tambah gadget

Langkah 4 : Pilih HTML/Javascript

Langkah 5 : Masukkan kode di bawah ini di dalamnya

<div style="position: fixed; bottom: 0px; left: 20px;width:110px;height:80px;"><a href="http://www.xzone-tips.blogspot.com"target="_blank"><img src="http://i1257.photobucket.com/albums/ii512/xzonetips/NarutoVSSasuke.gif"alt="gambar"title="Panduan Blogspot"/></a></div>

NB : ganti http://i1257.photobucket.com/albums/ii512/xzonetips/NarutoVSSasuke.gif dengan Link/URL gambar anda.

KLIK SIMPAN

X-BLOG~ Cara pasang efek daun berjatuhan di blog

Diposting oleh Adee

X-BLOG kali ini akan membahas tentang Cara pasang efek daun berjatuhan di blog.Mungkin anda sudah banyak yang mengetahui cara memasang efek daun berjatuhan di blog,bagi yang belum tahu silahkan ikuti langkah-langkah di bawah ini :

Langkah 1 : Login ke blogger
Langkah 2 : Klik menu Template
Langkah 3 : Klik Edit HTML
Langkah 4 : Centang kode Expand template widget
Langkah 5 : Cari kode </head> (Gunakanlah CTRL+F untuk mempercepat pencarian)
Langkah 6 : Letakkan kode di bawah ini tepat di atas kode </head>

<script src='http://xzoneti.googlecode.com/files/daun.js'/>

Simpan Template

X-BLOG~ Membuat efek refresh pada blog

Diposting oleh Adee

Kali ini X-BLOG akan memberikan tips tentang Membuat efek refresh di blog.
Fungsinya sama seperti refresh pada browser internet,perbedaannya adalah refresh ini bekerja secara otomatis,jadi para pengunjung tidak usah menggunakan refresh yg ada pada toolbar.
Bagi yang ingin melakukannya ikuti langkah-langkah di bawah ini :

Langkah 1 : Login ke Blogger
Langkah 2 : Klik menu Template
Langkah 3 : Klik Edit HTML
Langkah 4 : Cari kode </head> (Gunakanlah CTRL+F agar mempermudah pencarian)
Langkah 5 : Masukkan kode di bawah ini tepat di atas kode </head>

<meta http-equiv="refresh" content="30"/>

content="30" Menunjukkan proses refresh akan dilakukan dalam rentang waktu 30 detik.Sebaiknya anka ini jangan di set terlalu cepat agar pengunjung tidak kesal/marah karena belum selesai baca postingan udah refresh.

Klik Simpan template

X-BLOG~ Membuat efek kembang api di blog

Diposting oleh Adee

Cara membuat kembang api di blog ini sangat mudah,hanya tinggal mengikuti toturial di bawah ini.
langsung saja kita mulai :

langkah 1 : login ke blogger
langkah 2 : Klik menu template
langkah 3 : Klik menu Edit HTML
Langkah 4 : Centang kode Expand template widget
langkah 5 : carilah code </body> (Gunakanlah CTRL + F untuk mempermudah pencarian)
langkah 6 : Copy paste code di bawah ini lalu letakkan tepat di atas kode </body>

<script language="javascript" src="http://xzoneti.googlecode.com/files/kembangapi.js"></script>

SAVE TEMPLATE

X-BLOG~ Membuat buku tamu melayang di sisi kanan

Diposting oleh Adee

Caranya cukup mudah,anda hanya memerlukan sedikit script untuk buku tamu.

okk langsung saja :

langkah-langkah :

langkah 1 : Login ke akun blogger

langkah 2 : Klik menu Rancangan

langkah 3 : Klik Tambah gadget

(KLIK UNTUK MEMPERJELAS)

langkah 4 : Pilih HTML/Javascript

(KLIK UNTUK MEMPERJELAS)

langkah 5 : Masukkan kode di bawah ini :

<style>
#hcr {
position:fixed;
top:100px;
z-index:+1000;
}
* html #hcr {position:relative;}
.hcrtab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://b.imagehost.org/0611/buku-tamu.png') no-repeat;
}
.hcrcontent {
float:left;
border:2px solid #003e82;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcr(){
var hcr = document.getElementById("hcr");
var w = hcr.offsetWidth;
hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
hcr.opened = !hcr.opened;
}
function movehcr(x0, xf){
var hcr = document.getElementById("hcr");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcr.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("movehcr("+x+", "+xf+")", 10);}
}
</script>
<div id="hcr">
<div class="hcrtab" onclick="showHidehcr()"> </div>
<div class="hcrcontent">

masukan kode shoutbox/buku tamu andadi sini
<br />
<div class="hc-credit">
<span style="float:left">

</span>
</div>
</div>
</div>
<script type="text/javascript">
var hcr = document.getElementById("hcr");
hcr.style.right = (30-hcr.offsetWidth).toString() + "px";
</script>

Klik simpan

X-BLOG~ Cara membuat text area otomatis di blog

Diposting oleh Adee

Kali ini X-Blog akan membuat text area yang apabila cusor mengarah ke dalam tulisan ataupun kode HTML yang berada di dalam text area kita ini otomatis akan di block,sehingga tinggal ci copy aja

Contohnya,arahkan cusor anda di bawah ini :

X-BLOG~ Cara membuat tombol share keren (Mirip daun)

Diposting oleh Adee

Cara membuat tombol share keren ini akan menari pengunjung yang datang ke blog anda.Posisi widget ini terletak di bawah posting,Ok langsung saja :

Langkah 1 : Login ke blog
Langkah 2 : Pilih Rancangan >> edit HTML >> Centang expand widget template
Langkah 3 : Carilah kode <data:post.body/> dan letakkan Kode tepat di bawah kode <data:post.body/>

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlZkDalJcQb-_U1vQftncVHgvm-dvXZsarqC6LhYiBUfKjP-s1YmXLBln-gGcklBYzkbgETrOiAb3rxQ0Q4MM3RFVXYqkP81F_rvym6OOqurFezqyJuoOB5d99av6b7MLq3uT3jXJKXQXR/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisFUjHv7hDZ-QfgiV-04JvK_Uz7vyOZ0NIGsmz7pwpONRGHkF9zOLPx0cufqclqhifFw2ub9KtZopg4ae009zJnUYTXdhzor46JMdR1VgaabYo71Na1tiJa1BPqoVekwkaU7gTC36CJjRz/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikGCokbQ76gFlE__N56-wlbkHD7RZtU97U_x-Lq9B6FbQ2jAVJz983-4is7neBSjTsMC4u6PYm45bB9LrclUuIaHlj-IScrAQZcVhqdfcPl-HMSCwwaMbnDcUVIZUP3ZC5Bz0YftvOuxsE/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM5aYSOW80UYYuF6Nl7vgX12FAWWV3dnbWAGKQiPQWX1UvvFtXzt2P4BorynN2LG0wH7cN1KRYz5nC-Qa1DoFUvxOMn23VyNSuBLwLBMjKvldcDmmTuZ1rxdE3EU4-WLAkx5DeAeUuKOsa/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-27Y8TQ05LDbVTPnMiZyzROBLok2dsQNC-qy8Rh-gMH2CxAYflH1oIk8TsI9o-JRTg4D_V0kv8PLW0ygOgl9z-IQM9n9mG5xbJlE9kprvrswK1JdY9V1WXEF-8bhfgfpoy7zcX-n70EL8/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Prttq5IRZgU5-WtwF_oNpmseu4KYc1U95AFAwGjujDDWmlEpVvYXC-yZO-FSepShUvu9OnprP63m80VVlMiCoi0HpMsu1yjyllKQKU3KVzYt6xkKxZT68p3rc-zdwoOuYUmWKh8UXfh9/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9u8Zcl3f1Fexhh8d7t7yDoo-453lrFXUhWGWzzHkOMYZRgXf51Fcui-tO7foaB-TQQVmvVlFvmSGkDZaJ5CqWrkg9Pf0VNdfk9uHrknMwG5voGhgEBgnsr3vipeGuyz8BldLIoumP_IWX/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhdLAQx8CW6RDtKa8olp4JSulfVsV-8-s_AZp-i3htmrDjMBeanEpxSBWfzCL5nXEYX08Gc5hLzdLX2EXLv1P-TgOsRqHNUoywcpxRNPPgDRUHoi1OIfYgwKGRsZoVuvkjNEJz0HGO0ID1/' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

Save Template dan lihat Hasilnya.

X-BLOG~ Cara membuat blogger slide show bergaya dengan JQuery

Diposting oleh Adee

Hello Para blogger yang mampir di X-Zone kali ini pada bulan ramadhan,bulan suci saya akan memposting Cara membuat blogger Slide show bergaya dengan JQuery

Untuk melihat penampakannya klik gambar di bawah ini :

Jika sudah merasa puas mari kita buat :

jangan lupa backup template anda dulu untuk berjaga-jaga apabila terjadi kesalahan.

Langkah 1 : Pada blogger Dashboard klik Template >> Edit HTML

Langkah 2 : Carilah kode ]]></b:skin> pada template Html anda (Gunakanlah CTRL + F untuk mempermudah pencarian)

Langkah 3 : Copy paste kode di bawah ini sebelum kode ]]></b:skin>

/* Start Slider Code From http://www.spiceupyourblog.com/ */
ul.bjqs{position:relative; list-style:none;padding:0;margin:0;overflow:hidden; display:none;}
li.bjqs-slide{display:none;position:absolute;}
ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;max-width:100%;}
ol.bjqs-markers{list-style:none;margin:0;padding:0;z-index:9999;}
ol.bjqs-markers li{float:left;}
p.bjqs-caption{display:block;max-width:96%;margin:0;padding:2%;position:absolute;bottom:0;background:rgba(0,0,0,0.7);color:#fff;-moz-border-radius: 6px;-webkit-border-radius: 6px;-moz-box-shadow: 4px 4px 4px #dddddd;-webkit-box-shadow: 4px 4px 4px #dddddd;}
}
/* End Slider Code From http://www.spiceupyourblog.com/ */

Langkah 4 : Carilah kode </head> pada template HTML anda (CTRL + F)
Langkah 5 : Copy paste Kode di bawah ini tepat di atas/sebelum kode </head>

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/9921010228/basic-jquery-slider.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#my-slideshow').bjqs({

'width' : 940,

'height' : 340,
'showMarkers' : true,
'showControls' : true,
'centerMarkers' : false
});
});
</script>

NB : Kode yang berwarna Kuning adalah script JQuery,jika sebelumnya anda sudah menambahkan kode berikut di template anda hapuslah kode tersebut.

Kode yang berwarna Merah adalah lebar dan tinggi gambar slide.lebar dan tinggi ini anda bisa sesuaikan dengan keinginan anda (sesuaikan lebar dan tinggi kolom widget template anda)

Langkah 6 : SAVE TEMPLATE ANDA.

Nah Jika semua langkah di atas dilakukan dengan benar,Anda sudah menambahkan kode CSS dan Script ke template anda.Langkah terakhir adalah menampilkan slide show pada blog anda

(KLIK UNTUK MEMPERJELAS)

Tambahkan widget baru Add gadget >> HTML/JAVASCIPT kemudian copy paste kode di bawah ini

<div id="my-slideshow">
<ul class="bjqs">
<li><img title="This is a caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiemD9h0Iz_T8yndVLcfFOH-AYEkhMoQZuEvLQYUESahgoI5bHh4nfqgmm3slOncBGKrovCtpBbmhlchwTZfyKDcPvgfqwpnfouVJ1luFe8svIrzUGo8N6RAK7El4BTf8Tfd9IsJmmGzscc/s1600/slider-image1.jpg"/></li>

<li><img title="This is a another caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeX__M_2L80Qv5wfhUU6cvLIRnyrVghY1QNXeJ7jC2q1JaU1v0NJ26q4dBK-KdWhUGASLycxcAU3BYrzUqlTRUegPqobeLjtkv-MarLBFQ2zS-O3TAs4YK3ROx7Mt_T_q3AbktjncCOPTr/s1600/slider-image2.jpg"/></li>

<li><img title="This is a another longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjD27wzDaBw-tuxtPDUdzVbX4uri2EmKLnd87BcyaJtrD0uKo-0UNhHkSNXGgBmgwd2bl_90wd6oEEqhmO0xk4FfQ82TDmardWtItvaIBThZRGQ2I5ZB3r9TvN33EZSrOCOphdmxLQcs0L/s1600/slider-image-3.jpg"/></li>

<li><img title="This is a another much longer caption." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyQk7PnqTwy1zyrI-SsR8sXLrgT3WUvPDZhFZuQTuAeLPX8ytMh2VxUWCvx1D4V-U9TCJlTOrCzWLFQFzExhoYIbV-ipZ82GdK1s-7YpaCF0WQt7krc53rFIiMuT93l4mKhjFgeS_dnv20/s1600/slider-image4.jpg"/></li>

<li><img title="This is a another longer caption that can be the lenght of the image or even longer onto the next line." src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3FlnV7-gNFVBHwLWOhw9R0PbIAYya3C5zuLYzNe2FFc1nyftwgjVF66q0fnBnyIZMTHiD9YrXQH0hZXopqseWKUkrtmM12LEgr-c1f-RWLW5DKW1u6fvQKTUH4CbT-MygZBkMyTyRiDB/s1600/slider-image5.jpg"/></li>
</ul>
</div>

NB : Kode bewarna Kuning adalah keterangan gambar dan kode bewarna Hijau adalah alamat url gambar

Kemudian Simpan widget

Jika langkah-langkah di atas dilakukan dengan benar maka anda dapat memiliki Blogger Slide yang bergaya.

X-Blog~ Cara membuat text mengelilingi cusor

Diposting oleh Adee

Salam X-Blog Kali ini X-Blog akan membahas Cara membuat text mengikuti cusor/mengelilingi cusor

bagi sobat blogger yang ingin mempercantik blognya pakailah javacript ini tapi javascript ini membuat blog anda menjadi tak nyaman saat pengunjung datang.

okk langsung aja ga usah lama-lama langsung ke TKP :

Langkah-Langkah :

-login Blogger anda

-Masuk ke Tata letak >> Add gadget

-Pilih HTML/javascript

-Copy paste Code berikut :

<script>

//mouse

//Circling text trail- Tim Tilton

//Website: http://Xzone-tips.blogspot.com/

//Visit http://xzone-tips.blogspot.com/ for this script and more

function cursor_text_circle(){

// your message here

var msg='X-zone tips'.split('').reverse().join('');

var font='Verdana,Arial';

var size=3; // up to seven

var color='#ff0000';

// 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>

NB :
-Ganti tulisan Berwarna merah dengan text yang akan mengelilingi cusor blog anda
-Ganti Verdana,Arial untuk mengganti jenis font
-3 : untuk mengatur ukuran font
-#ff0000 : Ganti dengan warna font sesuka anda

SAVE DAN LIHAT HASILNYA

About me

TRANSLATE

FOLLOWERS

X-Zone

Blog Archive

Labels

Link My Banner