Cara Membuat Kursor Bertaburan Bintang

Cara Membuat Kursor Bertaburan Bintang

Lagi Gila Negeblog pengennya mendisain terus biar tampilan Blog menjadi bagus heeeeee....biar blog menjadi guanteng kaya yang punya ...sesuai judul diatas cara membuat kursor bertaburan bintang-bitang ...tadinya aku juga lihat blog kawan-kawan yang lain eh,,ternyata bagus juga langsung deh aq terapin di blog aq. ok lah gini caranya gampang kok ikuti langkah langkah dibawah ini :

1. pertama-tama kamu login dulu
2.lalu masuk ke Rancangan/tataletak terus Element Laman
3. kemudia Tambah Gadget dan pilih HTML/Java Script
4. Kalo Sudah masukan kode dibawah ini :

<script type='text/javascript'>
// <![CDATA[
var colour="#0000FF";
var sparkles=65;

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="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
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>

TAMBAHAN :

Untuk Yang berwarna Merah itu Bisa diganti sesuai Warna Kesukaanmu... Kalo Belum Punya Kodenya Bisa Kunjungi DISINI

Oh ya masih lanjut ni ke

5. Kemuadian Jangan Lupa Di Save dan Silahkan dilihat hasilnya

selamat mencoba.....

Read more »

Posted in: TRIK BLOG

Cara membuat Menu Tab View

Cara membuat Menu Tab View

Untuk para blogger yang sudah senior pastinya sudah tahu yang dinamakan tab view, tapi untuk para pemula mungkin banyak yang belum atau tidak tahu apa kegunaannya dan fungsinya.
Banyak sekali Website dan Blog yang sudah menggunakan tab view dalam blognya. Fungsinya adalah untuk menghemat space yang ada di halaman Blog kita dan pastinya membuat blog kita terlihat rapi dan bagus.Baiklah ikutilah cara-cara dibawah ini :

1. Pertama kamu harus login ke blogger masuk ke dasbor pilih menu " Layaot -> edit html '
2. Langkah Kedua cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian ) ]]></b:skin>
3. lalau kemudian masukan kode dibawah ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width:  90px; /* Lebar Menu Utama Atas */  text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}


4. Yang perlu diperhatikan adalah texs-texs yang berwarna merah itu adalah tanda untuk pengaturan tab view. ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode sebelum kode </head>

<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if undefinedTab.tagName == &quot;A&quot;)
    {
      i++;
      Tab.href      = &quot;javascript:tabview_switchundefined&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
      Tab.className = undefinedi == id) ? &quot;Active&quot; : &quot;&quot;;
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == &#39;Page&#39;)
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+&quot;px&quot;;
      Page.style.overflow = &quot;auto&quot;;
      Page.style.display  = undefinedi == id) ? &#39;block&#39; : &#39;none&#39;;
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined&#39;TabView&#39;);
</script>


6. Kemudian di simpan
7. Lalu pergi ke menu page elements
8  Pilih Add Gadget --> html/java script ditempat yang akan kamu letakan menu tab view ini.
9. dibawah ini script yang di pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

KETERANGAN :
- Angka-angka teks berwarna biru (350px) adalah ukuran tinggi dan lebar tabview./
- kode yang berwarna hijau adalah teks yang di menu utama (menu atas)
- kode yang berwarna merah adalah isi dari tabview kamu bisa mengisinya dengan link gambar, baner, script dan lain2.
- Untuk menambahkan jumlah menu maka perhatikan teks yang berkedip-kedip tambahkan menu tersebut dibawahnya.

Ok Kawan selamat mencoba...

Read more »

Posted in: TRIK BLOG