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

Profil Pendiri X-ZONE dan kisah berdirinya blog ini. Diposting oleh Adee

Halo gaes, sudah 5 tahun blog X-Zone tidak pernah memposting.
mohon maaf dikarenakan saya sudah berhenti dalam membikin postingan.
Dan pada kali ini di tahun 2017 saya akan menjelaskan profil pribadi saya dan menjelaskan sejarah didirikannya blog ini, hehe :D
 
Perkenalkan dahulu ya gaes, Nama asli saya Ade Tia Setiyawan , dan biasanya dipanggil Ade , nah pada kali ini saya berada di Universitas ternama di kota jember. saya lahir di kota Jember dan pada tanggal 9 Mei 1997.
Bagi yang penasaran ini nih foto saya sekarang

klik aja fotonya untuk memperbesar

whehe.......
cakep ya gaess, jangan pada naksir ya :v

okelah lanjut kenapa didirikannya blog ini, nah pertama kali saya blogging itu tahun 2010 , disana saya belajar secara otodidak. Pertama motivasi saya untuk membikin blog pada tahun 2010 itu karena melihat blogspot - blogspot keren yang tampilannya sangat menarik , dan postnya fresh.
Langsung juga pada saat itu saya membikin blog dan masih berantakan pada tampilannya, maklum lah pertama kali ngeblogging, dan juga saya terus berusaha.
Dan juga memulai blog itu pada saat saya duduk di bangku SMP.

NB : SEBELUM SAYA LANJUTKAN CERITANYA , MOHON MAAF CURHATAN SAYA INI PANJANG.

Okelah lanjuttt.....
setelah setahun belajar secara otodidak dan membuat tampilan blog semakin bekembang (Berkembang alay pada jamannya saat itu , ex : cursor mengeluarkan glitter)
dan pada tahun 2011 saya memberanikan bertanya - tanya kepada blog blog besar , seperti XKRESSX ( Sekarang keknya sudah pudar, Alexa rank dulu pada urutan ke 15. dengan pendapatan perharinya dari iklan kisaran 6-10 juta)
SIAGA - ONLINE ( Pudar Juga brooohh, klik aja linknya kalo penasaran sama blognya)
dan masih banyak lagi blog- blog yang mensupport dan membantu saya dalam membikin blog ini.
Pada pertengahan tahun 2011 , Owner SIAGA - ONLINE yaitu Bro Helsinzki Al Saad (panggilan : Helsinzki) berbaik hati membimbing saya membikin blog dengan sabarnya dia mengajari cara"nya. Dan begitu baik hatinya dia membuatkan Logo blog saya dengan photoshop (maklum pada saat itu saya masih belum bisa mengoprasikan photoshop)

okee lanjut pada tahun 2012 , nahh pada tahun tersebut pertemanan saya dengan bro Helsinzki  semakin akrab , dan saya sudah mulai terbiasa mengoprasikan blog dan sedikit tahu tentang HTML .
SKIPP SKIPP...
dimulainya saya pada tahun itu bergabung dengan DEEZCLAN yaitu kumpulan blogger muda saling sharing.
(Sekarang saya kurang tahu blog DEEZCLAN tersebut masih aktif apa sudah tidak)
 disini saya kenal dengan bro Syaiful Arif, setelah berkenalan dapat 4 bulanan saya mengajak dia untuk bergabung di blog saya untuk Design tampilan blog mau kedepannya jadi seperti apa.
(Tampilannya bisa dilihat di blog sekarang ini)

OKELAH CERITA SELANJUTNYA DIMULAINYA PERPECAHAN 

Pada bulan Juli 2012 Syaiful Arif mengundurkan diri dari staff blog dikarenakan sibuk dengan pekerjaannya. dan seperti  dahulu lagi saya sendirian mengurus blog. sampai pada bulan Oktober itu postingan saya terakhir. 

Dan pada tahun itu juga Blog XKRESSX di banned oleh google dikarenakan melanggar kebijakan, dan pada tahun 2013 bro Helsinzki juga sudah lelah mengurus blognya, dan memutuskan juga untuk berhenti ngeblogging lagi.

itu akhir dari dimana semuanya kembali ke kesibukannya masing masing,
sampai sekarang ini saya tidak tahu kabar mereka sekarang seperti apa, dikarenakannya lost contact dan saya chat sampai sekarang belum ada balasan.
Cuma ada facebook bro Helsinzki, dan dia tidak aktif lagi di facebook. ( Bagi yang ingin tahu facebook Helsinzki Bisa klik DISINI )
pada tahun 2014 dia sepertinya kembali membikin blog lain. tetapi saya sudah berhenti ngeblogging pada tahun itu.

 okee..
Pada tahun 2017 ini saya berkesempatan ingin memposting kembali dan mencapai kejayaan blog ini seperti pada masanya dahulu. ( Sepertinya susah)

TERIMAKASIH SUDAH MEMBACA CERITA SAYA INI

" HIDUP INI TERUS AKAN BERPUTAR, YANG DIATAS TIDAK AKAN SELALU DIATAS, DAN YANG DIBAWAH TIDAK AKAN SELALU ADA DIBAWAH"

X-BLOG~Pasang jam Di Blog Diposting oleh Adee

Agar blog anda tampak cantik dan menarik perhatian pengunjung  untuk di lihat,Kali ini X-BLOG akan membahas tentang PASANG JAM DI BLOG.
jam ini  bisa di dapatkan gratis pada situs :

X-BLOG~

Jika ingin memasangnya,ikuti nihhh:
1. Buka Link yang tadii
2. Jika sudah Silahkan Klik tulisan Want a clock on your Website ?
3. Carilah jam yang cocok buat blog/Website anda.
4. Jika sudah menemukan yang cocok/di Sukai,Klik tulisan View HTML tag yang berada di bawah jam yang anda pilih
5. Klik tombol yg Bertuliskan Accept
6. Pilih waktu yang sesuai dengan tempat anda. :D 
7. Jika sudah copy Kode HTML yang di berikan pada Notepad
8. Pastekan Kode HTML tadi pada tempat yg diinginkan.!
9. Selesaaaiii

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 :

<marquee direction="right" scrollamount="3"> Contoh Marquee dari kiri ke kanan </marquee><p>

Contohnya :

Contoh Marquee dari kiri ke kanan


Marquee dari kanan ke kiri :

<marquee direction="left" scrollamount="3"> Contoh Marquee dari kanan ke kiri </marquee><p>

Contohnya :

Contoh Marquee kanan kekiri


Marquee dengan gerak bolak-balik :

<MARQUEE align="center" direction="left" height="100" scrollamount="3" width="70%" behavior="alternate"> Contoh MARQUEE dengan Gerakan bolak-balik </MARQUEE>

Contohnya :

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

<marquee direction="up" scrollamount="2″ height="50″ width="50%"> Contoh Marquee dari bawah keatas </marquee><p>

Contohnya :

Contoh Marquee dari bawah keatas
Marquee dari atas kebawah :

<marquee direction="down" scrollamount="2″ height="50″ width="50%"> Contoh Marquee dari atas kebawah </marquee><p>

Contohnya :

Contoh Marquee dari atas kebawah
Marquee dengan efek background :

<font color="white"><marquee direction="right" scrollamount="2" bgcolor="black"> Contoh Marquee dengan menggunakan background hitam dan warna font putih </font></marquee><p>

Contohnya :

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

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> Arahkan mouse anda kesini </marquee>

Contohnya :

Arahkan mouse anda kesini
Marquee dalamnya terdapat link :

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="50%" height="200" align="center"> <a href="http://xzone-tips.blogspot.com/">X-zone Home</a> <a href="http://xzone-tips.blogspot.com/2012/06/x-game-download-vigilante-8-untuk-pc.html">X-game</a> <a href="http://xzone-tips.blogspot.com/2012/04/x-blog-kode-warna.html">Kode warna</a> <a href="http://www.facebook.com/pages/X-ZONE/321446044549212">X-zone fanspage</a> </marquee>

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

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> 

<style type='text/css'>body, a, a:hover {cursor: url(isikan link cursor anda disini), progress;}</style>

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~ 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 :

<style type="text/css"Test X-blog community

Jika anda mengarahkan cusor anda di text area di atas,maka otomatis tulisan tersebut akan ter-block.Teks area ini sangat untuk menaruh kode html di dalam postingan.
langsung aja ini scriptnya :

<div>
<form name="Xblogtipsstyle">
<div align="left" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="40" name="txt" onmouseover="this.form.txt.select()" readonly="readonly" rows="3">&lt;style type="text/css"TULISAN/HTML YANG ANDA INGINKAN </textarea></div>
</form>
</div>

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~ 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 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 :

<script src="http://sites.google.com/site/javascriptnew/java-script/kelelawar.js" type="text/javascript"></script>

5. Lalu Save
Lihat Hasilnyaa

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~ 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~Membuat Blog tidak dapat Di Copy Paste Diposting oleh Adee

Kali ini,X-BLOG Sharing ilmu Untuk Para Pecinta Blogger.!!
langsung saja>>
1. Login Dahulu (Yg Terpenting)
2. Masuk Ke TATA LETAK >>> EDIT HTML
3. Jangan lupa Memberi tanda centang pada Expand Template Widget
4. Copy Paste code Berikut dan Letakkan Codenya di atas <head>

<script type="text/javascript">
if (typeof document.onselectstart!="undefined") {
document.onselectstart=new Function ("return false");
}
else{
document.onmousedown=new Function ("return false");
document.onmouseup=new Function ("return true");
}
</script>

5. Kemudian Simpan Template anda...
Lihatt tuh hasilnya,!!

X-BLOG~Membuat Scrollbar di Posting Diposting oleh Adee

Kali ini Posting Pertama X-BLOG akan Membahas tentang bagaimana membuat Scrollbar di dalam Postingan.

Jika Penasara Simak ini :

1. Login Terlebih Dahulu (Yg terpenting)

2. Masuk ke Tata letak >>> Edit html

3. Beri tanda Centang Pada Expan Widget Template

4. Carilah Code seperti berikut :

font-size: 12px;
margin: 10px 0px 20px 0px;
padding: 5px 15px 5px 15px;
border-top: 1px solid #73943B;
border-bottom: 2px solid #73943B;

5. Tambahkan Code Di atas Dengan Code Berikut ini :

height:150px;
overflow:auto;

6. Maka Hasilnya akan seperti Berikut ini ::

font-size: 12px;
margin: 10px 0px 20px 0px;
padding: 5px 15px 5px 15px;
border-top: 1px solid #73943B;
border-bottom: 2px solid #73943B;
height:150px;
overflow:auto;

7. Jika sudah simpanlah Template.

8.Maka hasilnya Akan seperti gambar Berikut :

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='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://technorati.com/faves?add=&quot; + 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='&quot;http://twitthis.com/twit?url=&quot; + 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='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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 + &quot;feeds/posts/default&quot;' 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 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 :

<script language="javascript"> nd_mode="meteor"; nd_sound="on"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_top"; </script> <script language="javascript" src="http://cayunkatel.googlecode.com/files/meteorjaruh.js"> </script>

Kemudian Save

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 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 == &quot;item&quot;'><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 = &quot;<data:blog.homepageUrl/>&quot;;var maxNumberOfPostsPerLabel = 4;var maxNumberOfLabels = 10;maxNumberOfPostsPerLabel = 10;maxNumberOfLabels = 3;function listEntries10(json) {var ul = document.createElement(&#39;ul&#39;);var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;for (var i = 0; i &lt; maxPosts; i++) {var entry = json.feed.entry[i];var alturl;for (var k = 0; k &lt; entry.link.length; k++) {if (entry.link[k].rel == &#39;alternate&#39;) {alturl = entry.link[k].href;break;}}var li = document.createElement(&#39;li&#39;);var a = document.createElement(&#39;a&#39;);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 &lt; json.feed.link.length; l++) {if (json.feed.link[l].rel == &#39;alternate&#39;) {var raw = json.feed.link[l].href;var label = raw.substr(homeUrl3.length+13);var k;for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);var txt = document.createTextNode(label);var h = document.createElement(&#39;b&#39;);h.appendChild(txt);var div1 = document.createElement(&#39;div&#39;);div1.appendChild(h);div1.appendChild(ul);document.getElementById(&#39;albri&#39;).appendChild(div1);}}}function search10(query, label) {var script = document.createElement(&#39;script&#39;);script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);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 = &quot;<data:label.name/>&quot;;var test = 0;for (var i = 0; i &lt; labelArray.length; i++)if (labelArray[i] == textLabel) test = 1;if (test == 0) {labelArray.push(textLabel);var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;if (numLabel &lt; 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)...

X-BLOG~Cara Membuat Burung twitter Di blog Diposting oleh Adee

Trick kali ini ya saya tulis adalah Membuat burung twitter Di blog.
Pernah liat Burung twitter.??
kalo Di kehidupan nyata sihh ga ada, klo di dunia maya ada.!,

Mari kita membuat burung twitter :
1. Login ke Blogger dengan akun anda. :D
2. Pilih Rancangan>>tata letak>>Tambah Widget>>HTML/Javascript
3. Lalu copy paste Code Berikut.:

<script type="text/javascript" src="http://imemovaz.googlecode.com/files/tripleflap.js"></script><script type="text/javascript">var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfzvIfSOzFlcKUHyTyn7QmG0EQPdeRZl_oM53n3mSW4Ou1l3Ex0jaizVgZnaese2TokMsx64rSkxwSqwSsuItUzte6Jo0j1BrgZSiv65389JAd0nqqE8X4boDxfpeUIVof-MPAoo94DO8s/s1600/birdsprite.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/#!/AdeXscarletZ";var tweetThisText = "Twitter - adehttp://xgame-tips.blogspot.com";tripleflapInit();
</script></script>

Note : Ganti http://twitter.com/#!/AdeXscarletZ dengan alamat Twitter anda,

           Ganti http://xgame-tips.blogspot.com/ dengan alamat twitter anda

           Ganti ade dengan nama anda.

nahhh.. SAVE

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>

<b:if cond='data:blog.pageType != "item"'> <style> #HTML1,#Feed1,#Label1,#HTML4,#HTML8,#HTML14 {display:none;} </style> </b:if>

•  Rubahlah Tulisan (HTML1,Feed1,Label1,HTML4,HTML8,HTML14) dan tanda # Jangan dihapus
•  Untuk mengetahui ID/Kode widget ikuti caranya seperti dibawah ini :

1. Menuju ke elemen laman/tata letak
2. Arahkan mouse ke tulisan "Edit" Dan lihatlah url di bagian bawah browser akan kelihatan widget ID yang dimaksud kode bisa HTML1,Label 1 DLL. Untuk lebih jelasnya lihatlah gambar di bawah ini :

•  Jika sudah klik save

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>

<!-- Start Slider Code From http://www.spiceupyourblog.com/ -->

<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(){
$(&#39;#my-slideshow&#39;).bjqs({

&#39;width&#39; : 940,

&#39;height&#39; : 340,

&#39;showMarkers&#39; : true,
&#39;showControls&#39; : true,
&#39;centerMarkers&#39; : false
});
});
</script>
<!-- End Slider Code From http://www.spiceupyourblog.com/ -->

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.