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

Posisi Jquery Untuk Mengatasi Render Blocking Javascript

Saya telah lama mencari solusi rendering JS yang dipengaruhi oleh jquery. Karena rendering dari jquery ini sangat lumayan membebani loading blog. Saya pernah mencoba cara dengan dengan menambahkan atribut async='async' seperti berikut.

<script async='async' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Namun ini memiliki kelemahan, karena jquery tidak terload di hompage, seperti sudah dijelaskan di blog teman saya obesitystrike.blogspot.com cara ini tidaklah efektif.

Cara lainnya adalah dengan meletakkan script jquery yang biasa diletakkan diatas </head>
kita letakkan diatas </body>  seperti berikut.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>
</body>

Yang perlu diperhatikan dengan cara ini ialah, tidak semua script jquery itu bisa dibungkus dengan //<![CDATA[ hingga //]]>, jadi bisa Anda perhatikan dan sesuaikan dengan scriptnya agar bisa berjalan dengan baik.

Penampakan yang saya maksud ialah seperti ini.

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>
<script type='text/javascript'>
//<![CDATA[

<!-- Semua Script Jquery disini -->

//]]>
</script>

<script type='text/javascript'>

<!-- Semua Script Jquery Lainnya disini -->

</script>
</body>

Yang perlu diingaat ialah semua script yang memerlukan jquery itu harus berada dibawah script jquery <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/> seperti yang telah saya gambarkan pada rangkaian kode diatas.

Untuk mengetahui script jquery biasanya akan mirip seperti berikut ini.

$(function (){// TinyNav.js 1
      $('#topnav').tinyNav({active:'current'});// TinyNav.js 2
      $('#navigation').tinyNav({active:'current'})});

Atau tanda yang paling nyata adalah selalu diawali dengan $ pada scriptnya. Jika Anda menggunakan external link pada sebuah script, maka Anda perlu membuka scriptnya dan lihat pakah benar itu script jquery dengan melihat ciri-cirinya. Semoga bermanfaat.. ^_^

Read More

Membuat Author Box Dibawah Posting

Author box ini saya temukan di template mbak Arlina yang New Minima Colored, saya tertarik memasangnya pada template fastestmagz yang saya gunakan, dan akhirnya berhasil juga hanya dengan copy beberapa bagian aja, serta edit dikit jadi deh.

Baiklah untuk Anda yang menginkan memasang Author Box ini, bisa mengikuti tutorial singkat saya berikut ini, dan jika anda mengalami kesulitan dalam pemasangan widged ini bisa berkomentar dan akan saya bantu sebisa dan semampu saya.

Pertama tambahkan CSS berikut ini diatas </head> pada edit HTML.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* CSS Multi Author Box By Arlina Design */
.authorboxwrap {
  background:#f9f9f9;
  margin:-15px 0 25px 0;
  padding:20px;
  overflow:hidden;
  border:1px solid #e6e6e6;
}

.avatar-container {
  float:left;
  margin-right:20px;
}

.avatar-container img {
  background:#fff;
  width:90px;
  height:auto;
  padding:5px;
  border:1px solid #ccc;
}

.author_description_container {}

.author_description_container h4 {
  font-weight:600;
  font-size:16px;
  display:block;
  margin-bottom:10px;
}

.author_description_container h4 a {
  font-family:Oswald,arial;
  border-bottom:1px solid #0099cc;
  text-transform:capitalize;
  color:#333;
}

.author_description_container p {
  font-size:12px;
  line-height:1.6;
  margin-bottom:15px;
}

.authorsocial a {
  display:inline-block;
  text-align:center;
  float:left;
  margin-right:2px;
}

.authorsocial a i {
  width:30px;
  height:30px;
  padding:8px 9px;
  display:block;
  background:#E9E9E9 !important;
  color:#555;
}
</style>
</b:if>

Seperti biasa, saya pasti sisipkan tag kondisional agar hanya terpanggil dibagian posting saja sehingga tidak akan membebani pada bagian homepage. Dan selanjutnya Anda bisa mencari kode persis seperti berikut :

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Dan tambahkan kode berikut ini tepat dibawah kode yang Anda temukan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a expr:alt='data:post.author'>
<img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/></a></div>
<div class='author_description_container'>
<h4><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span></a></h4>
<p>
Hanya seorang blogger biasa yang gemar menulis dan curhat tentang pengalaman hidup, serta belajar segala hal yang bermanfaat, dan terus memperbaiki diri.       
</p></div></div></div>
</b:if>
<!-- url : http://competitivgrace.blogspot.com
Author box Simpel By Arlina Deign
Share & Edited by Iwan Efendi -->

Selanjutnya Anda hanya perlu mengganti yang saya beri tanda merah itu dengan deskripsi yang anda inginkan. Sebenarnya dengan kode dari mbak Arlina telah di setting otomatis untuk deskripsinya, namun karena kadang nggak muncul, saya lebih memilih untuk memasukkannya secara manual sesuai keinginan saya sendiri.

Untuk yang lainnya sudah diset otomatis mengikuti profile g+ kita masing-masing. Setelah semuanya selesai Simpan Template lalu lihat hasilnya. Sangat mudah bukan? Semoga bermanfaat.

Read More

Mengatasi Article lacks heading Validasi HTML5

Saya beberapa hari ini sibuk mempelajari membuat blog menjadi lebih ringan, dan sekali gus belajar validasi HTML5 dengan panduan http://validator.w3.org/. Saya hanya ingin mendokumentasikan apa yang saya coba aja sobat, karena siapa tahu ada sobat blogger yang membutuhkannya juga. Saya cuma penasaran aja mengatasi warning ini sobat, karena sebetulnya validasi HTML5 ini tidak begitu penting, karena googlepun tidak valid html5 dan cenderung banyak errornya. Karena menurut saya, pak google ingin mesin pencarinya bisa diakses dengan baik oleh browser yang belum valid html5, tentunya ini akan sangat menguntungkan pihak google.

Error ini secara penuh akan tertulis seperti berikut:

Article lacks heading. Consider using h2-h6 elements to add identifying headings to all articles.

Untuk mengatasinya sobat bisa mencari sumber warning ini di Dashboard > Template > Edit HTML dan gunakan ctrl+f untuk memudahkan pencarian, nah pada kasus ini yang warning adalah bagian berikut ini (mungkin bagian error di template sobat berbeda).

<article id='posting'> 
....
.... 
....
</article> 

Nah, yang membuat warning itu adalah elemen article itu sobat, karena seharusnya menggunakan elemen div untuk valid html5. Jadi seharusnya seperti berikut ini.

<div id='posting'> 
....
.... 
....
</div> 

Setelah itu, coba sobat cek di http://validator.w3.org/, apakah warningnya sudah hilang sobat? Karena yang saya sudah hilang warningnya, walaupun di template sobat berbeda, yang jelas elemnnya tidak bisa kita ganti, dan harus menggunakan setandar html5, dengan kasus ini yaitu elemen <article> ... </article> menjadi <div> ... </div>.

Sekian artikel tentang Mengatasi Article lacks heading Validasi HTML5, yang perlu sobat tahu Saya ini menggunakan template mas sugeng, dan saya berencana tidak akan ganti template lagi, palingan hanya designnya aja yang akan berubah. Semoga bermanfaat. ^_^

Read More