Trik Membuat Related Post dengan Thumbnail

Salam blogger, pada posting kali ini boytriks akan membahas cara membuat related post dengan thumbnails image. Related Post atau Artikel Terkait digolongkan berdasarkan jenis kategori atau label pada posting kita. Artikel terkait ini kita letakan dibawah posting. Artikel Terkait juga akan disertai Thumbnails horizontal dan Judul Blog. Fungsi related post yaitu menyajikan informasi lain yang berkaitan dengan artikel yang kita baca. Untuk contohnya sendiri dapat sobat lihat di bawah posting blog ini.

Nah jika sobat tertarik untuk membuatnya ikuti saja tutorial dibawah ini:

1. Log in ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. selanjutnya sobat cari kode </head> dan untuk mempermudah pencarian 

    sobat tekan tombol ctrl+f pada keyboard sobat

7. paste kode dibawah ini diatas kode </head> tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.2em;

font-weight: bold;

color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>

</b:if>

8. kemudian sobat cari salah satu kode berikut ini:

    <div class='post-footer-line post-footer-line-3'>

    atau <p class='post-footer-line post-footer-line-3'>

9. Setelah itu letakan kode dibawah ini, dibawah salah satu kode diatas

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle=&quot;Related Posts&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

10. dan terakhir Simpan Template

Selamat mencoba dan semoga bermanfaat

Read More

Cara Membuat News Sticker Post Dengan Jquery

Salam blogger, sebelumnya saya akan bertanya kepada sobat blogger semua, apakah anda sudah tahu apa itu Nes sticker, News sticker adalah cuplikan judul berita atau highlight yang ditampilkan dalam bentuk sticker. Ada news sticker dalam bentuk show hide ada juga dalam bentuk teks berjalan. News sticker biasanya bisa ditemukan dalam acara berita di tv yang ditampilkan dibawah layar. Kali ini news stiker yang kita buat sedikit berbeda karena menampilkan judul posting atau artikel dalam bentuk show hide.
Selain judul berita news sticker ini juga menampilkan tanggal posting artikel tersebut dipublikasikan. News sticker kali ini Kita akan menggunakan script jquery yang  membuatnya lebih woookeh.

Berikut ini adalah tutorial membuat News Sticker dengan Jquery:

1. Log in ke account blogger sobat

2. klik menu Template

3. kemudian pilih Edit Html

4. pilih lanjutkan untuk masuk ke Setup Html

5. setelah masuk jangan lupa centang kotak kecil di pojok kiri yang 

    bertuliskan "expand template widget"

6. lalu sobat cari kode ]]></b:skin> dan untuk mempermudah pencarian 

    sobat tekan tombol ctrl+f pada keyboard sobat

7. paste kode dibawah ini dan simpan diatas kode ]]></b:skin>

.newspic {background:#FFF url(http://4.bp.blogspot.com/-dx79apSnB6I/T3UoZVIgltI/AAAAAAAACxY/35LWW31ebL4/s1600/BRK+NW.png) no-repeat top left;BORDER:1PX SOLID #CDCDCD; width:840px;margin:0 auto;padding:0 auto;height:23px;color:#000;}

.news {width: 840px;margin:0 auto;padding:0 auto;line-height: 1em;text-align:left;font-family:Arial;font-size:10px;color:#000;overflow:hidden;clear:both;}

.news a:link, .news a:visited{color:#000;text-decoration:none;}

.news a:hover {color:#0099cc;text-decoration:underline;}

8. Selanjutnya copy kode dibawah ini lalu paste diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#0099cc;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 12px courier;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 960px;
height: 13px;
border: 0px solid #cdcdcd;
padding: 0px;
font:bold 13px courier;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #0099CC;}
#example1 a:link, #example1 a:visited {color:#0099cc;text-decoration:none;}
#example1 a:hover {color:#111;text-decoration:none;}
</style>

9. copy kode dibawah dan paste diatas kode <div id='outer-wrapper'>

<div style='clear:both;'/>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 125px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://boytriks.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>

10. Ganti kode yang berwarna merah dengan url atau alamat blog anda
11. Simpan Template


Selamat mencoba dan semoga bermanfaat

Read More

Trik Membuat Widget Jadwal Ramadhan di Blog

Salam blogger, sobat yang beragama islam pasti tahu bahwa sekarang ini lagi bulan Ramadhan. Bagi sobat yang suka blogging, sobat dapat memasang widget atau gadget tentang jadwal puasa di blog sobat supaya blog nya lebih menarik lah atau sekedar memberi info kepada para pengunjung blog sobat. Nah keuntungan sobat memasang widget ini yaitu dapat meningkatkan trafik blog anda tentunya, dan juga akan semakin ngetrend di google karena di bulan ramadhan pengunjung mencari info seputar ramadhan.

Berikut langkah-langkah membuat widget Jadwal Ramadhan:

1. Login ke account blogger sobat
2. klik menu Tata letak
 
3. lalu tambah gadget
 
4. kemudian pilih html/javascript

5. Copy kode dibawah ini ke box html tersebut

<iframe border="0" height="890" src="http://rukyatulhilal.org/imsakiyah/index.php?id=122" width="500"></iframe>

6. Lalu Simpan 


Selamat mencoba dan semoga bermanfaat

Read More

Dampak Positif dan negatif dari Copas Artikel Blog

Salam blogger, memang dalam dunia blogger tak bisa lepas dari budaya copy paste, hal yang satu ini sudah menjadi kebiasaan dalam blogging. Sebenarnya bisa saja Copas artikel orang, namun artikel yang kita posting jangan sama persis dengan sumber yang kita copas, tapi jika sobat enggan untuk mengeditnya sobat sertakan saja link sumber post tersebut. Seperti saya, saat pertama kali memulai blogging saya hanya copas artikel saja dan lebih parahnya lagi bahkan judul artikelnya pun sama, nah disinilah bahayanya.

Karena copas mempunyai beberapa kelemahan yang harus diperhatikan. Seperti tidak munculnya page rank Google atau susah untuk terindex oleh search engine dan yang paling parah yaitu di banned.

• Dampak Positif Copas: 

1. Tak perlu ribet membuat artikel 
2. Artikel blog jadi banyak 
3. Tak perlu waktu lama, karena tinggal copy dan paste 
4. Blog lebih cepat terkenal

• Dampak Negatif Copas: 

1. Sulit untuk mendapatkan page rank dari Google 
2. Blog akan di banned 
3. Google akan menilai blog Anda kurang bagus 
4. Blog akan susah terindex oleh search engine seperti Google 
5. Kurang kreatif 
6. Menjadi SEOrang blogger yang pemalas

Mungkin Hanya sedikit yang bisa saya post-kan tentang Kelebihan dan Kekurangan Copas Artikel. Semua itu kembali pada diri para blogger. Apakah mau dicap sebagai blog PENIRU atau tidak.

Read More

Trik Membuat Widget Recent Comment di Blog

Salam blogger, untuk kesekian kalinya blog saya membahas mengenai opsi komentar di blog baik blogspot maupun wordpress. Di posting yang sebelumnya saya sudah sedikit menjelaskan bagaimana caranya membuat Comment Facebook di blog maupun cara membuat kotak komentar blog dan facebook berdampingan. Nah, pada posting kali ini saya akan sedikit share bagaimana membuat sebuah widget Recent Comment atau komentar terbaru, yang mana akan sangat membantu untuk mengetahui new comment di blog.

Berikut langkah-langkah membuat Recent comment:

1. Login ke account blogger sobat
2. klik menu Tata letak
 
3. lalu tambah gadget
 
4. kemudian pilih html/javascript

5. Copy kode dibawah ini ke box html tersebut

<style type="text/css">

ul.tb_recent_comments{list-style:none;margin:0;padding:0;}

.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style>

<script type="text/javascript">

//<![CDATA[

    // Recent Comments Settings

    var

numComments  = 5,

showAvatar  = true,

avatarSize  = 50,

characters  = 60,

defaultAvatar  = "https://en.gravatar.com/badilah",

hideCredits = true;

//]]>

</script>

<script type="text/javascript" src="http://badilah.googlecode.com/files/recentcomment.js"></script>

<script type="text/javascript" src="http://boytriks.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>

     Sobat bisa mengganti angka-angka yang berwarna biru di atas untuk 

     mengatur Recent comment dan ganti Url nya dengan alamat blog sobat.

6. Simpan Widget

Jika sobat punya pertanyaan atau unek-unek seputar widget diatas, silahkan berkomentar di kotak comment yang ada dibawah posting.

Selamat mencoba dan semoga bermanfaat

Read More

Cara Mudah Memasang Widget PageRank di Blog

Salam blogger, PageRank memang merupakan tolak ukur sebuah blog, dengan pagerank yang tinggi orang akan lebih percaya kepada sebuah blog. Singkat cerita saya membuat blog, seperti biasa karena pemula saya tidak pandang bulu untuk copas diblog lain. Setelah membaca sebuah artikel yakni bahaya copas, didalamnya dikatakan bahwa jika kita sering melakukan copas bukan tidak mungkin blog kita tidak akan mendapat pagerank dari google. Nah, sejak kejadian itu saya enggan lagi untuk copas.

Dan saya mencoba untuk membuat artikel saya sendiri walaupun idenya mendapat dari blog lain. Lalu setelah berapa lama saya iseng buat check PageRank saya, dan ternyata PR saya tidak nol tapi satu. Bukan main senangnya saya pada waktu itu. Saya mencoba untuk memasang widget PageRank di blog saya dan jika sobat juga ingin memasang widget pagerank di blog sobat silahkan ikuti tutorial dibawah ini.

Inilah Cara Untuk memasang widget PageRank-PRchecker.Info :

• Masuk ke www.prchecker.info
• Kemudian pilih salah satu icon PageRank, misal pilih yang paling atas setelah itu masukan url blog sobat dan klik 'Get It!'
  
• setelah itu masukan kembali url blog sobat dan tulis code yang disediakan lalu klik 'Generate Now'
  
• kemudian copy salah satu script yang sesuai dengan icon yang dipilih
   
• Login ke account blogger sobat 
• klik menu Tata letak
   
• lalu tambah gadget
   
• kemudian pilih html/javascript
   
• Masukan Script yang telah dicopy tadi kemudian simpan Gadget 

Selesai, selamat mencoba dan semoga bermanfaat

Read More

Membuat Widget Artikel Berlangganan FeedBurner

Salam blogger, apakah sobat sudah sering mendengar kata FeedBurner. Feedburner adalah sebuah site yang melayani berlangganan artikel di sebuah blog. Layanan FeedBurner dapat kita gunakan secara gratis, karena sekarang feedburner sudah menjadi milik google. Cara kerja dari feedburner ini sendiri terbilang mudah, kita hanya tinggal memasukan email ke feeds sebuah blog dan secara otomatis jika blog itu mengeluarkan posting baru atau artikel terbaru dengan sendirinya akan ada pada email yang kita masukan.

Tidak hanya untuk pengunjung blog saja, feedburner juga memiliki banyak keuntungan bagi si pemilik blog tersebut karena dengan adanya feedburner kita dapat mengetahui berapa banyak orang yang benar-benar suka terhadap artikel yang kita buat. OK tanpa panjang lebar ikuti saja tutorial dibawah ini.


Berikut langkah-langkah untuk mendaftar layanan feedBurner:

1. Syarat pertama anda harus memiliki account gmail, karena layanan 

    feedburner adalah milik google. Jika sobat belum punya klik disini.
2. Setelah itu sobat kunjungi www.feedburner.com
3. lalu akan muncul tampilan seperti dibawah ini, masukan url blog lalu next

    

4. Kemudian akan tampil box identitas situs kita, Centang salah satu pilihan 

    tersebut lalu klik next

  

5. lalu akan tampil url untuk blog yang kita daftarkan ke Feedburner, klik next

  

6. Setelah itu muncul pernyataan bahwa step 1 dan 2 sukses, lalu next lagi

  

7. Kemudian centang kata Clickthroughs seperti gambar dibawah ini, & next

  

8. Pendaftaran sukses, lalu klik menu 'Publicize'

   

9. lalu klik 'Email Subscriptions' seperti pada gambar dibawah

    

10. Untuk mengaktifkan Feeds kita klik Active

   

11. lalu akan muncul kode FeedBurner, Kita copy kode yang atas dan jangan 

     lupa ganti 'Use as a widget in' dengan blogger

   

12. Setelah anda copy, lalu masuk ke menu Tata letak di blogger

   

13. pilih Tambah Gadget

   

14. lalu pilih gadget HTML/JavaScript

 

15. Copy kode tadi di box htmlnya

16. Langkah terakhir yaitu mengubah setting blogger, caranya :

• klik menu Setelan
• Pilih Lainnya
• di bagian 'Umpan situs' perhatikan 'Posting Url Pengubahan Arah Feed' lalu klik Tambah
• kemudian copy kode Url yang ada di cara ke-5
  contoh http://feeds.feedburner.com/blogspot/upvKn
• Jangan lupa Simpan
• Finish

Selamat mencoba di blog anda, semoga bermanfaat

Read More

Trik Membuat Efek Bintang Jatuh dari Cursor Blog

Salam blogger, pada kesempatan kali ini saya akan sedikit membahas tentang  Design blog yaitu cara membuat efek bintang berjatuhan di blog. Maksud dari efek bintang jatuh disini adalah bintang bintang yang jatuh pada tampilan blog kita, cara kerjanya pun cukup mudah yakni hanya dengan menggerakan cursor mouse di blog sobat dan bintang pun akan berjatuhan mengikuti arah dari cursor tersebut. Dengan tutorial blogger yang satu ini blog kita akan terlihat lebih menarik dan tentunya semakin Ok.

Berikut Tutorial untuk membuat Efek Bintang Berjatuhan di Blog:

1. Login ke account blogger sobat
2. klik menu Tata letak
 
3. lalu tambah gadget
 
4. kemudian pilih html/javascript

5. Copy kode dibawah ini ke box html tersebut

<script type=’text/javascript’>
// <![CDATA[
var colour="#52D8ED";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor=”transparent”;
rats.style.visibility=”hidden”;
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top=”3px”;
rlef.style.left=”0px”;
rdow.style.top=”0px”;
rdow.style.left=”3px”;
document.body.appendChild(star[i]=rats);}
set_width();
sparkle();}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+”px”;
star[c].style.top=(stary[c]=y)+”px”;
star[c].style.clip=”rect(0px, 5px, 5px, 0px)”;
star[c].style.visibility=”visible”;
starv[c]=50;
break;}}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);}
setTimeout(”sparkle()”, 40);}
function update_star(i) {
if (–starv[i]==25) star[i].style.clip=”rect(1px, 4px, 4px, 1px)”;
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+”px”;
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+”px”;}
else {
star[i].style.visibility=”hidden”;
starv[i]=0;
return;}}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+”px”;
tiny[i].style.left=(tinyx[i]=starx[i])+”px”;
tiny[i].style.width=”2px”;
tiny[i].style.height=”2px”;
star[i].style.visibility=”hidden”;
tiny[i].style.visibility=”visible”}}
function update_tiny(i) {
if (–tinyv[i]==25) {
tiny[i].style.width=”1px”;
tiny[i].style.height=”1px”;}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+”px”;
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+”px”;}
else {
tiny[i].style.visibility=”hidden”;
tinyv[i]=0;
return;}}
else tiny[i].style.visibility=”hidden”;}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;}
function set_scroll() {
if (typeof(self.pageYOffset)==”number”) {
sdown=self.pageYOffset;
sleft=self.pageXOffset;}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;}
else {
sdown=0;
sleft=0;}}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)==”number”) {
swide=self.innerWidth;
shigh=self.innerHeight;}
else if (document.documentElement && document.documentElement.clientWidth){
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;}}
function createDiv(height, width) {
var div=document.createElement(”div”);
div.style.position=”absolute”;
div.style.height=height+”px”;
div.style.width=width+”px”;
div.style.overflow=”hidden”;
div.style.backgroundColor=colour;
return (div);}
// ]]>
</script>

• Catatan: Sobat bisa mengganti kode warna (teks merah) diatas dengan warna yang sobat inginkan

6. Simpan Gadget

Selamat mencoba dan semoga bermanfaat

Read More