Home blogger Cara Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger

.dateHeader/>

Cara Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger

Tags

Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger - Kotak box html biasa 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.

Dikesempatan kali ini saya akan membahas tentang "Cara Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger", sudah banyak sebenarnya tutorial tentang membuat box ini mulai dari yang sederhana sampai yang keren. 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. untuk tutorial Cara Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger ikuti langkah-langkah berikut ini dengan teliti:

Cara Membuat Kotak Html Highlight Keren Dan Responsive Di Blogger

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 :
  /*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: &#39;Double click to selection&#39;;
    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,&#39;
    Andale Mono&#39;,&#39;Courier New&#39;,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: &#39;Code&#39;;
    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 &gt; 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 &gt; span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

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

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

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

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

pre[data-codetype=&#39;JQuery&#39;]:before {
    background-color: #e5b460;
}
4. Pastekan kode diatas tepat diatas kode ]]></b:skin>
5. Cari lagi kode </body> dengan cara menekan ctrl+f
6. Copy kode script di bawah :
 <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>
7. Kemudian pastekan tepat diatas kode </body>
8. Kemudian simpan template

Template kamu sudah dilengkapi dengan kode Kotak Html Highlight Keren Dan Responsive, 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 Blogger

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

menerapkan Kotak Html Highlight Keren Dan Responsive

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 Html Highlight Keren Dan Responsive Di Blogger" semoga bermanfaat dan jangan lupa tinggalkan komentar. baca juga : Cara Mudah Pasang Iklan Di Tengah Artikel

Artikel Terkait

Unknown

Next Post
Previous Post

1. Saya sangat Menghargai komentar kalian. Jadi, berkomentarlah sesuai dengan topik dan dengan bahasa yang SOPAN.
2. Link Aktive ahref akan terdeteksi sebagai SPAM (Bawaan Template)
3. Link Hidup akan mati secara Otomatis (Bawaan Template)
4. Dan komentar mengguakan Moderasi, jadi komentar akya saring terlebih dahulu
5. Terimakasih

EmoticonEmoticon

Subscribe to: Post Comments (Atom)