Posted by : Jody Baharizki Friday, October 11, 2013

Anda ingin membuat tutorial Web, Aplikasi Desktop, Aplikasi Mobile ? tapi bingung gimana cara kasi tutorialnya ? tenang bro sist, sekarang saya akan berbagi sedikit ilmu tentang bagaimana menampilkan script di postingan blog kalian, nama kerennya sih HIGHLIGHTER

Tapi disini saya namakan " cara menampilkan script di postingan blog " biar lebih merakyat.
Yuk cek caranya, diikuti baik-baik pasti berhasil kok

Masuk ke admin blogger anda, kemudian pilih edit template dan pilih Edit HTML.


Berikutnya tekan CTRL + F pada kolom editor dan cari kode ]]></b:skin>


Kemudian diatas ]]></b:skin> letakan script berikut ini :

   
/*

Style with support for rainbow parens

*/

pre ::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
pre ::selection { background:#FF5E99; color:#fff; text-shadow: none; }

pre code {
  display: block; padding: 0.5em;
  background: #474949; color: #D1D9E1;
}
pre .body,
pre .collection {
   color: #D1D9E1;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .lisp .string,
pre .javadoc {
  color: #969896;
  font-style: italic;
}

pre .keyword,
pre .clojure .attribute,
pre .winutils,
pre .javascript .title,
pre .addition,
pre .css .tag {
  color: #cc99cc;
}

pre .number { color: #f99157; }

pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #8abeb7;
}

pre .title,
pre .localvars,
pre .function .title,
pre .chunk,
pre .decorator,
pre .built_in,
pre .lisp .title,
pre .identifier
{
  color: #b5bd68;
}

pre .class .keyword
{
  color: #f2777a;
}

pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .label,
pre .id,
pre .lisp .title,
pre .clojure .title .built_in {
   color: #ffcc66;
}

pre .tag .title,
pre .rules .property,
pre .django .tag .keyword,
pre .clojure .title .built_in {
  font-weight: bold;
}

pre .attribute,
pre .clojure .title {
  color: #81a2be;
}

pre .preprocessor,
pre .pi,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata {
  color: #f99157;
}

pre .deletion {
  color: #dc322f;
}

pre .tex .formula {
  background: #eee8d5;
} 

Langkah selanjutnya dengan menambahkan script di atas tag </head>

script src="https://problogizjs.googlecode.com/files/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Oke, setelah semua langkah telah kalian ikuti klik  simpan template .
Sekarang tata cara penulisan script yang akan kalian tampilkan. Buka tab  compose 
Kemudian tulislah scrit html/css/jquery/javascript kamu.
Setelah itu klik tab   HTML 
Tambahkan script  berikut ini sebagai penutup dari script yg kalian posting
 <pre><code> ..script kamu.. </code></pre>

<pre><code>
isi script kalian ...
bisa HTML, PHP, CI, JQuery, Javascript, dll
</code></pre>

Nah, setelah langkah terakhir dicoba sekarang coba publish postingan kamu, dan lihat hasilnya...
jika ada pertanyaan atau saran langsung aja kometar di bawah ya


@jodybaharizki

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Psang Iklan?

Psang Iklan?
Klik gambar diatas

Like Us!

Youtube

\
\

Labels

Powered by Blogger.

Total Pageviews

- Copyright © 2016 Jody Baharizki -@jodybaharizki- Powered by Blogger -