WIDGET ini sudah tak asing lagi di blog tutorial .
90% memakai widget ini dengan tipe yg berbeda beda .
moga dengan cara ini wawasan kalian tentang menggabung beberapa jenis widget yang sama makin bertambah .
cuma iseng iseng memodifikasi widget syntax dengan beberapa widget yg serupa.
bila kalian berminat ikuti saja petunjuk selanjutnya.
namun sebelum itu , lihat dulu hasil perubahan di bagian pembungkus <div........
nah , kalian ubah style nya di seputaran itu .
karna tipe font awesome ada beberapa , di antaranya ada yang memakai fa dan juga icon , alangkah baiknya kalian memasang beberapa link rell nya.
ini beberapa link alternatif yang bisa kalian gunakan :
<link href='//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>
<link href='path/to/bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>
<link href='path/to/font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
mau pasang semuanya , silahkan.
pre {
position:relative}
pre .c_b {
display:block;
position:absolute;
top:0px;
right:0;
padding:2px 0px;
}
<script type='text/javascript'>
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('pre');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');"><button class="btn btn-inverse btn-small">copy <i class="icon-folder-open"></i></button></a>';
}
} add_copy_button();
//]]>
</script>
<style>
pre code {
display: block; padding: 0.5em;
background: #272822;
}
pre .tag,
pre .tag .title,
pre .keyword,
pre .literal,
pre .change,
pre .winutils,
pre .flow,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title,
pre .tex .special {
color: #F92672;
}
pre code {
color: #DDD;
}
pre code .constant {
color: #66D9EF;
}
pre .class .title {
color: white;
}
pre .attribute,
pre .symbol,
pre .symbol .string,
pre .value,
pre .regexp {
color: #BF79DB;
}
pre .tag .value,
pre .string,
pre .subst,
pre .title,
pre .haskell .type,
pre .preprocessor,
pre .ruby .class .parent,
pre .built_in,
pre .sql .aggregate,
pre .django .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .javadoc,
pre .django .filter .argument,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .attr_selector,
pre .pseudo,
pre .addition,
pre .stream,
pre .envvar,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .prompt {
color: #A6E22E;
}
pre .comment,
pre .java .annotation,
pre .python .decorator,
pre .template_comment,
pre .pi,
pre .doctype,
pre .deletion,
pre .shebang,
pre .apache .sqbracket,
pre .tex .formula {
color: #75715E;
}pre .keyword,
pre .literal,
pre .css .id,
pre .phpdoc,
pre .title,
pre .haskell .type,
pre .vbscript .built_in,
pre .sql .aggregate,
pre .rsl .built_in,
pre .smalltalk .class,
pre .diff .header,
pre .chunk,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .tex .special,
pre .request,
pre .status {
font-weight: bold;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
opacity: 0.5;
}
pre {position:relative}
pre .c_b {
display:block;
position:absolute;
top:0;
right:0;
padding:2px 5px;
}
</style>
<script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<div style="background: #2c3e50; border-radius:10px 10px 0px 0;padding: 10px; text-align: center;">
<b><span style="color: #cccccc;">contoh CSS [pakai css mentah], maksudnya jangan tambah <style>
</span></b></div>
<div style="background: transparent; border: 1px solid #2c3e50; padding: 10px; text-align: left;">
<pre><code>
------kode-------
</code></pre>
</div>
font awedome
boostrap
dte.web.id
problogiz.blogspot.com
referensi-blog.blogspot.com
0 Comments:
Posting Komentar