Notifikasi Komentar Ala Google Plus

Sebelum melangkah pada tutorial, silahkan liat dulu screenshoot plus demonya.

Langkah 1 : Simpan jQuery di atas </head>

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

Lewati langkah ini apabila sudah terdapat jQuery pada template sobat.

Langkah 2 : Simpan CSS ini di atas ]]></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/AVvXsEhdn58NSl33EKm_l6SNXnXAuO0DmodpGh3APUIefwcxT5F5We48-uHFKMVTaq6GAowIqX6GLrgs58fXnsyopwl7zxjO9ZT8SKOB2TiTli5WmouOeJJZ8p_MaEDL7HJ-9e7gPQT51reJgQg/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/AVvXsEjtXUrwny8BWlWJ-a_R2AnC8kYPuBVK6fj0ZaIG2fH2cw3_Bg2BGSzzQhE12Zn9pxKeD3h1YZrrj5iy9FeRuVbRKVr56EupnEXf0rshbbbMp9RKGSBGgTM8hT7vmZasOkJqMQgCi5OtOyM/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='http://img1.blogblog.com/img/openid16-rounded.gif'] {
content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png);
}

Langkah 3 : Simpan kode ini di atas </body>

<div id='cm-container'/>
<div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaY_fM3MTtAIrLmYkEWqpxK4TsFf4Y_p0kF-5o0V3rzMojiF91FLqUY_vBkU0XeXCPegteouT8v5m-C-sMDt08Egw5KW51_s_uDR1Hm1sprJSpVM4uhYVV-hHWBG47Clim8vC2G6_NeDU/s1600/lonceng.png'/></div>
<div id='cm-total'/>
<div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigOp4Arx3NkC-OednXl5A7CQ98t_y101z0VLlDYSgp8SJqFAlDNsxms31Y7MzmeJzGNu59kwUf0ANTKOaCNkrcxrm_VELWaImmINS-8-DF0mQbz-cSydXWSqRPhpyEZZFLMdntBFSf9c4/s1600/delete4.png' title='close'/></div>
<script>
//<![CDATA[
var originalTitle = document.title;
var cm_config = {
    home_page: "http://#.blog",
    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'/>

Continue reading →

Membuat posting di homepage warna warni

salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasikan sesuai keinginan masing - masing. dalam share kali ini saya hanya akan memberi trik simplenya menggunakan javascript nanti hasilnya agar lebih bagus bisa sobat sesuaikan sendiri.

pertama, silahkan buka editor template blogger sobat jangan lupa untuk mencegah dan jaga jaga dari adanya kesalahan backup terlebih dahulu template sobat agar nanti lebih mudah untuk mengembalikan seperti semula bila terjadi hal hal yang tidak sesuai langkah.

sekarang mari kita mulai bagaimana caranya, cari kode di bawah ini

<b:includable id='post' var='post'> /* kode tag pembuka */

       .......................
       ......bla bla bla......
       .......................

</b:includable>  /* kode tag penutup */

setelah di temukan silahkan ganti seluruh kode yang terdapat di antara kode di atas dengan kode di bawah ini

<article class='post hentry'>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>       
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>          
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>      
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>         
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>    
<div class='post-header'>    
<div class='post-header-line-1'/>    
</div>    
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>      
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div class='gambar-depan'>   
<b:if cond='data:post.firstImageUrl'>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>   
<b:else/>    
<b:if cond='data:post.thumbnailUrl'>     
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>    
<b:else/>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDWzg8dDVwzTXNaCuy4CR10H83iZ8iRgUSHGwSG-LN3R-cJ_LHR4Wb7VQUAuR76ZHy0HAljHS0kw1dz1mwNXpFGAJHogCeJlPcDpjkcgBAIv4qu2bPXiw09inlpqdDZx1KCHOt4u9Oa54/s1600/mac.jpg'/></a>    
</b:if>   
</b:if>      
<b:if cond='data:post.labels'>   
<div class='post-label'>                                    
<b:loop values='data:post.labels' var='label'>                           
<a expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag nofollow'><data:label.name/></a>              
<b:if cond='data:label.isLast != &quot;true&quot;'/>            
</b:loop>                 
</div>   
</b:if>  
</div>
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>       
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
 <a expr:href='data:post.url'><data:post.title/></a>          
  <b:else/>            
 <data:post.title/>          
</b:if>        
 <b:else/>          
  <data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if>
<div class='post-info'>     
  <div class='post-info-icon admin'>        
    <b:if cond='data:top.showAuthor'>        
      <span class='vcard'>     
        <span class='fn'>           
          <a href='http://www.blogger.com/profile/09882050325461413449' target='_blank'><data:post.author/></a>     
        </span>     
      </span>     
    </b:if>     
</div>     
<div class='post-info-icon jam'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.timestamp/>     
</abbr>     
</div>
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
<b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> 
<b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> 
<data:post.numComments/> Komentar </b:if>      
</a>      
</b:if>     
</div>  
</div>  
<data:post.snippet/> 
<b:else/>  
<data:post.body/> </b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>       
<div class='post-info' style='padding:0 0 0 0 !important;margin:-10px 0 20px 0 !important;border-top:none !important;border-bottom:none !important;'>     
<div class='post-info-icon admin'>        
<b:if cond='data:top.showAuthor'>        
<span class='vcard'>     
<span class='fn'>     
<a href='http://www.blogger.com/profile/09882050325461413449' rel='publisher' title='dafin defandaky'>           
<data:post.author/>     
</a>     
</span>     
</span>     
</b:if>     
</div>          
<b:if cond='data:post.labels'>     
<div class='post-info-icon label'>                                        
<b:loop values='data:post.labels' var='label'>                
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>                
</b:loop>                   
</div>     
</b:if>     
<b:if cond='data:post.dateHeader'>     
<div class='post-info-icon tanggal'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.dateHeader/>     
</abbr>     
</div>     
</b:if>     
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:onclick='data:post.addCommentOnclick' href='#comment-form'> <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if> 
</a> 
</b:if>
</div>
</div>
</b:if>
 <data:post.body/>
</b:if>
 <div style='clear: both;'/> 
  <!-- clear for photos floats -->
   </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'></div>
     <div class='post-footer-line post-footer-line-2'></div>
      <div class='post-footer-line post-footer-line-3'>        
        <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>   
  </b:if>
</article>

tambahkan css berikut di template sobat bersama css yang lain

/* post homepage warna warni */
.gambar-depan{
  border:none;
  box-shadow:none;
  width:250px;
  height:175px;
  text-align:center;
  float:left;
  margin:-32px 15px -30px -22px;
  position:relative;
  background:#993333;
}

.gambar-depan img{
  padding:0;
  width:80px;
  height:80px;
  border:8px solid #000;
  border-radius:100px 100px;
  margin-top:33px;
}

.gambar-depan img:hover{
  border:5px solid #333;
  border-radius:100px 100px;
}

.gambar-depan:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:45%;
  right:0;
  border:7px solid transparent;
  border-color:transparent #fff transparent transparent;
}

.db-merah .gambar-depan {background:#ff0000;}
.db-biru .gambar-depan {background:#0000cc;}
.db-orange .gambar-depan {background:#ff3300;}
.db-kuning .gambar-depan {background:#ffcc00;}
.db-ungu .gambar-depan {background:#660099;}
.db-hijau .gambar-depan {background:#006600;}
.db-coklat .gambar-depan {background:#663300;}
.db-pink .gambar-depan {background:#ff0033;}

.post-label{position:absolute;top:15px;right:0;z-index:99;}
.post-label a{font-family: 'Oswald', Verdana,Sans-serif;text-transform:uppercase;background-color:#0099ff;color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}
.post-label:first-child a {border-radius:5px 0 0 0}
.post-label a:hover{background:#996600;}
.post-info-icon{background-image:url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5Yq7cJOKkH26cEfQwadepN9wPKMx5YuksOc2RhAqdHrXrLlRF6j3IOPfOQLJctTjjAgkijgx_wYhl_d1i_k2S2hY2y9Pa2SLuroFtMvXE4WtOGalYJNCeY5O9_5gUPejVXJEW2uc78A/s1600/icnall.png);background-repeat:no-repeat;}
.post-info{display:block;margin:5px 0 5px 0px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}
.post-info a{color:#999;}
.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}
.post-info a:hover{color:#000;}
.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}
.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}
.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}
.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}
.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}

kemudian letakkan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
      .post h2{
         font-size:19px;
         margin:0px; !important;
         margin-bottom:5px !important;
         font-weight:400;
         line-height:1.4em;
         color:#4a4a4a
      }
      .post{
         font-weight:400;
         font-size:13px;
         border:1px solid #ddd;
         padding-bottom:5px;
         box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);
      }
    </style>
  </b:if>
</b:if>

Silahkan anda sesuaikan sendiri css di atas agar sesuai dengan tampilan homepage blog sobat atau keinginan agar terlihat lebih menarik.

langkah terakhir letakkan kode javascript dibaah ini di atas kode </head>

<script type='text/javascript'>
$(window).ready(function(){
  $('.post').each(function(){
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-merah')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-biru')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-orange')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-kuning')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-ungu')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-hijau')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-coklat')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-pink')}
  })
});
</script>

silahkan ubah label-anda dengan label posting blog yang anda inginkan, pastikan label sesuai agar berjalan dengan baik

UPDATE SCRIPT

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js?ver=1.5' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

function get_random_color() {

var letters = '0123456789ABCDEF'.split('');

var color = '#';

for (var i = 0; i < 6; i++ ) {

color += letters[Math.round(Math.random() * 14)];

}

return color;

}

$(function() {

$(".gambar-depan").each(function() {

$(this).css("background-color", get_random_color());

});

});

//]]>

</script>

setelah semua langkah di atas telah di terapkan silahkan simpan perbuhan template yang sudah anda buat dan lihat hasilnya.

Sekian saja share dan trik membuat posting di homepage warna warni, semoga berguna dan bermanfaat...

Continue reading →

New Fastest Magz Blogger Template

Flatform Type : Blogger  
Template Name : New Fastest Magz Blogger Template
Intructions : Tutorial Install Blogger Template

Author Name : CB Blogger
Design Url : contohblognih.blogspot.com
Publisher : www.kaizentemplate.com

Description: New Fastest Magz Blogger Template  is perfect For Simple Magazine Sites, Modern and fully responsive (try resizing your browser), And New Fastest Magz Looks Cool And Flat with Awensome Font, Flat Subscribe Mail Widget, Post by Label Widget, Social Widget, Custom 404 Page, Floating Menu and Back To Top,  and more.

Demo Download

Set Up Widget :

---

Recent Box Widget:

---

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Gadget?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

ScreenShoot: 

Continue reading →

Kaizen Awesome Magz Blogger Template

Flatform Type : Blogger  
Template Name : Kaizen Awesome Magz Blogger Template
Intructions : Tutorial Install Blogger Template

Author Name : Kaizen Template
Design Url : www.kaizentemplate.com
Publisher : www.kaizentemplate.com

Description: Kaizen Awensome Magz Blogger Template Update Version 1.2 is perfect For Simple Magazine Sites, Modern and fully responsive (try resizing your browser), And Kaizen Awensome Magz Looks Cool And Flat with Awensome Font, Flat Subscribe Mail Widget, Post by Label Widget, Social Widget, Custom 404 Page, Floating Menu and Back To Top,  and more.

* Fix Some Bug
Demo Download 

Set Up Widget :

---

Recent Box Widget:

---

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Gadget?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

---

Social Box Widget:

---

<div class='social-box'>
 <div class='social-item-outer'>
 <a class='social-item-box facebook-box' href='http://www.facebook.com'>  
   <div class='counter'>
 10.000
</div>
<span class='social-title'>Fans</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box twitter-box' href='http://twitter.com'>
   <div class='counter'>
 7.987
</div>
<span class='social-title'>Followers</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box googleplus-box' href='http://plus.google.com'>
   <div class='counter'>
 5.987
</div>
<span class='social-title'>Followers</span>
 </a>
 </div>

 <div class='social-item-outer'>
 <a class='social-item-box rss-box' href='/feeds/posts/default'>
   <div class='counter'>
 450
</div>
<span class='social-title'>Subcribers</span>
 </a>
 </div>
    </div>

---

Subscribe box In Blog :

---

<div id='subscribe-box'>
<div class='title'>
               Subscribe Here
              </div>
                 <p>Sign up here with your email address to receive updates from this blog in your inbox.</p>
             <div class='emailfield'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=KaizenTemplate&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
               <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}' onfocus='if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}' value='Your Name'/>
               <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>
<input name='uri' type='hidden' value='Kaizentemplate'/>
<input name='loc' type='hidden' value='en_US'/>
                <input class='submitbutton' type='submit' value='Subscribe Now!'/>
              </form>
             </div>
</div>

ScreenShoot: 

Continue reading →

Top 10 Stylish Syntax Highlighters

How these stylish syntax highlighters work? What should I know about them?

These all ten code highlighters (when Nov 2013) are created by me using HTML and CSS styling languages. So you don’t need to worry about your blog’s loading speed. Also most CSS codes are working on modern browsers with IE 9+. Therefore it will not damage your site design thoroughly.

Now you might want to know how these syntax highlighters work. I use <pre> HTML elements to nest characters and display them as codes. I designed code highlighters using CSS and so I have to specify an ID for each style. It would like this,

HTML code

<pre id=”ID “>
Your Text codes go here…
</pre>

CSS code

#ID {
CSS properties and Values go here…
}

It’s considerable to add once the CSS code to the theme. Then call to CSS script by adding ID to <pre> HTML tag.

As I mentioned in above, you can display many things on source code highlighter. So if you intend to show HTML codes, you have to parse them first. Else it will confuse your website layout. As a blogger user, you can bypass this step easy.

Display HTML codes without Parsing on Blogger

Whenever you want to display HTML codes in a post page (even in the stand-alone page or HTML/JavaScript page element), create a new post and then switch to Compose mode. Now paste the HTML code you want to display. After that switch to HTML mode and then you can find the parsed HTML codes are appearing in the post editor. Now before and after of it, paste the <pre> HTML tag with the ID of certain syntax highlighter style. That’s all.

How to add customized syntax highlighter to Tumblr 

1: Login to your Tumblr account.
2: Go to Settings page by clicking on the gear icon on the top of the header.
3: Select your blog to be added the code highlighter(s) from left side bar.
4: Click on ‘Customize’ button under ‘Theme’ section. Then click on ‘Edit HTML’ link in the next screen.
5: Click on theme editor and then press Ctrl + F (in Windows) or Command + F (in Mac). Now by using the inbuilt-searching tool, find below code.

{CustomCSS}

6: Just above of it, paste the CSS code of the syntax highlighter(s) which you wish to install on your Tumblr blog.
7: Last save your theme.
8: You’re almost done. When you want to show some script or text on the customized syntax highlighter, switch to HTML mode in the Text post editor of Tumblr. Now as I explained above, paste the HTML code of syntax highlighter. Make sure you typed the appropriate identification.

How to add Syntax highlighter to Blogger

1: Sign into your Blogger account.
2: Go to Dashboard → Template and click on the "Edit HTML" button.
3: Now find below code in your template.

]]></b:skin>

4: Just before of that code, paste the CSS code of syntax highlighter.
5: Save your Template.
6: You’re done. Like in Tumblr, when you want to show the source code highlighter, paste the HTML code of certain code highlighter.

Syntax Highlighter Styles

Style one

This is first code highlighting style.It has been optimized with hovering effects and scroll bars.This makes it's more attractive and compatible to users.So if you want to nest more content into one text box,this will make that task.

CSS Code

.pbt_coding {
border-top:15px solid #269B9B;
background:#269B9B;
color:#F2F2F2;
padding:10px 13px 8px 13px;
font-size:14px;
overflow:auto;
width:500px;
height:auto;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding:hover {
color:#F2F2F2;
background:#5D6262;
box-shadow:inset 0 0 4px 0;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
-o-transition:all 0.3s ease;
transition:all 0.3s ease;
}

HTML

<pre class="pbt_coding">
Scripts/text Goes here...
</pre>

Style Two

This professional like code highlighter is very applicable for white background template.Select some text on highlighter.You can find its background color is different that default. If you want to add this css syntax highlighter to your website,here are the source code.

CSS Code

.pbt_coding-02 {
padding:12px;
white-space:pre-wrap;
font-size:14px;
overflow:none;
width:500px;
height:auto;
color:#ddd;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
background:#4E4E4E;
}
.pbt_coding-02::selection {
color:#090909;
background:#ECECEC;
}
.pbt_coding-02::-moz-selection {
color:#090909;
background:#ECECEC;
}

HTML code

<pre class="pbt_coding-02">
Script/Text Goes Here...
</pre>

Style Three

Click Image to Enlarge

Another code highlighter which is optimized with CSS3 selections.You can change the selection background color and font color by changing the #2A2A2A and #F3F3F3 hexadecimal values.Use our hexadecimal color code generator,color code generator to get the color codes.Also you can use web-safe colors to integrate with this syntax highlighter.

CSS Code

.pbt_coding-03 {
width:500px;
position:relative
height:auto;
padding:14px;
font-size:14px;
overflow:none;
white-space:pre-wrap;
border:2px solid #CBCBCB;
background:#E4E4E4;
color:#555555;
}
.pbt_coding-03::selection {
background:#2A2A2A;
color:#F3F3F3;
}
.pbt_coding-03::-moz-selection {
background:#2A2A2A;
color:#F3F3F3;
}

HTML code

<pre class="pbt_coding-03">
Script/Text Goes Here...
</pre>

Style Four

Click Image to Enlarge

If you have viewed the demo page of this code highlighter,you would find that it has hovering effects especially box-shadow effect.So it will get the visitor's attention as quickly as they mouse over code highlighter.

CSS Code

.pbt_coding-04 {
width:500px;
height:auto;
overflow:auto;
white-space:pre-wrap;
font-size:14px;
border:2px solid #EDE848;
background:#FEFFC6;
color:#2C2C2C;
padding:13px;
-moz-box-shadow:inset 0 0 10px 0 #EDE848;
-webkit-box-shadow:inset 0 0 10px 0 #EDE848;
box-shadow:inset 0 0 10px 0 #EDE848;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
}
.pbt_coding-04:hover {
-moz-box-shadow:inset 526px 0 0 0 #FFE478;
-webkit-box-shadow:inset 526px 0 0 0 #FFE478;
box-shadow:inset 526px 0 0 0 #FFE478;
-moz-transition:all 0.35s ease-in;
-webkit-transition:all 0.35s ease-in;
-o-transition:all 0.35s ease-in;
transition:all 0.35s ease-in;
color:#060606;
}
.pbt_coding-04::selection {
background:#19A836;
}
.pbt_coding-04::-moz-selection {
background:#19A836;
}

HTML code

<pre class="pbt_coding-04">
Script/Text Goes Here...
</pre>

Style Five

Click Image to Enlarge

This syntax highlighter is applicable for both white and dark background templates. Left border and border-radius make this text box more beautiful.

CSS Code

.pbt_coding-05 {
width:500px;
height:auto;
overflow:auto;
white-space:pre-wrap;
font-size:14px;
padding:13px 14px 13px 23px;
border-left:18px solid #358F93;
background:#EEEEEE;
-moz-border-radius:16px;
-webkit-border-radius:16px;
-o-border-radius:16px;
border-radius:16px;
}
.pbt_coding-05::selection {
background:#83C6F2;
}
.pbt_coding-05::-moz-selection {
background:#83C6F2;
}

HTML code

<pre class="pbt_coding-05">
Script/Text Goes Here...
</pre>

Style Six

Click Image to Enlarge

This is another attractive code highlighting style.visit demo page to see how the links on code highlighter works.

CSS Code

.pbt_coding-06 {
width:500px;
height:auto;
padding:14px;
font-size:14px;
white-space:pre-wrap;
overflow:auto;
background:#E1E1E1;
-moz-box-shadow:0 0 2px 0px black;
-webkit-box-shadow:0 0 2px 0px black;
box-shadow:0 0 2px 0px black;
}

.pbt_coding-06 a{
text-decoration:none;
font-weight:bold;
color:#3556CD;
}
.pbt_coding-06 a:hover{
text-decoration:underline;
text-shadow:0 0px 0.5em #939393;
}

HTML code

<pre class="pbt_coding-06">
Script/Text Goes Here...
</pre>

Style Seven

Click Image to Enlarge

This syntax highlighter is enabled the tooltips which can be used in any HTML element such as div,span,a,p,img,h1...etc.If you didn't view the demo,visit the demo page to see how titles of hypertext and non-hypertext work.


CSS Code

.pbt_coding-07 {
width:500px;
height:auto;
overflow:auto;
position:relative;
white-space:pre-wrap;
padding:14px;
font-size:14px;
background:#CECECE;
background:-webkit-gradient(linear,left top,left bottom,from(#CECECE),color-stop(0.43 #E6E6E6),to(#CECECE));
background:-webkit-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-moz-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-o-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:-ms-linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
background:linear-gradient(top,#CECECE,#E6E6E6 43%,#CECECE 100%);
-moz-box-shadow:0 0 0 1px #AEB0B7;
-webkit-box-shadow:0 0 0 1px #AEB0B7;
box-shadow:0 0 0 1px #AEB0B7;
}
.pbt_coding-07:hover {
-moz-box-shadow:0 0 3px 0 #AEB0B7;
-webkit-box-shadow:0 0 3px 0 #AEB0B7;
box-shadow:0 0 3px 0 #AEB0B7;
}
.pbt_coding-07 a {
text-decoration:none;
font-weight:bold;
color:#3C99EB;
}
.pbt_coding-07 a:hover {
text-decoration:underline;
}
.pbt_coding-07 [title] {
position:relative;
display:inline;
}
.pbt_coding-07 [title]:after {
content:attr(title);
position:absolute;
color:#ddd;
padding:5px;
width:auto;
white-space:nowrap;
left:-9999px;
-moz-opacity:0;
-khtml-opacity:0;
filter:alpha(opacity=100);
opacity:0;
z-index:98;
bottom:100%;
background:#5B5B5B;
}
.pbt_coding-07 [title]:hover:after {
left:7px;
-moz-opacity:0.85;
-khtml-opacity:0.85;
filter:alpha(opacity=85);
opacity:0.85;
}
.pbt_coding-07::selection {
background:#63E8FF;
color:black;
}

HTML code

<pre class="pbt_coding-07">
Script/Text Goes Here...
</pre>

Style Eight

Click Image to Enlarge

Another dark color elegant html text highlighter.Green color tooltips make it more pretty and hovering effects make it more clear to view the codes. The tooltip is supported for all HTML elements.It gives us great chance to add long tail words in the description or in Title.


CSS Code

.pbt_coding-08 {
width:500px;
height:auto;
overflow:auto;
position:relative;
white-space:pre-wrap;
padding:16px 16px 16px 16px;
font-size:14px;
color:#535353;
background:#EEEEEE;
border-radius:12px;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding-08:hover {
color:#EEEEEE;
background:#535353;
-moz-transition:all 0.3s ease;
-webkit-transition:all 0.3s ease;
transition:all 0.3s ease;
}
.pbt_coding-08 [title] {
position:relative;
}
.pbt_coding-08 [title]:after {
content:attr(title);
position:absolute;
left:-9999px;
opacity:0;
background:green;
padding:4px;
font-size:12px;
white-space:nowrap;
color:yellow;
z-index:98;
bottom:100%;
}
.pbt_coding-08 [title]:hover:before {
content:'';
width:0;
height:0;
position:absolute;
border:solid;
border-color:green transparent;
border-width:6px 6px 0 6px;
left:20px;
bottom:75%;
}
.pbt_coding-08 [title]:hover:after {
left:5px;
opacity:1;
}
.pbt_coding-08 a{
font-style:italic;
color:#1D1D1D;
}
.pbt_coding-08 a:hover{
color:#9BA6EE;
font-style:normal;
text-decoration:none;
}

HTML code

<pre class="pbt_coding-08">
Script/Text Goes Here...
</pre>

Style Nine

Click Image to Enlarge

If you need to add a code highlighter for blogger,here is an attractive one.Its left border,box-shadow,tooltip design and selection colors make it a colorful syntax highlighter.


CSS Code

.pbt_coding-09 {
width:500px;
height:auto;
overflow:auto;
margin:10px;
position:relative;
white-space:pre-wrap;
padding:16px;
font-size:14px;
background:#ddd;
border-left:19px solid #8C2DD4;
-moz-box-shadow:-5px 2px 5px 1px #BDBDBD;
-webkit-box-shadow:-5px 2px 5px 1px #BDBDBD;
box-shadow:-5px 2px 5px 1px #BDBDBD;
}
.pbt_coding-09:hover {
border-left-color:#97532C;
-moz-box-shadow:-5px 2px 5px 1px #A9A8A7;
-webkit-box-shadow:-5px 2px 5px 1px #A9A8A7;
box-shadow:-5px 2px 5px 1px #A9A8A7;
}
.pbt_coding-09::selection {
background:#E59261;
}
.pbt_coding-09::-moz-selection {
background:#E59261;
}
.pbt_coding-09 [title] {
position:relative;
}
.pbt_coding-09 [title]:after {
content:attr(title);
position:absolute;
left:-9999px;
opacity:0;
background:#8C2DD4;
padding:4px;
font-size:12px;
white-space:nowrap;
color:#F9F644;
z-index:98;
bottom:100%;
border-radius:4px;
}
.pbt_coding-09 [title]:hover:before {
content:'';
width:0;
height:0;
position:absolute;
border:solid;
border-color:#8C2DD4 transparent;
border-width:6px 6px 0 6px;
left:20px;
z-index:99;
bottom:75%;
}
.pbt_coding-09 [title]:hover:after {
left:5px;
-moz-opacity:1;
-webkit-opacity:1;
-khtml-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}

HTML code

<pre class="pbt_coding-09">
Script/Text Goes Here...
</pre>

Style Ten

As you see in above image,i have used CSS transform properties to enlarge the syntax highlighter.You can control the size of scaling.However don't allow it to enclose the content in your blog.


CSS Code

.pbt_coding-10 {
width:500px;
height:auto;
overflow:auto;
margin:10px;
position:relative;
white-space:pre-wrap;
padding:16px;
color:#0B0B0B;
font-size:14px;
background:#58A4EF;
background:-webkit-gradinet(linear,left top,left bottom,from(#58A4EF),color-stop(0.50 #73AFEB),to(#5A64EC));
background:-webkit-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-moz-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-o-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:-ms-linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
background:linear-gradient(top,#58A4EF 0%,#73AFEB 50%,#5A64EC 100%);
border:15px ridge #254ACF;
-moz-transition:all 0.3503s ease-in;
-webkit-transition:all 0.3503s ease-in;
-o-transition:all 0.3503s ease-in;
transition:all 0.3503s ease-in;
}
.pbt_coding-10:hover {
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
-webkit-transform:scale(1.1);
transform:scale(1.1);
-moz-transition:all 0.3503s ease-out;
-webkit-transition:all 0.3503s ease-out;
-o-transition:all 0.3503s ease-out;
transition:all 0.3503s ease-out;
}
.pbt_coding-10::selection  {
font-weight:bold;
color:#FFFF00;
}
.pbt_coding-10::-moz-selection  {
color:#FFFF00;
font-weight:bold;
}

HTML code

<pre class="pbt_coding-10">
Script/Text Goes Here...
</pre>

Controlling Syntax Highlighter 

You can change the appearances of text highlighters using CSS styling language.Here is a few customizations which can be done easily.

Change Width/Height

Find width:***px; and height:auto; css code in the desired code highlighter.Then change their values to your own.

Disable wrapping the text and enable the Scroll bar 

Find white-space:pre-wrap; CSS code and remove it from the source code.Then find that overflow:auto; CSS code is in the code.This code will tell to browser that enable the scroll bars whenever need.So you can tell the browser that only enable the x-axis scroll bar or y-axis scroll bar by this way.

overflow:hidden;  -  Don't show scroll bars
overflow:x;           -  Enable vertical scroll bar (Look at first style)
overflow:y;           -  Enable horizontal scroll bar

Change Font size and Font color

To change the font size and font color of the text in code highlighters,first you have to find the font-size:**px; and color:#******; codes.
Then change the each values to your own.You might want to find the color name or 

This tutorial is all about top stylish syntax highlighters.These all highlighters are codded by me.I intend to increase the list of syntax highlighters.So more styles will be added on future to this post. Bookmark this web page for future needs.

I would like to know your questions,views and suggestions about this tutorial.If you have anything related to this post to talk with me,let's start our conversation in below commenting section. For non-related questions to this post,please contact me using the contact form. I will contact you as soon as possible i got your message.

Continue reading →