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

Free Download Script Macro Point Blank Garena Indonesia (LENGKAP)

Kumpulan script Macro Point Blank Garena Indonesia, Jika sobat punya mouse macro X7 (versi apapun) pakai lah kumpulan script macro dibawah ini, biar sobat tidak terlalu kesusahn dalam menghadapi penuhnya server (Script Auto Refresh). Tapi disini mimin punya mouse X7 bukan seri Spider. akan tetapi script macronya work 100%, nah buat sobat yang gak tau itu script macro mimin bakalan jelasin. Script macro adalah kumpulan script Mouse yang isinya adalah tombol yang sudah disesuaikan dalam kondisi tertentu, Contohnya: seperti bermain Shoutgan, jika ingin tanpa kokang harus Tekan tombol Q or 3/1 kan?, Namun berbeda jika sobat sudah memakai script. Sobat hanya perlu menekan 1 tombol yang sudah ditanam scipt ke mouse sobat maka script akan bekerja dengan sendiri dan membuat Shoutgan sobat tanpa kokang (Quick Change) tanpa perlu lagi menggunakan Q or 3/1. Script AUG all Series Media Fire Tusfiles Solidfiles Script diatas khusus untuk senjata AUG all series Script P90 All Series Med...
Baca selengkapnya

Cara Baru Menghubungkan Blog dengan Fanspage Facebook

  Menghubungkan facebook dengan blog sangat besar sekali manfaatnya, tidak ada yang saling dirugikan dan timpang karena memang keduanya sama sama saling melengkapi dan menduung. Facebook sebagai jejaring sosial nomor wahid di dunia akan senantiasa membawaan tambahan trafiik bagi blog anda, sedangkan facebook akan menjadi ramai dan sebagai forum diskusi sendiri bagi anda dan pengunjung blog. lalu bagaimana Cara baru menghubungkan blog dengan fanspage facebook? berikut dibawah ini akan saya jelasan. tapi tolong siapkan dahulu fanspagenya ya sebelum memulai langkah ini, jika belum punya, lihat Cara Baru Membuat Fanspage Facebook yang pernah saya posting. Cara baru menghubungkan blog dengan fanspage facebook 1. Yang pertama harus anda lakukan tentu saja “log in / masuk ke akun Facebook ” anda 2. kemudian kunjungi alamat “ RSS grafiti ” hxxp://beta.rssgraffiti.com 3. Setelah keluar halaman seperti dibawah ini, klik “Add New Publishing Plan” ...
Baca selengkapnya

Cara Mengatasi Virus Windows Media Center

 Selamat Membaca Postingan " Cara Mengatasi Virus Windows Media Center " Windows Media Center adalah aplikasi yang diciptakan untuk kegunaan pusat hiburan rumah. Windows Media Center dimasukkan ke Windows XP Media Center Edition, edisi-edisi premium Windows Vista (Vista Home Premium dan Ultimate), Windows 7 (Home Premium, Professional, Enterprise, dan Ultimate), dan Windows 8. Dapat digunakan dengan remote control tetapi dapat digunakan dengan tetikus dan keyboard. Windows Media Center menayangkan gambar-gambar, video-video, dan musik pengguna komputer dari cakram keras, cakram padat, dan jaringan lokal. Sejarah : Pada awalnya Windows Media Center diberi nama "Freestyle" selama pengembangannya. Windows Media Center pertama kali dipaketkan dengan edisi khusus Windows XP yang disebut Windows XP Media Center Edition. Sebuah versi baru dari Windows Media Center dimasukkan ke dalam Windows Vista edisi Home Premium dan Ultimate. User Interface dari Windows Me...
Baca selengkapnya