Hentongerz

Notifikasi Komentar Ala Google+ Plus Keren

2015-04-05T04:14:00.000-07:00

Notifikasi Komentar ala Google Plus

Jumpa lagi bro, ini ane mau posting 'Cara Membuat Notifikasi Komentar ala Google Plus', ini ada hubungannya juga dengan 'Notifikasi ala Kang Ismet ( Keren )'. Tapi, Notifikasi ala Google Plus ini adalah yang utama / dasarnya, sebelum menjadi Notifikasi ala Kang Ismet. Untuk yang lebih keren, silahkan kunjungi > Notifikasi ala Kang Ismet <.

Tutorial Instalasi

Biasakan Login Blogger.
Pergi ke Template > HTML.
Copy + Paste kode JQuery berikut, diatas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Jika sudah mempunyai JQuery di blog ente, lewatin langkah diatas.

Selanjutnya, simpan kode CSS berikut, diatas kode ></b:skin> atau </style>

/* Notifikasi Komentar
----------------------------------------------- */
#cm-total {
  position:fixed;
  top:14px;
  right:0;
  width:188px;
  text-align:left;
  z-index:9999;
  cursor:pointer;
}
.total-counter {
  background-color:#d11919;
  color:white;
  padding:1px 4px;
  font-family:Arial,Sans-serif;
  font-size:11px;
  border-radius:5px;
  font-weight:bold;
}
#notif {
  position:fixed;
  top:20px;
  right:180px;
  z-index:9999;
  height:22px;
  width:19px;
  opacity:.4;
  cursor:pointer;
}
#notif:hover {
  opacity:1;
}
.close-notif {
  position:fixed;
  top:92px;
  right:20px;
  z-index:9999;
  cursor:pointer;
  display:none;
}
#cm-container {
  width:355px;
  position:fixed;
  top:67px;
  right:0;
  z-index:9999;
  background-color:#e5e5e5;
  padding:60px 20px 10px 20px;
  color:#666;
  box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important;
  text-align:left;
  border:1px solid rgba(0,0,0,.2);
  background-clip:padding-box;
  display:none;
}
#cm-container:before {
  content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj60KN13VLLBnLi2UcMhBAetjFO68w3CTEE-Lj_HFBl0IcjZKCVNXslD5F4lkFsEs94fLBTYCfCbXyt1E0JDmviV_jZcX6ZQt3nUHSvDmoUjlmGab7B4p-29SgPhZmZy_mWuTtzz716R1M/s1600/arrow-notif.png');
  position:absolute;
  top:-14px;
  left:196px;
}
#cm-container:after {
  content:"Komentar Terbaru";
  position:absolute;
  top:22px;
  left:150px;
  text-align:center;
  font:normal 14px Arial;
  color:#333;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
  font:normal 12px Arial;
}
.cm-outer ul{
  margin-bottom:5px;
}
.cm-outer li {
  padding:9px 10px 14px;
  list-style:none;
  clear:both;
  position:relative;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  background-color: white;
  margin-bottom:10px;
}
.cm-text {color:#797979;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;}
.cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold}
.cm-header a:hover {color:#74a2c3;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:90px}
.cm-outer img {
  display:block;
  float:left;
  background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-763N9TBAn94b6Gsk5r-WLweZscOwRR8eZPodKFZG3unI3DfGanJm7YRRYyZbeV1oL0olTvBaJAbR6IZcKdqSti2X2nsUC7VVnDP4u2BwOi4ovARc1y0AP666sdthXQUNdMg-TBghLxs/s1600/anon80.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:3px 0 0 3px;
  position:absolute;
  top:0;
  left:0;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#5886a7;text-decoration:none;}
.cm-footer a:hover {color:#74a2c3;text-decoration:none;}
div.cm-header img[src=&#39;http://img1.blogblog.com/img/openid16-rounded.gif&#39;] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

Simpan kode berikut, diatas kode </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6p3JOqQZ-65wk980xhvBO-QFUREDYuj_hP7gXN2pEs2QQle2xoESbLO5soSvvXv1kjdfZS0s-KuLZYJ6EjI_wbYiI3iXj_hkYMacZt-kyOv_8t1XBGHxmq2CnLzdGvntEwJSYWBJuddM/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXZOxwYUq8BviiKFplbDrO13uBMVc-fYJRSemAl7rp373dAaiZ2niZDJlHYAWMbuKsOSRK0AAFj91GZOSSWOeVQ-sX4_w5HbNvuq1QOzInewybTe5GCNUY-mSoM2vcVm-U8kHgVOxRxzA/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://hentongsekai.blogspot.com",
    max_result: 6,
    t_w: 80,
    t_h: 80,
    summary: 40,
    new_tab_link: true,
    ct_id: "cm-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();};
//]]>
</script>
<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Untuk memindahkan posisi CSS, silahkan pelajari di artikel berikut > CSS Position dan Value <
Berikut ini Demo :

Cara Pasang Meta Tag Super SEO Friendly Maknyuss 100%

2015-04-04T12:32:00.000-07:00

Meta Tag Seo Friendly

Sebelum melangkah bagaimana cara pemasangan Meta Tag, ada baiknya kita bahas apa itu Meta Tag dan untuk apa mesti repot-repot pasang di blog.

Meta Tag : adalah keterangan dari suatu halaman berdasarkan dari kalimat artikel postingan anda, elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web.
Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain tanpa “head”.

Meta Tag Description : Meta tag description digunakan untuk memberikan gambaran umum mengenai isi dari halaman web Anda. Ukurannya disarankan tidak lebih dari 200 karakter. Dan usahakan agar description ini bisa menjadi kalimat-kalimat yang letaknya di awal halaman web page yang bersangkutan. Contoh penulisan meta tag description adalah sebagai berikut :

<meta name="description" content=" Blogging, Tempat Download, Dan Lain-lain.">

Meta Tag Robots Tujuan utama penggunaan meta tag robots adalah untuk menentukan halaman web yang mana bisa di-index oleh spider dan halaman web mana yang tidak. Tag ini sangat berguna sekali terutama jika seuatu website memakai frame untuk navigasinya. Tentunya kita tidak ingin menampilkan menu-menu dalam frame untuk dibaca oleh search engine.

Format dasar dari meta tag robots adalah sebagai berikut :

<meta name="robots" content="index | noindex | follow | nofollow">

Sebagai contoh, jika Anda ingin agar spider membaca main page, dan menelusuri semua link yang ada maka tambahkan perintah berikut ini :

<meta name="robots" content="index follow">

Dengan perintah ini spider akan meng-index main page Anda dan menjadwalkan untuk mengindex halaman-halaman lain yang bisa dicari melalui hyperlink (<a href="">).

Perintah berikut ini akan menginstruksikan agar spider tidak meng-index maupun menelusuri link yang ada pada suatu halaman web.

<meta name="robots" content="noindex nofollow">

Oke Anda sudah Cukup paham bukan dengan Meta Tag, jika belum silahkan baca ulang lagi, dan jika ga mau pening silahkan lanjut saja pada prakteknya.

Lalu Bagaimana Cara Pasang Meta Tag Super SEO Friendly Maknyuss 100%? Silahkan sobat ikuti langkah-langkah dibawah ini :

Sebelumnya kita lihat dulu Meta Tag bawaan Blogspot seperti pada gambar di bawah ini :

Penampakan META TAG bawaan BLOGGER

Sangat sederhana, dan tidak SEO Friendly. Ayo kita Praktekkan.

#Pertama

Login Blogger
Pilih Blog yang akan dipasang Title Tag
Klik Blognya.

Klik Blog

Klik Template.

Template

Klik Edit HTML.

Edit HTML

#Kedua
Setelah terbuka edit HTML, silahkan cari kode berikut:

<b:include data='blog' name='all-head-content'/>

Jika pada template Anda kode diatas tidak ada, silahkan letakkan tepat dibawah kode <head>

Supaya Lebih mudah silahkan copy Code diatas lalu klik ctrl + F pada keyboard lalu pastekan di form search

Contoh pada gambar ini:

Cari kode

Setelah ketemu silahkan lanjut ke tahap berikutnya yakni memasang meta tag terbaik yakni dengan mengcopy dan pastekan kode-kode berikut tepat dibawah
<b:include data='blog' name='all-head-content'/> atau <head>

Berikut ini Kodenya :

<meta content='P1-6SfnYegjfmkUtRPD4QF62k-YEvuaT3T-0KR1ckH4' name='google-site-verification'/>
<meta content='/qFUkQ0EONIdzHX2OHyyLLc5LTfJ5MD26/rfLx+FKh0=' name='verify-v1'/>
<meta content='AE5FF6568E9160547E058237A11F9DE9' name='msvalidate.01'/>
<meta content='9BC10362146' name='blogcatalog'/>
<meta content='rZJkOI4geGmt1zP4-BEwXnrLxBs' name='alexaVerifyID'/>
<meta content='-5;120' name='geo.position'/>
<meta content='id' name='geo.country'/>
<meta content='id-us-en' name='language'/>
<meta content='INDEX, FOLLOW, all' name='ROBOTS'/>
<meta content='no-cache' http-equiv='Pragma'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='Blogger' name='generator'/>
<meta content='-1' http-equiv='Expires'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='follow, all' name='Scooter'/>
<meta content='follow, all' name='msnbot'/>
<meta content='follow, all' name='alexabot'/>
<meta content='follow, all' name='Slurp'/>
<meta content='follow, all' name='ZyBorg'/>
<meta content='ALL' name='SPIDERS'/>
<meta content='ALL' name='WEBCRAWLERS'/>
<meta content='no-cache' http-equiv='Cache-Control'/>
<meta content='general' name='rating'/>
<link href='https://plus.google.com/112764290697005874210' rel='author'/>
<b:if cond='data:blog.pageType != "item"'>
<meta content=' Uraian atau Deskripsi tentang blog anda ' name='description'/>
<meta content=' keyword1 | keyword2 | keyword3 | keyword4 | keyword5 | keyword6 ' name='keywords'/>
</b:if>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://hentongsekai.blogspot.com/atom.xml' rel='alternate' title='Hentongerz - Atom' type='application/atom+xml'/>
<link href='http://hentongsekai.blogspot.com/rss.xml' rel='alternate' title='Hentongerz - RSS' type='application/rss+xml'/>

Keterangan :

google-site-verification
Anda harus Verifikasi blog di google webmaster, nanti akan diberikan kode Meta, Kode seperti tercetak tebal itu nanti sobat ganti dengan kode yang diberikan, Namun untuk tahun 2014 anda tidak perlu memverifikasi karena sudah otomastis untuk blogspot
Silahkan menuju TKP :google webmasters

Baca dimari : Cara Daftar Verifikasi Blog di Google Webmaster

verify-v1
Anda semestinya juga memverifikasi blog di Google Analytics, kelebihan pasang meta Google Analytics di jelaskan nanti pada artikel berikutnya.
sama dengan diatas, nanti sobat akan diberikan kode dan letakkan sama seperti contoh diatas
Silahkan menuju TKP : http://www.google.com/analytics
Cara Verifikasi, Akan saya jelaskan pada tutorial berikutnya.

msvalidate.01
Ini adalah kode Verifikasi untuk Bing Webmaster tools, silahkan sobat daftar dan Verifikasi blog sobat di Bing Webmaster tools. Nah nanti juga sobat akan diberikan kode dan pasanglah kode itu seperti contoh diatas
Silahkan menuju TKP : http://www.bing.com/toolbox

Baca disini : Cara Daftar Verifikasi Blog di Bing Webmaster

alexaVerifyID
Ini adalah kode Verifikasi untuk Alexa, jika sobat belum Verifikasi silahkan segera menuju TKP : http://www.alexa.com/
sama dengan diatas, Verifikasilah blog sobat dan dapatkan kodenya.

Cara Verifikasi Blog di Alexa Rank

blogcatalog
Ini adalah kode Verifikasi untuk blogcatalog,jika sobat belum Verifikasi silahkan segera menuju TKP : http://www.blogcatalog.com/

Cara Verifikasi, Akan saya jelaskan pada tutorial berikutnya

https://plus.google.com/112764290697005874210
Ganti dengan Id Google + sobat

http://hentongsekai.blogspot.com/atom.xml
Ganti dengan Blog masing-masing.

http://hentongsekai.blogspot.com/rss.xml'
Ganti dengan Blog masing-masing

Terakhir klik Simpan
! Untuk lebih jelasnya, silahkan simak Video Cara Pasang Meta Tag Super SEO Friendly Maknyuss 100% :

Credits :
http://www.carazone.com/2014/04/cara-pasang-meta-tag-terbaik-super-seo.html

Download Template Sevida v1.7 - Responsive SEO Premium Magazine Template for Blogger Free

2015-04-04T08:20:00.002-07:00

Sevida Responsive Premium Magazine Template

Template Sevida ini dibuat oleh Satan MKR Design, ternyata saya juga baru tau kalau Designernya asal Indonesia #Saluut :D, template ini sebenarnya Premium ( ALIAS BAYAR BOSS! ), tapi banyak yang membagikan Template ini secara Gratis, alias Cuma-cuma. untuk fitur-fiturnya, lihat dibawah ya, kalau gak jago bahasa inggris, silahkan klik Terjemahkan yang ada diatas menubar saya sob !

Fitur Sevida Template Responsive Premium
Responsive Magazine Blogger Template Features

Current version: 1.7
100% Responsive
Auto Featured Post from JSON (Slideshow) *
Manual Featured Post Work with Image Widget(Slideshow) New
Support Advance Editor: upload background images, change background color, key colors, fonts
Lightweight Auto read-more support third party image and youtube (option make it slideshow) New
Ajax load more post
Ajax Page Navigation New *
Support Mega Menu New
Cool blogger threaded comment (Support Google+ Comment) with Emoticon
JSON Search Result *
Lightweight Summary (option make it slideshow)
Two View Mode (List and Grid) width Cookies
Recent Comment Widget *
News Ticker Widget *
Related Post Widget *
Recent Post by Labels (10+ Post Type (Slider, Combine, Vertical, Horizontal, Gallery 1, Gallery 2, Simple, Slideshow) support Random)—Support ShortCode New *
Allow visitors increase / decrease text size and auto remember for future.
Optimize SEO
Archive Page *
Support Print CSS and allow visitors share articles email
3 Comment System (Blogger, Facebook, Disqus)
Dropdown Menu
Ads ready
Top Social Icon
Support shortcodes
Custom Error 404 Page
Support RTL Language New
Lightweight Version New
Social Share Plugin (Addthis) New
Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
Professional admin layout, help you easy work with blog layout.

* : Work with Blogger JSON Feed and Public Blog

Credits

Lihat Demo atau Download langsung ada di tombol berikut ini :

Cara Membuat Tombol Demo dan Download ala Kang Ismet

2015-04-04T04:03:00.000-07:00

Demo and Download Button

Kali ini, saya akan memberikan 'Cara Membuat Tombol / Button ala Kang Ismet'. Banyak sekali para Blogger menggunakan fitur Button buatannya sendiri. Namun menurut pendapat saya, Button ini sederhana, simple, enak dilihat deh.

Untuk Demonya, silahkan dilihat :

Cara Pemasangan

Masuk Blogger
Template > Edit HTML
Copy kode CSS dibawah ini, Paste diatas kode ></b:skin>

/* -- Kang Ismet Button --*/

 .button{float:left; list-style:none; text-align:center; width:100%; margin:5px 0; padding:0; font-size:14px; clear:both}

 .button ul{margin:0; padding:0}

 .button li{display:inline; margin:0; padding:0}

 .demo{border:none; -moz-border-radius:2px; -webkit-border-radius:2px; 
border-radius:2px; padding:8px 80px !important; background:#E55E48; 
color:#fff !important; text-align:center; text-shadow:0 0 1px 
rgba(0,0,0,0.3); -webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); 
-moz-text-shadow:0 0 1px rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px 
rgba(0,0,0,0.3); transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

 .download{border:none; -moz-border-radius:2px; 
-webkit-border-radius:2px; border-radius:2px; padding:8px 80px 
!important; background:#5FAAE3; color:#fff !important; 
text-align:center; text-shadow:0 0 1px rgba(0,0,0,0.3); 
-webkit-text-shadow:0 0 1px rgba(0,0,0,0.3); -moz-text-shadow:0 0 1px 
rgba(0,0,0,0.3); -ms-text-shadow:0 0 1px rgba(0,0,0,0.3); 
transition:background-color 1s ease-out 0s; 
-moz-transition:background-color 1s ease-out 0s; 
-webkit-transition:background-color 1s ease-out 0s; 
-o-transition:background-color 1s ease-out 0s; letter-spacing:1px}

 .demo:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}

 .download:hover{background:#454242; text-shadow:0 0 1px #222; 
-moz-text-shadow:0 0 1px #222; -webkit-text-shadow:0 0 1px #222; 
-ms-text-shadow:0 0 1px #222}

Simpan Template.

Kemudian coba buat Entri atau Laman ( Terserah anda ) baru.
Beralih ke Mode HTML. ( Disebelah kanan Compose )
Copy kode dibawah ini, dan Paste. Klik Pratinjau dan lihat hasilnya.

  <div style="text-align: center;">

    <ul class="button">

    <li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>

    <li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>

    </ul>

    </div>

    <div class="clear"></div>

Keterangan

Silahkan ganti kode yang bercetak miring berwarna merah untuk Link DEMO.
Silahkan ganti kode yang bercetak miring berwarna biru untuk Link Download.

Credits :
http://xpress-community.blogspot.com/2013/08/cara-membuat-tombol-demo-dan-download.html

Cara Membuat Syntax Highlighter Language Auto Detection dengan Penomoran

2015-04-04T03:18:00.000-07:00

Highlighter Language Auto Detect With Numbering

Kali ini, saya akan memposting Syntax Highlighter lagi, sebelumnya saya juga sudah memposting Syntax Highlighter yang berisi 3 Fitur.

Syntax Highlighter kali ini, adalah Syntax Highlighter yang berisikan penomoran secara Otomatis, dan Pewarnaan kode Otomatis, ntar lihat punya saya sama kok, seperti Syntax ini.

Jangan Menggunakan Syntax Highlighter lebih dari 1, jika sudah punya Syntax Highlighter sebelumnya, silahkan hapus terlebih dahulu Syntax Highlighter tersebut.

Struktur penggunaan / pemanggilan setiap kode Syntax Highlighter berbeda-beda. Contohnya lihat dibawah :

JavaScript => data-codetype="JavaScript", code-class="Javascript"
HTML => data-codetype="HTML", code-class="HTML"
JQuery => data-codetype="JQuery", code-class="JQuery"
XML => data-codetype="XML", code class="XML"
CSS => data-codetype="CSS", code class="CSS"

Cara Pemasangan Syntax Highlighter Language Autodetection

Masuk ke Blogger Template, klik Edit HTML.
Copy Paste kode dibawah ini, tepat diatas kode ></b:skin> atau </style>

pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
pre .title,pre .localvars,pre .function .title,pre .chunk,pre .decorator,pre .builtin,pre .built_in,pre .lisp .title,pre .identifier,pre .title .keymethods,pre .id{
color:#103197
}
pre .tag .title,pre .rules .property,pre .django .tag .keyword{
font-weight:bold
}
pre .attribute,pre .variable,pre .instancevar,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .label{
color:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
}

Kemudian, Copy + Paste kode Javascript dibawah, Tepat diatas kode </body>

<script type="text/javascript">//<![CDATA[
/*
Syntax highlighting with language autodetection.
http://softwaremaniacs.org/soft/highlight/
*/

function autoSelect(a){var b,range;if(window.getSelection){b=window.getSelection();range=document.createRange();range.selectNodeContents(a);b.removeAllRanges();b.addRange(range)}else if(document.selection){b=document.selection.createRange().text;range=document.body.createTextRange();range.moveToElementText(a);range.select()}}function makeNumber(){var a=document.getElementsByTagName('pre'),pl=a.length;for(var i=0;i<pl;i++){if(/(^| )numbered( |$)/.test(a[i].className)){a[i].innerHTML='<span class="line-number"></span>'+a[i].innerHTML+'<span class="cl"></span>'}}for(var j=0;j<pl;j++){if(a[j].getElementsByTagName('span')[0]&&a[j].getElementsByTagName('span')[0].className=='line-number'){var b=a[j].getElementsByTagName('code')[0].innerHTML.split(/\n/).length,line=a[j].getElementsByTagName('span')[0];for(var k=0;k<b;k++){line.innerHTML+='<span id="line-'+(j+1)+'-'+(k+1)+'"><em>line-'+(j+1)+'-'+(k+1)+'</em><a href="#line-'+(j+1)+'-'+(k+1)+'">'+(k+1)+'</a></span>'}}}var code=document.getElementsByTagName('code'),clen=code.length;for(var i=0;i<clen;i++){code[i].ondblclick=function(){autoSelect(this);if(document.getElementById('tt-search')){document.getElementById('tt-search').style.display="none"}}}}

var hljs=new function(){function m(p){return p.replace(/&/gm,"&amp;").replace(/</gm,"&lt;")}function c(r,q,p){return RegExp(q,"m"+(r.cI?"i":"")+(p?"g":""))}function j(r){for(var p=0;p<r.childNodes.length;p++){var q=r.childNodes[p];if(q.nodeName=="CODE"||q.nodeName=="SPAN"){return q}if(!(q.nodeType==3&&q.nodeValue.match(/\s+/))){break}}}function g(t,s){var r="";for(var q=0;q<t.childNodes.length;q++){if(t.childNodes[q].nodeType==3){var p=t.childNodes[q].nodeValue;if(s){p=p.replace(/\n/g,"")}r+=p}else{if(t.childNodes[q].nodeName=="BR"){r+="\n"}else{r+=g(t.childNodes[q])}}}if(/MSIE [678]/.test(navigator.userAgent)){r=r.replace(/\r/g,"\n")}return r}function a(s){var q=s.className.split(/\s+/);q=q.concat(s.parentNode.className.split(/\s+/));for(var p=0;p<q.length;p++){var r=q[p].replace(/^language-/,"");if(d[r]||r=="no-highlight"){return r}}}function b(p){var q=[];(function(s,t){for(var r=0;r<s.childNodes.length;r++){if(s.childNodes[r].nodeType==3){t+=s.childNodes[r].nodeValue.length}else{if(s.childNodes[r].nodeName=="BR"){t+=1}else{q.push({event:"start",offset:t,node:s.childNodes[r]});t=arguments.callee(s.childNodes[r],t);q.push({event:"stop",offset:t,node:s.childNodes[r]})}}}return t})(p,0);return q}function l(y,z,x){var r=0;var w="";var t=[];function u(){if(y.length&&z.length){if(y[0].offset!=z[0].offset){return(y[0].offset<z[0].offset)?y:z}else{return z[0].event=="start"?y:z}}else{return y.length?y:z}}function s(C){var D="<"+C.nodeName.toLowerCase();for(var A=0;A<C.attributes.length;A++){var B=C.attributes[A];D+=" "+B.nodeName.toLowerCase();if(B.nodeValue!=undefined&&B.nodeValue!=false&&B.nodeValue!=null){D+='="'+m(B.nodeValue)+'"'}}return D+">"}while(y.length||z.length){var v=u().splice(0,1)[0];w+=m(x.substr(r,v.offset-r));r=v.offset;if(v.event=="start"){w+=s(v.node);t.push(v.node)}else{if(v.event=="stop"){var q=t.length;do{q--;var p=t[q];w+=("</"+p.nodeName.toLowerCase()+">")}while(p!=v.node);t.splice(q,1);while(q<t.length){w+=s(t[q]);q++}}}}w+=x.substr(r);return w}function i(){function p(u,t,v){if(u.compiled){return}if(!v){u.bR=c(t,u.b?u.b:"\\B|\\b");if(!u.e&&!u.eW){u.e="\\B|\\b"}if(u.e){u.eR=c(t,u.e)}}if(u.i){u.iR=c(t,u.i)}if(u.r==undefined){u.r=1}if(u.k){u.lR=c(t,u.l||hljs.IR,true)}for(var s in u.k){if(!u.k.hasOwnProperty(s)){continue}if(u.k[s]instanceof Object){u.kG=u.k}else{u.kG={keyword:u.k}}break}if(!u.c){u.c=[]}u.compiled=true;for(var r=0;r<u.c.length;r++){p(u.c[r],t,false)}if(u.starts){p(u.starts,t,false)}}for(var q in d){if(!d.hasOwnProperty(q)){continue}p(d[q].dM,d[q],true)}}function e(J,D){if(!i.called){i();i.called=true}function z(r,M){for(var L=0;L<M.c.length;L++){if(M.c[L].bR.test(r)){return M.c[L]}}}function w(L,r){if(C[L].e&&C[L].eR.test(r)){return 1}if(C[L].eW){var M=w(L-1,r);return M?M+1:0}return 0}function x(r,L){return L.iR&&L.iR.test(r)}function A(O,N){var M=[];for(var L=0;L<O.c.length;L++){M.push(O.c[L].b)}var r=C.length-1;do{if(C[r].e){M.push(C[r].e)}r--}while(C[r+1].eW);if(O.i){M.push(O.i)}return c(N,"("+M.join("|")+")",true)}function s(M,L){var N=C[C.length-1];if(!N.t){N.t=A(N,H)}N.t.lastIndex=L;var r=N.t.exec(M);if(r){return[M.substr(L,r.index-L),r[0],false]}else{return[M.substr(L),"",true]}}function p(O,r){var L=H.cI?r[0].toLowerCase():r[0];for(var N in O.kG){if(!O.kG.hasOwnProperty(N)){continue}var M=O.kG[N].hasOwnProperty(L);if(M){return[N,M]}}return false}function F(M,O){if(!O.k){return m(M)}var N="";var P=0;O.lR.lastIndex=0;var L=O.lR.exec(M);while(L){N+=m(M.substr(P,L.index-P));var r=p(O,L);if(r){t+=r[1];N+='<span class="'+r[0]+'">'+m(L[0])+"</span>"}else{N+=m(L[0])}P=O.lR.lastIndex;L=O.lR.exec(M)}N+=m(M.substr(P,M.length-P));return N}function K(r,M){if(M.sL&&d[M.sL]){var L=e(M.sL,r);t+=L.keyword_count;return L.value}else{return F(r,M)}}function I(M,r){var L=M.cN?'<span class="'+M.cN+'">':"";if(M.rB){q+=L;M.buffer=""}else{if(M.eB){q+=m(r)+L;M.buffer=""}else{q+=L;M.buffer=r}}C.push(M);B+=M.r}function E(O,L,Q){var R=C[C.length-1];if(Q){q+=K(R.buffer+O,R);return false}var M=z(L,R);if(M){q+=K(R.buffer+O,R);I(M,L);return M.rB}var r=w(C.length-1,L);if(r){var N=R.cN?"</span>":"";if(R.rE){q+=K(R.buffer+O,R)+N}else{if(R.eE){q+=K(R.buffer+O,R)+N+m(L)}else{q+=K(R.buffer+O+L,R)+N}}while(r>1){N=C[C.length-2].cN?"</span>":"";q+=N;r--;C.length--}var P=C[C.length-1];C.length--;C[C.length-1].buffer="";if(P.starts){I(P.starts,"")}return R.rE}if(x(L,R)){throw"Illegal"}}var H=d[J];var C=[H.dM];var B=0;var t=0;var q="";try{var v=0;H.dM.buffer="";do{var y=s(D,v);var u=E(y[0],y[1],y[2]);v+=y[0].length;if(!u){v+=y[1].length}}while(!y[2]);if(C.length>1){throw"Illegal"}return{r:B,keyword_count:t,value:q}}catch(G){if(G=="Illegal"){return{r:0,keyword_count:0,value:m(D)}}else{throw G}}}function f(t){var r={keyword_count:0,r:0,value:m(t)};var q=r;for(var p in d){if(!d.hasOwnProperty(p)){continue}var s=e(p,t);s.language=p;if(s.keyword_count+s.r>q.keyword_count+q.r){q=s}if(s.keyword_count+s.r>r.keyword_count+r.r){q=r;r=s}}if(q.language){r.second_best=q}return r}function h(r,q,p){if(q){r=r.replace(/^((<[^>]+>|\t)+)/gm,function(t,w,v,u){return w.replace(/\t/g,q)})}if(p){r=r.replace(/\n/g,"<br>")}return r}function o(u,x,q){var y=g(u,q);var s=a(u);if(s=="no-highlight"){return}if(s){var w=e(s,y)}else{var w=f(y);s=w.language}var p=b(u);if(p.length){var r=document.createElement("pre");r.innerHTML=w.value;w.value=l(p,b(r),y)}w.value=h(w.value,x,q);var t=u.className;if(!t.match("(\\s|^)(language-)?"+s+"(\\s|$)")){t=t?(t+" "+s):s}if(/MSIE [678]/.test(navigator.userAgent)&&u.tagName=="CODE"&&u.parentNode.tagName=="PRE"){var r=u.parentNode;var v=document.createElement("div");v.innerHTML="<pre><code>"+w.value+"</code></pre>";u=v.firstChild.firstChild;v.firstChild.cN=r.cN;r.parentNode.replaceChild(v.firstChild,r)}else{u.innerHTML=w.value}u.className=t;u.result={language:s,kw:w.keyword_count,re:w.r};if(w.second_best){u.second_best={language:w.second_best.language,kw:w.second_best.keyword_count,re:w.second_best.r}}}function k(){if(k.called){return}k.called=true;var r=document.getElementsByTagName("pre");for(var p=0;p<r.length;p++){var q=j(r[p]);if(q){o(q,hljs.tabReplace)}}makeNumber()}function n(){if(window.addEventListener){window.addEventListener("DOMContentLoaded",k,false);window.addEventListener("load",k,false)}else{if(window.attachEvent){window.attachEvent("onload",k)}else{window.onload=k}}}var d={};this.LANGUAGES=d;this.highlight=e;this.highlightAuto=f;this.fixMarkup=h;this.highlightBlock=o;this.initHighlighting=k;this.initHighlightingOnLoad=n;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="\\b(0x[A-Za-z0-9]+|\\d+(\\.\\d+)?)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|\\.|-|-=|/|/=|:|;|<|<<|<<=|<=|=|==|===|>|>=|>>|>>=|>>>|>>>=|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\.",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE],r:0};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE],r:0};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.inherit=function(p,s){var r={};for(var q in p){r[q]=p[q]}if(s){for(var q in s){r[q]=s[q]}}return r}}();hljs.LANGUAGES.javascript={dM:{k:{keyword:{"in":1,"if":1,"for":1,"while":1,"finally":1,"var":1,"new":1,"function":1,"do":1,"return":1,"void":1,"else":1,"break":1,"catch":1,"instanceof":1,"with":1,"throw":1,"case":1,"default":1,"try":1,"this":1,"switch":1,"continue":1,"typeof":1,"delete":1},literal:{"true":1,"false":1,"null":1}},c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM,hljs.CNM,{b:"("+hljs.RSR+"|case|return|throw)\\s*",k:{"return":1,"throw":1,"case":1},c:[hljs.CLCM,hljs.CBLCLM,{cN:"regexp",b:"/",e:"/[gim]*",c:[{b:"\\\\/"}]}],r:0},{cN:"function",b:"\\bfunction\\b",e:"{",k:{"function":1},c:[{cN:"title",b:"[A-Za-z$_][0-9A-Za-z$_]*"},{cN:"params",b:"\\(",e:"\\)",c:[hljs.ASM,hljs.QSM,hljs.CLCM,hljs.CBLCLM]}]}]}};hljs.LANGUAGES.css=function(){var a={cN:"function",b:hljs.IR+"\\(",e:"\\)",c:[{eW:true,eE:true,c:[hljs.NM,hljs.ASM,hljs.QSM]}]};return{cI:true,dM:{i:"[=/|']",c:[hljs.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:{"font-face":1,page:1}},{cN:"at_rule",b:"@",e:"[{;]",eE:true,k:{"import":1,page:1,media:1,charset:1},c:[a,hljs.ASM,hljs.QSM,hljs.NM]},{cN:"tag",b:hljs.IR,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[hljs.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[a,hljs.NM,hljs.QSM,hljs.ASM,hljs.CBLCLM,{cN:"hexcolor",b:"\\#[0-9A-F]+"},{cN:"important",b:"!important"}]}}]}]}]}}}();hljs.LANGUAGES.xml=function(){var b="[A-Za-z0-9\\._:-]+";var a={eW:true,c:[{cN:"attribute",b:b,r:0},{b:'="',rB:true,e:'"',c:[{cN:"value",b:'"',eW:true}]},{b:"='",rB:true,e:"'",c:[{cN:"value",b:"'",eW:true}]},{b:"=",c:[{cN:"value",b:"[^\\s/>]+"}]}]};return{cI:true,dM:{c:[{cN:"pi",b:"<\\?",e:"\\?>",r:10},{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style",e:">",k:{title:{style:1}},c:[a],starts:{cN:"css",e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script",e:">",k:{title:{script:1}},c:[a],starts:{cN:"javascript",e:"<\/script>",rE:true,sL:"javascript"}},{cN:"vbscript",b:"<%",e:"%>",sL:"vbscript"},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ />]+"},a]}]}}}();hljs.LANGUAGES.java={dM:{k:{"false":1,"synchronized":1,"int":1,"abstract":1,"float":1,"private":1,"char":1,"interface":1,"boolean":1,"static":1,"null":1,"if":1,"const":1,"for":1,"true":1,"while":1,"long":1,"throw":1,strictfp:1,"finally":1,"protected":1,"extends":1,"import":1,"native":1,"final":1,"implements":1,"return":1,"void":1,"enum":1,"else":1,"break":1,"transient":1,"new":1,"catch":1,"instanceof":1,"byte":1,"super":1,"class":1,"volatile":1,"case":1,assert:1,"short":1,"package":1,"default":1,"double":1,"public":1,"try":1,"this":1,"switch":1,"continue":1,"throws":1},c:[{cN:"javadoc",b:"/\\*\\*",e:"\\*/",c:[{cN:"javadoctag",b:"@[A-Za-z]+"}],r:10},hljs.CLCM,hljs.CBLCLM,hljs.ASM,hljs.QSM,{cN:"class",b:"(class |interface )",e:"{",k:{"class":1,"interface":1},i:":",c:[{b:"(implements|extends)",k:{"extends":1,"implements":1},r:10},{cN:"title",b:hljs.UIR}]},hljs.CNM,{cN:"annotation",b:"@[A-Za-z]+"}]}};hljs.LANGUAGES.php={cI:true,dM:{k:{and:1,include_once:1,list:1,"abstract":1,global:1,"private":1,echo:1,"interface":1,as:1,"static":1,endswitch:1,array:1,"null":1,"if":1,endwhile:1,or:1,"const":1,"for":1,endforeach:1,self:1,"var":1,"while":1,isset:1,"public":1,"protected":1,exit:1,foreach:1,"throw":1,elseif:1,"extends":1,include:1,__FILE__:1,empty:1,require_once:1,"function":1,"do":1,xor:1,"return":1,"implements":1,parent:1,clone:1,use:1,__CLASS__:1,__LINE__:1,"else":1,"break":1,print:1,"eval":1,"new":1,"catch":1,__METHOD__:1,"class":1,"case":1,exception:1,php_user_filter:1,"default":1,die:1,require:1,__FUNCTION__:1,enddeclare:1,"final":1,"try":1,"this":1,"switch":1,"continue":1,endfor:1,endif:1,declare:1,unset:1,"true":1,"false":1,namespace:1},c:[hljs.CLCM,hljs.HCM,{cN:"comment",b:"/\\*",e:"\\*/",c:[{cN:"phpdoc",b:"\\s@[A-Za-z]+",r:10}]},hljs.CNM,hljs.inherit(hljs.ASM,{i:null}),hljs.inherit(hljs.QSM,{i:null}),{cN:"variable",b:"\\$[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*"},{cN:"preprocessor",b:"<\\?php",r:10},{cN:"preprocessor",b:"\\?>"}]}};

hljs.tabReplace = '    ';
hljs.initHighlightingOnLoad();
//]]></script>

atau lebih praktis, Copy kode dibawah ini, dan Paste diatas kode </head>

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'/>

Simpan apa yang sudah dikerjakan.

Untuk memanggil / menggunakan Syntax Highlighter ini di postingan, silahkan pakai kode dibawah ini dengan jenisnya masing-masing.

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery ... </code></pre>

Silahkan lihat hasilnya di postingan anda, kurang lebihnya silahkan berkomentar. Semoga bermanfaat...

Credits :
http://defandaky.blogspot.com/2014/06/syntax-highlighter-language.html

Cara Membuat Pesan Komentar Valid HTML5 Keren

2015-03-28T03:20:00.000-07:00

Pesan Komentar HTML5

Pesan komentar valid HTML5 dan tentunya SEO friendly sangat dibutuhkan seorang blogger, cara memasang Pesan Komentar di halaman blog juga beraneka ragam. Pentingnya suatu pesan komentar buat para pengunjung yang akan berkomentar menjadi suatu aturan tersendiri untuk pengunjung blog tersebut. Pada postingan kali ini, saya akan Posting 'Cara Membuat Pesan Komentar Valid HTML5'.

Fungsi Pesan Komentar

Pesan Komentar berfungsi untuk memberikan Pesan / Peringatan sebelum berkomentar.

Fitur Pesan Komentar

Text Pesan Komentar.
Form Email Subscribe / Langganan Lewat Email.
Tombol / Button Join to Blog.
Tombol / Button Konversi / Parse Kode.
Tombol Link Exchange.
Tombol Social Media > Google+, Facebook, Twitter.

Saatnya Instalasi Pesan Komentar.

1. Login Dasbor Blogger.
2. Klik Template > Masuk ke HTML.
3. Cari kode ></b:skin> atau </style>
4. Copy kode CSS dibawah ini, lalu Paste tepat diatas kode ></b:skin> atau </style> tadi.


/*****************************************

Name : Pesan Komentar

By : Rivai Silaban | Blog Design

Update : 30 Agustus 2013

******************************************/

#bdrspesan-comment {

position : relative;

width : auto;

padding : 10px;

font : normal normal 12px trebuchet ms;

text-align : justify;

border : #000 solid 3px;

margin : 0 10px 10px 3px;

margin-top : 10px;

line-height : 1.3em;

background-color: #666666;

color: #FFFFFF;

}

#bdrspesan-comment strong {color:#99FF00}

#bdrspesan-comment::after, #bdrspesan-comment::before {

top : 100%;

border : transparent solid;

content : '';

height : 0;

width : 0;

position : absolute;

}

#bdrspesan-comment::before {

border-top-color : #000;

border-width : 15px;

left : 10%;

margin-left : -36px;

}

#bdrspesan-comment::after {

border-top-color : #666;

border-width : 9px;

left : 10%;

margin-left : -30px;

}

#bdrspesan-comment .BD-but{

border:1px solid #b0130d;

color:#000000;

cursor:pointer;

font-weight:100;

margin:5px -10px 0px 0;

text-decoration:none;

text-shadow:none;

display:inline-block;

box-shadow: 0 1px 0 0 #fff inset;

background-color:#00CCFF;

padding:5px 10px;

border-color: #333;

border-radius:5px;

font-family: Arial, Helvetica, sans-serif;

font-size: 11px;

}

#bdrspesan-comment .BD-but:hover{

color:#99FF00;

text-shadow:none;

border:1px solid ;

display:inline-block;

box-shadow:0 0px 2px 0px #FFF;

background-color:#333333;

border-color: #333;

}

#bdrspesan-comment .BD-box {

margin-top : 0px;

padding : 0 0px;

text-align: right; 

}

#bdrspesan-comment .input {

font-size : 12px;

padding : 10px 5px;

text-shadow : 1px 1px 0 #FFF;

width : 200px;

color : #990000;

font-family : georgia;

border :  solid 1px;

border-color : #0099FF;

background-color: #E1FBFB;

border-radius:5px;

margin-bottom: 2px;

}

#bdrspesan-comment .input:hover {

background-color: #FFFFFF;

}

#bdrspesan-comment .submit {

border: solid 1px;

color : #000000;

cursor : pointer;

font-family : verdana;

font-size : 12px;

padding : 10px 15px;

border-radius:5px;

text-shadow : 0px 1px #999;

text-transform : uppercase;

height : auto;

background-color : #00CCFF;

border-color : #000099;

font-style: italic;

font-weight: normal;

margin-left:4px;

}

#bdrspesan-comment .submit:hover {

background-color :#2FD6FF;

box-shadow: 1px 1px 5px #333;

color : #990000;

text-shadow: none;

}/*** Blog Design CSS and ***/

Instalasi Tag HTML.

Setelah Kode CSS terpasang, saatnya memasang kode HTML. Silahkan simak berikut ini :

Cari Kode <p><data:blogCommentMessage/></p> , biasanya ada 4 Kode yang sama, Carilah yang ke 2 dan ke 4, dan gantilah kode tersebut dengan kode HTML dibawah ini.

<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar start -->

   <div id='bdrspesan-comment'>

   <span class='BD-box'>

   <form action='http://feedburner.google.com/fb/a/mailverify' 
method='post' 
onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER
 &apos;, &apos;popupwindow&apos;, 
&apos;scrollbars=yes,width=600,height=550&apos;);return true' 
target='popupwindow'>

   <img alt="feedburner" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVVdxeKHJxzY09KTdJ7-r_-eTCaERPTIn8NRo96eV94IKOTiQ1c-O8IcKDU3heMBZp8MY-9TwWyMBQJasG9FSSn18ERgkY5lLElMbDevPld4A9oF_fPn3uASJFZjEGRU9ax-00V6dUsrw/h77/feedburner.png"
  title='feedburner' style="margin-bottom:-9px;margin-right:25px;"/> 
<input name='email' type='text' class='input' onblur='if (this.value 
== &apos;&apos;) this.value = &apos;Enter email here 
!!&apos;;' onclick='if (this.value == &apos;Enter email here 
!!&apos;) this.value = &apos;&apos;;' value='Enter email 
here !!' />

   <input class='submit' id='submit' name='submit' title='subscribe' type='submit' value='SUBSCRIBE'/>

   <input name='uri' type='hidden' value='ID FEEDBURNER'/>

   <input name='loc' type='hidden' value='en_US'/>

   </form></span>

<div style="font-family:Georgia, 'Times New Roman', Times, serif; 
color: #FFFF00; font-size: 14px; font-style: italic; font-weight: bold; 
width: 100%; background-color: #999999; margin: 15px -20px 5px -10px; 
padding:10px; text-shadow: 1px 1px 1px #000;">Salam bloger .. !! <br />

Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini. </div>

<p> 1. Komentar <strong>SPAM</strong> Akan secepatnya dihapus <br/>

2. Pastikan untuk &quot; <strong>Berlangganan Lewat Email 
</strong>&quot; untuk membangun kreatifitas blog ini  
<br/> 

3. Cek komentar masuk sebelum bertanya.  <br/>

4. Link aktiv tidak akan berpungsi.   <br/>

5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.   <br/>

6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik 
&quot;<strong> Forum Diskusi </strong>&quot; 
<br/>

7. Bergabung dengan kami untuk menjadi member Klik &quot;<strong>Join to Member</strong> &quot; <br/>

8. Bila komentar anda mengandung code HTML silahkan anda konversikan terlebih dulu<br/> 

silahkan klik &quot; <strong>Konversi Kode </strong>&quot; <br/> </p>

<a class='BD-but' href='#' 

onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;

height=500,width=700,toolbar=yes,location=yes,status=yes,menubar=yes,

scrollbars=yes,resizable=yes&quot;);return false;'
 
target='_blank' title='Konversi Kode'>Konversi Kode</a>

<a class='BD-but' href='LINK ANDA' target='_blank' title='Forum Diskusi'>Forum Diskusi</a>

<a class='BD-but' href='http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA' rel='nofollow' target='_blank' title='Join to Blog'>Join to Blog</a> 

<a class='BD-but' href='http://hentongsekai.blogspot.com/p/link-exchange-hentongerz-blog.html' target='_blank' title='LINK EXCHANGE '>LINK EXCHANGE </a>

<a class='BD-but' href='LINK ANDA' target='_blank' title='GPLUS'>GPLUS</a>

<a class='BD-but' href='LINK ANDA' target='_blank' title='FACEBOOK'>FACEBOOK</a> 

<a class='BD-but' href='LINK ANDA' target='_blank' title='TWITTER'>TWITTER</a>  </div>
<!-- Rivai Silaban | BLOG DESIGN Pesan Komentar End -->

Silahkan ganti 'LINK ANDA' dan 'ID FEEDBURNER' dengan milik kamu sendiri.

Klik Simpan, dan lihat hasilnya.

Jika ada yang kurang jelas, silahkan Berkomentar.

Credits :
http://rivai-silaban.blogspot.com/2013/08/cara-membuat-pesan-komentar-valid-html5.html

Cara Membuat Click to Select All Highlight

2015-03-26T09:08:00.000-07:00

Double click Select All

artinya kalau klik area text tersebut, maka semua teks akan di pilih / blok / highlight secara otomatis.

Kurang lebih seperti itulah arti dari 'Click to Select All'. Langsung saja tanpa banyak curhat, lihat tutorial nya.

Cara Membuat 'Click to Select All' :

=> Login dasbor blogger > Template > HTML
=> Copy + Paste kode dibawah ini, tepat diatas kode </body>

<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>

Jika ingin menggunakan tag blockquote maka ganti kode Pre berwarna oranye diatas dengan blockquote.
Dan jika ingin sekali click saja ubah kode dblclick berwarna hijau dengan click

=> Simpan Template > Lihat hasilnya.

pre::after, pre.line-number:after {content: &quot;Double click select all&quot;;
background: #2B2B2B;padding: 2px 10px;width: auto;height: auto;right: 0px;top: 0px;
position: absolute;color:#C9CDD0;}

=> Lihat Hasilnya. Selamat menikmati !!!

Credits:
http://rush-die.blogspot.com/2014/07/cara-membuat-click-to-select-all.html

Cara Modifikasi Notifikasi Komentar Ala Blog Kang Ismet

2015-03-25T10:51:00.000-07:00

Notikasi Ala blog.kangismet.net

Oi gan, udah tau kan notifikasi komentar ala Google+ Plus ???, kalau belum, lebih baik kunjungi link berikut ini > Notifikasi Komentar ala Google+ Plus <.
Buat yang udah tau apa itu notifikasi komentar ala Google+ Plus, ini ada modifikasi keren seperti punya blog KangIsmet. Langsung saja Tutorialnya :

=> 1. Tambahkan kode ini, diatas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Jika kode diatas sudah ada di blog ente, silahkan lewati langkah pertama :D.

=> 2. Tambahkan kode CSS ini, diatas kode ></b:skin> atau </style>

/*Notifikasi Ala Kang Ismet Publish By Xkomo*/

#show-total {
  position:fixed;
  top:8px;
  right:288px; /*Atur Posisi Counter -jumlah- Komen*/
  z-index:999;
  cursor:pointer;
    float:right;/*posisi counter Right or Left*/
}
  .total-show {
    background-color:#f1c40f;color:white;padding:2px 6px;font-size:11px;border-radius:4px;font-weight:bold;
  }
#notif {cursor:pointer;}
#notif:before {
/*Gambar lonceng pertama*/
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKrmJqTwZ0tNZIB5N0bu1TSJ6dc0uN6BSFOKCZ_bnFsJAO2P0laVv4_1jJl1mjU0c1dXGAECB3wwCkpqfWc-M6ongzu003aaK_h4dNBqXtqVUHG-wpHXSoKaIa48RM8xUbnMmfZFmDrA/s1600/lonceng2.png');
  border:1px solid #b6b5b5;
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;
  opacity:.5;
  z-index:999;
  transition:all 0.4s ease-out;
}
  #notif:hover:before {
  opacity:1;
}
  #notif2 {cursor:pointer;display:none}
#notif2:before {
/*Gambar lonceng kedua ketika active or di klik */
  content: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnKrmJqTwZ0tNZIB5N0bu1TSJ6dc0uN6BSFOKCZ_bnFsJAO2P0laVv4_1jJl1mjU0c1dXGAECB3wwCkpqfWc-M6ongzu003aaK_h4dNBqXtqVUHG-wpHXSoKaIa48RM8xUbnMmfZFmDrA/s1600/lonceng2.png');
  border:1px solid #b6b5b5;/*garis bawah pada komentar*/
  padding:5px 6px 0 6px;
  border-radius:3px;
  display:block;
  position:fixed;
  top:15px;
  right:298px;/*atur posisi lonceng (harap atur posisi lonceng pertama juga jika ingin merubah ini dan sblik nya) ubah left untuk di kiri*/
  opacity:.5;
  z-index:9997;
  transition:all 0.4s ease-out;
}
  #notif2:hover:before {
  opacity:1;
}
#cm-wrapper {
  width:300px;
  position:fixed;
  top:61px;
  right:-381px;
  z-index:999;
  background-color:#192028;
  padding:15px 13px 25px 15px;
  color:#666;
  font-family: Arial, Sans-serif;
  border-top:8px solid #ff6c60;
  transition:0.5s ease;
}
#cm-wrapper:before {
/*posisi segitia di atas notifikasi*/
content:"";
width:0;
height:0;
position:absolute;
top:-24px;
left:6px;/*ubah right untuk di sebelah kanan*/
border:8px solid transparent;
border-color:transparent transparent #ff6c60;
}
#cm-scroll {
width: 100%;
height: 560px;
overflow: auto;
position: relative;
}
#cm-scroll::-webkit-scrollbar{margin:2px; padding:1px; width:10px;background:orange}/*ubah ukuran dan warna scroll luar*/
#cm-scroll::-webkit-scrollbar-thumb{margin:2px;padding:1px;background-color:black}/*ubah ukuran dan warna scroll bagian dalam*/
#comments-container {
  color:#666;
  font-family: Arial, Sans-serif;
}

#comments-container.cm-active {
position:fixed;
right:0;
top:61px;
}
.cm-outer {
  margin:0 auto;
  padding:0;
  font-size:11px;
  text-align:left;
}
  .cm-outer pre {background-color:#141414;font-size:11px;color:#7c7c7c}
.cm-outer li {
  padding:7px 10px 12px;
  list-style:none;
  clear:both;
  position:relative;
  border-top:1px solid #28313b;
  border-bottom:1px solid #111;
  margin-right:10px;
}
.cm-outer code {
 color:#a6a658;
    font-size:11px;
}

  .cm-outer li.selected {
    border-left:4px solid #fffe8c;
}
  .cm-outer li:first-child {
  border-top:none;
}
  .cm-outer li:last-child {
  border-bottom:none;
}
.cm-text {color:#999;}
.cm-outer {margin:0 0 5px}
.cm-header {margin: 4px 0 8px 50px;font-size:12px;font-weight:normal !important;}
.cm-header a {color:#168980;text-decoration:none;font-size:12px;font-weight:bold}
.cm-header a:hover {color:#e6e6e6;text-decoration:none;}
.cm-outer .cm-content {overflow:hidden}
.cm-content {margin-left:50px}
.cm-outer img {
  display:block;
  float:left;
  background:#8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%;
  overflow:hidden;
  border-radius:100px;
  position:absolute;
  top:10px;
  left:0;
  border:3px solid #3d464f;
}
.cm-footer {margin-top:7px;}
.cm-footer a {color:#168980;text-decoration:none;}
.cm-footer a:hover {color:#e6e6e6;text-decoration:none;}
div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxW02ODzJyFn5bajl-JtVKFaGSYQlBlBXSshvXUFYyy7Ibbtkeas90tzv68IL59AfHcXHG7WaOx8Yf-vntGCyILm5zR0CCvlgl5stdc69AGJi60b8VUpU-7Uu82dvcTGN1v4t5BGrUzU/s80-c/gravatar.png);
}

.bg_hitam{
        display: none;
        position: absolute;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index:99;
        opacity:.30;
}
img.cm-smiley  {
  float:none;
  position:relative;
  display:inline-block;
    width:12px !important;
    height:12px !important;
    top:2px;
    border:none;
    border-radius:2px;
background:none;
}

=> 3. Selanjutnya, tambahkan kode berikut, diatas kode </body>

<div id="notif" title="Notifikasi">
<div id="notif2" title="Notifikasi">
<div class="bg_hitam" id="bg">
<div id="cm-wrapper">
<div id="cm-scroll">
<div id="comments-container">
</div>
</div>
<div id="show-total">
<script type="text/javascript">
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
  home_page: "http://hentongsekai.blogspot.com",
    max_result: 18,
    t_w: 50,
    t_h: 50,
    summary: 9999,
    new_tab_link: false,
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true,
    alert: function(total) {
        document.getElementById("show-total").innerHTML = '<strong class=\'total-show\'>'+total+'</strong>';
        document.title = '(' + total + ') ' + originalTitle;
    }
};
$('#notif').click(function(){$("#cm-wrapper").css({right: "0px"});$("#bg, #notif2").show();$("#notif").hide();});$('#notif2').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});$('#bg').click(function(){$("#cm-wrapper").css({right: "-381px"});$("#bg, #notif2").hide();$("#notif").show();});document.getElementById('notif').onclick = function() {document.title = originalTitle;$('#show-total').hide();};document.getElementById('show-total').onclick = function() {document.title = originalTitle;$('#show-total').hide();$("#cm-wrapper").css({right: "0px"});$("#bg").show();};
//]]>
</script>
  <script src="https://googledrive.com/host/0B77n4VRgB0aJY2F4ZGtIWnVkZTQ" type="text/javascript">

Ganti http://hentongsekai.blogspot.com dengan alamat / URL Blog ente.

=> 4. Untuk modifikasi, ente lihat kode berikut :

/* Background Kotak Notifikasi */
#cm-wrapper {
width: 300px;
position: fixed;
top: 61px;
right: -381px;
z-index: 999;
background-color: rgb(25, 32, 40); /* warna background*/
padding: 15px 13px 25px 15px;
color: rgb(102, 102, 102); /*warna tulisan*/
font-family: Arial, Sans-serif;
border-top: 8px solid rgb(255, 108, 96);/*ganti warna ini orange ini untuk bagian atas */
transition: 0.5s ease;
}
/* background Pada Bagian Komentar Blogger*/
.cm-outer li {
padding: 7px 10px 12px;
list-style: none;
clear: both;
position: relative;
border-top: 1px solid rgb(40, 49, 59);
border-bottom: 1px solid rgb(17, 17, 17);
margin-right: 10px;
}

=> 5. Simpan > Dan lihat hasilnya.

Credits :
http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html

Cara Membuat Blok Catatan, Tips dan Warning/Peringatan Blog

2015-03-19T22:13:00.001-07:00

Membuat Blok Catatan, Tips dan Warning.

Hari ini, ane memberikan tutorial 'Cara Membuat Blok Catatan, Tips dan Warning / Peringatan, seperti pada gambar diatas.

Ane juga punya Demo buat contoh sebelum nyoba cara membuatnya !

Berikut ini Demonya :

Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.

Untuk cara masangnya, coba simak Tutorial berikut :
1. Buka Blogger.
2. Pergi ke Template => HTML.
3. Copy + Paste kode dibawah ini, tepat diatas kode ></b:skin>.

.info, .tips, .warning {
 line-height: 22px;
 min-height: 38px;
 padding: 10px 12px 12px 68px;
 margin: 5px 0;
}
.info {
 background: #e0e5eb url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_lglpJFVnfe-uP1ZAtulhEtY5D47uZCFKKGvk1Bak5ml82aKtpUn3o9T-6lUf99lb0N0TyrsHznH-vz6Ev0V_uHYzkiPgduXb7SoG45679oax2iStBvwItKi0tuhUXp7wwrACbwLD0LM/s1600/info.png') no-repeat 12px 8px;
 color: #222
}
.tips {
 background: #7CADDE url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6iLb6e0m0fQXYpnLD_Q3XFgvuKSH6q1vFUkeVksJaX15yJIIkgtb6noduRDkrPYStnf7m1xYlnqK4lxnjW_OLrlw2Sgum4JFJvbO0vcVVKxyfSsYtLDIQXROXEyVAnIbtfxfwBZmNHs/s1600/tips.png') no-repeat 12px 8px;
 color: #fff;
}
.warning {
 background: #db6161 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIWxfhIsFrlrHhrFJ-sgw4WXJrA8mzkrL3bHRz5C3FhP4RgVQ83uCrJgovhWbESBmOKVIugifyS5Pr35oL3LTBK5RWC3bNXBTZzEvi8-Mjzbg6-D3cp6huoaUM-M4qKbXLnIqFQ4e27g/s1600/warning.png') no-repeat 12px 8px;
 color: #fff;
}

4. Selanjutnya, kalau mau posting, ente pilih kode yang mau dipasang di postingan ente.

- Untuk membuat Info, Copy + Paste kode dibawah ini.

<div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

- Untuk membuat Tips, Copy + Paste kode dibawah ini.

<div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

- Untuk membuat Peringatan / Warning, Copy + Paste kode dibawah ini.

<div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>

5. Silahkan lihat sendiri hasilnya.

*** Jika ada Kekurangan, Silahkan Tinggalkan Komentar !!! ***

Credits :

http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html

Cara Membuat Syntax Highlighter Untuk Blogger Full Features

2015-03-18T05:00:00.000-07:00


Syntax Highlighter

Posting pertama saya akan membahas tentang 'Cara Membuat Syntax Highlighter'. Mungkin diantara ente semua, Syntax Highlighter sudah tidak asing lagi. Sangat banyak blogger yang sudah menggunakan fitur Syntax Highlighter, berbagai macam desain tentunya.

Syntax Highlighter hampir sama seperti Blockquote, bisa dibilang 11 : 12 lah, yang membedakan itu cuma Text-nya saja. Misalkan ente pake Blockquote, terus ketik kode-kode seperti HTML, JavaScript, JQuery, maupun CSS. tampilan warna font teksnya akan tetap sama. Nah, kalau pakai Syntax Highlighter, tampilan teks akan berbeda tentunya, seperti gambar diatas, font-nya berbeda, itupun otomatis, tidak perlu di setting warna font.

Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:

1. Adanya fasilitas Print untuk mencetak tulisan yang ada didalam highlight a.k.a Print.
2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows.
3. Adanya fasilitas Help untuk melihat bantuan.

Untuk membuat Syntax Highlighter ini silahkan kalian login dulu ke BLOGGER kalian dan selanjutnya silahkan kalian baca selengkapnya dibawah ini:

1. Pilih Rancangan / Template
2. Pilih EDIT HTML
3. Copy kode dibawah ini :

<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js" type="text/javascript"></script>

4. Selanjutnya, ente Paste kode tersebut, diatas kode </head>
5. Setelah itu, Copy lagi kode CSS dibawah ini :

.dp-highlighter{font-family:"Consolas","Monaco","Courier New",Courier,monospace; font-size:12px; background-color:#E7E5DC; width:99%; overflow:auto; margin:18px 0 18px 0 !important; padding-top:1px; /* adds a little border on top when controls are hidden */}

/* clear styles */
.dp-highlighter ol, 
.dp-highlighter ol li, 
.dp-highlighter ol li span{margin:0; padding:0; border:none}

.dp-highlighter a, 
.dp-highlighter a:hover{background:none; border:none; padding:0; margin:0}

.dp-highlighter .bar{padding-left:45px}

.dp-highlighter.collapsed .bar, 
.dp-highlighter.nogutter .bar{padding-left:0px}

.dp-highlighter ol{list-style:decimal; /* for ie */background-color:#fff; margin:0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */padding:0px; color:#5C5C5C}

.dp-highlighter.nogutter ol, 
.dp-highlighter.nogutter ol li{list-style:none !important; margin-left:0px !important}

.dp-highlighter ol li, 
.dp-highlighter .columns div{list-style:decimal-leading-zero; /* better look for others,override cascade from OL */list-style-position:outside !important; border-left:3px solid #6CE26C; background-color:#F8F8F8; color:#5C5C5C; padding:0 3px 0 10px !important; margin:0 !important; line-height:14px}

.dp-highlighter.nogutter ol li, 
.dp-highlighter.nogutter .columns div{border:0}

.dp-highlighter .columns{background-color:#F8F8F8; color:gray; overflow:hidden; width:100%}

.dp-highlighter .columns div{padding-bottom:5px}

.dp-highlighter ol li.alt{background-color:#FFF; color:inherit}

.dp-highlighter ol li span{color:black; background-color:inherit}

/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol{margin:0px}

.dp-highlighter.collapsed ol li{display:none}

/* Additional modifications when in print-view */
.dp-highlighter.printing{border:none}

.dp-highlighter.printing .tools{display:none !important}

.dp-highlighter.printing li{display:list-item !important}

/* Styles for the tools */
.dp-highlighter .tools{padding:3px 8px 3px 10px; font:9px Verdana,Geneva,Arial,Helvetica,sans-serif; color:silver; background-color:#f8f8f8; padding-bottom:10px; border-left:3px solid #6CE26C}

.dp-highlighter.nogutter .tools{border-left:0}

.dp-highlighter.collapsed .tools{border-bottom:0}

.dp-highlighter .tools a{font-size:9px; color:#a0a0a0; background-color:inherit; text-decoration:none; margin-right:10px}

.dp-highlighter .tools a:hover{color:red; background-color:inherit; text-decoration:underline}

/* About dialog styles */
.dp-about{background-color:#fff; color:#333; margin:0px; padding:0px}
.dp-about table{width:100%; height:100%; font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important}
.dp-about td{padding:10px; vertical-align:top}
.dp-about .copy{border-bottom:1px solid #ACA899; height:95%}
.dp-about .title{color:red; background-color:inherit; font-weight:bold}
.dp-about .para{margin:0 0 4px 0}
.dp-about .footer{background-color:#ECEADB; color:#333; border-top:1px solid #fff; text-align:right}
.dp-about .close{font-size:11px; font-family:Tahoma,Verdana,Arial,sans-serif !important; background-color:#ECEADB; color:#333; width:60px; height:22px}

/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments{color:#008200; background-color:inherit}
.dp-highlighter .string{color:blue; background-color:inherit}
.dp-highlighter .keyword{color:#069; font-weight:bold; background-color:inherit}
.dp-highlighter .preprocessor{color:gray; background-color:inherit}

6. Ente Paste kode tersebut, diatas kode ></b:skin>
7. Sekarang, cari kode </body>
8. Copy kode dibawah ini, terus Paste tepat diatas kode </body>

<!-- Add-in Script for syntax highlighting -->
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9. Simpan Template.

Sekarang cara menerapkan Syntax Highlighter:

1. Buat Entri baru / Laman baru
2. Klik HTML (Disamping Compose)
3. Pakai Kode ini :

- Untuk kode JavaScript, gunakan kode berikut :

<pre class="JScript" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>

- Untuk kode CSS, gunakan kode berikut :

<pre class="CSS" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>

- Untuk kode HTML, gunakan kode berikut :

<pre class="HTML" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>

- Untuk kode JQuery, gunakan kode berikut :

<pre class="JQuery" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>

4. Silahkan lihat hasilnya !