Langsung ke konten utama

Cara Membuat Kotak HTML Highlight di Blog

CARA MEMBUAT KOTAK HTML HIGHLIGHT DI BLOG / CARA MEMBUAT CLICK TO SELECT ALL - untuk membuat blog lebih rapi / tertata lebih baik, fz saran kan untuk membuat kotak HTML Highligt ini gunanya adalah untuk meminimalisir ruang script/teks yang sobat sudah siapkan untuk blog sobat sekalian, selain itu pengunjung akan lebih mudah dalam hal meng-copy script yang sudah sobat siapkan untuk blog sobat, dengan double-click maka script/teks yang ada di kolom (seperti digambar) akan mem-block teks yang ada dikolom tersebut, dan pengunjung hanya tinggal menekan CTRL + C atau dengan click kanan lalu "Copy".

Jika sobat ingin menggunakanya, silahkan ikuti tutorial dibawah ini dengan benar :
  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.   /*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;
}
  4. Pastekan kode diatas tepat diatas kode ]]></b:skin>
  5. Cari lagi kode </body> dengan cara menekan CTRL+F
  6. Lalu copy kode script di bawah :
    7.  <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. Lalu Save / Simpan Template
Tamplate sobat telah dilengkapi oleh CSS dari kotak highlight ini, nah sekarang cara penerapannya di postingan blog sobat.

Code untuk HTML :
<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> Taruh Script HTML Di Sini </code></pre>
Code untuk CSS :
<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> Taruh Script CSS Di Sini </code></pre>
Code 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>
Code untuk JQuery :
<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> Taruh Script JQuery Di Sini </code></pre>

Kembali lagi ke Menu Compose, dan ganti Teks "Taruh Script CSS Di Sini" dengan script yang sudah sobat buat untuk postingan sobat. lakukan hal yang sama jika mau menggunakan kotak HTML ini. sekian dari postingan ini "Cara Membuat Kotak HTML Highlight di Blog" Semoga bermanfaat bagi kita semua.
Label:

Postingan populer dari blog ini

Cheat Everwing 2018 Terbaru Indonesia

Cheat Everwing 2018 Terbaru Indonesia -  EverWing adalah sebuah game tembak bergerak vertikal yang diciptakan oleh Blackstorm Labs. Game ini dirilis di Facebook Messenger sebagai game instan. Dasar game ini adalah para Guardians, dragon Sidekicks, yang bertarung melawan monster dan bos monster untuk merebut kembali kerajaan mereka. Untuk menggunakan cheat everwing 2018 ini sobat harus menggunakan browser Chrome (Khusus Chrome) untuk browser lain nanti akan kami update kedepannya. Nah berikut adalah tutorial cara download cheat Everwing 2018 : Buka Browser Chrome Sobat (Khusus Chrome!) Klik link berikut : https://chrome.google.com/webstore/detail/everwing-hacks/fbingkbgnhkfpmffjiekekmedohpmfef Lalu sobat klik  + Add To Chrome seperti gambar dibawah ini Jika sobat sudah klik +ADD TO CHROME , maka akan ada Pesan seperti gambar dibawah ini. lalu klik Add extension klik gambar H dibagian pojok kanan atas chrome sobat, seperti gambar dibawah ini ini lah tam...
Baca selengkapnya

7 Game Booster Android Terbaik 2018

Sobat yang mempunyai smartphone ber-spesifikasi pas-pasan mungkin sering mengalami lag atau lemot ketika sedang bermain game online maupun offline. Hal ini sangat mengganggu sekali bukan?. jika di tengah permainan malah mengalami hal paling menyebalkan ini. Untuk mengatasi hal tersebut ada beberapa cara yang bisa sobat gunakan. Salah satunya adalah menggunakan aplikasi game booster. Game Booster merupakan sebuah aplikasi yang bisa sobat gunakan untuk memberikan kenyamanan saat sobat bermain game. Aplikasi ini akan mengatur sistem operasi hingga dapat memberikan performa yang maksimal ketika bermain game. 7 Game Booster Android Terbaik: 1. Swift Gamer Swift Gamer dibuat oleh Miva Mobile . Aplikasi ini mempunyai fitur yang sangat lengkap seperti Device Cooler, Game Protect Mode, Realtitme network, Network protect, Auto clean, Auto manage games, Save battery  Ada juga fitur Child Lock yang sangat bermanfaat untuk membatasi anak bermain game yang terlalu lama. Cara kerj...
Baca selengkapnya

Lirik Lagu Deen Assalam (Agama Perdamaian)

Lirik Lagu Deen Assalam (Agama Perdamaian) Judul : Deen Assalam Dipopulerkan Oleh : Sulaiman Al-Mughni Lirik Dan Terjemahan : Deen Assalam   كَلَّ هَذِى الاَرْضِ مَاتَكْفِيْ مَسَاحَةْ Kalla hadzil ard mataqfii masahah لَوْ نَعِيْشِ بِلَاسَمَاحَةْ lau na’isibila samahah وَانْ تَعَا يَشْنَا بِحَبْ Wanta’ayasna bihab لَوْ تَضِيْقِ الاَرْضِ نَسْكَنْ كَلَّ قَلْبْ lau tadiqil ardi naskan kalla kolb اَبْتَحِيَةْ وَبْسَلَامْ Abtahiyyat wabsalam اَنْشُرُوْا اَحْلَى الْكَلَامْ زَيْنُوْا الدِّنْيَا حْتِرَامْ ansyuru ahlal kalam jainuddin yahtirom اَبْمَحَبَّةْ وَابْتِسَامْ Abmahabbat wabtisam ااَنْشُرُوْا بَيْنِ الاَنَامْ هَذَا هُوْا ديْنَ السَّلَامْ  ansyuru bainil anam hadahu din assalam Terjemahan Lirik Lagu Deen Assalam Agama Perdamaian Seluruh bumi ini akan terasa sempit jika kita hidup tanpa toleransi namun jika hidup dengan perasaan cinta meski bumi sempit kita kan bahagia melalui perlaku mulia dan damai sebarkanlah ucapan y...
Baca selengkapnya