Cara Membuat Kotak Box HTML Highlight Istimewa di Blog

Membuat Kotak Box Html Highlight Istimewa Di Blogger - Kotak box html biasanya digunakan ketika kita ingin membuat tutorial tentang edit template. Untuk memisahkan kode html, css, javascript, maupun jquery tentunya harus membuat box atau kotak html agar terlihat berbeda dengan isi artikel dan bisa menyimpan bnyak tulisan .

Pada kesematan ini saya akan membahas tentang "Cara Membuat Kotak Box Html Highlight Istimewa Di Blogger", sudah banyak sebenarnya tutorial tentang membuat box ini mulai dari yang biasa-biasa saja sampai yang Istimewa. sebelum itu lihat demonya terlebih dahulu. Menarik bukan? desain yang keren membuat tampilan artikel kamu lebih profesional dari pada membuat box biasa dan terlihat kode acak-acakan. selain keren Kotak, Html Highlight ini juga resposive dengan menu scrool kebawah dan kesamping kode akan terlihat tetap rapi walaupun script html yang kamu masukan tebilang cukup melebar kesamping.


Untuk membuat tampilan box atau kotak html terlihat lebih keren dan responsive, tentunya kamu harus menambahkan beberapa kode html dan css di template blog kamu. untuk melakukan hal ini sebaiknya kamu membackup terlebih dahulu template kamu. Jika proses pengeditan terjadi kesalahan kamu bisa mengembalikan template kamu seperti semula. 

 Screenshot :

Untuk Tutorial Cara Membuat Kotak Box Html Highlight Istimewa Di Blogger ikuti langkah-langkah berikut ini ya Sob:

1. Masuk dulu ke dashboard kamu kemudian pilih template dan klik edit html
2. Cari kode ]]></b:skin> dengan cara menekan tombol ctrl+f
3. Copy script dibawah ini :
4. Pastekan kode diatas tepat diatas kode ]]></b:skin>

   /*CSS Syntax Hightler */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}   

5. Cari lagi kode </body> dengan cara menekan ctrl+f
6. Copy kode script di bawah :
7. Kemudian pastekan tepat diatas kode </body>

  <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),10)-1)}e.element.appendChild(r)})
</script>

 <script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>  

8. Kemudian simpan template

"Untuk menerapkan kode tersebut kamu hanya harus menyisipkan salah satu kode dibawah disaat membuat artikel. untuk setiap kode css, html, javascript, dan jquery berbeda-beda, kamu bisa pilih salah satu sesuai dengan kode yang akan kamu tampilkan. untuk kodenya lihat dibawah."

*Untuk Kode Html :

   <pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre>   

*Untuk Css :

  <pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre> 

*Untuk Javascript:

  <pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> Taruh Script Java Script Di Sini </code></pre>  

*Untuk JQuery :

 <pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre> 

"Cara menerapkan Kotak Html Highlight Keren Dan Responsive Di BloggerKetika membuat artikel, untuk menerapkan kotak html kamu hanya tinggal menyisipkan kode tersebut dimenu HTML untuk lebih jelasnya lihat contoh gambar dibawah"

Kembali lagi ke menu compose dan ganti tulisan "ganti kode css/javascript/html/JQuery disini" dengan kode html kamu. lakukan hal tersebut setiap membuat kotak html di artikel kamu. 

Sekian artikel tentang "Cara Membuat Kotak Box Html Highlight Istimewa Di Blogger" semoga bermanfaat dan jangan lupa tinggalkan komentar.