Berbagi-Kreativitas.blogspot.com - Hari semakin larut, tidak dirasa fitur atau Tool yang Saya rancang akhirnya selesai. Tool apakah itu? Sedikit membahas kembali postingan sebelumnya agar melengkapi kegiatan blogging Saya hari ini, tentang Buat Syntax Highlight Pada Blog. Syntax Highlight sering di gunakan atau di manfaatkan oleh orang-orang yang menyediakan jasa artikel panduan untuk desain, atau Trik Dan Tips dari website atau blog sebagai media yang menyangkut edit teks source code.
Syntax Highlight Saya pikir sangat bermanfaat karena fungsi dari tata letaknya menjadikan kode yang di posting terlihat lebih rapih karena edit teks akan mensesuaikan dari fungsi source code itu sendiri seperti, JavaSrip, XML/ HTML, C++ dan lain sebagainya. Untuk lihat Tools lihat disini
Buat Syntax Highlight Pada Blog
Langkah-Langkah Dalam Membuat Syntax Highlight Yang Akan di Posting
Caranya sangatlah mudah jika Anda paham maksud dari tool tersebut, Anda tinggal mengikuti langkah selanjutnya yang akan Saya bagikan hari ini agar kegiatan blogging Anda tidak terganggu Sayapun akan memberikan cara mudah, praktis dan juga hemat waktu hanya untuk Anda. Lihat contoh gambar kode yang telah disorot menggunakan Syntax Highlight Tool dan langkahnya sebagai berikut.
1. Pergi ke Syntax Highlight Tools disini
2. Input kode yang ingin Anda soroti
3. Contoh kode yang akan di sorot, lihat di bawah
Example code:
Hasil setelah di sorot seperti dibawah.
4. Download template, masuk ke Edit HTML template blog Anda, centang "Expand Widget Templates"
4. Cari kode tekan Ctrl+F untuk mencari cepat, letakkan kode Css berwarna biru tepat di atas kode </head> atau di bawah ]]></b:skin>
Cacatatan: agar mendapatkan kode Css seperti di atas, pada postingan form tool sebelumnya setting " diembed gaya/ stylesheet: :" menjadi "Tidak" sebelum eksekusi. Dan untuk variabel Css bisa Anda rubah sesuai keinginan setelah proses eksekusi kode pada tool sudah di lakukan. Cukup hanya nama variabelnya saja, seperti "berbagi-kreativitas", default variable: CICodeFormatter. Untuk setting lainnya lakukan di tool jangan di kode hasil input.
5. Untuk kode tambahan yang Anda harus letakkan pada postingan adalah seperti berikut.
6. Nah setelah tahapan di atas Anda lakukan dengan baik. Untuk postingan source code yang hendak Anda posting, cukup dengan menambahkan kode seperti pada langkah no. 5 saja selesai.
2. Input kode yang ingin Anda soroti
3. Contoh kode yang akan di sorot, lihat di bawah
Example code:
(function(){var _url=window.location.href;var _url=_url.replace(/((?:\?|&)?fbc_receiver=.+)?(?:#.*)?$/,"");var url=escape((typeof tweetmeme_url=="string")?tweetmeme_url:((typeof TWEETMEME_URL=="string")?TWEETMEME_URL:_url)).replace(/\+/g,"%2b");var source=(typeof tweetmeme_source=="string")?escape(tweetmeme_source):((typeof TWEETMEME_SOURCE=="string")?escape(TWEETMEME_SOURCE):false);var style=(typeof tweetmeme_style=="string")?escape(tweetmeme_style):((typeof TWEETMEME_STYLE=="string")?escape(TWEETMEME_STYLE):"normal");var service=(typeof tweetmeme_service=="string")?escape(tweetmeme_service):((typeof TWEETMEME_SERVICE=="string")?escape(TWEETMEME_SERVICE):false);var service_api=(typeof tweetmeme_service_api=="string")?escape(tweetmeme_service_api):((typeof TWEETMEME_SERVICE_API=="string")?escape(TWEETMEME_SERVICE_API):false);var alias=(typeof tweetmeme_alias=="string")?escape(tweetmeme_alias):((typeof TWEETMEME_ALIAS=="string")?escape(TWEETMEME_ALIAS):false);var hashtags=(typeof tweetmeme_hashtags=="string")?escape(tweetmeme_hashtags):((typeof TWEETMEME_HASHTAGS=="string")?escape(TWEETMEME_HASHTAGS):false);var space=(typeof tweetmeme_space=="number")?escape(tweetmeme_space):((typeof TWEETMEME_SPACE=="number")?escape(TWEETMEME_SPACE):false);var width=(typeof tweetmeme_width=="number")?escape(tweetmeme_width):((typeof TWEETMEME_WIDTH=="number")?escape(TWEETMEME_WIDTH):false);var src="http://api.tweetmeme.com/button.js";switch(style){case"compact":var h=20;var w=90;break;default:var h=61;var w=50;break}if(width){w=width}src+="?url="+url;src+="&style="+style;if(source!=false){src+="&source="+source}if(service){src+="&service="+service}if(service_api){src+="&service_api="+service_api}if(alias){src+="&alias="+alias}if(hashtags){src+="&hashtags="+hashtags}if(space){src+="&space="+space}if(document&&document.referrer){var ref=document.referrer;if(ref){src+="&o="+escape(ref)}}src+="&b=1";document.write('<iframe src="'+src+'" height="'+h+'" width="'+w+'" frameborder="0" scrolling="no"></iframe>');tweetmeme_url=null;TWEETMEME_URL=null;tweetmeme_source=null;TWEETMEME_SOURCE=null;tweetmeme_service=null;TWEETMEME_SERVICE=null;tweetmeme_service_api=null;TWEETMEME_SERVICE_API=null;tweetmeme_style=null;TWEETMEME_STYLE=null;tweetmeme_alias=null;TWEETMEME_ALIAS=null;tweetmeme_hashtags=null;TWEETMEME_HASHTAGS=null;tweetmeme_space=null;TWEETMEME_SPACE=null})(); Hasil setelah di sorot seperti dibawah.
<style type='text/css'>
pre.berbagi-kreativitas{
font-family:arial;
font-size:12px;
border:1px dashed #CCCCCC;
width:99%;
height:auto;
overflow:auto;
background:#f0f0f0;
line-height:20px;
background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOFOfw5imBea17gb-eZtMn-7HnnBPVs_mzaxmOG-9qrsZ8dYufGg7MRyXTBQofoXWF-sBEudPYgv28RKyi0MQgsBY79aQ77cgooUZ6HMLXGFhTEh5rxC2LGJ7VNCRGuc-JDv4fwA-i83aw/s320/codebg.gif);
padding:0px;
color:#000000;
text-align:left;
}
pre.berbagi-kreativitas code{
color:#000000;
word-wrap:normal;
}
</style>
<pre class="berbagi-kreativitas"><code class="berbagi-kreativitas">
(function(){var _url=window.location.href;var _url=_url.replace(/((?:\?|&amp;)?fbc_receiver=.+)?(?:#.*)?$/,"");var url=escape((typeof tweetmeme_url=="string")?tweetmeme_url:((typeof TWEETMEME_URL=="string")?TWEETMEME_URL:_url)).replace(/\+/g,"%2b");var source=(typeof tweetmeme_source=="string")?escape(tweetmeme_source):((typeof TWEETMEME_SOURCE=="string")?escape(TWEETMEME_SOURCE):false);var style=(typeof tweetmeme_style=="string")?escape(tweetmeme_style):((typeof TWEETMEME_STYLE=="string")?escape(TWEETMEME_STYLE):"normal");var service=(typeof tweetmeme_service=="string")?escape(tweetmeme_service):((typeof TWEETMEME_SERVICE=="string")?escape(TWEETMEME_SERVICE):false);var service_api=(typeof tweetmeme_service_api=="string")?escape(tweetmeme_service_api):((typeof TWEETMEME_SERVICE_API=="string")?escape(TWEETMEME_SERVICE_API):false);var alias=(typeof tweetmeme_alias=="string")?escape(tweetmeme_alias):((typeof TWEETMEME_ALIAS=="string")?escape(TWEETMEME_ALIAS):false);var hashtags=(typeof tweetmeme_hashtags=="string")?escape(tweetmeme_hashtags):((typeof TWEETMEME_HASHTAGS=="string")?escape(TWEETMEME_HASHTAGS):false);var space=(typeof tweetmeme_space=="number")?escape(tweetmeme_space):((typeof TWEETMEME_SPACE=="number")?escape(TWEETMEME_SPACE):false);var width=(typeof tweetmeme_width=="number")?escape(tweetmeme_width):((typeof TWEETMEME_WIDTH=="number")?escape(TWEETMEME_WIDTH):false);var src="http://api.tweetmeme.com/button.js";switch(style){case"compact":var h=20;var w=90;break;default:var h=61;var w=50;break}if(width){w=width}src+="?url="+url;src+="&amp;style="+style;if(source!=false){src+="&amp;source="+source}if(service){src+="&amp;service="+service}if(service_api){src+="&amp;service_api="+service_api}if(alias){src+="&amp;alias="+alias}if(hashtags){src+="&amp;hashtags="+hashtags}if(space){src+="&amp;space="+space}if(document&amp;&amp;document.referrer){var ref=document.referrer;if(ref){src+="&amp;o="+escape(ref)}}src+="&amp;b=1";document.write('&lt;iframe src="'+src+'" height="'+h+'" width="'+w+'" frameborder="0" scrolling="no"&gt;&lt;/iframe&gt;');tweetmeme_url=null;TWEETMEME_URL=null;tweetmeme_source=null;TWEETMEME_SOURCE=null;tweetmeme_service=null;TWEETMEME_SERVICE=null;tweetmeme_service_api=null;TWEETMEME_SERVICE_API=null;tweetmeme_style=null;TWEETMEME_STYLE=null;tweetmeme_alias=null;TWEETMEME_ALIAS=null;tweetmeme_hashtags=null;TWEETMEME_HASHTAGS=null;tweetmeme_space=null;TWEETMEME_SPACE=null})();
</code></pre>
4. Download template, masuk ke Edit HTML template blog Anda, centang "Expand Widget Templates"
4. Cari kode tekan Ctrl+F untuk mencari cepat, letakkan kode Css berwarna biru tepat di atas kode </head> atau di bawah ]]></b:skin>
Cacatatan: agar mendapatkan kode Css seperti di atas, pada postingan form tool sebelumnya setting " diembed gaya/ stylesheet: :" menjadi "Tidak" sebelum eksekusi. Dan untuk variabel Css bisa Anda rubah sesuai keinginan setelah proses eksekusi kode pada tool sudah di lakukan. Cukup hanya nama variabelnya saja, seperti "berbagi-kreativitas", default variable: CICodeFormatter. Untuk setting lainnya lakukan di tool jangan di kode hasil input.
5. Untuk kode tambahan yang Anda harus letakkan pada postingan adalah seperti berikut.
<pre class="berbagi-kreativitas"><code class="berbagi-kreativitas">
/** Kode yang Anda ingin post letakkan disini **/
</code></pre>6. Nah setelah tahapan di atas Anda lakukan dengan baik. Untuk postingan source code yang hendak Anda posting, cukup dengan menambahkan kode seperti pada langkah no. 5 saja selesai.
