Memasang Syntax Highlighter Untuk Pre Code

Gambar by Ficri Pebriana

Saya sudah keliling-keliling mbah google, dan baru ketemu cara memasang Syntax Highlighter di blogger ini dengan cara yang lebih simpel. Karena apa..? Karena tidak perlunya kita menentukan class pada setiap kode yang kita masukkan di blog.

Lagian pula terlalu banyak sudah kode yang saya gunakan pada artikel-artikel saya yang lainnya. Dan saya males untuk mengeditnya satu persatu. Makanya saya mencari alternatifnya dengan hanya mengandalkan tag pre dan code, atau biasa ditulis seperti berikut.

 <pre><code> Kode css, html, javascript, jquery atau yang lainnya </code></pre> 

atau bisa juga seperti ini hasilnya.

.smoothscroll-top {
  position:fixed;
  opacity:0;
  visibility:hidden;
  overflow:hidden;
  text-align:center;
  z-index:99;
  background-color:#09c;
  color:#fff;
  width:47px;
  height:44px;
  line-height:44px;
  right:25px;
  bottom:-25px;
  padding-top:2px;
  border-radius:none;
  transition:all 0.5s ease-in-out;
  transition-delay:0.2s;
}

.smoothscroll-top:hover {
  background-color:#3eb2ea;
  color:#fff;
  transition:all 0.2s ease-in-out;
  transition-delay:0s;
}

.smoothscroll-top.show {
  visibility:visible;
  cursor:pointer;
  opacity:1;
  bottom:25px;
}

.smoothscroll-top i.fa {
  line-height:inherit;
}

Itu sekalian sebagai contoh aja sobat, semua kode akan bewarna khusus, nah ini menjadi lebih terlihat profesional dan keren kan. Untuk sobat blogger yang menginginkannya, caranya cukup mudah. Sobat ikuti tutorial singkat berikut ini.

Tambahkan css berikut ini tepat diatas kode </head>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* Syntax Highlighter */
pre,i[rel="pre"] {
  padding:.8em 1em;
  margin:0;
  background-color:#2f3741;
  border-left:4px solid #40627E;
  font-size:11px;
  color:#839496;
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  line-height:1.4em;
  position:relative;
  white-space:pre;
  word-wrap:normal;
  white-space:pre;
  overflow:auto;
}

pre.line-number {
  background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixo9sjf7QFyyKt21lpbA2WxyTmBT42Mb8kucAwOU3Nk0KkeFSNhkm8Jn4sYo11fHvUzx-njv-FgOe6G3hMpgSkR4Woa0TJXysklU8b-8KQQqfTJGPxrKGN-LyQDqcCdUbEZYNX6kmy4gQ/s1600/new-line-number.png)no-repeat top left;
  padding-left:54px;
  border-left:none;
}

pre.line-number:after {
  content:"";
  width:35px;
  height:8px;
  background-color:#39424e;
  bottom:0;
  left:0;
  position:absolute;
}

pre[data-codetype="CSS"] {
  border-left-color:#5fbbba;
}

pre[data-codetype="HTML"] {
  border-left-color:#4fc1eb;
}

pre[data-codetype="JavaScript"] {
  border-left-color:#ff6c60;
}

pre[data-codetype="JQuery"] {
  border-left-color:#99c262;
}

pre.line-number[data-codetype]:before {
  content:attr(data-codetype);
  display:block;
  margin:-11px -13px 10px -54px;
  padding:8px 12px;
  font-family:Oswald,Arial,Sans-serif;
  font-size:12px;
  text-transform:uppercase;
  background-color:#41749f;
  color:white;
}

pre.line-number[data-codetype="CSS"]:before {
  background-color:#a9d86e;
}

pre.line-number[data-codetype="HTML"]:before {
  background-color:#4fc1eb;
}

pre.line-number[data-codetype="JavaScript"]:before {
  background-color:#ff6c60;
}

pre.line-number[data-codetype="JQuery"]:before {
  background-color:#99c262;
}

code {
  font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;
  font-size:13px;
  color:#d14;
}

#comments code {
  color:#bbbb6d;
}

pre code {
  padding:0 !important;
  color:#a3a49a;
  background:none !important;
  border:none !important;
  display:block;
}

pre .line-number {
  float:left;
  margin:0 1em 0 -1em;
  color:#61686d;
  background-color:#39424e;
  text-align:right;
  min-width:2.5em;
  padding-right:4px;
}

pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color:#2DCFF2;
  font-style:italic;
}

pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color:#E6D90C;
}

pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color:#EB4F4F;
}

pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
  color:#03C425;
}

pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color:#1B6FC3;
}

pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
  color:#D94CEA;
}

pre .deletion {
  color:#dc322f;
}

pre .tex .formula {
  background:#073642;
}
</style>
</b:if>

Kode CSS tersebut telah saya sesuaikan agar hanya terpanggil ketika dalam posting, jadi akan mengurangi beban blog sobat, terutama dalam hompagenya. Selanjutnya tambahkan kode dibawah ini tepat dibawah </body>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Setelah itu Simpan Template dan lihat semua kode yang telah sobat tentukan dengan tag pre dan code pasti akan memiliki warna-warna yang menarik, dan terlihat profesional kan sobat.

Karena google code sudah akan ditutup pada 2016, maka saya berikan alternatif js nya, dengan mengganti kode yang terakhir tadi dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='https://googledrive.com/host/0B_ljWXOPMwNGfkQ3MHVzcFZNN0tXSXNEb2FjQmJ2cHZ1N1BwSHlKbG8xUTg4dmpzSEN0bEU/Syntax.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
</b:if>

Semoga bermanfaat. Jika ada yang bingung sobat bisa komentar yah. O ya, tuh kode-kode saya dapatkan di blog kang Ficri Pebriana, ini alamat artikelnya. Terima kasih telah berbagi dan saya temukan di google. Kode-kode diatas sudah saya sesuaikan agar hanya terload pada postingan, sehingga tidak menambah beban homepage. :)

Read More

Membuat Back To Top Keren Di Blogger

Sebenarnya di template yang saya pakai sekarang telah ada fitur Back To Top ini sobat, namun karena saya putuskan untuk mengganti tampilan footernya, jadinya saya korbankan saja back to top dari template yang saya gunakan.

Nah, sebagai penggantinya, saya menggunakan back to top ala mbak Arlina Design. Widget ini dilengkapi dengan fitur Auto Hide, jadi hanya akan muncul ketika user scroll kebawah. Terima kasih untuk mbak arlina yang telah membagikannya.

Untuk sobat yang ingin menggunakan back to top ini yang telah saya modifikasi sedikit, sobat bisa menguikuti tutorial singkat berikut ini.

Pertama pasang Font awesome terlebih dahulu pada template sobat, jika sudah ada di dalam template, Lewati langkah ini atau ganti dengan kode yang saya berikan berikut.

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Script Font Awesome itu telah saya lengkapi dengan script yang akan meload data font awesome secara async. Jadi tidak akan membebani loading blog sobat. O ya, letakkan kode tersebut diatas kode </head>.

Selanjutnya tambahkan CSS berikut ini diatas ]]></b:skin> atau </style>.

.smoothscroll-top {position:fixed;opacity:0;visibility:hidden;overflow:hidden;text-align:center;z-index:99;background-color:#09c;color:#fff;width:47px;height:44px;line-height:44px;right:25px;bottom:-25px;padding-top:2px;border-radius:none;transition:all 0.5s ease-in-out;transition-delay:0.2s;}
.smoothscroll-top:hover {background-color:#3eb2ea;color:#fff;transition:all 0.2s ease-in-out;transition-delay:0s;}
.smoothscroll-top.show {visibility:visible;cursor:pointer;opacity:1;bottom:25px;}
.smoothscroll-top i.fa {line-height:inherit;}

Pengaturan pada warnanya hanya perlu anda perhatikan pada #09c dan ganti sesuai warna yang sobat inginkan. Setelah itu untuk mengganti warna hovernya sobat ganti pada #3eb2ea, ganti sesuai wana yang sobat inginkan, atau selaraskan dengan warna blog sobat.

Setelah itu kita masuk ke langkah terakhir sobat, tambahkan kode dibawah ini tepat diatas kode </body>.

<div class='smoothscroll-top'>
    <span class='scroll-top-inner'>
        <i class='fa fa-2x fa-chevron-up'/>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Selanjutnya jangan lupa untuk Simpan Template, dan coba lihat di blog sobat. Seharusnya sudah bersemayam back to top dibagian bawah kanan blog sobat. Semoga bermanfaat :)

Source : http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html

Read More