blockquote
untuk berbagi kode. Walaupun sebenarnya saya lebih menganjurkan penggunaan tag pre
dibanding blockquote
. Bagi sobat yang masih setia dengan penggunaan blockquote, saya coba membuat penomoran otomatis pada Blockquote. CSS nya saya modifikasi dari tutorial DTE dalam 'membuat penomoran otomatis pada tag PRE'.Demo :
/* -- Button Style Kang Ismet-*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
Simpan kode ini di bawah ini diatas ]]></b:skin>
atau </style>
blockquote {
background-color:#eee;
font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
color:#444;
overflow:auto;
margin:0 0 1em;
padding:1em;
}
blockquote,
blockquote .line-number {
/* Ukuran line-height antara teks di dalam tag <blockquote> dan <span class="line-number"> harus sama! */
font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;
display:block;
white-space:pre;
}
blockquote .line-number {
float:left;
margin:-1em 1em -1em -1em;
text-align:right;
background-color:#f1f1f1;
color:#acacac;
padding:1em .2em 1em .2em;
border-right:1px solid #e0e0e0;
}
blockquote br {
display:none;
}
blockquote .line-number span {
display:block;
padding:0 .7em 0 1em;
}
blockquote .cl {
display:block;
clear:both;
}
Simpan kode dibawah ini di atas
</body>
<script type="text/javascript">
//<![CDATA[
var pre = document.getElementsByTagName('blockquote'),
pl = pre.length;
for (var i = 0; i < pl; i++) {
pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';
var num = pre[i].innerHTML.split(/\n/).length;
for (var j = 0; j < num; j++) {
var line_num = pre[i].getElementsByTagName('span')[0];
line_num.innerHTML += '<span>' + (j+1) + '</span>';
}
}
//]]>
</script>
Sekian Tutorial Yg Saya Berikan.Thanks Buat Kang Ismet
Pertamax Saya Colong Juga ^_^
ReplyDelete