Hentongerz

Cara Membuat Pesan Komentar Valid HTML5 Keren

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 ***/</code></pre>
<h3>
Instalasi Tag HTML.</h3>
<i class="fa fa-check"></i> Setelah Kode CSS terpasang, saatnya memasang kode HTML. Silahkan simak berikut ini :<br />
<br />
<i class="fa fa-search"></i> Cari Kode <span style="color: #38761d;"><p><data:blogCommentMessage/></p></span> , biasanya ada 4 Kode yang sama, Carilah yang ke 2 dan ke 4, dan gantilah kode tersebut dengan kode HTML dibawah ini.<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML">

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

<input name='uri' type='hidden' value='<span class="CODE_MERAH">ID FEEDBURNER</span>'/>

</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;"><span class="CODE_HIJAU">Salam bloger .. !! </span><br />

<span class="CODE_HIJAU">Pergunakan fasilitas yang dapat membantu anda pada halaman blog ini. </span></div>

<span class="CODE_HIJAU"><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></span>

<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='<span class="CODE_BIRU">Konversi Kode</span>'><span class="CODE_BIRU">Konversi Kode</span></a>

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

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

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

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

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

<a class='BD-but' href='<span class="CODE_MERAH">LINK ANDA</span>' target='_blank' title='<span class="CODE_BIRU">TWITTER</span>'><span class="CODE_BIRU">TWITTER</span></a>  </div>

</code></pre>
<br />
<div class="warning">
Silahkan ganti '<span style="color: #38761d;">LINK ANDA</span>' dan '<span style="color: #38761d;">ID FEEDBURNER</span>' dengan milik kamu sendiri.</div>
<br />
<i class="fa fa-check"></i> Klik Simpan, dan lihat hasilnya.<br />
<br />
<div class="informasi">
Jika ada yang kurang jelas, silahkan Berkomentar.</div>
<br />
<i><span style="font-size: x-small;">Credits :</span></i><br />
<i><span style="font-size: x-small;"><span style="color: #0b5394;">http://rivai-silaban.blogspot.com/2013/08/cara-membuat-pesan-komentar-valid-html5.html </span></span></i>

Cara Membuat Pesan Komentar Valid HTML5 Keren

Pesan Komentar HTML5 P esan komentar valid HTML5 dan tentunya SEO friendly sangat dibutuhkan seorang blogger, cara memasang Pesan Kome...

Selengkapnya »

Cara Membuat Click to Select All Highlight

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86iOeLQxSQhYD6mgdYoogAb-xYWGhuQr9ZtQYKaytlk9hUhBeUirO2ZJlLAkHCw_aKNSDuurqP8FicpPVp7pccMGm7fpORljAr2R0hUAgA0Idy1_lfLqmEVMaFCAlSExpEzUDiqifCJUZ/s1600/select-all.PNG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Select-All" border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86iOeLQxSQhYD6mgdYoogAb-xYWGhuQr9ZtQYKaytlk9hUhBeUirO2ZJlLAkHCw_aKNSDuurqP8FicpPVp7pccMGm7fpORljAr2R0hUAgA0Idy1_lfLqmEVMaFCAlSExpEzUDiqifCJUZ/s1600/select-all.PNG" title="Select-All" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Double click Select All</td></tr>
</tbody></table>
<i class="fa fa-gears fa-2x"> 'Click to Select All'</i> artinya kalau klik area text tersebut, maka semua teks akan di pilih / blok / highlight secara otomatis.<br />
<br />
Kurang lebih seperti itulah arti dari 'Click to Select All'. Langsung saja tanpa banyak curhat, lihat tutorial nya.<br />
<br />
<br />
<i class="fa fa-hand-o-right fa-2x"></i> Cara Membuat 'Click to Select All' :<br />
<br />
=> Login dasbor blogger > Template > HTML<br />
=> Copy + Paste kode dibawah ini, tepat diatas kode <span style="color: #cc0000;"></body></span><br />
<pre class="numbered" data-codetype="JavaScript"><code class="xml"><span class="tag"><<span class="title">script</span> <span class="attribute">type</span>=<span class="value">"text/javascript"</span>></span><span class="javascript">
<span class="keyword">var</span> pres = document.getElementsByTagName(&quot;<span style="color: orange;">pre</span>&quot;);
<span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;<span style="color: lime;">dblclick</span>&quot;, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span>
    <span class="keyword">var</span> selection = getSelection();
    <span class="keyword">var</span> range = document.createRange();
    range.selectNodeContents(<span class="keyword">this</span>);
    selection.removeAllRanges();
    selection.addRange(range);   }, <span class="literal">false</span>); }
</span><span class="tag"></<span class="title">script</span>></span>
</code></pre>
<br />
<div class="informasi">
Jika ingin menggunakan tag <u>blockquote</u> maka ganti kode <span style="color: orange;">Pre</span> berwarna oranye diatas dengan blockquote.<br />
Dan jika ingin sekali click saja ubah kode <span style="color: lime;">dblclick</span> berwarna hijau dengan <u>click
</u></div>
<br />
=> Simpan Template > Lihat hasilnya.<br />
<br />
<i class="fa fa-info fa-2x"> Bila ingin ada tulisan "double click" seperti diposting ini maka tambahkan kode Cssnya :</i><br />
<pre class="numbered" data-codetype="CSS"><code class="cs">pre::after, pre.line-number:after {content: &quot;Double click <span class="keyword">select</span> all&quot;;
background: <span class="preprocessor">#2B2B2B;padding: 2px 10px;width: auto;height: auto;right: 0px;top: 0px;</span>
position: absolute;color:<span class="preprocessor">#C9CDD0;}</span></code></pre>
<br />
=> Lihat Hasilnya. Selamat menikmati !!!<br />
<br />
<span style="font-size: x-small;"><i>Credits:</i></span><br />
<span style="color: #0b5394;"><span style="font-size: x-small;"><i>http://rush-die.blogspot.com/2014/07/cara-membuat-click-to-select-all.html </i></span></span>

Cara Membuat Click to Select All Highlight

Double click Select All 'Click to Select All' artinya kalau klik area text tersebut, maka semua teks akan di pilih / blok / hi...

Selengkapnya »

Cara Modifikasi Notifikasi Komentar Ala Blog Kang Ismet

#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;
}  </code>
</pre>
<br />
<b>=> 3.</b> Selanjutnya, tambahkan kode berikut, diatas kode <span style="color: #cc0000;"></body></span><br />
<br />
<pre class="numbered" data-codetype="XML"><code class="XML"><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">
</code>  
</pre>
<br />
<div class="warning">
Ganti <span style="color: #38761d;">http://hentongsekai.blogspot.com</span> dengan alamat / URL Blog ente.</div>
<br />
<b>=> 4</b>. Untuk modifikasi, ente lihat kode berikut :<br />
<br />
<pre class="numbered" data-codetype="CSS"><code class="CSS">/* 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;
}  
</code>
</pre>
<br />
<b>=> 5.</b> Simpan <b>></b> Dan lihat hasilnya.<br />
<br />
<i><span style="font-size: x-small;">Credits :</span></i><br />
<a href="http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html" target="_blank"><i><span style="font-size: x-small;">http://www.xkomo.com/2014/05/notifikasi-komentar-ala-kangismet-original-googleplus.html</span></i></a>

Cara Modifikasi Notifikasi Komentar Ala Blog Kang Ismet

Notikasi Ala blog.kangismet.net Oi gan, udah tau kan notifikasi komentar ala Google+ Plus ???, kalau belum, lebih baik kunjun...

Selengkapnya »

Cara Membuat Blok Catatan, Tips dan Warning/Peringatan Blog

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKk3OHsECFbqXTbtpWDuPTkUi_ogi3z81Ayheecf8MeEM45Pp8n7FwPQYsmtSCoVeQ4ffJwE9v1jp9-unIwAf_uAVzpKr4LgpfFInnWnfieB-S-ZJXvlzj0xno3_C9Q4xwFWRIwdzFuuAw/s1600/catatan.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="CatatanTipsWarning" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKk3OHsECFbqXTbtpWDuPTkUi_ogi3z81Ayheecf8MeEM45Pp8n7FwPQYsmtSCoVeQ4ffJwE9v1jp9-unIwAf_uAVzpKr4LgpfFInnWnfieB-S-ZJXvlzj0xno3_C9Q4xwFWRIwdzFuuAw/s1600/catatan.png" title="CatatanTipsWarning" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Membuat Blok Catatan, Tips dan Warning.</td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
          <span style="font-size: x-large;">H</span>ari ini, ane memberikan tutorial 'Cara Membuat Blok Catatan, Tips dan Warning / Peringatan, seperti pada gambar diatas.</div>
<br />
<div style="text-align: justify;">
          <span style="font-size: large;">A</span>ne juga punya Demo buat contoh sebelum nyoba cara membuatnya !</div>
<br />
Berikut ini Demonya :<br />
<br />
<div class="informasi">
Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
<div class="tips">
Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
<div class="warning">
Lorem ipsum dolor sit amet-amet jabang baye, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
<br />
Untuk cara masangnya, coba simak Tutorial berikut :<br />
1. Buka Blogger.<br />
2. Pergi ke Template => HTML.<br />
3. Copy + Paste kode dibawah ini, tepat diatas kode <span style="color: #cc0000;">></b:skin>.</span><br />
<br />
<pre class="numbered" data-codetype="CSS"><code class="CSS">.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;
}
</code>
</pre>
<br />
4. Selanjutnya, kalau mau posting, ente pilih kode yang mau dipasang di postingan ente.<br />
<br />
- Untuk membuat Info, Copy + Paste kode dibawah ini. <br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><div class="info">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
</code>
</pre>
- Untuk membuat Tips, Copy + Paste kode dibawah ini.<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><div class="tips">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
</code>
</pre>
<br />
- Untuk membuat Peringatan / Warning, Copy + Paste kode dibawah ini.<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><div class="warning">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis orc no tortor accumsan at accumsan tortor congue.
</div>
</code>
</pre>
<br />
5. Silahkan lihat sendiri hasilnya.<br />
<br />
<div style="text-align: center;">
*** Jika ada Kekurangan, Silahkan Tinggalkan Komentar !!! ***</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><i>Credits :</i></span></div>
<div style="text-align: left;">
<span style="font-size: x-small;"><i><a href="http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html" target="_blank">http://blog.kangismet.net/2013/10/membuat-blok-catatan-tips-dan-peringatan.html</a></i></span></div>

Cara Membuat Blok Catatan, Tips dan Warning/Peringatan Blog

Membuat Blok Catatan, Tips dan Warning. H ari ini, ane memberikan tutorial 'Cara Membuat Blok Catatan, Tips dan Warning ...

Selengkapnya »

Cara Membuat Syntax Highlighter Untuk Blogger Full Features

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-LYqjbkndfKTKjMcStjt9H4URutjJwGR0upxpkcnGpLRjbc3CB6wrPD34lcuGf-riUrgiZZBUxMu-iOZe6W9Cv8VyThVJxbxBuVi5vg7WcoFiWgeaYwwl-QE10x0d9k4noaFXerpbeOIo/s1600/tea.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Syntax Highlighter" border="0" height="376" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-LYqjbkndfKTKjMcStjt9H4URutjJwGR0upxpkcnGpLRjbc3CB6wrPD34lcuGf-riUrgiZZBUxMu-iOZe6W9Cv8VyThVJxbxBuVi5vg7WcoFiWgeaYwwl-QE10x0d9k4noaFXerpbeOIo/s1600/tea.JPG" title="Syntax Highlighter" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Syntax Highlighter</td><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
         <span style="font-size: x-large;">P</span>osting 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.</div>
<br />
<div style="text-align: justify;">
          <span style="font-size: x-large;">S</span>yntax 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.</div>
<br />
<div style="text-align: justify;">
         <span style="font-size: x-large;">S</span>yntax 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:</div>
<br />
1. Adanya fasilitas <span style="color: blue;">Print</span> untuk mencetak tulisan yang ada didalam highlight a.k.a Print.<br />
2. Adanya fasilitas <span style="color: blue;">View Plain</span> yaitu membuka barisan kode dalam popup windows.<br />
3. Adanya fasilitas <span style="color: blue;">Help</span> untuk melihat bantuan.<br />
<br />
<div style="text-align: justify;">
Untuk membuat Syntax Highlighter ini silahkan kalian login dulu ke BLOGGER kalian dan selanjutnya silahkan kalian baca selengkapnya dibawah ini:</div>
<br />
1. Pilih Rancangan / Template<br />
2. Pilih EDIT HTML<br />
3. Copy kode dibawah ini :<br />
<br />
<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"><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>

</code>
</pre>
<br />
<br />
4. Selanjutnya, ente Paste kode tersebut, diatas kode <span style="color: #cc0000;"></head></span><br />
5. Setelah itu, Copy lagi kode CSS dibawah ini :<br />
<br />
<pre class="numbered" data-codetype="CSS"><code class="CSS">.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}

</code>
</pre>
<br />
6. Ente Paste kode tersebut, diatas kode <span style="color: #cc0000;">></b:skin></span><br />
7. Sekarang, cari kode <span style="color: #cc0000;"></body></span><br />
8. Copy kode dibawah ini, terus Paste tepat diatas kode <span style="color: #cc0000;"></body></span><br />
<pre class="numbered" data-codetype="JavaScript"><code class="Javascript">
<script language="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
</code>
</pre>
9. Simpan Template. <br />
<br />
Sekarang cara menerapkan Syntax Highlighter:<br />
<br />
1. Buat Entri baru / Laman baru<br />
2. Klik HTML (Disamping Compose)<br />
3. Pakai Kode ini :<br />
<br />
- Untuk kode <span style="color: #cc0000;">JavaScript</span>, gunakan kode berikut :

<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><pre class="JScript" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>
</code>
</pre>
- Untuk kode <span style="color: #6aa84f;">CSS</span>, gunakan kode berikut :

<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><pre class="CSS" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>
</code>
</pre>
- Untuk kode <span style="color: blue;">HTML</span>, gunakan kode berikut :

<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><pre class="HTML" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>
</code>
</pre>
- Untuk kode <span style="color: #e69138;">JQuery</span>, gunakan kode berikut :

<br />
<pre class="numbered" data-codetype="HTML"><code class="HTML"><pre class="JQuery" name="code">SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>
</code>
</pre>
4. Silahkan lihat hasilnya !

<br />
<div style="text-align: center;">
</div>
<div style="text-align: center;">
*** Jika ada Kekurangan, Silahkan Tinggalkan Komentar !!! ***</div>
<div style="text-align: left;">
</div>
<div style="text-align: left;">
<i><span style="font-size: x-small;">Credits :</span></i></div>
<div style="text-align: left;">
<i><span style="font-size: x-small;"><a href="http://z33s.blogspot.com/2010/09/membuat-syntax-highlighter-untuk.html" target="_blank">http://z33s.blogspot.com/2010/09/membuat-syntax-highlighter-untuk.html </a></span></i></div>