code style

Kali ini kita akan membuat rotasi pada gambar menggunakan kode html dan css3. Trik ini dapat anda gunakan untuk menu animasi, header animasi dan lain-lain yang ada animasinya.

Seperti biasanya kita mulai dengan kode CSS..
Berikut kode CSS3 nya :

<style>

#socialicons img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

#socialicons img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

</style>

Berputar bolak balik 360 derajat jika mouse mendekati objek

<div id="socialicons">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar 60 derajar jika mouse mendekati objek atau menjauhi

<div id="socialicons2">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/">
<img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Berputar terbalik 360 derajar jika mouse mendekati objek saja

<div id="socialicons3">
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/rss.png" /></a>
<a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/delicious.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/facebook.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/twitter.png" /></a><a href="http://codestyle.blogspot.com/"><img border="0" src="http://www.dynamicdrive.com/cssexamples/media/socialicons/64x64/yahoo.png" /></a></div>

Bagaimana, mudah bukan? segalanya kini lebih mudah dengan adanya fitur html5 dan css3. semoga bermanfaat ...

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;lt;a href="http://www.seobench.com/"&amp;amp;amp;amp;gt;SEO Tools&amp;amp;amp;amp;lt;/a&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) '&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 :

____________________________________________________________________________________

Meta Tag Analyzer

Online Meta Tag Analyzer

provide by SEOCentro.

_____________________________________________________________________________

_____________________________________________________________________________

______________________________________________________________________________

Server Headers Check

Online Server Headers Check

provide by SEOCentro.

______________________________________________________________________________

IP to Country tool

Online IP to Country tool

provide by SEOCentro.

___________________________________________________________________________

PageRank Check

Online PageRank Check

provide by SEOCentro.

___________________________________________________________________________

Keyword Position Check

Online Keyword Position Check

provide by SEOCentro.

_________________________________________________________________________

Sumber : Admin Blog's | Tempat Belajar Blog SEO

Sabtu, 27 Oktober 2012

Spyning icon Rotasi pada gambar menggunakan css3

Kamis, 18 Oktober 2012

Membuat sendiri SEO Page Optimation di Blog

About Me

Categories

Test Kode