Javascript Kalender
0
09.41 | Posted in
Buat kalender seperti di bawah ini
Mempunyai efek warna pada tanggal yah pokokny seperti di bawah ini,aku ga begitu banyak nerangin,bisa liat contohnya langsung.soalnya aku ga pandai nerangin sih he2. Tenang code disini gratis ga pake bayar..





Caranya:

Copy code script dibawah
-login blogger
-tata letak
-tambah html javascript
-paste code
-simpan

Codenya:

<center>

<script LANGUAGE="JavaScript">
<!-- script free from http://oce-modifblog.blogspot.com-->
<!--Powered javascript code by WWW.javakhafan.7p.COM ????? ?????-->
<!-- Begin
monthnames = new Array(
"January",
"Februrary",
"March",
"April",
"May",

"June",
"July",
"August",
"September",
"October",
"November",
"Decemeber");
var linkcount=0;
function addlink(month, day, href) {
var entry = new Array(3);
entry[0] = month;
entry[1] = day;
entry[2] = href;
this[linkcount++] = entry;
}
Array.prototype.addlink = addlink;
linkdays = new Array();
monthdays = new Array(12);
monthdays[0]=31;
monthdays[1]=28;
monthdays[2]=31;
monthdays[3]=30;
monthdays[4]=31;
monthdays[5]=30;
monthdays[6]=31;
monthdays[7]=31;
monthdays[8]=30;
monthdays[9]=31;
monthdays[10]=30;
monthdays[11]=31;
todayDate=new Date();
thisday=todayDate.getDay();
thismonth=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0)
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) monthdays[1]++;
startspaces=thisdate;
while (startspaces > 7) startspaces-=7;
startspaces = thisday - startspaces + 1;
if (startspaces < 0) startspaces+=7;
document.write("<table border=2 bgcolor=white ");
document.write("bordercolor=black><font color=black>");
document.write("<tr><td colspan=7><center><strong>"

+ monthnames[thismonth] + " " + thisyear
+ "</strong></center></font></td></tr>");
document.write("<tr>");
document.write("<td align=center>Su</td>");
document.write("<td align=center>M</td>");
document.write("<td align=center>Tu</td>");
document.write("<td align=center>W</td>");
document.write("<td align=center>Th</td>");
document.write("<td align=center>F</td>");
document.write("<td align=center>Sa</td>");
document.write("</tr>");
document.write("<tr>");
for (s=0;s<startspaces;s++) {
document.write("<td> </td>");
}
count=1;
while (count <= monthdays[thismonth]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td>");
for (c=0;c<linkdays.length;c++) {
if (linkdays[c] != null) {
if ((linkdays[c][0]==thismonth + 1) && (linkdays[c][1]==count)) {
document.write("<a href=\"" + linkdays[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<font color='FF0000'><strong>");
}
if (count <= monthdays[thismonth]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</strong></font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table></p>");
// End -->

</script>
</center>

Readmore » Javascript Kalender
Category:
��

Background Textarea Onmouse
0
15.18 | Posted in
Pernakah anda terfikir untuk membuat text area dengan menggunakan latar belakan sebuah gambar.. Nah selain buat copy paste juga bisa sebagai hiasan pada blog..,teknik pembuatanya cukup mudah,
Selain itu juga ditambah dengan efek mouse over.. Saat mouse bergerak diatas text area backgroun akan berubah warna, begitu pula pada teks.

.

Liat contoh di bawah ini







Untuk membuanya cukup mudah buanget, liat cara dibawah ini




Langkah 1.:


--------

Tempat ini script gaya dalam <head> dari halaman:



<style>
textarea.imageOne{
background-color:000000;
background-image:url(blue_saturn.jpg);
color:00ff00;
}
textarea.imageTwo{
background-color:000000;
background-image:url(butterflies.jpg);
color:ff0000;
}
</style>

Rubah lah blue_saturn.jpg dan butterflies.jpg dengan url foto Anda sendiri



Langkah 2.:


Letakan text area dibawah ditempat yang anda inginkan


<textarea> seperti ini:


<textarea
rows="12" cols="74"
class="imageOne"

onMouseOver="this.className='imageTwo'"
onMouseOut="this.className='imageOne'">
.
.
.
Letakan text anda disini
.
.
.
</textarea>

Dalam contoh diatur background-color: 000000;

Warna background-color biasanya harus sama dengan gambar latar belakang warna, Biar ga berlawanan warna dengan gambar it sendiri pada saat di klik latar belakang seperti tidak berubah hanya gambar saja yang hilang.



Warna teks : ff0000; dan warna: 00ff00; yaitu teks warna merah dan hijau, itu digunakan untuk merubah warna pada saat mouse over.


Mungkin pada browser latar akan berbeda,misalnya IE, NS6..

Readmore » Background Textarea Onmouse
Category:
��

Navigasi Halaman Ala WordPress
0
14.58 | Posted in

nomer page pada blog digunakan agar navigasi lebih mudah bila dibandingkan older Post link.
Script ini akan menggantikan standar blog page dengan nomor halaman navigasi seperti page nomor pada navigasi wordpress.kita dapat menyesuaikan jumlah link halaman dan jumlah posting yang ditampilkan pada setiap halaman. yang memungkinkan Anda dengan mudah mengakses ke pembaca di halaman arsip. Namun, nomor halaman tidak akan muncul pada halaman posting.banyak blog yang menggunakan nomor halaman
contohnya lihat kebawah blog ini terdapat nomer2 sebagai navigasi halaman,
Untuk membuatnya ikuti langkah berikut ini



Seperti biasa, langkah awal anda masuk account Blogger dan arahkan ke Layout. Sekarang anda tuju Edit HTML.



Langkah selanjutnya, masukkan kode CSS berikut ini :



.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;


}



.showpageArea a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;

padding: 1px 4px ;margin:0px 4px;

text-decoration: none;

}

.showpageArea a:hover {


font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}



.showpageNum a {border: 1px solid #505050;

color: #000000;font-weight:normal;

padding: 3px 6px !important;


padding: 1px 4px ;margin:0px 4px;

text-decoration: none;



}

.showpageNum a:hover {

font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;




}

.showpagePoint {font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

font-weight: bold;

border: 1px solid #333;

color: #fff;

background-color: #000000;






}



.showpage a:hover {font-size:11px;

border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;



}

.showpageNum a:link,.showpage a:link {


font-size:11px;

padding: 2px 4px 2px 4px;

margin: 2px;

text-decoration: none;

border: 1px solid #0066cc;

color: #0066cc;

background-color: #FFFFFF;}



.showpageNum a:hover {font-size:11px;


border: 1px solid #333;

color: #000000;

background-color: #FFFFFF;

}
Taruh kode CSS tersebut persis diatas ]]></b:skin>





Kemudian anda cari kode dibawah ini atau kode yang mirip dengan template anda


<b:section class='main' id='main' showaddelement='yes'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>
Kalo sudah ketemu, tambahkan kode berikut ini dibawah  </b:section>



&lt;script type=&quot;text/javascript&quot;&gt;



function showpageCount(json) {


var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;


thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= &#39;&#39;;


var upPageHtml =&#39;&#39;;

var downPageHtml =&#39;&#39;;





var pageCount=5;

var displayPageNum=3;


var firstPageWord = &#39;First&#39;;

var endPageWord = &#39;Last&#39;;

var upPageWord =&#39;Previous&#39;;

var downPageWord =&#39;Next&#39;;








var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;




for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {


if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;


}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=&#39;&#39;){


if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;


}

}

itemCount++;

}

}



for(var p =0;p&lt; htmlMap.length;p++){

if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){


if(fFlag ==0 &amp;&amp; p == thisNum-2){

if(thisNum==2){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{


upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;


}

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;


}



fFlag++;

}



if(p==(thisNum-1)){

html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;


}else{

if(p==0){

if(isLablePage){

html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;


}

}else{

html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;&#39;;


}

}



if(eFlag ==0 &amp;&amp; p == thisNum){

downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;


eFlag++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){



if(thisNum&gt;1){


if(!isLablePage){

html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;


}else{

html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;

}


}



html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;




if(thisNum&lt;(postNum-1)){

html += downPageHtml;

html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;


}



if(postNum==1) postNum++;

html += &#39;&lt;/div&gt;&#39;;



if(isPage || isFirstPage || isLablePage){

var pageArea = document.getElementsByName(&quot;pageArea&quot;);


var blogPager = document.getElementById(&quot;blog-pager&quot;);



if(postNum &lt;= 2){

html =&#39;&#39;;

}



for(var p =0;p&lt; pageArea.length;p++){


pageArea[p].innerHTML = html;

}



if(pageArea&amp;&amp;pageArea.length&gt;0){

html =&#39;&#39;;

}




if(blogPager){

blogPager.innerHTML = html;

}

}



}

&lt;/script&gt;



&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;






<div style='text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;'> <a href='http://rias-techno-wizard.blogspot.com/2008/07/page-navigation-hack-for-blogger.html'>Grab this Widget ~ Blogger Accessories</a></div>


Setelah menambahkan kode ini,coba preview dulu template Anda untuk memastikan tidak ada kode kesalahan.
untuk mengubah jumlah posting yang ditampilkan pada setiap halaman, dan berapa banyak link akan terlihat pada saat yang sama. Ganti angka berikut


The var pageCount = 5;


Angka 5 Menunjukan jumlah posting yang ditampilkan pada setiap halaman,
Dan


var displayPageNum = 3;



Angka 3 menentukan jumlah link yang ditampilkan (misalnya: 1 - 2 - 3) bagian bawah posting.

Setelah selesai dan anda yakin setelah anda preview benar,biasanya dalam preview tidak akan ada aksi jika anda mencoba mengeklik nomer page yang anda buat karena belum anda simpan,lalu simpan template,
Semoga bermanfaat.
Link sumber :

ndyteens.blogspot.com

Readmore » Navigasi Halaman Ala WordPress
Category:
��

Hujan Teks
0
14.24 | Posted in
Pasti pernah kan denger hujan salju? Atau salju warna-warni, ni ada alat untuk membuatnya.. Jika ingin hujan salju tingal masukan teks bentuk titik atau bintang saja, warnanya pilih sesuka kamu.. Ya dah deh met berkreasi..




hujan Text Generator

buat text seperti hujan
Di blog dengan kreasimu sendiri.

Masukan kata yang kamu mau & click "Generate Code",


...lalu copy and paste diblog kamu


















































  masukan text:
  warna teks:
pilih warna
 
  pilih font:
  ukuran teks:




Generated code:


Copy and paste diblog kamu



Readmore » Hujan Teks
Category:
��

Menu Dtree
0
14.19 | Posted in

hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...hujan teks...

Membuat menu dtree atau menu drop seperti di bawah ini



Navigation











    class="dtree">Open For All | class="dtree">Close For All













caranya:



copy script di bawah ini


<h3>Navigation</h3>

<ul>
<!-- start dtree -->
<div style="text-align:left;padding-left:10px">

<style type="text/css">
/*--------------------------------------------------| | dTree 2.05 | www.destroydrop.com/javascript/tree/ | |---------------------------------------------------| | Copyright (c) 2002-2003 Geir Landr? | |--------------------------------------------------*/ .dtree { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; padding: 6px; padding-left: 5px; }.dtree img { border: 0px; vertical-align: middle; }.dtree a { color: #333; text-decoration: none; }.dtree a.node,.dtree a.nodeSel { white-space: nowrap; padding: 1px 2px 1px 2px; }.dtree a.node:hover,.dtree a.nodeSel:hover { color: #000; text-decoration: underline; }.dtree a.nodeSel { background-color: #c0d2ec; }.dtree.clip { overflow: hidden; } .siteMapLink{ border: 1px dashed #aaa; background-color: #FFFFFF; padding: 4px; }.siteMapLink:hover{ border: 1px solid #aaa; background-color: #FFFFFF; padding: 4px; text-decoration: none; }


</style>

<script type="text/javascript"
src="http://www.geocities.com/once179/sitemap/dtree.js" ></script >

<div class="dtree" style="background-color: rgb(FF, FF, FF);
padding-top: 10px; width: 200px;">
<a href="javascript: d.openAll();"
class="dtree"><b>Open For All</b></a> | <a href="javascript: d.closeAll();"

class="dtree"><b>Close For All</b></a><br>

<br/>

<script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://link.com','','','', '');

//menu
d.add(10, 0,'My Other Blog', '','','','http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif', 'http://i162.photobucket.com/albums/t253/rohman24/otherblog.gif');
d.add(11, 10,'link2', 'http://link2.com','','','', '');
d.add(12, 10,'link3', 'http://link3.com','','','', '');
d.add(13, 10,'link4', 'http://link4.com','','','', '');


d.add(20, 0,'Blog Tutorial', '','','','http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif', 'http://i162.photobucket.com/albums/t253/rohman24/Blogtutor.gif');
d.add(21, 20,'link5','http://link5.html','','','', '');
d.add(22, 20,'link6', 'http://link6.html','','','', '');

d.add(40, 0,'Free Download', '','','','http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif', 'http://i162.photobucket.com/albums/t253/rohman24/Untitled-2_03.gif');
d.add(41, 40,'link7','http://link7','','','', '');

d.add(42, 40,'link8','http://link8.html','','','', '');


d.add(50, 0,'Link Exchange', '','','','http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif', 'http://i162.photobucket.com/albums/t253/rohman24/link-ex_03.gif');
d.add(51, 50,'link9','http://link9.com','','','', '');
d.add(52, 50,'link10','http://link10.com','','','', '');

d.add(80, 0,'Sponsored Links', '','','','', '');
d.add(81, 80,'link11', 'http://link11.com','','','', '');

d.add(82, 80,'link12','http://link12','','','', '');

document.write(d);

//-->

</script>
</div>
</div>
</ul>
<!-- Akhir dari dtree -->
<br/>

ganti link yang di beri warna dengan link kamu.. Peace!
Readmore » Menu Dtree

Category:
��

Script Kalender
0
13.57 | Posted in

Script untuk buat tnggal pada title posting contohnya pada judul post ini






<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal1.js"></script></font><br/>



Script tngal bahasa inggris contohnya dibawah ini





<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal2.js"></script></font><br/>




Script tangalan bahasa jawa contohnya dibawah ini





<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/script/js/tanggal.js"></script></font><br/>





Script tnggalan hijryah contohnya dibawah ini





<font color="blue"><script language="JavaScript" src="http://arieino.wen.ru/js/tgl_hijriyah.js"></script></font><br/>





Script tanggalan jawa contohnya dibawah ini





<font color="orange"><script language="JavaScript" src="http://arieino.wen.ru/js/tgl_jawa.js"></script></font>

Readmore » Script Kalender
Category:
��

Text zoom over mouse
0
13.30 | Posted in
Buat zom text seperti dibawah ini



Codenya di bawah ini
<html>
<head>
<style type="text/css">
body {margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;
font-size: 12px;
font-family: arial;
font-weight: normal;
color: #666;
}
.word {
cursor: pointer;
color: #666;
position: absolute;
z-index: 1;
}
.word_over {
cursor: pointer;
color: #FFF;
position: absolute;
z-index: 1;
}
.word_zoom {
position: absolute;
font-weight: bold;
z-index: 0;
}

</style>

<script type="text/javascript"><!--
// ====================================================
// script: Gerard Ferrandez - Ge-1-doot - June 2005
// http://www.dhteumeuleu.com/
// ====================================================

window.onerror = new Function("return true");
document.onselectstart = new Function("return false");

var object = new Array();
var margin = 20;
var K = 0;

function CObj(N,x,y,txt){
this.obj = document.createElement("span");
this.obj.innerHTML = txt;
this.obj.className = "word";
this.obj.onmouseover = new Function("this.className='word_over',object["+N+"].izoom();");
document.getElementById("sp").appendChild(this.obj);
this.obj.style.left = x;
this.obj.style.top = y;
this.obz = 0;
this.x = x;
this.y = y;
this.x0 = x;
this.y0 = y;
this.fs = 12;
this.c = 0;
this.px = txt.length * .02;
this.py = .04;
this.zoom = function () {
with(this){
fs *= 1.08;
c = 512 - fs * 2;
x -= fs * px;
y -= fs * py;

with(obz.style){
left = x;
top = y;
fontSize = Math.round(fs);
color = "RGB("+Math.round(c*.5)+","+Math.round(c*.5)+","+Math.round(c)+")";
}

if(c<8){
document.getElementById("sp").removeChild(obz);
obj.className="word";
x = x0;
y = y0;
fs = 12;
obz = 0;
K--;
} else setTimeout("object["+N+"].zoom();",16);
}
}
this.izoom = function () {
with(this){
if(K<20){
if(obz == 0){
obz = document.createElement("span");
obz.className = "word_zoom";
obz.innerHTML = txt;
obz.style.left = x-1;
obz.style.top = y;
document.getElementById("sp").appendChild(obz);
zoom();
K++;
}
} else setTimeout("object["+N+"].izoom();",128);
}
}
}


function fontWidth(word){
// arial font
var S = "a68b68c68d68e68f31g68h68i31j31k68l31m108n68o68p68q68r39s68t39u68v50w90x68y68z68A90B90C90D90E90F78G98H90I28J59K90L68M108N90O98P90Q98R90S90T68U90V90W130X68Y90Z68'30.42!29?68-41/41=72";
var l = word.length;
var s = 0;
var x = 0;
var c = 0;
for(i=0;i<l;i++){
c = word.charAt(i);
x = S.indexOf(c);
if(c>="0" && c<="9")s+=69;
else if(x>=0)s+=parseInt(S.substring(x+1,x+4));
else s+=68;
}
return s/10;
}

onload = function(){

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
T = [
"window html head title document absolute",
"new function txt return position justify",
"false var object Array this x y px py",
"parent length span body get Element By Id",
"div create Element RGB class Name inner HTML",
"if append Child zoom overflow hidden with",
"style left top font Size color false Math",
"onerror cursor font Weight obj round parent",
"get Elements By Tag Name font Size background",
"#000000 remove Child script set Timeout run",
"for zIndex width height on mouse over return true"

];

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

x = 0;
y = 0;
k = 0;
for(j in T){
Tx = T[j].split(" ");
// justify
xt = 0;
for(i in Tx){
txt = Tx[i];
xt += fontWidth(txt);
}
if(Tx.length)sP = (-2*margin + parseInt(document.getElementById("sp").style.width) - xt) / (Tx.length-1); else sP = 0;
// insert word
for(i in Tx){
txt = Tx[i];
if(txt) {
object[k] = new CObj(k, margin+x, margin+y, txt);
x += (fontWidth(txt)+sP);
k++;
}
}
y += 18;
x = 0;
}
}
//-->
</script>
</head>
<body>

<div style="position:absolute;left:50%;top:50%">

<div id="sp" style="position:absolute;width:300;height:240;left:-150;top:-120;overflow:hidden;background:#111;cursor:pointer">
</div>
</div>

</body></html>


Warna biru adalah text yang akan muncul
Readmore » Text zoom over mouse
Category:
��

Menu Mouse Over Zoom
0
13.24 | Posted in

Dah lama ga posting ga ol,langsung down deh semua folow pada cabut ga apa apa deh,Langsung aja deh menu berikut adalah menu yang bila cursor mouse kita di atasnya maka huruf menu akan jadi besar tapi dengan penataan yang keren..
Berikut contohnya..





seperti biasa code2 disini gratis kq tinggal copas aja..maaf karena saya hanya memberi bahan saja,masalah merakit jadi sebuah web tanyakan pada ahlinya.. Tapi Jangan lupa commentnya. Ditunggu..
Ni codenya scriptny:


<style type="text/css">
html {
overflow: hidden;
}
body {
background: #222;
}
#menu {
padding: 10px;
background: #000;
height: 300px;
width: 400px;
}
#menu a {
display:block;
text-decoration:none;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
}

</style>

<script type="text/javascript"><!--
// ===============================================================
// -------- M6 menu ------
// script written by Gerard Ferrandez - Ge-1-doot - December 2005
// http://www.dhteumeuleu.com
//this free from http://oce-modifblog.blogspot.com
// ===============================================================
//
var P,T;
var over = -1;

///////////////
var fontSize = 38;
var lensFX = 1;
var num = true;
var color = "#FFF";
var selected = "#F80";
///////////////

function zoom(s){
if(s!=over){
over = s;
for(var i=0;i<T;i++){
P[i].style.fontSize=Math.floor(fontSize / (Math.abs(i - s) + lensFX) + 3)+"px";
P[i].style.color=(i==s)?selected:color;
}
}
}

onload = function(){
P = document.getElementById("menu").getElementsByTagName("a");
T = P.length;
for (var i=0;i<T;i++){
if(num){
x=i+".";
if(x.length<3)x="0"+x;
P[i].innerHTML = x+P[i].innerHTML;
}
P[i].style.width = "100%";
P[i].onmouseover=new Function("zoom("+i+");");
}
zoom(0);
}
//-->

</script>
</head>

<body>

<div id="menu">
<a href="../scripting">scripting</a>

<a href="../javascript">javascript</a>
<a href="../web">web</a>
<a href="../dhtml">dhtml</a>

<a href="/css">css</a>
<a href="../ajax">ajax</a>
<a href="../programming">programming</a>

<a href="../design">design</a>
<a href="../webdesign">webdesign</a>
<a href="../html">html</a>

<a href="../dom">dom</a>
<a href="../webdev">webdev</a>
<a href="../reference">reference</a>

<a href="../tools">tools</a>
<a href="../tutorial">tutorial</a>
<a href="../xmlhttprequest">xmlhttprequest</a>

<a href="/menu">menu</a>
<a href=".../xml">xml</a>
<a href=".../library">library</a>

<a href="../development">development</a>

</div>

</body>
</html>




Readmore » Menu Mouse Over Zoom
Category:
��

Readmore Otomatis
0
13.14 | Posted in

Kamu pernahkan mendengar bahkan mungkin telah mengendarai sepeda motor otomatis, seperti mio, vario, atau spin. Jalannya tanpa memasukkan perseneling, langsung ngacir. Ternyata bukan hanya mesin yang bisa otomatis, readmore ada yang otomatis loh! Kalau tidak salah dulu pernah kita membicarakan tentang readmore dengan loading halaman, readmore tanpa loading halaman, dan readmore diikuti dengan judul posting. Sekarang ada trik blogger readmore baru yang otomatis, dimana trik ini OB dapat setelah jalan-jalan ke blog o-om.com tentang cara pasang auto readmore. Singkatnya cara kerja otomatis readmore ini sama seperti readmore dengan loading halaman, tetapi tanpa memasukkan kode dalam kalimat yang akan kamu penggal. Ya... iyalah, namanya saja otomatis. Dan kabarnya lagi, kamu dapat menentukan berapa jumlah karakter yang akan ditampilkan dalam postingan, baik dengan image maupun tanpa image.

Penting :
Sebelum beranjak lebih jauh, pastikan residu-residu readmore yang telah tertanam sebelumnya sudah dibersihkan. Atau diistilahkan dengan mengembalikan kode template seperti semula. Caranya dengan mereview ulang posting readmore yang pernah kamu pasang dalam blog kamu.

Berikut trik blogger membuat otomatis readmore dalam postingan :
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Cari Kode kode </head> dan Copy-Paste (copas) kode berikut di atasnya.
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 450;
summary_img = 450;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

Catatan :
  1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
  2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
  3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
  4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
  5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.
  • Cari kembali kode seperti di bawah ini.
<data:post.body/>

atau
<p><data:post.body/></p>
  • Kalau sudah ketemu, ganti kode tersebut dengan kode berikut.
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Readmore »» <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Catatan :
  1. Ganti kode yang berwarna merah dengan letak readmore yang kamu inginkan left (kiri) atau right (kanan).
  2. Kalau perlu ganti Readmore dengan kata favorit kamu.
  3. Hapus kode <data:post.title/>, jika kamu tidak menginginkan readmore diikuti dengan judul posting.
  • Jangan lupa disimpan.

Selamat membuat otomatis readmore...
Readmore » Readmore Otomatis
Category:
��

Efek Zoom
0
13.07 | Posted in
My ParaDIsESuatu hari, Abu Bakar bertanya kepada putrinya, Siti A’isyah, “Menurutku, sunnah-sunnah Rasulullah telah aku teladani dalam kehidupan sehari-hariku, menurutmu bagaimana?” A’isyah menjawa, “Kecuali satu yang belum Abah lakukan, Rasulullah memberi makan seorang pengemis Yahudi di pasar. Itu beliau lakukan tiap pagi hingga menjelang wafatnya.”

Tidak jarang dalam sebuah blog, kamu memasukkan berbagai macam image, baik yang berukuran kecil maupun besar. Semakin besar ukuran suatu image, maka semakin besar pula waktu yang dibutuhkan untuk meloadingnya. Sehingga alangkah baiknya apabila image tersebut kamu optimasi dalam ukuran kecil yang jika didekati oleh kursor mouse akan menampilkan image yang relatif besar. Yah, lumayanlah apalagi blogku banyak gambarnya (khusus yang punya blog bergambar porno dan mau menggunakan trik ini. Jangan bilang-bilang bahwa kamu dapat triknya dari OB he..he..he..). Bonus tambahannya, yakni teks yang dapat menampilkan image, jika didekati kursor mouse. Nah, trik blogger ini didapatkan setelah OB jalan-jalan ke Dynamic Drive CSS Library. Sebagai illustrasi, silakan dekatkan kursor pada image dan teks berikut :




Icon OB

Apabila kamu tertarik dengan trik blogger ini, mari kita review cara menampilkan image dalam efek zoom Image tersebut.
  • Login ke account blogger kamu.
  • Pilih Tata Letak --> Edit HTML.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
  • Tambahkan kode CSS berikut di atas kode ]]></b:skin>


Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.
/* Zoom Efek */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}

  • Simpan template kamu

Cara penggunaan :
Kode HTML untuk image zoom.
<a class="thumbnail" href="#thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUp_2oCapLY1rqP-6-QxBer6wfpVgEA3UwKS_OofMlHSwOM4yvEDleOAA10sQ_RGBtonh7CI6mYpmyowCWnPpqLqSPvI_t032ITk48FUaVTkZztX0W3S3n366i6Mj3Yd2V39qgeZxmGE/s800/Chicklet%20OB.png" border="0" /><span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMUp_2oCapLY1rqP-6-QxBer6wfpVgEA3UwKS_OofMlHSwOM4yvEDleOAA10sQ_RGBtonh7CI6mYpmyowCWnPpqLqSPvI_t032ITk48FUaVTkZztX0W3S3n366i6Mj3Yd2V39qgeZxmGE/s800/Chicklet%20OB.png" width="180px" height="100px"/></span></a>

Kode HTML untuk teks.
<a class="thumbnail" href="#thumb">Icon OB<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7agby6co4KPMxP_zjqcpyqnonJm6G_cKfahBdTdwwS5HndItG6mfwow17v93EpqAmOZIK9lBWhEhoqCzxFGPCVeP7tbqBZ5lt_OuuzUgbdg2lieKa6bxwkVVlETJM_v-jY3660Wm780/s144/Chicklet%20OB2.png" /></span></a>

Catatan :
  1. Kode yang berwarna merah merupakan default image dan teks yang akan kamu tampilkan.
  2. Kode yang berwarna hijau merupakan sisipan kode, agar default image akan menampilkan efek zoom.
  3. Kode berwarna biru merupakan sisipan kode, agar default teks akan menampilkan image.
  4. Jika ingin memperbesar zoom, silakan atur kode yang berwarna hijau dan berkedap-kedip (width dan height).

Selamat menampilkan image dalam zoom efek..
Readmore » Efek Zoom
Category:
��

Dunia Maya, Dunia Global
0
18.01 | Posted in



Leighton Flaming June



----------------------



----------------------
Icon OB
Readmore » Dunia Maya, Dunia Global
Category:
��