Auto Block Pada Tag Code

Setelah iseng-iseng ganti template dan ngerombak total template yang dulu pernah saya buat, akhirnya bisa menyempatkan diri buat update tutorial di blog ini. Tadi abis jalan-jalan ke blog tempat saya nyolong minta ilmu, tepatnya di blog DTE :] dan Koderator.

Nah tadi pas nyemplung ke blog Koderator nemu tutorial untuk Auto Block Pada Tag Code, nah daripada blog saya gak update saya colong posting ulang tutorialnya di blog saya.

Bagi blogger yang isi blognya berupa tutorial-tutorial tentang web design pasti sudah tidak asing lagi dengan tag code ini. Biasanya pada penulisan CSS yang panjang mereka membalut dengan tag pre, sehingga menjadi <pre>kode ditulis di sini</pre>.
Tapi jika hanya menulis kode yang pendek maka lebih sering menggunakan tag code saja sehingga terlihat seperti ini <code>kode pendek di sini</code>. Untuk lebih jelasnya lihat contoh di berikut saja.

Contoh penggunaan tag pre

 .cloud-label-widget-content {font-size:11px;background:#111; padding:10px; border:solid 1px #dedede;-moz-border-radius-bottomleft:3px; -moz-border-radius-bottomright:3px; -moz-border-radius-topleft:3px; -moz-border-radius-topright:3px;}
.label-size-1 a:hover, .label-size-2 a:hover, .label-size-3 a:hover, .label-size-4 a:hover, .label-size-5 a:hover { color:#333; text-decoration:none; }
.label-size a:hover{border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px; background-color:#17d; color:#333; padding:2px 2px 2px 2px;text-decoration:none;}
.label-size a{padding:2px 2px 2px 2px}

<b:skin>

Jika sobat ingin menerapkan Auto Block Pada Tag Code di blog sobat, silahkan ikuti langkah-langkah berikut.

Masuk ke edit template dan cari kode ]]></b:skin> , lalu tambahkan baris CSS berikut sebelum kode tersebut.

code {
font:normal 12px/14px Monaco,Monospace;
background:rgba(255,255,255,.4);;
border:1px solid #eee;
padding:1px;
cursor:default;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}

Lalu tambahkan Javascript berikut sebelum </head>

    <script type='text/javascript'>
    $(function() {
        $('code').click(function() {
            var refNode = $(this)[0];
            if($.browser.msie) {
                var range = document.body.createTextRange();
                range.moveToElementText(refNode);
                range.select();
            } else if($.browser.mozilla || $.browser.opera) {
                var selection = window.getSelection();
                var range = document.createRange();
                range.selectNodeContents(refNode);
                selection.removeAllRanges();
                selection.addRange(range);
            } else if($.browser.safari) {
                var selection = window.getSelection();
                selection.setBaseAndExtent(refNode, 0, refNode, 1);
            }
        });
    });
    </script>

Kemudian simpan template sobat.

Sumber Auto Block Pada tag Code