KrishnaVandanu: Blogger

Tampilkan postingan dengan label Blogger. Tampilkan semua postingan

Minggu

Embed Code Syntax Highlighting in Blogger

Hi Friends,

If you are a developer & want to share your code over the blog with proper highlighting & syntax, then Blogger/Wordpress doesn't have the immediate solution out here!

A quick workaround for Blogger can be to embed your source between:
<blockquote></blockquote>
tags in order to prevent them from getting parsed.
E.g.



Site

But for the formatting & highlighting used to quote above
example, an excellent open source tool called SyntaxHighlighter is available.

This is ready to use out of box 100% Javascript based SyntaxHighlighter with extensive features & multiple other options.

SyntaxHighlighter can be either downloaded & used on your own webserver or if you have a blog on Blogger, this can be directly used as well.

To downloaded SyntaxHighlighter for your own personal Webserver/Hosted Site: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
Configuration Steps: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
Brush Aliases:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

In order to install & use it on Blogger, follow the below simple steps:
1) Go to your Template Layout->Download your template as a backup first
2)Now click Edit HTML for Layout & then paste the below code in your Template before your </head> tag ends. Note this is pointing to the Latest released version v2.1.364; older versions can be found at: http://alexgorbatchev.com/pub/sh/

3)Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.

This completes the direct embedding of SyntaxHighlighter in your Blog. Now lets proceed how to use it in your posts:

Usage:
For SyntaxHighlighter 2.0 & above:
Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:

Note that we have option of using different brushes for highlighting different type of codes..e.g. HTML/ASP/C++ etc
In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting:
actionscript3
bash, shell
c-sharp, csharp
cpp, c
css
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

Above aliases can be used at: class="brush: alias" while embedding your code in the Blog.

Another easy way supported by SyntaxHighlighter is to enclose the code within:



#########YOUR CODE########

The only catch involved out here is, you have to use encoded HTML while embedding within <pre>tags.Your code can be converted to HTML Encoded using following easy to use Tool:
http://www.string-functions.com/htmlencode.aspx

Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within <pre>tags for correct rendering. Failure to do so might render wrong code, especially < & > brackets.

Some examples of codes in my Blog:
http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html

http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html

Keep Blogging!

Blogger, Embed Code, Code, Syntax, Syntax Highlight, Syntaxhighlighter, Javascript, Blog Tricks, Blogs, Java, SQL, ASP, HTML, HTM, C#, XML, XSL, JS, CSS, PHP, PL, CGI, embed code blog,embed blogger blog, embed youtube blogger, swf embed code, you tube embed code, embed src code, embed wordpress blog, embed video blogger, myspace embed code,embed into, html code,rss feeds,blogger templates, blogger,syntax highlighting,script error,script,etc

Senin

Merubah Widget Arsip Blogger menjadi Kalender - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Bosan dengan tampilan Arsip dari blogger yang hanya berbentuk list. Kali
ini saya akan membagikan Kode JS untuk merubah tampilan Arsip blogger
menjadi kalender serta cara penggunaannya. Kode JS ini dibuat oleh
phydeaux3 beberapa tahun lalu.

Dari kode ini saya buat beberapa tema yang mungkin anda sukai. Untuk pemasangannya tidaklah terlalu sulit. Nah langsung saja.

Cara Pemasangan di Blogspot

Ke Blogger lalu pilih Tata Letak/Layout

Pilih Blog Archive/Arsip Blog. Bagi yang sudah ada widget ini silahkan ke tahap selanjutnya.

Ikuti opsi yang ada pada gambar berikut. Pada bagian style pilih Flat List. Jangan Cek "Show Oldest Posts First", Pilih "Archive Frequency" berdasarkan bulan "Monthly" pada Date Format settingnya terserah anda.

klik Save / Simpan

Selanjutnya ke Blogger > Settings > Template. Backup terlebih dahulu Template Anda lalun klik Edit HTML > Proceed

Cari kode berikut.(Perhatikan idnya biasanya berbeda "BlogArchive1", bisa saja "BlogArchive2", "BlogArchive3" dan lain-lain)
```
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
```

Ganti kode yang diatas pada (tahap 6) dengan kode berikut:

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> 
<b:includable id='main'> 
  <b:if cond='data:title'> 
    <h2><data:title/></h2> 
  </b:if> 
  <div class='widget-content'> 
  <div id='ArchiveList'> 
  <div expr:id='data:widget.instanceId + "_ArchiveList"'> 
    <b:if cond='data:style == "HIERARCHY"'> 
     <b:include data='data' name='interval'/> 
    </b:if> 
    <b:if cond='data:style == "FLAT"'> 
      <b:include data='data' name='flat'/> 
    </b:if> 
    <b:if cond='data:style == "MENU"'> 
      <b:include data='data' name='menu'/> 
    </b:if> 
  </div> 
  </div> 
  <b:include name='quickedit'/> 
  </div> 
</b:includable> 
<b:includable id='toggle' var='interval'> 
  <!-- Toggle not needed for Calendar --> 
</b:includable> 
<b:includable id='flat' var='data'> 
<div id='bloggerCalendarList'> 
  <ul> 
    <b:loop values='data:data' var='i'> 
      <li class='archivedate'> 
        <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) 
      </li> 
    </b:loop> 
  </ul> 
</div> 
<div id='blogger_calendar' style='display:none'> 
<table id='bcalendar'><caption id='bcaption'> 
</caption> 
<!-- Table Header --> 
<thead id='bcHead'></thead> 
<!-- Table Footer --> 
<!-- Table Body --> 
<tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> 
<tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> 
<tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> 
<tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> 
<tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> 
<tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> 
</tbody> 
</table> 
<table id='bcNavigation'><tr> 
<td id='bcFootPrev'></td> 
<td id='bcFootAll'></td> 
<td id='bcFootNext'></td> 
</tr></table>   
<div id='calLoadingStatus' style='display:none; text-align:center;'> 
<script type='text/javascript'>bcLoadStatus();</script> 
</div> 
<div id='calendarDisplay'/> 
</div> 
<script  type='text/javascript'> initCal();</script> 
</b:includable> 
<b:includable id='posts' var='posts'> 
<!-- posts not needed for Calendar --> 
</b:includable> 
<b:includable id='menu' var='data'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable> 
<b:includable id='interval' var='intervalData'> 
  Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
</b:includable> 
</b:widget>

Sekarang cari kode berikut </head> lalu letakkan kode berikut sebelumnya

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226<script type='text/javascript'> 
//<![CDATA[ 
var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF6wrM1_B0igonoxPhgRXVJp8iB4SVWjacFsgf6HGXf2ecbFiBBlkRDHGc-RRLw5iUxu4t2VzEA-0phHWftPQquOgnmCCwo5Q1cq9Oz3t4B3s4LJHpaTT-4i097gYaMIDTYLIpXDeF5Gk/s1600/horizontal-loading.gif"; 
var bcLoadingMessage = " Loading...."; 
var bcArchiveNavText = "View Archive"; 
var bcArchiveNavPrev = '◄'; 
var bcArchiveNavNext = '►'; 
var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; 
// Nothing to configure past this point ---------------------------------- 
var timeOffset; 
var bcBlogID; 
var calMonth; 
var calDay = 1; 
var calYear; 
var startIndex; 
var callmth; 
var bcNav = new Array (); 
var bcList = new Array (); 
//Initialize Fill Array 
var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; 
function openStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'block'; 
   document.getElementById('calendarDisplay').innerHTML = ''; 
  } 
function closeStatus(){ 
   document.getElementById('calLoadingStatus').style.display = 'none'; 
  } 
function bcLoadStatus(){ 
   cls = document.getElementById('calLoadingStatus'); 
   img = document.createElement('img'); 
   img.src = bcLoadingImage; 
   img.style.verticalAlign = 'middle'; 
   cls.appendChild(img); 
   txt = document.createTextNode(bcLoadingMessage); 
   cls.appendChild(txt); 
  } 
function callArchive(mth,yr,nav){ 
// Check for Leap Years 
  if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
   calMonth = mth; 
   calYear = yr; 
   if(mth.charAt(0) == 0){ 
      calMonth = mth.substring(1); 
      } 
   callmth = mth; 
   bcNavAll = document.getElementById('bcFootAll'); 
   bcNavPrev = document.getElementById('bcFootPrev'); 
   bcNavNext = document.getElementById('bcFootNext'); 
   bcSelect = document.getElementById('bcSelection'); 
   a = document.createElement('a'); 
   at = document.createTextNode(bcArchiveNavText); 
   a.href = bcNav[nav]; 
   a.appendChild(at); 
   bcNavAll.innerHTML = ''; 
   bcNavAll.appendChild(a); 
   bcNavPrev.innerHTML = ''; 
   bcNavNext.innerHTML = ''; 
   if(nav <  bcNav.length -1){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavPrev; 
      bcp = parseInt(nav,10) + 1; 
      a.href = bcNav[bcp]; 
      a.title = 'Previous Archive'; 
      prevSplit = bcList[bcp].split(','); 
      a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; 
      bcNavPrev.appendChild(a); 
      } 
   if(nav > 0){ 
      a = document.createElement('a'); 
      a.innerHTML = bcArchiveNavNext; 
      bcn = parseInt(nav,10) - 1; 
      a.href = bcNav[bcn]; 
      a.title = 'Next Archive'; 
      nextSplit = bcList[bcn].split(','); 
      a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; 
      bcNavNext.appendChild(a); 
     } 
   script = document.createElement('script'); 
   script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; 
   document.getElementsByTagName('head')[0].appendChild(script); 
} 
function cReadArchive(root){ 
// Check for Leap Years 
  if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { 
      fill[2] = '29'; 
   } 
  else { 
      fill[2] = '28'; 
   } 
    closeStatus(); 
    document.getElementById('lastRow').style.display = 'none'; 
    calDis = document.getElementById('calendarDisplay'); 
    var feed = root.feed; 
    var total = feed.openSearch$totalResults.$t; 
    var entries = feed.entry || []; 
    var fillDate = new Array(); 
    var fillTitles = new Array(); 
    fillTitles.length = 32; 
    var ul = document.createElement('ul'); 
    ul.id = 'calendarUl'; 
    for (var i = 0; i < feed.entry.length; ++i) { 
      var entry = feed.entry[i]; 
      for (var j = 0; j < entry.link.length; ++j) { 
       if (entry.link[j].rel == "alternate") { 
       var link = entry.link[j].href; 
       } 
      } 
      var title = entry.title.$t; 
      var author = entry.author[0].name.$t; 
      var date = entry.published.$t; 
      var summary = entry.summary.$t; 
      isPublished = date.split('T')[0].split('-')[2]; 
      if(isPublished.charAt(0) == '0'){ 
         isPublished = isPublished.substring(1); 
         } 
      fillDate.push(isPublished); 
      if (fillTitles[isPublished]){ 
          fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; 
          } 
      else { 
          fillTitles[isPublished] = title; 
          } 
      li = document.createElement('li'); 
      li.style.listType = 'none'; 
      li.innerHTML = '<a href="'+link+'">'+title+'</a>'; 
      ul.appendChild(li); 
      } 
   calDis.appendChild(ul); 
   var val1 = parseInt(calDay, 10) 
   var valxx = parseInt(calMonth, 10); 
   var val2 = valxx - 1; 
   var val3 = parseInt(calYear, 10); 
   var firstCalDay = new Date(val3,val2,1); 
   var val0 = firstCalDay.getDay(); 
   startIndex = val0 + 1; 
  var dayCount = 1; 
  for (x =1; x < 38; x++){ 
      var cell = document.getElementById('cell'+x); 
      if( x < startIndex){ 
          cell.innerHTML = ' '; 
          cell.className = 'firstCell'; 
         } 
      if( x >= startIndex){ 
          cell.innerHTML = dayCount; 
          cell.className = 'filledCell'; 
          for(p = 0; p < fillDate.length; p++){ 
              if(dayCount == fillDate[p]){ 
                  if(fillDate[p].length == 1){ 
                     fillURL = '0'+fillDate[p]; 
                     } 
                  else { 
                     fillURL = fillDate[p]; 
                     } 
                  cell.className = 'highlightCell'; 
                  cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; 
                 } 
              } 
          if( dayCount > fill[valxx]){ 
             cell.innerHTML = ' '; 
             cell.className = 'emptyCell'; 
             } 
          dayCount++; 
         } 
      } 
    visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; 
    if(visTotal >35){ 
        document.getElementById('lastRow').style.display = ''; 
       } 
  } 
function initCal(){ 
   document.getElementById('blogger_calendar').style.display = 'block'; 
   var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
   var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
   document.getElementById('bloggerCalendarList').style.display = 'none'; 
   calHead = document.getElementById('bcHead'); 
   tr = document.createElement('tr'); 
   for(t = 0; t < 7; t++){ 
       th = document.createElement('th'); 
       th.abbr = headDays[t]; 
       scope = 'col'; 
       th.title = headDays[t]; 
       th.innerHTML = headInitial[t]; 
       tr.appendChild(th); 
      } 
   calHead.appendChild(tr); 
  for (x = 0; x <bcInit.length;x++){ 
     var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; 
     var stripMonth = bcInit[x].href.split('_')[1]; 
     bcList.push(stripMonth + ','+ stripYear + ',' + x); 
     bcNav.push(bcInit[x].href); 
     } 
  var sel = document.createElement('select'); 
  sel.id = 'bcSelection'; 
  sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
  q = 0; 
  for (r = 0; r <bcList.length; r++){ 
       var selText = bcInit[r].innerHTML; 
       var selCount = bcCount[r].innerHTML.split('> (')[1]; 
       var selValue = bcList[r]; 
       sel.options[q] = new Option(selText + ' ('+selCount,selValue); 
       q++ 
       }                   
   document.getElementById('bcaption').appendChild(sel); 
   var m = bcList[0].split(',')[0]; 
   var y = bcList[0].split(',')[1]; 
   callArchive(m,y,'0'); 
} 
function timezoneSet(root){ 
   var feed = root.feed; 
   var updated = feed.updated.$t; 
   var id = feed.id.$t; 
   bcBlogId = id.split('blog-')[1]; 
   upLength = updated.length; 
   if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} 
   else {timeOffset = updated.substring(upLength-6,upLength);} 
   timeOffset = encodeURIComponent(timeOffset); 
} 
//]]> 
</script> 
<script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>

klik Save/Simpan. Pemasangan sudah hampir selesai.

Penambahan CSS (Temanya)

Masih di bagian Template cari kode berikut ]]></b:skin> dan letakkan salah satu tema berikut di atasnya/sebelum ]]></b:skin>

LIGHT Theme by MBT

12345678910111213141516171819202122232425262728293031323334353637383940/* Start of Post Navigator by MBT (LIGHT Theme) ------ */ 
#calendarDisplay {display:none;} 
/* div that holds calendar */ 
#blogger_calendar { margin:0px auto 0px 0px;width:100%;} 
/* Table Caption - Holds the Archive Select Menu */ 
#bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif} 
/* The Archive Select Menu */ 
#bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;} 
/* The Heading Section */ 
table#bcalendar thead {} 
/* Head Entries */ 
table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;} 
/* The calendar Table */ 
table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff} 
/* The Cells in the Calendar */ 
table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;} 
/* Links in Calendar */ 
table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;} 
table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} 
/* First Row Empty Cells */ 
td.firstCell {visibility:visible;} 
/* Cells that have a day in them */ 
td.filledCell {  background:#fff;} 
td.filledCell:hover {  background:#dddddd;} 
/* Cells that are empty, after the first row */ 
td.emptyCell {visibility:hidden;} 
/* Cells with a Link Entry in them */ 
td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7} 
td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7} 
/* Table Footer Navigation */ 
table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;} 
table#bcNavigation a:link {text-decoration:none;color:#0080ff} 
table#bcNavigation a:hover{text-decoration:underline;} 
td#bcFootPrev {width:10px;} 
td#bcFootAll{text-align:center;} 
td#bcFootNext {width:10px;} 
ul#calendarUl {margin:5px auto 0!important;} 
ul#calendarUl li a:link {} 
#calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}
/* End of Post Navigator by MBT (LIGHT Theme) ------ */

Untuk merubah warna teks (teks yang warna biru) ganti 0080ff menggunakan Hex Color Generator

Untuk merubah warna background cell yang aktif cari kode ini 53A9FF

Untuk merubah warna background cell pada saat di sorot cari kode 72B9FF

Klik Simpan/Save lalu lihat hasilnya

Sumber Kode: phydeaux3 dan MBT ~ Blogger Archive Calender

Terima kasih kepada MKR atas ilmunya ini semoga bermanfaat: ; Merubah Widget Arsip Blogger menjadi Kalender - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

KrishnaVandanu

Minggu

Embed Code Syntax Highlighting in Blogger

Senin

Merubah Widget Arsip Blogger menjadi Kalender - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Cara Pemasangan di Blogspot

Penambahan CSS (Temanya)

LIGHT Theme by MBT

HAM Pancasila: Jalan Tengah antara Kebebasan dan Tanggung Jawab Sosial

creativecommons

Arsip Blog

get-cc.cc