Tips Membuat Navigasi Vertical

Hai sobat yang budiman saya menyediakan bagi para pencari navigasi Vertical, kita langsung saja.Et Contohnya kaya ini:

1-Login ke account blogger anda.
2-Click Layout---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Copy pastekan script di bawah ini tepat diatas kode </head>;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="ddaccordion.js">
/***********************************************
* Follow www.mutiaramail.blogspot.com)
***********************************************/
</script>

<script type="text/javascript">
ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>
4. Kemudian Simpan kode dibawah ini sebelum ]]></b:skin>
.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
5. Simpan kode dibawah ini pada HTML Anda
<div class="urbangreymenu">
<h3 class="headerbar"><a href="http://www.mutiaramail.blogspot.com">Blog Kita</a></h3>
<ul class="submenu">
<li><a href="http://www.mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="http://www.sumbloggers.blogspot.com">Blog Invest</a></li>
<li><a href="http://blogger-trade-online.blogspot.com">Harga Saham</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit&lt;/a></li>
<li><a href="#">Edit&lt;/a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

<h3 class="headerbar"><a href="#">Edit&lt;/a></h3>
<ul class="submenu">
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>

</div>
6. Terakhir ganti kode yang berwarna biru dan anda bisa download JS dibawah ini :

Download

Read More

Postingan terlihat di Sidebar

Anda menginginkan postingan anda terlihat atau terkontrol sidebar anda? Pasanglah kode sibawah ini, carannya :
1-Log in ke account blogger anda.
2-Click Layout--->
3-Tambahkan Gadget, sebelumnya ganti kode yang berwarna biru dengan nama blog anda kemudian pastekan script dibawah ini:
<script
src="http://fun4utips.googlepages.com/recentpostSidebar.js"></script> <script>var numposts = 10;
var showpostdate = false; var showpostsummary = false; var numchars =
100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>
4.Simpan dan selesei

Read More

Drop down menu button untuk Blog Anda

Hallo Saya ada tips setelah jalan-jalan yang sangat melelahkan, kita langsung praktek aja.
1-Log in ke account blogger anda.
2-Click Layout--->
3-Tambahkan Gadget, kemudian pastekan script dibawah ini:
<form name="Menu">
<select name="menu">
<option value="http://mutiaramail.blogspot.com">Mutiara Info</a>
<option value="http://www.yahoo.com">Yahoo!</a>
<option value="http://www.google.com">Google</a>
</select>
<input type="button" onClick="top.location=document.Menu.menu.options[document.Menu.menu.selectedIndex].value;" value="GO!">
</form>
4.Lalu simpan
5.Selesei

Read More

Menghilangkan Navbar (Navigation Bar)

Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.

Namun ada beberapa blogger yang merasa akan lebih enak jika melihat tampilan blognya dalam keadaan bersih tanpa harus ada bagian mencolok di bagian atas blognya sendiri (NavBar). Karena itu, kadang para blogger menghapus NavBar tersebut. Pertanyaannya adalah: Apa tidak melanggar Term of Service (TOS) dari Blogger.com?
Sejauh ini, banyak blogger yang telah menghilangkan Navbar mereka dan tidak juga mendapat teguran dari blogger. Artinya, bisa dilakukan. Toh di TOS Blogger sendiri juga tidak ada aturan yang cukup detail tentang hal ini.

Nah, bagaimana menghilangkan Navigation Bar?
Ada beberapa penyedia template yang memang sudah tidak ada NavBar-nya. Namun bagi kamu yang memakai template yang masih ada NavBarnya dan ingin menghilangkannya maka inilah caranya.

1. Sobat harus Login dulu di Blogger.com / Blogspot.com
2. Trus Pilih Layout --> Edit HTML
3. Copy script berikut ke dalam tag head
#navbar-iframe {
display: none !important;
}
contohnya sebagai berikut :
-----------------------------------------------
Blogger Template Style
Name: JUST NEWS
Designer: NewWpThemes.com
URL: http://newwpthemes.com/wordpress-theme/just-news/
Date: 15 AGO 2009
Updated by: Dhampire
----------------------------------------------- */
#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================

4. Kemudian simpan.

Selamat Mencoba.....!!

Read More

3subs-Menu

Hallo sobat yang budiman, kalo kita membicarakan masalah trick atau tips tidak akan ada habisnya. Nah ini saya punya salah satu macam Navigasi buat sobat.Contohnya seperti ini :

1-Log in ke account blogger anda.
2-Click Layout---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpan pada folder anda.
3-Copy pastekan script di bawah ini sebelum kode ]]></b:skin> tag:
.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
2.Tambah kode dibawah ini sebelum </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://yourhost.menu.js"></script>
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

Download

Upload menu.js file ke hosting seperti (110mb.com,hotlinkfiles.com...)
kemudian pastekan ke kode yang berwarna biru.
3.Simpan kode dibawah ini kemudian letakkan pada HTML/Javscript, anda:
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://mutiaramail.blogspot.com">Make This Menu</a></li>
<li><a href="http://sumbloggers.blogspot.com">Blog Invest</a></li>
</ul>
<br style="clear: left"/>
</div>
Selamat mencoba dan Semoga berhasil.

Read More

Slide-In Menu

Apa kabar saya datang lagi guna membagi tips buat anda para blogger yang budiman tidak usah basa basi ini contohnya:

Langkah Pertama :
1-Log in ke account blogger anda.
2-Click Lay Out---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Cari kode didalam template anda,letaknya di bagian atas.
4-Copy pastekan script di bawah ini tepat diatas kode </head>;
<style type="text/css">
<!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</style>
<SCRIPT SRC="ssm.js" language="JavaScript1.2">
//Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/)
//Updated July 8th, 03' for doctype bug
//For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com
</SCRIPT>
<SCRIPT SRC="ssmItems.js" language="JavaScript1.2"></SCRIPT>

Ganti Kode yang berwarna biru sesuai dengan kebutuhan, kemudian Copy paste kode dibawah kedalam notepad lalu save as ke "js"
<!--
/*
Configure menu styles below
NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors
*/
YOffset=150; // no quotes!!
XOffset=0;
staticYOffset=30; // no quotes!!
slideSpeed=20 // no quotes!!
waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it.
menuBGColor="black";
menuIsStatic="yes"; //this sets whether menu should stay static on the screen
menuWidth=150; // Must be a multiple of 10! no quotes!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="white";
linkOverBGColor="#FFFF99";
linkTarget="_top";
linkAlign="Left";
barBGColor="#444444";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=20; // no quotes!!
barText="SIDE MENU"; // <IMG> tag supported. Put exact html for an image to show.
///////////////////////////
// ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
ssmItems[0]=["Menu"] //create header
ssmItems[1]=["Mutiaramail", "http://mutiaramail.blogspot.com", ""]
ssmItems[2]=["Edit", "Edit",""]
ssmItems[3]=["Edit", "Edit",""]
ssmItems[4]=["Edit", "Edit",""]
ssmItems[5]=["Edit", "Edit",""]
ssmItems[6]=["Edit", "Edit",""]
ssmItems[7]=["Edit", "Edit/faqs.htm", "", 1, "no"] //create two column row
ssmItems[8]=["Edit", "Edit/contact.htm", "",1]
ssmItems[9]=["Edit", "", ""] //create header
ssmItems[10]=["Edit", "Edit",""]
ssmItems[11]=["Edit", "Edit",""]
ssmItems[12]=["Edit", "Edit",""]
buildMenu();
//-->
Kemudian Download ssm.js dibawah ini:

Download

Read More

New Navigation

Hallo kawan saya ada Navigasi buat anda, mudah-mudahan anda menyukainya, oke kita mulai saja.
Letakkan code dibawah ini ditas </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* follow http://mutiaramail.blogspot.com
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>
Kemudian Letakkan kode dibawah ini pada HTML anda
<!--Mega Menu Anchor-->
<a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a>
<!--Mega Drop Down Menu HTML. Retain given CSS classes-->
<div id="megamenu1" class="megamenu">
<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://www.mutiaramail.blogspot.com">Mutiaramail</a></li>
<li><a href="http://www.sumbloggers.blogspot.com/">Bloginvest</a></li>
<li><a href="Link 1">Link 1</a></li>
<li><a href="Link 2">Link 2</a></li>
<li><a href="Link 3">Link 3</a></li>
</ul>
</div>

<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>

<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>

<br style="clear: left" /> <!--Break after 3rd column. Move this if desired-->

<div class="column">
<h3>Web Development</h3>
<ul>
<li><a href="http://mutiaramail.blogspot.com">JavaScript Kit</a></li>
<li><a href="http://mutiaramail.blogspot.com/">Dynamic Drive</a></li>
<li><a href="http://mutiaramail.blogspot.com">CSS Drive</a></li>
<li><a href="http://mutiaramail.blogspot.com">Coding Forums</a></li>
<li><a href="http://mutiaramail.blogspot.com/">DOM Reference</a></li>
</ul>
</div>

<div class="column">
<h3>News Related</h3>
<ul>
<li><a href="http://www.cnn.com/">CNN</a></li>
<li><a href="http://www.msnbc.com">MSNBC</a></li>
<li><a href="http://www.google.com">Google</a></li>
<li><a href="http://news.bbc.co.uk">BBC News</a></li>
</ul>
</div>

<div class="column">
<h3>Technology</h3>
<ul>
<li><a href="http://www.news.com/">News.com</a></li>
<li><a href="http://www.slashdot.com">SlashDot</a></li>
<li><a href="http://www.digg.com">Digg</a></li>
<li><a href="http://www.techcrunch.com">Tech Crunch</a></li>
</ul>
</div>
</div>

Download

Selamat mencoba dan semoga anda sukses.

Read More

Create a Jquery box

Hallo setelah saya jala2 saya mendapatkan trik untuk blog anda, intinya insyallah anda suka.Saya tidak bisa berpanjang kata, kita coba aja ya.Ikuti aja petunjuk didalam kotak.

1.Letakkan kode dibawa ini pada template, sebelum the </head> tag:
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">$(function(){$("#butToggle").click(function(){$('#dvt').toggle(1000);});});</script>

2.Kemudian, letakkan kode CSS sebelum </body> tag :

#dvt{width: 200px;height: 100px;border: solid 1px black;background-color:LightGrey;text-align:center; display:none;}

3.Pamungkas ,buat HTML/JavaScript kemudian postingkan kode atau teks :
<div id="dvt">Postingkan kode anda dan Teks anda disini...</div>
<button id="butToggle">Spread</button>


Anda bisa lihat hasilnya anda suka? Lakukan sesuai petunjuk semoga anda berhasil

Read More

Circling text trail

Agar blog tampak tampak menarik saya ada tips buat sobat yaitu kursor yang berbentuk text yang melingkar yangmana text tadi mengikuti kusor bergerak.Lebih jelasnya anda coba sendiri :
Pharsekan kode berikut ini di sini setelah itu ganti huruf yang berwarna biru sesuai dengan kebutuhan sobat pastekan sebelum </head>
<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #000;
/* End Optional */

/* Start Required - Do Not Edit */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */
</style>
<script type="text/javascript">

/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Your message here (QUOTED STRING)
var msg = "Mutiaramail Mutiara Info";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 24;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();

</script>
Selamat mencoba dan semoga berhasil.

Read More

Cara Buat Tab Menu Versi 1 Di Blogspot

Waktu lalu saya lagi jalan-jalan eh ada bahan untuk ngeblog yaitu TAB MENU,salah saru cara untuk menghemat space pada pada tlemplate anda. Bagaimana cara memasang pada template anda?Coba perhatikan dengan santai,berikut ini cuplikannya :
Langkah Pertama :
1-Log in ke account blogger anda.
2-Click Lay Out---->EDIT HTML,Jangan lupa beri tanda centang pada kotak EXPAND WIDGET sebelumnya anda backup dulu template sobat klik Download Template Lengkap lalu simpat pada folder anda.
3-Cari kode didalam template anda,letaknya di bagian atas.
4-Copy pastekan script di bawah ini tepat diatas kode </head>;
<script src=' http://www.hotlinkfiles.com/files/2734091_rgx15/tab_menu1.js' type='text/javascript'/>
Perhatian :
-Ganti Direct Link File JS yang saya tulis dengan warna biru dengan Direct link anda sendiri, agar tidak terjadi over load penggunaan bandwith.

Download

Setelah anda download up load file js tersebut ke account anda sendiri Baca Disini !!.
5-Jika sudah selesai cari lagi kode ]]> di dalam template anda.
6-Kemudian copy pastekan script di bawah ini tepat diatas kode ]]> .


div.TabView div.Tabs { width: 100%; overflow: hidden; border-bottom: 0px solid #000000; font: bold 13px Arial; list-style-type: none; }
div.TabView div.Tabs a { float: left; display: block; text-decoration: none; margin-right: 2px; margin-bottom: 2px; padding: 3px 3px 3px 3px; color: #FFFFFF; background: #0B615E; }
div.TabView div.Tabs a:hover { color: #000000; background:#DF0101; }
div.TabView div.Tabs a.Active { color: #000000; background:#2E2EFE; }
div.TabView div.Pages { width: 100%; overflow: hidden; clear: both; border: 0px solid #E6E6E6; margin: 25px 0px 5px 5px; padding: 0px 0px 0px 0px; }
div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; }
div.TabView div.Pages div.Page div.Pad { padding: 0px 0px; }


Catatan: Kode yang saya tandai dengan warna hijau adalah kode warna yang bisa anda ganti dengan warna favorite anda untuk kode warna lihat di akhir artikel ini.
7-Jika sudah selesai klik save.

Langkah Kedua :
1-Log in ke account blogger anda.
2-Click Lay out--->ADD GADGET--->HTML/JAVA SCRIPT.
3-Copy pastekan script di bawah ini kedalam kolom new gadget tadi pada posisi EDIT HTML jangan pada posisi COMPOSE/menulis.
<div style="overflow:auto; width:100%px; height:100%px; padding:5px 5px 5px 5px; border:1px solid #a4e11e;">

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a>Judul Tombol Tab 1</a>
<a>Judul Tombol Tab 2</a>
<a>Judul Tombol Tab 3</a>
<a>Judul Tombol Tab 4</a>
</div>
<div style="width: 100%; height: 300px;" class="Pages">

<div class="Page">
<div class="Pad">

Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 1" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


<div class="Page">
<div class="Pad">


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 2" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


<div class="Page">
<div class="Pad">


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 3" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>


<div class="Page">
<div class="Pad">


Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 4" disini ! Tulisan ini jgn ikut di kopi!!

</div>
</div>

</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
</div>
Keterangan :
-Kode a4e11e yg warna hijau adalah kode warna border.
-Ganti tulisan JUDUL TOMBOL TAB 1,2,3 dan 4 dengan judul anda sendiri misalnya untuk tab 1 judulnya free template dan tombol ke 2 ruang chat dan seterusnya, sesuai menu anda sendiri.
-Angka 300 yang warna hijau adalah ukuran tinggi dari kotak TAB MENU,ganti dengan ukuran anda sendiri.
-Tulisan yg warna biru Isikan Menu Anda Disini Sesuai Dengan Judul "Tombol Tab 1,2,3 dan 4 adalah ruang untuk anda memasang menu anda bisa banner,widget gambar dan sebagainya.
5-Jika sudah selesai klik save.
Selamat mencoba dan semoga berhasil

Read More

Cara Membuat Efek Roaming Saat Blog Anda Di Buka

Pernakpernik dalam suatu blog adalah banyak dan ini adalah salah satunya pada saat blog anda buka maka akan terlihat dari animasi windows yang menggulung dan mengeliling layar komputer anda dengan durasi 3 sampai 4 detikan baru blog anda terbuka penuh.Buat sobat yang ingin mencoba animasi ini tidaklah sulit tanpa melakukan edit HTML template dan jika anda tidak menginginkannya lagi anda tinggal menghapus gadget tempat anda menyimpannya :

Cara memasangnya :
1-Log in ke account blogger anda.
2-Click Lay out ---->Add New Gadget--->HTML/JAVA SCRIPT.
3-Copy pastekan script di bawah ini ;
<script language='JavaScript1.2' src='http://www.hotlinkfiles.com/files/2733945_7nh2h/efekroamingwindows.js '/>
4-Kemudian click save.
Perhatian;
-Untuk mencegah over load penggunaan bandwith pada script ini, sebaiknya anda download script js nya dan up load ke hosting file js anda untuk mendapatkan Direct Link anda sendiri. Kemudian ganti Direct Link http://www.hotlinkfiles.com/files/2733945_7nh2h/efekroamingwindows.js yang warna biru dengan Direct link anda. Silahkan download script js nya di link di bawah ini :

Download

Setelah anda download up load script tersebut ke hosting file js anda. Caranya bisa anda baca Disini !.
Selamat mencoba.

Read More

Cara Membuat Text Area Dgn Hightlight

Hai friend saya ada bocoran cara mudah untuk tukar link test dan banner, agar tidak terjadi kesalahan pada saat mengopy yang nantinya akan dipastekan pada blog anda.Yaitu dengan menggunakan text area hightlight.Ok kita langsung saja pada sasarannya :
1-Masuk ke account blogger.
2-Click Lay out--->Add New Gadget--->HTML/JAVA SCRIPT.
3-Copy pastekan kode di bawah ini ;
<div><form name="copy"><div align="center"><input value="HightLight" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/> </div><div align="center"></div><p align="center"><textarea rows="100" cols="120" style="WIDTH: 125px; HEIGHT: 100px" name="txt" wrap="VIRTUAL"><a href="http://mutiaramail.blogspot.com/" target="_blank"><img border="0" alt="Mutiaramail" src="http://i721.photobucket.com/albums/ww218/sugwi/untitled.jpg"/></a></textarea></p></form></div>
Keterangan ;
-Tulisan Hightlight yang warna hijau bisa anda ganti dengan tulisan anda sendiri.
-Angka 125 yg warna biru adalah ukuran lebar kotak text area.
-Angka 100 yg warna biru adalah ukuran tinggi kotak text area.
-Ganti kode yg warna biru dengan kode banner atau text link anda.
Contoh Text Area dengan kode diatas seperti di bawah ini ;

<a href="http://mutiaramail.blogspot.com/" target="_blank"><img border="0" />Mutiaramail</a>

Selamat mencoba, dan semoga sukses

Read More

Random background color

Assalamualaikum Sobat yang budiman saya punya tips buat anda, apa itu?Sobat ingin tau?Oke kita mencoba pasang Random Background Color agar Blog kita tidak membosankan maka, pasanglah kode dibawah ini sebelum </BODY>
<script>
/*Random background color- by javascriptkit.com
Visit JavaScript Kit (http://javascriptkit.com) for script
Credit must stay intact for use*/
//Enter list of bgcolors:
var bgcolorlist=new Array(&quot;#1A53FF&quot;, &quot;#FFFFBF&quot;, &quot;#80FF80&quot;, &quot;#EAEAFF&quot;, &quot;#C9FFA8&quot;, &quot;#F7F7F7&quot;, &quot;#FFFFFF&quot;, &quot;#DDDD00&quot;)
document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
</script>
Saya berharap tulisan ini dapat membantu sobat, selamat mencoba dan semoga berhasil.

Read More

Verifying Your Blog Under Technorati

Technorati is now checking your blog for the claim code to verify the ownership of your blog. Please make sure the claim code can be found in a post in your RSS or Atom feed. Your claim code looks like this:

• 4bu6sxpd8n

Read More