CodeStyleMenu

Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Minggu, 04 November 2012

cara membuat template blogger sederhana secara offline bagian+3

Rancangan gambar template blogger.


Kali ini kita akan membuat rancangan gambar template blogger dengan tampilan seperti berikut :


Keterangan:
  • Warna ini adalah ruang lingkup body
  • Warna ini adalah ruang lingkup wrapper
  • Warna ini adalah ruang lingkup header
  • Warna ini adalah ruang lingkup post wrapper
  • Warna ini adalah ruang lingkup post
  • Warna ini adalah ruang lingkup sidebar
  • Warna ini adalah ruang lingkup footer

Contoh Kode Html dan Css :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Belajar Buat Template Blogger</title>
<style>
/*
Title : Belajar Buat Template Blogger
Design : Yanto Cusoy
Site : http://codestyle.blogspot.com
Deskripsi : Best Learning Template
Design : http://codestyle.blogspot.com
Work : 11-01-2012 *home
*/
body {background-color:#999;}
#wrapper {margin:15px auto; width:90%; height:auto; border:1px solid black; background:yellow; color:black; padding:5px}
#header {width:99%; height:auto; margin:5px auto; border:2px dotted red; background:green; color:white}
#post-wrap {max-width:99%; overflow:auto; margin:5px auto; border:2px dotted blue; background:#ff55aa; color:red;}
#post {width:70%; margin:5px; border:2px dotted blue; background:#553322; color:white; float:left;}
#sidebar {width:25%; margin:5px; border:2px dotted brown; background:#ccaa33; color:white; float:right}
#footer {width:99% auto; margin:5px auto; border:2px dotted white; background:#116666; color:white; }

</style>
</head>

<body>

<div id='wrapper'>
<div id='header'>Header
</div>
<br />
<br />
<br />
<div id='post-wrap'>
<div id='post'>Posting
<br />
<br />
<br />
<br />
<br />
<br />
</div>
<div id='sidebar'>Sidebar
<br />
<br />
<br />
<br />
</div>
</div>
<div id='footer'>Footer
<br />
<br />
<br />

</div>
</div>

</body>
</html>


Coba salin kode diatas dan simpan dengan eksistensi file belajar.html, lalu jalankan pada browser kamu

Nah pada bagian selanjutnya kita akan membahas kode xml blogger pada template buatan kita.

Baca lanjut :
Judul: cara membuat template blogger sederhana secara offline bagian+4.

Senin, 29 Oktober 2012

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..

Jumat, 19 Oktober 2012

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


Kamis, 18 Oktober 2012

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 sendiri SEO Page Optimation di Blog


Kali ini kita akan membuat halaman seo page optimation sendiri pada blog.
Letaknya tinggal kita sesuaikan apakah di page atau posting kita.
Gunanya untuk mengecek seberapa akrab blog kita di mata mbak google..

Oke langsung copas aja :
<form action="http://www.seobench.com/pr-overlay/v.php" method="get" target="_blank">View the <b>Google PR</b> of ALL the links in the entered URL. <br />
<br />
<br />
<b>Enter URL</b><br />
<br />
<input name="url" size="60" type="text" value="http://admin-belajar.blogspot.com/2007/05/list-url.html" /><br />
<br />
<br />
<input type="submit" value="Submit" /></form><noscript>&amp;amp;amp;amp;amp;lt;a href="http://www.seobench.com/"&amp;amp;amp;amp;amp;gt;SEO Tools&amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;gt;</noscript><br />
____________________________________________________________________________________<br />
<br />
<br />
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 380px;"><tbody>
<tr> <td bgcolor="#e0e0e0"><br />
<table border="0" cellpadding="4" cellspacing="1"><tbody>
<tr> <td bgcolor="#e0e0e0" width="100%"><br />
<b>Meta Tag Analyzer</b><br />
<br />
</td> </tr>
<tr> <td bgcolor="#f7f7f7" valign="top"><br />
<form action="http://www.seocentro.com/tools/search-engines/metatag-analyzer.html" method="POST"><small><br />
<b>Check your meta tags!</b><br />
<br />
<br />
example: <b>http://www.host.com</b>.<br />
<br />
<input name="url" size="40" type="text" value="http://" /> URL<br />
<br />
<br />
<br />
<select name="robot"> <option selected="selected" value="">Spider Robots</option> <option value="Mozilla/5.0 (compatible; Googlebot/2.1; http://www.google.com/bot.html)">GoogleBot</option> <option value="Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/help/us/ysearch/slurp)">Yahoo! Slurp</option> <option value="msnbot/1.0 ( http://search.msn.com/msnbot.htm)">MSNBot</option> </select> (optional)<br />
<br />
<input maxlength="255" name="custom_robot" size="40" type="text" /> User Agent * (optional)<br />
<br />
<br />
<script src="http://www.seocentro.com/setkey.js" type="text/javascript">
</script><br />
<br />
Please enter the <b>access code</b> as displayed above.<br />
<br />
<input maxlength="5" name="rkey" size="8" type="text" value="" /> Access code<br />
<br />
<input name="Submit" type="submit" value="Submit" /><br />
<br />
</small><br />
<input name="remote" type="hidden" value="yes" /></form><small><br />
Online <a href="http://www.seocentro.com/tools/search-engines/metatag-analyzer.html" target="_blank">Meta Tag Analyzer</a><br />
provide by <a href="http://www.seocentro.com/" target="_blank">SEOCentro</a>.<br />
</small></td> </tr>
</tbody></table></td> </tr>
</tbody></table><br />
_____________________________________________________________________________<br />
<br />
<a href="javascript:(function(){var%20a=window,b=document,c=encodeURIComponent,d=a.open('http://www.seocentro.com/cgi-bin/promotion/bookmark/bookmark.pl?u=' c(%20'http://facebook.com/ycusoy'%20) '&amp;t=' c(%20'fans%20club'%20),'bookmark_popup','left=' ((a.screenX||a.screenLeft) 10) ',top=' ((a.screenY||a.screenTop) 10) ',height=480px,width=720px,scrollbars=1,resizable=1,alwaysRaised=1');a.setTimeout(function(){%20d.focus()},300)})();" title="Social Bookmark"><img alt="Social Bookmark" border="0" src="http://www.seocentro.com/bookmark/images/bookmark02.gif" title="Social Bookmark" /></a><br />
_____________________________________________________________________________<br />
<br />
<a href="javascript:(function(){var%20a=window,b=document,c=encodeURIComponent,d=a.open('http://www.seocentro.com/cgi-bin/promotion/bookmark-rss/rss.pl?u=' c('http://admin-belajar.blogspot.com'),'bookmark_popup','left=' ((a.screenX||a.screenLeft) 10) ',top=' ((a.screenY||a.screenTop) 10) ',height=480px,width=720px,scrollbars=1,resizable=1,alwaysRaised=1');a.setTimeout(function(){%20d.focus()},300)})();" title="Social Bookmark"><img alt="RSS Feed Readers" border="0" src="http://www.seocentro.com/bookmark-rss/images/rss_button02.gif" title="RSS Feed Readers" /></a><br />
______________________________________________________________________________<br />
<br />
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 380px;"><tbody>
<tr> <td bgcolor="#e0e0e0"><br />
<table border="0" cellpadding="4" cellspacing="1"><tbody>
<tr> <td bgcolor="#e0e0e0" width="100%"><br />
<b>Server Headers Check</b><br />
<br />
</td> </tr>
<tr> <td bgcolor="#f7f7f7" valign="top"><br />
<form action="/tools/online/server-headers-check.html" method="POST"><input name="url" size="40" type="text" /> <small>URL</small><br />
<br />
<input name="Submit" type="submit" value="Submit" /><br />
<br />
<input name="remote" type="hidden" value="yes" /></form><br />
<small><br />
Online <a href="http://www.seocentro.com/tools/online/server-headers-check.html" target="_blank">Server Headers Check</a><br />
provide by <a href="http://www.seocentro.com/" target="_blank">SEOCentro</a>.<br />
</small></td> </tr>
</tbody></table></td> </tr>
</tbody></table><br />
<br />
______________________________________________________________________________<br />
<br />
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 380px;"><tbody>
<tr> <td bgcolor="#e0e0e0"><br />
<table border="0" cellpadding="4" cellspacing="1"><tbody>
<tr> <td bgcolor="#e0e0e0" width="100%"><br />
<b>IP to Country tool</b><br />
<br />
</td> </tr>
<tr> <td bgcolor="#f7f7f7" valign="top"><br />
<form action="/tools/online/ip-country.html" method="POST"><input name="IP" size="20" type="text" /> <small>Domain name or IP Address</small><br />
<br />
<input name="Submit" type="submit" value="Submit" /><br />
<br />
<input name="remote" type="hidden" value="yes" /></form><small><br />
Online <a href="http://www.seocentro.com/tools/online/ip-country.html" target="_blank">IP to Country tool</a><br />
provide by <a href="http://www.seocentro.com/" target="_blank">SEOCentro</a>.<br />
</small></td> </tr>
</tbody></table></td> </tr>
</tbody></table><br />
<br />
___________________________________________________________________________<br />
<br />
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 380px;"><tbody>
<tr> <td bgcolor="#e0e0e0"><br />
<table border="0" cellpadding="4" cellspacing="1"><tbody>
<tr> <td bgcolor="#e0e0e0" width="100%"><br />
<b>PageRank Check</b><br />
<br />
</td> </tr>
<tr> <td bgcolor="#f7f7f7" valign="top"><br />
<form action="http://www.seocentro.com/tools/search-engines/pagerank.html" method="POST"><small><b>Check your website Google PageRank!</b><br />
<br />
<br />
URLs (one url a line)<br />
<br />
<textarea cols="30" name="u" rows="4"></textarea><br />
<br />
<br />
<script src="http://www.seocentro.com/setkey.js" type="text/javascript">
</script><br />
<br />
Please enter the <b>access code</b> as displayed above.<br />
<br />
<input maxlength="5" name="rkey" size="8" type="text" value="" /> Access code<br />
<br />
<input name="Submit" type="submit" value="Submit" /><br />
<br />
</small><br />
<input name="remote" type="hidden" value="yes" /></form><small><br />
Online <a href="http://www.seocentro.com/tools/search-engines/pagerank.html" target="_blank">PageRank Check</a><br />
provide by <a href="http://www.seocentro.com/" target="_blank">SEOCentro</a>.<br />
</small></td> </tr>
</tbody></table></td> </tr>
</tbody></table><br />
___________________________________________________________________________<br />
<br />
<br />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="0" style="width: 380px;"><tbody>
<tr> <td bgcolor="#e0e0e0"><br />
<table border="0" cellpadding="4" cellspacing="1"><tbody>
<tr> <td bgcolor="#e0e0e0" width="100%"><br />
<b>Keyword Position Check</b><br />
<br />
</td> </tr>
<tr> <td bgcolor="#f7f7f7" valign="top"><br />
<form action="http://www.seocentro.com/tools/search-engines/keyword-position.html" method="POST"><small><b>How are your keywords ranked by the search engines?</b><br />
<br />
<br />
<input maxlength="255" name="q" size="20" type="text" /> Keyword<br />
<br />
<input maxlength="255" name="d" size="20" type="text" /> Domain (example: www.host.com)<br />
<br />
<br />
<script src="http://www.seocentro.com/setkey.js" type="text/javascript">
</script><br />
<br />
Please enter the <b>access code</b> as displayed above.<br />
<br />
<input maxlength="5" name="rkey" size="8" type="text" value="" /> Access code<br />
<br />
<input type="submit" value="Submit" /><br />
</small><br />
<input name="remote" type="hidden" value="yes" /></form><br />
<small><br />
Online <a href="http://www.seocentro.com/tools/search-engines/keyword-position.html" target="_blank">Keyword Position Check</a><br />
provide by <a href="http://www.seocentro.com/" target="_blank">SEOCentro</a>.<br />
</small></td> </tr>
</tbody></table></td> </tr>
</tbody></table><br />
_________________________________________________________________________

mudah bukan? Nah agar mumpuni, jangan lupa berpaling dan meninggalkan kolom komentar ya..
Bye

contoh :
View the Google PR of ALL the links in the entered URL.





Enter URL











____________________________________________________________________________________















Meta Tag Analyzer







Check your meta tags!





example: http://www.host.com.



URL







(optional)



User Agent * (optional)









Please enter the access code as displayed above.



Access code











Online Meta Tag Analyzer

provide by SEOCentro.



_____________________________________________________________________________



Social Bookmark

_____________________________________________________________________________



RSS Feed Readers

______________________________________________________________________________













Server Headers Check





URL











Online Server Headers Check

provide by SEOCentro.





______________________________________________________________________________













IP to Country tool





Domain name or IP Address









Online IP to Country tool

provide by SEOCentro.





___________________________________________________________________________













PageRank Check





Check your website Google PageRank!





URLs (one url a line)













Please enter the access code as displayed above.



Access code











Online PageRank Check

provide by SEOCentro.



___________________________________________________________________________













Keyword Position Check





How are your keywords ranked by the search engines?





Keyword



Domain (example: www.host.com)









Please enter the access code as displayed above.



Access code











Online Keyword Position Check

provide by SEOCentro.



_________________________________________________________________________
Sumber : Admin Blog's | Tempat Belajar Blog SEO

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 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
close

Rabu, 17 Oktober 2012

Membuat link tooltip pada posting

Kali ini kita akan membuat link tooltip dengan cara sederhana dengan menambahkan kode CSS ke dalam postingan.

Kegunaanya dapat beraneka ragam sesuai kebutuhan masing-masing. Jika ada yang ingin menambahkan maksud dari suatu kalimat, maka tooltip ini bisa membantu menjelaskan dengan tampilan yang lumayan keren.

Bagaimana hayo, kita mulai saja ya...

Untuk kode css nya :
<style>
/* Code Style CSS
by ycusoy
site (http://admin-belajar.blogspot.com) */
a.codestyle {position: relative;}
a.codestyle span {display: none;position: absolute;top: 20px;left: -10px;width: 300px;padding: 5px;z-index: 100;background: #000;color: #fff;font-size:11px;-moz-border-radius: 5px; /* this works only in camino/firefox */ -webkit-border-radius: 5px; /* this is just for Safari */}
a:hover.codestyle {font-size: 99%; /* this is just for IE */}
a:hover.codestyle span {display: block;}
</style>

Nah singkat bukan code css-nya..

Sekarang kita lanjut dengan bagaimana menempatkan tooltip tersebut pada beberapa kata atau kalimat dalam postingan..

kode :
<a href="#" class="codestyle">KALIMAT<span>DI SINI ISI TOOLTIP KAMU</span></a>

* KALIMAT ganti dengan Kalimat yang akan kamu buatkan tooltipnya
* DI SINI ISI TOOLTIP KAMU ganti dengan isi tooltip kamu

Contoh Kalimat :

Kali ini kita akan membuat link tooltipKegunaanya dapat beraneka ragam sesuai kebutuhan masing-masing. Jika ada yang ingin menambahkan maksud dari suatu kalimat, maka tooltip ini bisa membantu menjelaskan dengan tampilan yang lumayan keren. dengan cara sederhana dengan menambahkan kode CSS ke dalam postingan.

Bagaimana?? Mudah bukan...

Selasa, 16 Oktober 2012

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..

This Template - a Admin theme from yanto Cusoy. Converted by Bisnis Indonesia Baru.