X-ZONE TIPZ: Toturial X-BLOG~

Tampilkan postingan dengan label Toturial X-BLOG~. Tampilkan semua postingan

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

X-BLOG~ Membuat text berjalan (Marquee)

Diposting oleh Adee

Text berjalan atau Marquee Bisa kita buat dengan maksud memperindah tampilan blog kita,Text berjalan ini bisa untuk membuat headline dan juga untuk menjalankan link tersebut karena meraik perhatian dengan text berjalan atau marquee.Bagaimana untuk membuatnya.?

Marquee dari kiri ke kanan :

Contoh Marquee dari kiri ke kanan

Marquee dari kanan ke kiri :

Contoh Marquee kanan kekiri

Marquee dengan gerak bolak-balik :

Contoh MARQUEE dengan Gerakan bolak-balik
Marquee dari bawah keatas :

Contoh Marquee dari bawah keatas
Marquee dari atas kebawah :

Contoh Marquee dari atas kebawah
Marquee dengan efek background :

Contoh Marquee dengan menggunakan background hitam dan warna font putih

Variasi yang satu ini apabila mouse didekatkan pada text marquee maka text tersebut akan berhenti dan berjalan kembali apabila mouse dijauhkan dari text marquee

Arahkan mouse anda kesini
Marquee dalamnya terdapat link :

X-zone Home X-game Kode warna X-zone fanspage
Anda dapat berkreasi sendiri sesuka anda.!

X-BLOG~ Menyembunyikan widget Tertentu dhi halaman utama/hompage

Diposting oleh Adee

Toturial kali ini membahas tentang menyembunyikan widget tertentu pada halaman utama,yang widget tersebut hanya terlihat di halaman posting saja :

Caranya cukup mudah :

Login ke blog
Pilih Rancangan >> Edit HTML
Carilah kode berikut ]]></b:skin> (Untuk lebih cepat tekan CTRL+F) kemudian letakkan kode berikut dibawah kode ]]></b:skin>

X-BLOG~ Membuat efek Link Rainbow saat disentuh cursor

Diposting oleh Adee

Link pelangi atau rainbow ini memberikan kesan apabila link disentuh oleh cursor dan link itu akan berubah menjadi warna-warni.Untuk membuatnya sangat mudah,langsung aja :

Untuk demonya Klik : Disini Demo Kemudian arahkan Cusor ke link.

Cara membuatnya :

Login Blogger
Klik Template
Edit HTML
Salin kode berikut diatas kode </head>

X-BLOG~ Cara membuat efek meteor jatuh pada blog

Diposting oleh Adee

Meteor jatuh.?? memang agak mustahil tapi kali ini meteor jatuhnya hanya di blog agan semua bukan di dunia nyata,daripada penasaran lihat aja demonya :

Hanya Demo meteor jatuh

Jika anda sudah liat dan ingin mencobanya langsung saja menuju ke Page element
Klik Add widget >> Html/javascript >> Copas code berikut :

Kemudian Save

X-BLOG~ Cara merubah Cursor pada blog

Diposting oleh Adee

Hello pengunjung X-blog kali ini X-blog akan memposting Cara merubah Cursor pada blog dan bagi sobat blogger newbie nah trik ini sudah saya pakai dan hasilnya keren,langsung aja kita ke TKP :

Caranya :

Masuk ke Blogger (jangan facebook)
Masuk ke Template > Edit HTML
Cari kode <Head> [Gunakan Ctrl + F agar lebih cepat dan mudah] dan Copas kode berikut dibawah kode <Head>

Keterangan :
tulisan seperti 'isikan link cursor anda disini' isilah itu dengan link cusor sobat

ALAMAT LINK

http://cursors1.totallyfreecursors.com/thumbnails/monkey-ani.gif

http://cursors1.totallyfreecursors.com/thumbnails/aliendance.gif

http://cursors1.totallyfreecursors.com/thumbnails/spongebob-ani.gif

http://cursors3.totallyfreecursors.com/thumbnails/rainbow-ani3.gif

X-BLOG~ Kode warna

Diposting oleh Adee

Kode Warna :

X-BLOG~ Cara memasang musik otomatis pada blog

Diposting oleh Adee

Sudah banyak blog" yang memakai alunan musik otomatis dan kali ini X-BLOG akan membahasnya dan langsuung aja kita ke TKP okk..

Siapkan lagu yang akan dipasang di blog anda (Jangan diatas 1000 Kb dikarenakan blog anda akan menjadi lebi berat)
Script pemutar musik hanya bisa membaca SWF dan anda harus mengganti Format musik anda menjadi SWF untuk mengganti format musik anda dibutuhkan aplikasi untuk mendownloadnya -- DISINI.
Setelah itu Install aplikasinya dan convert ke SWF.
Jika sudah Upload file SWF tadi ke -- 4Shared dan Copy link SWF anda yang sudah di upload.
Edit kode link tersebut,contoh :

http://www.4shared.com/download/3Q-wROI-/Simpleplan.html

Ganti kata "Document/download" dengan "Embed". dan ganti "Html" dengan "swf" sehingga hasilnya :

http://www.4shared.com/embed/3Q-wROI-/Simpleplan.swf

Copy paste Tulisan dibawah ini dan ubah tulisan yang berwarna "Biru" Dengan link SWF musik anda anda yang sudah di ubah.

<embed allowfullscreen="true" allowscriptaccess="always" height="0" src=" http://www.4shared.com/embed/3Q-wROI-/Simpleplan.swf " width="0"></embed>

X-BLOG~Membuat Kelelawar Beterbangan

Diposting oleh Adee

Semua orang pasti tau kelalawar yaa.Lalu apa Hubungannya postingan ini dengan kelelawarr.??
Kali ini X-BLOG akan memberi sedikit trik untuk memperindah blog anda dengan memberi efek kelelawar.

Tapi masalahnya dengan memasang ini Blog anda semakin berat.
kalo mau menggunakannya nihh :
1. Masuk ke Blogger (Yg terpenting)
2. Setelah masuk ke Blogger anda pilih Dasboard >> Rancangan >> Tata Letak >> Add Widget
3. Lalu Pilih HTML/Javascript
4. Kemudian Copy Paste Code Berikut ini :

5. Lalu Save
Lihat Hasilnyaa

X-BLOG~Membuat Artikel Terkait

Diposting oleh Adee

Cara Membuat Artikel Terkait/Related Post Bawah Postingan Blogspot.
Untukk buatnya nihh ikutin seperti berikut :
1. Login Ke Blogger Dulu Boss
2. Rancangan>>Edit HTML>>Centang "expand widget template"
3. Cari Kode ]]><b/skin> dan letakkan kode berikut di atasnya :

.cayunbox{border: 1px solid #000000;padding: 5px; background-color: #7BFAAF;-moz-border-radius:5px; margin:5px;}.cayunbox:hover{background-color: #CE44F0;}

4.Cari Kode <data:post.body/> dan letakkan di bawahnya..

<b:if cond='data:blog.pageType == "item"'><br/><br/><H2>Baca Artikel lainya:</H2><div class='cayunbox'><div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid#ccc;'><div id='albri'/><script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>";var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement('ul');var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i < maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {alturl = entry.link[k].href;break;}}var li = document.createElement('li');var a = document.createElement('a');a.href = alturl;if(a.href!=location.href) {var txt = document.createTextNode(entry.title.$t);a.appendChild(txt);li.appendChild(a);ul.appendChild(li);}}for (var l = 0; l < json.feed.link.length; l++) {if (json.feed.link[l].rel == 'alternate') {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k<20; k++) label = label.replace("%20", " ");var txt = document.createTextNode(label);var h = document.createElement('b');h.appendChild(txt);var div1 = document.createElement('div');div1.appendChild(h);div1.appendChild(ul);document.getElementById('albri').appendChild(div1);}}}function search10(query, label) {var script = document.createElement('script');script.setAttribute('src', query + 'feeds/posts/default/-/'+ label +'?alt=json-in-script&callback=listEntries10');script.setAttribute('type', 'text/javascript');document.documentElement.firstChild.appendChild(script);}var labelArray = new Array();var numLabel = 0;<b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = "<data:label.name/>";var test = 0;for (var i = 0; i < labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length <= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel < maxLabels) {search10(homeUrl3, textLabel);numLabel++;}}</b:loop></b:loop></script></div><script type="text/javascript">RelPost();</script></div></b:if>

5.Save Template (Liat Hasilnya)...

About me

TRANSLATE

FOLLOWERS

X-Zone

Blog Archive

Labels

Link My Banner