Screenshot SyntaxHighlighter Pada Blogger

Dalam kesempatan kali ini saya ingin berbagi cara menambahkan SyntaxHighlighter pada postingan blog.
Untuk lebih jelasnya mengenai SyntaxHighlighter bisa anda temukan disini http://alexgorbatchev.com/SyntaxHighlighter/

Oke langsung saja, pertama masuk ke akun Blogger anda
lalu pilih blog anda
pilih pengaturan Template
lalu piih Edit HTML
carilah code </head> lalu paste script code dibawah ini di atas code </head> tersebut

<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- SyntaxHighlighter by Alex Gorbatchev (afh4mz.blogspot.com) -->

Lalu klik Simpan Template
Sekarang cobalah anda membuat entri/postingan baru
agar bisa menggunakan SyntaxHighlighter tadi gunakan pengeditan HTML (lihat gambar)

lalu copy kan code berikut

<pre class="brush: html">

XXXX

</pre>

lalu kembalikan lagi ke pengeditan Compose biasa dan ubahlah XXXX dengan text/script yang ingin anda buat menjadi SyntaxHighlighter

CATATAN: terdapat kode "brush: html" --> sesuaikan kode nya dengan bahasa yang anda akan ketikkan, misal anda menggunakan bahasa C maka ubahlah menjadi "brush: c" 

berikut daftar syntax/bahasa yang support untuk SyntaxHighlighter

BRUSH NAME	BRUSH ALIASES	FILE NAME
ActionScript3	as3, actionscript3	shBrushAS3.js
Bash/shell	bash, shell	shBrushBash.js
ColdFusion	cf, coldfusion	shBrushColdFusion.js
C#	c-sharp, csharp	shBrushCSharp.js
C++	cpp, c	shBrushCpp.js
CSS	css	shBrushCss.js
Delphi	delphi, pas, pascal	shBrushDelphi.js
Diff	diff, patch	shBrushDiff.js
Erlang	erl, erlang	shBrushErlang.js
Groovy	groovy	shBrushGroovy.js
JavaScript	js, jscript, javascript	shBrushJScript.js
Java	java	shBrushJava.js
JavaFX	jfx, javafx	shBrushJavaFX.js
Perl	perl, pl	shBrushPerl.js
PHP	php	shBrushPhp.js
Plain Text	plain, text	shBrushPlain.js
PowerShell	ps, powershell	shBrushPowerShell.js
Python	py, python	shBrushPython.js
Ruby	rails, ror, ruby	shBrushRuby.js
Scala	scala	shBrushScala.js
SQL	sql	shBrushSql.js
Visual Basic	vb, vbnet	shBrushVb.js
XML	xml, xhtml, xslt, html, xhtml	shBrushXml.js

• Brush Name adalah jenis syntax yang ingin digunakan
• Brush Aliases adalah class yang harus digunakan
• File Name adalah file .js yang diperlukan

Sekian cara untuk membuat SyntaxHighlighter pada postingan blog, semoga bermanfaat :)

Dalam kesempatan kali ini saya ingin sharing bagaimana cara menambahkan widget Twitter di blog yang bisa update secara realtime dan bisa langsung follow serta mention ke akun twitter kita seperti terlihat pada gambar diatas.

Langsung aja kita masuk ke Blogger.com → pilih blog yang akan ditambahkan widget ini → pilih Tata Letak → lalu pilih Tambahkan Gadget pada posisi yang anda inginkan → lalu pilih HTML/Javascript seperti pada gambar dibawah, lalu klik tombol +

Lalu Copy script code di bawah ini

<a class="twitter-timeline" href="https://twitter.com/USERNAME" data-widget-id="325139462449405953">My Twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

ubah lah "https://twitter.com/USERNAME" dengan URL Twitter anda

contoh: https://twitter.com/afhamz

setelah itu klik simpan dan lihat hasilnya..

Semoga bermanfaat :)

Ya mungkin sudah banyak yang tahu cara memasang musik di blog, terutama menggunakan layanan gratis dari divine-music.info karena loading musicnya yang cukup cepat dibanding layanan lainnya..

namun dari situs tersebut kita hanya bisa memasang music saja yang autoplay saat page blog kita di buka, dan kita tidak bisa mem-Pause atu men-Stop music tersebut..

Nah kali ini saya akan bagi cara memasang musik di blog dengan tombol Play Pause dan Stop seperti yang bisa kalian lihat di bawah ini (detailnya buka saja blog saya dan scroll ke page paling bawah)

Berikut langkah-langkahnya

1. Buka situs berikut http://divine-music.info/

2. Pilih "Browse All" lalu cari lagu yang kamu inginkan

3. Sebagai contoh saya mengambil lagu Cold Play - Fix You (lihat dan ikuti gambar di bawah)

4. Lalu akan terbuka page baru, copy URL nya (lihat gambar berikut)

5. Lalu buka blogger anda -> pilih Tata Letak -> Tambahkan Gadget -> HTML/JavaScript

6. Copy code berikut

<center><iframe frameborder="0" width="150" height="150" src="http://PASTE URL MUSIC DISINI.swf" id="wpcom-iframe-1589d54d376188dbbad6ec99f7d58b66"></iframe></center><center><a href="http://afh4mz.blogspot.com/2013/06/pasang-music-autoplay-di-blog-dengan.html">Music for Blogger by Afhamz</a></center>

7. Lalu ubahlah "http://PASTE URL MUSIC DISINI.swf" dengan URL yang tadi sudah di copy (No. 4)
8. Simpan Gadget nya, lalu cek blog anda :D

Tambahan
Anda bisa juga menggunakan musik sendiri, yaitu dengan convert file .mp3 ke .swf (cari saja software converternya di google) lalu upload lah file tersebut ke akun 4shared anda, contoh link musik Maroon 5 - She Will Be Loved dari akun 4shared saya
http://www.4shared.com/document/1rlsRPaK/Maroon_5_-_She_Will_Be_Loved.html

ubahlah document menjadi embed dan .html menjadi .swf sehingga nanti link yang anda masukkan ke code HTML widget nya seperti ini
http://www.4shared.com/embed/1rlsRPaK/Maroon_5_-_She_Will_Be_Loved.swf

Setelah itu klik simpan saja..

Good Luck ;)