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