Membuat animasi bergerak dengan css3 tanpa gambar dan javascript

Di kesempatan kali ini saya mau berbagi trik lagi menggunakan efek animasi css3. Bagaimana membuat sebuah objek bergerak tanpa javasript dan gambar seperti objek di bawah ini?

CodeStyle
Animation

Tentu kita berpikir objek ini terbentuk dari gambar atau dari pengaruh javascript yang di tuliskan pada halaman artikel atau yang di tanam pada pengaturan kode html. Hilangkan prasangka tersebut, karena css3 mampu melakukan hal ini.

Coba simak kode berikut sebagai referensi dan praktekan pada browser anda.

Berikut Kodenya :

<style>
#animated_div {
width:100px;
height:60px;
background:#92B901;
color:#000;
position:relative;
font-weight:bold;
font-size:20px;
text-shadow:1px 1px 3px #000;
margin-left:10px;
animation:animated_div 5s 1;
-moz-animation:animated_div 5s 1;
-webkit-animation:animated_div 5s 1;
-o-animation:animated_div 5s 1;
border-radius:5px;
-webkit-border-radius:5px;
box-shadow:1px 4px 8px #000;
}


@keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

@-webkit-keyframes animated_div
{
0% {-webkit-transform: rotate(0deg);left:0px;}
25% {-webkit-transform: rotate(20deg);left:0px;}
50% {-webkit-transform: rotate(0deg);left:500px;}
55% {-webkit-transform: rotate(0deg);left:500px;}
70% {-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-webkit-transform: rotate(-360deg);left:0px;}
}

@-moz-keyframes animated_div
{
0% {-moz-transform: rotate(0deg);left:0px;}
25% {-moz-transform: rotate(20deg);left:0px;}
50% {-moz-transform: rotate(0deg);left:500px;}
55% {-moz-transform: rotate(0deg);left:500px;}
70% {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {-moz-transform: rotate(-360deg);left:0px;}
}

@-o-keyframes animated_div
{
0% {transform: rotate(0deg);left:0px;}
25% {transform: rotate(20deg);left:0px;}
50% {transform: rotate(0deg);left:500px;}
55% {transform: rotate(0deg);left:500px;}
70% {transform: rotate(0deg);left:500px;background:#1ec7e6;}
100% {transform: rotate(-360deg);left:0px;}
}

</style>
<div id="animated_div"><a title='membuat animasi dengan css3' href='http://codestyle.blogspot.com'>CodeStyle</a><br><span style="font-size:12px;color:white;">Animation</span></div>

demikian posting kali ini. semoga saja bermanfaat buat kita semua, hitung-hitung saling berbagi ilmu..

Membuat Kotak Teks User Friendly di blog

Membuat kotak area teks yang friendly tidaklah sulit. Dengan menekan link TANDAI SEMUA, tulisan langsung terblok dan bisa di copy.

Pertama yang kamu lakukan adalah menempelkan kode berikut dalam template blogger kamu sebelum kode </head> :

<style>
.highlighttext{
background-color:yellow;
font-weight:bold;
}
</style>

<script type="text/javascript">

/*
by ycusoy*/

function selectcopy(fieldid){
var field=document.getElementById(fieldid) || eval('document.' fieldid)
field.select()
if (field.createTextRange){ //if browser supports built in copy and paste (IE only at the moment)
field.createTextRange().execCommand("Copy")
alert("Value copied to clipboard!")
}
}

</script>

dan untuk selanjutnya kamu tinggal menempelkan kode html di posting atau widget di blog :

<form name="test">
<a class="highlighttext" href="javascript:selectcopy('test.select1')">TANDAI SEMUA</a><br>
<textarea name="select1" rows=10 cols=35 >contoh di sini.contoh di sini.contoh di sini.contoh di sini.</textarea>
</form>

untuk memasukan kata atau kalimat yang akan di blok, ganti kata "contoh di sini" pada kode html.

Oke bro, semoga artikel ini bermanfaat untuk semua..

Hasilnya:

TANDAI SEMUA

contoh di sini.contoh di sini.contoh di sini.contoh di sini.

Membuat efek mouse unik menari dengan javascript

Kali ini kita akan membuat efek pada kursor mouse dengan tiga buah warna yang menari nari di sekelilingnya..
Kayak striptcase aja deh..Hehe...

Nah ini kode javascriptnya yang kamu copas di widget atau posting kamu..

<script language="JavaScript">
//by ycusoy
var a_Colour="red";
var b_Colour="blue";
var c_Colour="green";
var Size=40;

//Alter nothing below !!

var YDummy=new Array(),XDummy=new Array(),xpos=0,ypos=0,ThisStep=0;step=0.03;
if (document.layers){
window.captureEvents(Event.MOUSEMOVE);
function nsMouse(evnt){
xpos = window.pageYOffset evnt.pageX 6;
ypos = window.pageYOffset evnt.pageY 16;
}
window.onMouseMove = nsMouse;
}
else if (document.all)
{
function ieMouse(){
xpos = document.body.scrollLeft event.x 6;
ypos = document.body.scrollTop event.y 16;
}
document.onmousemove = ieMouse;
}

function swirl(){
for (i = 0; i < 3; i )
{
YDummy[i]=ypos Size*Math.cos(ThisStep i*2)*Math.sin((ThisStep)*6);
XDummy[i]=xpos Size*Math.sin(ThisStep i*2)*Math.sin((ThisStep)*6);
}
ThisStep =step;
setTimeout('swirl()',10);
}

var amount=10;
if (document.layers){
for (i = 0; i < amount; i )
{
document.write('<layer name=nsa' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' a_Colour '></layer>');
document.write('<layer name=nsb' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' b_Colour '></layer>');
document.write('<layer name=nsc' i ' top=0 left=0 width=' i/2 ' height=' i/2 ' bgcolor=' c_Colour '></layer>');
}
}
else if (document.all){
document.write('<div id="ODiv" style="position:absolute;top:0px;left:0px">'
'<div id="IDiv" style="position:relative">');
for (i = 0; i < amount; i )
{
document.write('<div id=x style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' a_Colour ';font-size:' i/2 '"></div>');
document.write('<div id=y style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' b_Colour ';font-size:' i/2 '"></div>');
document.write('<div id=z style="position:absolute;top:0px;left:0px;width:' i/2 ';height:' i/2 ';background:' c_Colour ';font-size:' i/2 '"></div>');
}
document.write('</div></div>');
}
function prepos(){
var ntscp=document.layers;
var msie=document.all;
if (document.layers){
for (i = 0; i < amount; i )
{
if (i < amount-1)
{
ntscp['nsa' i].top=ntscp['nsa' (i 1)].top;ntscp['nsa' i].left=ntscp['nsa' (i 1)].left;
ntscp['nsb' i].top=ntscp['nsb' (i 1)].top;ntscp['nsb' i].left=ntscp['nsb' (i 1)].left;
ntscp['nsc' i].top=ntscp['nsc' (i 1)].top;ntscp['nsc' i].left=ntscp['nsc' (i 1)].left;
}
else
{
ntscp['nsa' i].top=YDummy[0];ntscp['nsa' i].left=XDummy[0];
ntscp['nsb' i].top=YDummy[1];ntscp['nsb' i].left=XDummy[1];
ntscp['nsc' i].top=YDummy[2];ntscp['nsc' i].left=XDummy[2];
}
}
}
else if (document.all){
for (i = 0; i < amount; i )
{
if (i < amount-1)
{
msie.x[i].style.top=msie.x[i 1].style.top;msie.x[i].style.left=msie.x[i 1].style.left;
msie.y[i].style.top=msie.y[i 1].style.top;msie.y[i].style.left=msie.y[i 1].style.left;
msie.z[i].style.top=msie.z[i 1].style.top;msie.z[i].style.left=msie.z[i 1].style.left;
}
else
{
msie.x[i].style.top=YDummy[0];msie.x[i].style.left=XDummy[0];
msie.y[i].style.top=YDummy[1];msie.y[i].style.left=XDummy[1];
msie.z[i].style.top=YDummy[2];msie.z[i].style.left=XDummy[2];
}
}
}
setTimeout("prepos()",10);
}
function Start(){
swirl(),prepos()
}
window.onload=Start;
// -->
</script>

bagaimana, keren kan..

Membuat animasi bintang di background blog

Halo sob, kali ini kita akan membuat latar blog kita dengan animasi bintang seperti malam hari.

Sangat cocok buat yang halaman blognya agak gelap, karna di situlah kita akan merasakan bahwa malam berbintang adalah... Bla..Bla..Bla... Alahh udah...

Langsung aja ini kodenya yang kamu masukan dalam widget atau posting kamu :

<SCRIPT LANGUAGE="JavaScript">
// by ycusoy admin-belajar.blogspot.com
<!-- Begin
SmallStars = 30;
LargeStars = 10;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns) {
for (i = 0; i < SmallStars; i ) {
document.write("<LAYER NAME='sn" i "' LEFT=0 TOP=0 BGCOLOR='#FFFFF0' CLIP='0,0,1,1'></LAYER>");
}
for (i = 0; i < LargeStars; i ) {
document.write("<LAYER NAME='ln" i "' LEFT=0 TOP=0 BGCOLOR='#FFFFFF' CLIP='0,0,2,2'></LAYER>");
}
}
else {
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < SmallStars; i ) {
document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>');
}
document.write('</div>');
document.write('</div>');
document.write('<div style="position:absolute;top:0px;left:0px">');
document.write('<div style="position:relative">');
for (i = 0; i < LargeStars; i ) {
document.write('<div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
document.write('</div>');
}
WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
for (i = 0; i < SmallStars; i ) {
SmallYpos[i] = Math.round(Math.random() * WinHeight);
SmallXpos[i] = Math.round(Math.random() * WinWidth);
Smallspeed[i]= Math.random() * 5 1;
}
for (i = 0; i < LargeStars; i ) {
LargeYpos[i] = Math.round(Math.random() * WinHeight);
LargeXpos[i] = Math.round(Math.random() * WinWidth);
Largespeed[i] = Math.random() * 10 5;
}
function fly() {
var WinHeight = (document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth = (document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < LargeStars; i ) {
LargeXpos[i] -= Largespeed[i];
if (LargeXpos[i] < -10) {
LargeXpos[i] = WinWidth;
LargeYpos[i] = Math.round(Math.random() * WinHeight);
Largespeed[i] = Math.random() * 10 5;
}
if (ns) {
document.layers['ln' i].left = LargeXpos[i];
document.layers['ln' i].top = LargeYpos[i] hscrll;
}
else {
li[i].style.pixelLeft = LargeXpos[i];
li[i].style.pixelTop = LargeYpos[i] hscrll;
}
}
for (i = 0; i < SmallStars; i ) {
SmallXpos[i] -= Smallspeed[i];
if (SmallXpos[i] < -10) {
SmallXpos[i] = WinWidth;
SmallYpos[i] = Math.round(Math.random()*WinHeight);
Smallspeed[i] = Math.random() * 5 1;
}
if (ns) {
document.layers['sn' i].left = SmallXpos[i];
document.layers['sn' i].top = SmallYpos[i] hscrll;
}
else {
si[i].style.pixelLeft = SmallXpos[i];
si[i].style.pixelTop = SmallYpos[i] hscrll;
}
}
setTimeout('fly()', 10);
}
// End -->
</script>

dan hasilnya pasti bisa di simak..

Oke sampai di sini dulu yah. Kamu boleh nyebar artikel ini, tapi jangan lupa dari mana manusia berasal.. Eh salah..Kamsudnya dari mana sumbernya.. Bye

Membuat pop up slider tampilan android di blog

Dari judulnya saja udah menarik, bagaimana nanti praktiknya yah.... tanpa basa basi, tanpa padang bulu,,,
langsung kita sikat saja kodenya !!!
Sikat tapi jangan di makan yahh ....

berawal dari kode css :

<style>
#page-wrap {width: 720px; margin: 0 auto; padding:300px; position:fixed; background:transparant center;}
#well {
padding: 14px 20px 20px 20px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

background: -moz-linear-gradient(top, #010101, #181818);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0, #010101),color-stop(1, #181818));

border: 2px solid #454545;
overflow: hidden;

-webkit-user-select: none;
}
#codestyle {
background: -moz-linear-gradient(left, #4d4d4d, 0.4, #4d4d4d, 0.5, white, 0.6, #4d4d4d, #4d4d4d);
background: -webkit-gradient(linear,left top,right top,color-stop(0, #4d4d4d),color-stop(0.4, #4d4d4d),color-stop(0.5, white),color-stop(0.6, #4d4d4d),color-stop(1, #4d4d4d));

-moz-background-clip: text;
-webkit-background-clip: text;

-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;

-webkit-animation: slidetounlock 5s infinite;

font-size: 80px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300; color:#666;
padding: 0;
width: 200%;

-webkit-text-size-adjust: none;
}
#slider {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8zdI1ln-Pyb-BgKVB03aGDoZmdHp_sSNGzQpPL13n7sRAahEKjLU3jRiFhZLU_Q6EaXu-5Bd2jsfFFyCJda9a2BjM4rS8bttgs5lwiK2L_XbELwXh1ltR-1N6hAfTPBCQeZNzzWOnTVg-/s1600/arrow.png) no-repeat;
width: 146px;
height: 98px;
display: inline-block;
vertical-align: middle;
line-height: 1;
}
@-webkit-keyframes slidetounlock {
0% {
background-position: -820px 0;
}
100%{
background-position: 820px 0;
}
}
</style>

Berlanjut dengan kode 3 buah script yang tanpa repot dan tanpa ragu kamu hanya copas ajah hehe... :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
<script src='http://ycusoy.googlecode.com/files/code%2Bstyle%2Bslide.js'></script>

Lalu kode htmlnya yang nanti di paste pada halaman posting...

<div id="page-wrap">
<div id="well">
<div id='codestyle'><strong id="slider"></strong> <span>slide to unlock</span></div>
</div>
</div>

bagaimana bro and sista... mudah bukan ?? silahkan praktekan dan sebar luaskan artikel ini. dan jangan lupa yah sumbernya ...

contohnya pasti udah kamu lihat kan ??

slide to unlock

Membuat tombol menu unik dengan javascript+css+html

Pada pagi ini kita akan membuat tombol menu yang unik dan bisa di jadikan referensi kamu untuk memilih menu mana yang kamu suka, jika tertarik boleh langsung praktekan...


berikut kode css nya :

<style>
a { text-decoration: none; }
ul { list-style: none; }
.box { background: #a7a7a7; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 10px; margin: 0 0 15px 0; }
.box ul li { font-size: 11px; margin: 0; border-bottom: 1px solid #666; }
.box ul li a { color: #222; display: block; padding: 4px 4px; margin: 0;
border-bottom: 1px solid #ccc; }
.box ul li:last-child,
.box ul li:last-child a { border: none; }
.box ul li a:hover { background: #ccc; text-decoration: none; }
#catNav { background: #494949; padding: 5px 5px 5px 37px;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
overflow: hidden; margin: 0 0 10px 0; }
#catNav li { display: inline; }
#catNav li a { display: block; width: 50px; height: 50px; text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjglnlTqDVsNkXMWSd8qUvRI1fdxFlm5WCFJqoRvNHhE7_LdFrTjilBSJPd1mvog6RynMDI2mzG678mjjsA_O0OCq-PMHx6NvmPoQ4KGvXbkTD37cj9gTFncejYr7AhkX8r7N9jK5tAkCMC/s1600/tombol%252Bunik%252Bcode%252Bstyle.png); float: left;
border: none; padding: 0; }
#catNav li a#list-satu-button { background-position: -50px -50px; }
#page-wrap #catNav li.activeCatButton a#list-satu-button { background-position: -50px -100px; }
#catNav li a#list-satu-button:hover { background-position: -50px 0px; }
#catNav a#list-dua-button { background-position: -100px -50px; }
#page-wrap #catNav li.activeCatButton a#list-dua-button { background-position: -100px -100px; }
#catNav li a#list-dua-button:hover { background-position: -100px 0px; }
#catNav a#list-tiga-button { background-position: 0px -50px; }
#page-wrap #catNav li.activeCatButton a#list-tiga-button { background-position: 0px -100px; }
#catNav li a#list-tiga-button:hover { background-position: 0px 0px; }
#catNav a#list-empat-button { background-position: -150px -50px; }
#page-wrap #catNav li.activeCatButton a#list-empat-button { background-position: -150px -100px; }
#catNav li a#list-empat-button:hover { background-position: -150px 0px; }
</style>

Sedangkan untuk sriptnya adalah :

<script src="http://ycusoy.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// ycusoy creator
$(function(){

$("#list-dua").hide();
$("#list-tiga").hide();
$("#list-empat").hide();
$("#list-satu-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-satu").slideDown(600);
});

$("#list-dua-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-dua").slideDown(600);
});

$("#list-tiga-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-tiga").slideDown(600);
});

$("#list-empat-button").click(function(){
$(".cat-list").slideUp(600);
$("#list-empat").slideDown(600);
});

$("#catNav li a").click(function() {
$("#catNav li").removeClass("activeCatButton");
$(this).parent().addClass("activeCatButton");
});
});
</script>

Dan yang terakhir kode htmlnya :

<div id="page-wrap">

<div class="box">
<ul id="catNav">
<li class="activeCatButton"><a id="list-satu-button">Apple</a></li>
<li><a id="list-dua-button">Linux</a></li>
<li><a id="list-tiga-button">Microsoft</a></li>
<li><a id="list-empat-button">News</a></li>
</ul>

<ul class="cat-list" id="list-satu">
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
<li><a href="#">Contoh Ringkas baris satu</a></li>
</ul>
<ul class="cat-list" id="list-dua">
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
<li><a href="#">Contoh Ringkas baris dua</a></li>
</ul>
<ul class="cat-list" id="list-tiga">
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
<li><a href="#">Contoh Ringkas baris tiga</a></li>
</ul>
<ul class="cat-list" id="list-empat">
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
<li><a href="#">Contoh Ringkas baris empat</a></li>
</ul>

</div>

</div>

Bagaimana, Apakah kamu berhasil membuatnya. Oke sekian dulu postingan kali ini. sampai jumpa ...

contoh :

• Apple
• Linux
• Microsoft
• News

• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu
• Contoh Ringkas baris satu

• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua
• Contoh Ringkas baris dua

• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga
• Contoh Ringkas baris tiga

• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat
• Contoh Ringkas baris empat

dan jangan lupa tinggalkan komentar jika masih dikau sempat..

Membuat Tombol Source Code Html dengan css+ javascript+html

Nah pada kesempatan kali ini kita akan membuat sendiri tools seperti layaknya firebug addon pada mozila, gunanya untuk melihat isi html blog kita dengan javascript, css dan html.

Baiklah untuk kode css nya sebagai berikut :

<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
#page-wrap { width: 960px; margin: 60px auto; }
a img { border: 0; }
h1 { font: bold 32px Helvetica, Arial, Sans-Serif; letter-spacing: -1px; margin: 50px 0 20px 0; }
p { margin: 0 0 20px 0; }
/* Pretty printing styles. Used with prettify.js. */
.str { color: #61ff74; }
.kwd { color: #ea5eff; }
.com { color: white; }
.typ { color: red; }
.lit { color: red; }
.pun { color: white; }
.pln { color: white; }
.tag { color: #ffab58; }
.atn { color: #fabb4e; }
.atv { color: #ffd996; }
.dec { color: red; }
pre.prettyprint { padding: 2px; border: 1px solid #888 }
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
li.L0,
li.L1,
li.L2,
li.L3,
li.L5,
li.L6,
li.L7,
li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9 { background: #eee }
@media print {
.str { color: #060; }
.kwd { color: #006; font-weight: bold; }
.com { color: #600; font-style: italic; }
.typ { color: #404; font-weight: bold; }
.lit { color: #044; }
.pun { color: #440; }
.pln { color: #000; }
.tag { color: #006; font-weight: bold; }
.atn { color: #404; }
.atv { color: #060; }
}
#source-code { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); }
#source-code:target { display: block; }
#source-code pre { padding: 20px; font: 14px/1.6 Monaco, Courier, MonoSpace; margin: 50px auto; background: rgba(0,0,0,0.8); color: white; width: 80%; height: 80%; overflow: auto; }
#source-code pre a, #source-code pre a span { text-decoration: none; color: #00ccff !important; }
#x { position: absolute; top: 30px; left: 10%; margin-left: -41px; }
.button { background: #00ccff; padding: 10px 20px; color: white; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
</style>

Dan untuk scriptnya (javascriptnya) seperti ini :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ycusoy.googlecode.com/files/codestylesource.js"></script>
<script>
$(function() {
$("<pre />", {
"html": '&lt;!DOCTYPE html>\n&lt;html>\n' +
$("html")
.html()
.replace(/[<>]/g, function(m) { return {'<':'&lt;','>':'&gt;'}[m]})
.replace(/((ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi,'<a href="$1">$1</a>') +
'\n&lt;/html>',
"class": "prettyprint"
}).appendTo("#source-code");

prettyPrint();
});
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-30788315-1");
pageTracker._initData();
pageTracker._trackPageview();
</script>

Dan yang terakhir adalah kode htmlnya :

<div id="page-wrap">
<h1>Code Style Model Baru</h1>
<p>Klik tombol untuk melihat dalam tampilan modern kode html. Ini menggunakan js dan css3. </p>
<a class="button" href="#source-code" id="view-source">Model Baru</a>
<h1>Code Style Model Lama</h1>
<p>Hanya bekerja pada Mozila dan Chrome. Mungkin bisa juga yang lainnya, tapi tidak untuk safari dan opera.</p>
<a class="button" onClick='window.location="view-source:" + window.location.href'>Model Lama</a>
<div id="source-code">
<a href="#" id="tutup"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq6YfPY-h61TJ6a9FaAjVrRs4QauHKJU-LmKImS6x5-WAE-8VP58YOVOOuv9xspgnUZz_sm_YKmMgWoBrgaTx2ZcT0J9HYtPQruWRglwnoidwcglss4FRvKX-Ie_zQ8AbFTUAx8Axqw5hh/s1600/x.png" alt="close"></a>
</div>
</div>

Contoh :

Jadi malu nih, kelihatan semua codestyle yang berantakan hehehe,,,, semoga manfaat ya...(jangan lupa tingalkan komentar yahhh))

Code Style Model Baru

Klik tombol untuk melihat dalam tampilan modern kode html.
Ini menggunakan js dan css3.

Model Baru

Code Style Model Lama

Hanya bekerja pada Mozila dan Chrome.
Mungkin bisa juga yang lainnya, tapi tidak untuk safari dan opera.

Model Lama

Mengganti latar warna blog dengan link dan toolbox

Kali ini kita belajar bagaimana mengganti latar warna blog dengan memilih warna yang tersedia.
Oke, langsung aja ..

Tempel kode berikut pada widget atau posting kamu..

<p>[<a href="/"
onmouseover="document.bgColor='green'">Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='greem'">Bright Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='seagreen'">Sea Green</a>]<br>
[<a href="/"
onmouseover="document.bgColor='red'">Red</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='magenta'">Magenta</a>]<br>
[<a href="/"
onmouseover="document.bgColor='fusia'">Fusia</a>]<br>
[<a href="/"
onmouseover="document.bgColor='pink'">Pink</a>]<br>
[<a href="/"
onmouseover="document.bgColor='purple'">Purple</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='navy'">Navy</a>]<br>
[<a href="/"
onmouseover="document.bgColor='blue'">Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='royalblue'">Royal Blue</a>]<br>
[<a href="/"
onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='yellow'">Yellow</a>]<br>
[<a href="/"
onmouseover="document.bgColor='brown'">Brown</a>]<br>
[<a href="/"
onmouseover="document.bgColor='almond'">Almond</a>]<br>
[<a href="/"
onmouseover="document.bgColor='white'">White</a>]<BR>
[<a href="/"
onmouseover="document.bgColor='black'">Black</a>]<br>
[<a href="/"
onmouseover="document.bgColor='coral'">Coral</a>]<br>
[<a href="/"
onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]<br>
[<a href="/"
onmouseover="document.bgColor='orange'">Orange</a>]<br>
<hr color="#00FFFF">
<font face="Tahoma"><a target="_blank" href="http://admin-belajar.blogspot.com/"><span style="font-size: 8pt; text-decoration: none">admin</span></a></font>

hasilnya :

[Green]

[Bright Green]

[Sea Green]

[Red]

[Magenta]

[Fusia]

[Pink]

[Purple]

[Navy]

[Blue]

[Royal Blue]

[Sky Blue]

[Yellow]

[Brown]

[Almond]

[White]

[Black]

[Coral]

[Olive Drab]

[Orange]

---

admin


Atau kamu bisa mencoba dengan menggunakan toolbox..
Ini kodenya..

<CENTER>
<FORM>
<FONT FACE="VERDANA, ARIAL"><B>Pilih latar warna blog :</B></FONT>
<SELECT name="ccGround" size="1" onChange=(document.bgColor=ccGround.options[ccGround.selectedIndex].value)>
<OPTION value="408080" target="1" selected>Cool Green
<OPTION value="C0C0C0" target="1">Cool Grey
<OPTION value="000000" target="1">Black
<OPTION value="730200" target="1">DarkRed
<OPTION value="231800" target="1">Brown
<OPTION value="044302" target="1">DarkGreen
<OPTION value="0D09A3" target="1">Dark Blue
<OPTION value="808040" target="1">Avocado
<OPTION value="800080" target="1">Purple
<OPTION value="444444" target="1">Gray
<OPTION value="FF0400" target="1">Red
<OPTION value="EFE800" target="1">Yellow
<OPTION value="05EF00" target="1">Green
<OPTION value="0206FF" target="1">Blue
<OPTION value="AE08EF" target="1">Violet
<OPTION value="FF8C8A" target="1">Mauve
<OPTION value="FF80FF" target="1">Pink
<OPTION value="FFCCCC" target="1">Peach
<OPTION value="FFCC99" target="1">Orange
<OPTION value="000080" target="1">Darker Blue
<OPTION value="808080" target="1">Dark Grey
<OPTION value="D5CCBB" target="1">Tan
<OPTION value="DDDDDD" target="1">LightGray
<OPTION value="FBFF73" target="1">Light Yellow
<OPTION value="7CFF7D" target="1">LightGreen
<OPTION value="A6BEFF" target="1">Light Blue
<OPTION value="FFFFFF" target="1">White
</SELECT></FORM></CENTER>



<font face="Tahoma"><a target="_blank" href="http://admin-belajar.blogspot.com/"><span style="font-size: 8pt; text-decoration: none">admin</span></a></font>

hasil:

Pilih latar warna blog :

Cool Green
Cool Grey
Black
DarkRed
Brown
DarkGreen
Dark Blue
Avocado
Purple
Gray
Red
Yellow
Green
Blue
Violet
Mauve
Pink
Peach
Orange
Darker Blue
Dark Grey
Tan
LightGray
Light Yellow
LightGreen
Light Blue
White

admin

Membuat IP Address Widget dengan javascript

Banyak sih yang menyediakan widget ip address yang tampilanya keren.

Tapi bagaimana kalau kita membuat sendiri widget ip address tersebut.
Mau kan?

Oke, langsung copy code berikut dan tempel pada widget anda :

<script language="javascript">

//IP address display: By admin-belajar.blogspot.com
//Script featured on Admin (http://admin-belajar.blogspot.com)

var ip = '<!--#echo var="REMOTE_ADDR"-->'

function ipval() {
document.myform.ipaddr.value=ip;
}
window.onload=ipval
</script>

<form method="post" action="" name="myform">
<input type="text" name="ipaddr" readonly>
</form>

jangan lupa save..Ya..

Jika ingin menambahkan variasi, selanjutnya tinggal anda modif sesuai keperluan..
Contohnya :
ip address kamu adalah ...

Moga manfaat ya.. :-)

Membuat Kursor Unik dengan Javascript

Kali ini kita akan membuat pointer cursor unik, mau tahu seberapa uniknya?

Tempelkan kode berikut pada halaman posting atau widget kamu, dan lihat hasilnya..
Langsung ke tKP.. >>

<script type="text/javascript">

/*
Simple Image Trail script- By admin
Visit http://admin-belajar.Blogspot.com */

var trailimage=["http://img1.blogblog.com/img/navbar/icons_orange.png", 100, 99] //image path, plus width and height
var offsetfrommouse=[10,-20] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="' trailimage[0] '" border="0" width="' trailimage[1] 'px" height="' trailimage[2] 'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""

}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){
xcoord =e.pageX
ycoord =e.pageY
}
else if (typeof window.event !="undefined"){
xcoord =truebody().scrollLeft event.clientX
ycoord =truebody().scrollTop event.clientY
}
var docwidth=document.all? truebody().scrollLeft truebody().clientWidth : pageXOffset window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord trailimage[1] 3>docwidth || ycoord trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord "px"
gettrailobj().top=ycoord "px"
}

document.onmousemove=followmouse

if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)

</script>

<p align="left">This free script provided by<br />
<a href="http://admin-belajar.Blogspot.com">ADMIN</a></p>

*Ganti http://img1.blogblog.com/img/navbar/icons_orange.png dengan alamat gambar kamu.

Hasilnya : liat ajah..

This free script provided by

ADMIN

Oke,, sampai sini dulu ya postnya. Smoga manfaat ..

Membuat Jam Digital dengan Javascript

Langsung aja ya..
+ buka template kamu dan paste kode berikut sebelum tag <head> :

<script type="text/javascript">

/***********************************************

* JavaScript Image Clock- by admin (admin-belajar.blogspot.com)
***********************************************/

var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["http://www.javascriptkit.com/script/c0.gif", "http://www.javascriptkit.com/script/c1.gif", "http://www.javascriptkit.com/script/c2.gif", "http://www.javascriptkit.com/script/c3.gif", "http://www.javascriptkit.com/script/c4.gif", "http://www.javascriptkit.com/script/c5.gif", "http://www.javascriptkit.com/script/c6.gif", "http://www.javascriptkit.com/script/c7.gif", "http://www.javascriptkit.com/script/c8.gif", "http://www.javascriptkit.com/script/c9.gif", "http://www.javascriptkit.com/script/cam.gif", "http://www.javascriptkit.com/script/cpm.gif", "http://www.javascriptkit.com/script/colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i ){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}

imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12 ""
for (var i=0; i<sections.length; i ){
if (sections[i].length==1)
sections[i]='<img src="' imageclock.digits[0] '" />' '<img src="' imageclock.digits[parseInt(sections[i])] '" />'
else
sections[i]='<img src="' imageclock.digits[parseInt(sections[i].charAt(0))] '" />' '<img src="' imageclock.digits[parseInt(sections[i].charAt(1))] '" />'
}
return sections[0] '<img src="' imageclock.digits[12] '" />' sections[1] '<img src="' imageclock.digits[12] '" />' sections[2]
}

imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan" (imageclock.instances )
document.write('<span id="' this.spanid '"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}

imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours() ":" dateobj.getMinutes() ":" dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime) '<img src="' ((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10]) '" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML

}


</script>

+ Tempel kode berikut pada widget

<script type="text/javascript">

new imageclock.display()

</script>

maka jadi seperti ini :

Membuat Jam Dunia dengan javascript

Nah, kali ini kita akan membuat jam dunia dengan javascript di blog.

Seperti biasa, aku diam tak bicara... Eh salah. Maksudnya login ke blog kamu.

Paste kode berikut pada widget :

<table border="0" width="200" cellspacing="0" cellpadding="3">
<form name="where">
<tr>
<td width="100%">
<select name="city" size="1" onchange="updateclock(this);">
<option value="" selected>Local time</option>
<option value="0">London GMT</option>
<option value="1">Rome</option>
<option value="7">Bangkok</option>
<option value="8">Hong Kong</option>
<option value="9">Tokyo</option>
<option value="10">Sydney</option>
<option value="12">Fiji</option>
<option value="-10">Hawaii</option>
<option value="-8">San Francisco</option>
<option value="-5">New York</option>
<option value="-3">Buenos Aires</option>
</select>

</td>
</tr>
<tr>
<td width="100%">
<script language="JavaScript">

/*
Drop Down World Clock- By ycusoy http://admin-belajar.blogspot.com
*/

if (document.all||document.getElementById)
document.write('<span id="worldclock" style="font:bold 16px Arial;"></span><br />')

zone=0;
isitlocal=true;
ampm='';

function updateclock(z){
zone=z.options[z.selectedIndex].value;
isitlocal=(z.options[0].selected)?true:false;
}

function WorldClock(){
now=new Date();
ofst=now.getTimezoneOffset()/60;
secs=now.getSeconds();
sec=-1.57+Math.PI*secs/30;
mins=now.getMinutes();
min=-1.57+Math.PI*mins/30;
hr=(isitlocal)?now.getHours():(now.getHours() + parseInt(ofst)) + parseInt(zone);
hrs=-1.575+Math.PI*hr/6+Math.PI*parseInt(now.getMinutes())/360;
if (hr < 0) hr+=24;
if (hr > 23) hr-=24;
ampm = (hr > 11)?"PM":"AM";
statusampm = ampm.toLowerCase();

hr2 = hr;
if (hr2 == 0) hr2=12;
(hr2 < 13)?hr2:hr2 %= 12;
if (hr2<10) hr2="0"+hr2

var finaltime=hr2+':'+((mins < 10)?"0"+mins:mins)+':'+((secs < 10)?"0"+secs:secs)+' '+statusampm;

if (document.all)
worldclock.innerHTML=finaltime
else if (document.getElementById)
document.getElementById("worldclock").innerHTML=finaltime
else if (document.layers){
document.worldclockns.document.worldclockns2.document.write(finaltime)
document.worldclockns.document.worldclockns2.document.close()
}


setTimeout('WorldClock()',1000);
}

window.onload=WorldClock
//-->
</script>

<!--Place holder for NS4 only-->
<ilayer id="worldclockns" width=100% height=35><layer id="worldclockns2" width=100% height=35 left=0 top=0 style="font:bold 16px Arial;"></layer></ilayer>

This free script provided by <a href="http://admin-belajar.blogspot.com">admin blog</a>
</td>
</form>
</tr>
</table>

oke deh. Kini kamu bisa memilih dan melihat waktu jam dunia dengan hasil karyamu sendiri.

Semoga manfaat..

Membuat konversi html ke javascript

Pada post kali ini kita akan membuat salah satu script konfersi dari html ke javascript.

Tempelkan kode berikut dalam posting atau widget kamu :

<script>
// HTML to JavaScript converter
// By Ycusoy (admin-belajar.blogspot.com)

function scriptIt(val){
val.value=val.value.replace(/"/gi,"&#34;")
val.value=val.value.replace(/'/gi,"&#39;")
valArr=escape(val.value).split("%0D%0A")
val.value=""
for (i=0; i<valArr.length; i++){
val.value+= (i==0) ? "<script>\ninfo=" : ""
val.value+= "\"" + unescape(valArr[i])
val.value+= (i!=valArr.length-1) ? "\" + \n" : "\"\n" 
}
val.value+="\ndocument.write(info)\n<\/script>"
}

function ctrlA(el) {
with(el){
focus(); select() 
}
if(document.all){
txt=el.createTextRange()
txt.execCommand("Copy") 
window.status='Selected and copied to clipboard!'
}
else window.status='Press ctrl-c to copy the text to the clipboard'
setTimeout("window.status=''",3000)
} 

</script>
<center>
<form name="f">
<input type="button" value="HTML -> JavaScript" onclick="scriptIt(document.f.t)" />
<input type="reset" value="Reset">
<input type="button" value="Select All" onclick="ctrlA(document.f.t)" />
<br />
<textarea name="t" cols="75"
rows="20"></textarea>
<br />
</form>
</center>

save dan lihat hasilnya,...
cukup mudah bukan ?

Membuat Widget Komentar di Blog

Untuk mempermudah sobat untuk mengetahui siapa saja yang komentar di blog sobat, kini ada widget untuk mempermudah itu - CARA MEMBUAT WIDGET KOMENTAR TERBARU . Berikut caranya :
*. login dulu ke blog
*. pilih rancangan
*. klik tambah gadget
*. pilih HTML/Java Script
*. pastekan kode berikut

<script style="text/javascript" src="http://ycusoy.googlecode.com/files/showrecentcomments.js"></script><script style="text/javascript">var numcomments = 5 ;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script><script src="http://codestyle.blogspot.com//feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

*ganti kata codestyle.blogspot.com dengan nama blog sobat.