Beginilah Cara Membuat Kotak HTML Pada Postingan Blog Seperti Arlina


Beginilah Cara Membuat Kotak HTML Pada Postingan Blog Seperti Arlina Design. Mungkin saja Anda pernah jalan-jalan ke blog master Arlina Design, biasanya ketika memberikan tutorial mengenai tips blogger disana akan ada sebuah kotak HTML yang mungkin saja bagi yang belum tahu itu merupakan blockquote yang sudah di modifikasi.

Namun ternyata bukan, kotak yang dimaksud merupakan Syntax Highlighter.

Syntax Highlighter merupakan fitur khusus untuk sebuah pemindahan kode bahasa pemrograman dengan warna, tulisan, teks, posisi yang sama persi dengan yang terdapat pada kode bahasa pemrograman untuk dapat di pindahkan maupun di salin supaya lebih mudah dalam membaca kode-kode tersebut dan mempelajarinya

Fitur ini sangat cocok bagi para webmaster yang membahas mengenai tutorial pemrograman, seperti PHP, HTML, JavaScript, Jquery dan yang lainnya, agar pengunjung dapat dengan mudah membaca kode tersebut untuk di pelajari.

Syntax Highlighter hampir sama dengan fitur blockquote, tetapi kalau untuk blockquote hanya memiliki satu warna saja. Untuk dapat merubah kode warna apabila menggunakan fitur blockquote harus dilakukan dengan cara manual ketika Anda membuat postingan blog.

Dengan penerapan fitur syntax tersebut dapat memudahkan pembaca dalam mengenal jenis kode yang di berikan oleh penulis. Selain daripada itu penggunaan Syntax Highlighter akan lebih meningkatkan efek profesional pada tampilan blog yang Anda kelola

Kesimpulannya fitur Syntax Highlighter akan sangat efektif dalam proses pembuatan atau pemindahannya bila kita bandingkan dengan fitur blockquote, selain tampilannya yang enak di pandang fitur Syntax Highlighter ini juga dilengkapi dengan fungsi scrol.

alt="cara membuat kotak HTML seperti arlina design"

Cara Membuat Kotak HTML Pada Postingan Blog Seperti Arlina

Untuk dapat menggunakan fitur Syntax Highlighter ini silahkan Anda ikuti tutorial yang saya berikan

1. login ke Blogger.com > Template > Edit HTML

2. Silahkan cari kode </style> dan kemudian simpan kode dibawah ini sebelum kode </style>

/* CSS Prism Syntax Highlighter */
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='CSSku']:before{background-color:#00a1d6}
pre[data-codetype='HTMLku']:before{background-color:#3cc888}
pre[data-codetype='JavaScriptku']:before{background-color:#75d6d0}
pre[data-codetype='JQueryku']:before{background-color:#e5b460}

Kemudian simpan tiga kode dibawah ini sebelum </body> atau </head>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/cab7a72d/prisma.js' type='text/javascript'/>

<script>

$('pre').attr('class', 'line-numbers');

Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),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>

Kemudian Simpan Template

Pada tahap ini Anda sudah selesai menambahkan beberapa kode pada HTML, selanjutnya untuk melakukan terapkan kode pemanggil dibawah ini markup HTML di postingan blog Anda

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>  

Selesai, demikian Cara Membuat Kotak HTML Pada Postingan Blog Seperti Arlina yang dapat saya share. Jika ada yang kurang paham silahkan untuk dapat di tanyakan pada kolom komentar.

2 Comments