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