Secara default kita dapat menambahkan halaman (page) pada wordpress melalui menu Page > Add New. Tetapi halaman yang kita tambahkan hanya bersifat statis, dalam arti kata, kita hanya dapat menuliskan isinya saja. Tanpa bisa menambahkan script PHP kedalam halaman tersebut. Nah bagaimana jika kita ingin menampilkan Halaman tersebut dengan gaya yang kita inginkan ?

Langkah awal yang kita lakukan adalah membuat sebuat file php dengan nama terserah anda, sebagai contoh saya ingin membuat halaman profil sendiri, file tersebut saya beri nama “profilku.php”. Simpanlah file ini satu folder dengan folder template yang anda gunakan sekarang.

Langkah Kedua adalah mengetikkan kode php kedalam file tersebut, atau cukup dengan Copy + Paste script dibawah ini.

<?php
/*
Template Name: Profil Saya
*/
?>

<?php get_header(); ?>

<div>

Isi dari Halaman / script

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Keterangan :

• Dibagian Template Name berfungsi untuk memberi nama Halaman tersebut
• get_header berfungsi untuk menampilkan Header dari Template
• get_sidebar berfungsi untuk menampilkan Sidebar dari Template
• get_footer berfungsi untuk menampilkan Footer dari Template

Jika anda tidak ingin menampilkan Sidebar, silahkan hapus fungsi get_sidebar nya.

Langkah Ketiga adalah menyesuaikan struktur CSS template yang anda gunakan dengan yang baru.

Langkah Keempat, buatlah page baru dari wordpress, caranya, pilih menu Page > Add New. Beri nama Page tersebut, misalnya “Profil”. Lalu pada bagian Attribute, tukarlah pilihan Template dari “Default Template” menjadi “Profil Saya”. Simpan/update halaman tersebut. Lihatlah hasilnya.

Tampilan akan dipengaruhi oleh CSS bawaan template yang anda gunakan. Tata letak dipengaruhi oleh tag <div> pada template.

Bagaimana menambahkan tombol Facebook Like pada Situs / Blog ?

Tombol Like ini dapat digunakan kedalam Situs, Blogger dan Wordpress Blog. Untuk itu saya akan membagi 3 kategori cara memasukkan tombolnya :

A. Situs/Website

Jika anda ingin menambahkan tombol Facebook like pada sebuah situs, kita cukup menambahkan baris kode HTML berikut ini :

<iframe src="http://www.facebook.com/widgets/like.php?href=http://www.belajarpc.info"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:40px"></iframe>

B. Blogger

Jika anda ingin menambahkannya kedalam Blog blogspot, berikut langkah-langkahnya :

1. Login ke Blogger Account dan pilih Layout > Edit HTML dan klik pada check box “Expand Widget Templates”

2. Cari tag <data:post.body/> lalu pastekan code dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

C. Wordpress Blog

Untuk menambahkan tombol Facebook Like pada blog Wordpress, kita harus menambahkan code dibawah ini pada file index.php di template wordpress anda, yang tersimpan dalam folder themes.

Silahkan tentukan sendiri peletakan posisi yang diinginkan, pastekan code ini :

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?> &amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:40px"></iframe>

Dari ketiga proses diatas yang berbeda sebenarnya hanya pada bagian :

• href=http://www.belajarpc.info"
• href=&quot; + data:post.url + &quot;
• href=<?php the_permalink(); ?>

Google, pingomatic, technorati dan ping server lainnya menyediakan layanan ini tentu saja memiliki tujuan, seperti untuk memudahkan blog/situs mana yang harus dikunjungi berdasarkan pemberitahuan dari ping server, dari pada mereka harus mengunjungi semuanya. Sehingga akan menghemat sumberdaya dan waktu. Bagi kita sendiri tentu saja memperoleh keuntungan tersendiri, terutama dalam hal mempromosikan artikel lebih cepat menyebar di Search Engine.

Untuk setiap platform blog, seperti Wordpress dan Blogspot, tentu saja sudah dilengkapi dengan fasilitas ping server. Tetapi banyak diantara kita masih belum mengetahui dimana pengaturannya. Bagi pengguna wordpress bisa dilihat dari Dashboard wordpress > Settings > Writing, lihatlah dibagian bawah, kita akan menemukan setting tersebut, seperti terlihat pada gambar dibawah ini.

Default dari listnya hanya berisi satu alamat server. Agar lebih banyak dan cepat dikunjungi oleh Bot search Engine, teman-teman blogger dapat menambahkan list Ping Server dibawah ini : (Copy + Paste)

http://1470.net/api/ping
http://api.feedster.com/ping
http://api.feedster.com/ping.php
http://api.moreover.com/ping
http://api.moreover.com/RPC2
http://api.my.yahoo.co.jp/RPC2
http://api.my.yahoo.com/RPC2
http://api.my.yahoo.com/rss/ping
http://audiorpc.weblogs.com/RPC2
http://bblog.com/ping.php
http://bitacoras.net/ping
http://blog.goo.ne.jp/XMLRPC
http://blogdb.jp/xmlrpc
http://blogmatcher.com/u.php
http://blogpeople.net/ping
http://blogsearch.google.ae/ping/RPC2
http://blogsearch.google.at/ping/RPC2
http://blogsearch.google.be/ping/RPC2
http://blogsearch.google.bg/ping/RPC2
http://blogsearch.google.ca/ping/RPC2
http://blogsearch.google.ch/ping/RPC2
http://blogsearch.google.cl/ping/RPC2
http://blogsearch.google.co.cr/ping/RPC2
http://blogsearch.google.co.hu/ping/RPC2
http://blogsearch.google.co.id/ping/RPC2
http://blogsearch.google.co.il/ping/RPC2
http://blogsearch.google.co.in/ping/RPC2
http://blogsearch.google.co.it/ping/RPC2
http://blogsearch.google.co.jp/ping/RPC2
http://blogsearch.google.co.ma/ping/RPC2
http://blogsearch.google.co.nz/ping/RPC2
http://blogsearch.google.co.th/ping/RPC2
http://blogsearch.google.co.uk/ping/RPC2
http://blogsearch.google.co.ve/ping/RPC2
http://blogsearch.google.co.za/ping/RPC2
http://blogsearch.google.com.ar/ping/RPC2
http://blogsearch.google.com.au/ping/RPC2
http://blogsearch.google.com.br/ping/RPC2
http://blogsearch.google.com.co/ping/RPC2
http://blogsearch.google.com.do/ping/RPC2
http://blogsearch.google.com.mx/ping/RPC2
http://blogsearch.google.com.my/ping/RPC2
http://blogsearch.google.com.pe/ping/RPC2
http://blogsearch.google.com.sa/ping/RPC2
http://blogsearch.google.com.sg/ping/RPC2
http://blogsearch.google.com.tr/ping/RPC2
http://blogsearch.google.com.tw/ping/RPC2
http://blogsearch.google.com.ua/ping/RPC2
http://blogsearch.google.com.uy/ping/RPC2
http://blogsearch.google.com.vn/ping/RPC2
http://blogsearch.google.com/ping/RPC2
http://blogsearch.google.de/ping/RPC2
http://blogsearch.google.es/ping/RPC2
http://blogsearch.google.fi/ping/RPC2
http://blogsearch.google.fr/ping/RPC2
http://blogsearch.google.gr/ping/RPC2
http://blogsearch.google.hr/ping/RPC2
http://blogsearch.google.ie/ping/RPC2
http://blogsearch.google.in/ping/RPC2
http://blogsearch.google.it/ping/RPC2
http://blogsearch.google.jp/ping/RPC2
http://blogsearch.google.lt/ping/RPC2
http://blogsearch.google.nl/ping/RPC2
http://blogsearch.google.pl/ping/RPC2
http://blogsearch.google.pt/ping/RPC2
http://blogsearch.google.ro/ping/RPC2
http://blogsearch.google.ru/ping/RPC2
http://blogsearch.google.se/ping/RPC2
http://blogsearch.google.sk/ping/RPC2
http://blogsearch.google.tw/ping/RPC2
http://blogsearch.google.us/ping/RPC2
http://bulkfeeds.net/rpc
http://coreblog.org/ping/
http://feedsky.com/api/RPC2
http://hamo-search.com/ping.php
http://holycowdude.com/rpc/ping/
http://mod-pubsub.org/kn_apps/blogchatt
http://ping.amagle.com/
http://ping.bitacoras.com
http://ping.blo.gs/
http://ping.blogg.de/
http://ping.bloggers.jp/rpc/
http://ping.blogmura.jp/rpc/
http://ping.blogoon.net/
http://ping.blogs.yandex.ru/RPC2
http://ping.cocolog-nifty.com/xmlrpc
http://ping.exblog.jp/xmlrpc
http://ping.fc2.com/
http://ping.feedburner.com
http://ping.kutsulog.net/
http://ping.myblog.jp/
http://ping.namaan.net/rpc
http://ping.rootblog.com/rpc.php
http://ping.snap.com/ping/RPC2
http://ping.syndic8.com/xmlrpc.php
http://ping.weblogalot.com/rpc.php
http://ping.weblogs.se/
http://ping.wordblog.de/
http://pinger.blogflux.com/rpc/
http://pingqueue.com/rpc/
http://r.hatena.ne.jp/rpc
http://rcs.datashed.net/RPC2/
http://rpc.blogbuzzmachine.com/RPC2
http://rpc.bloggerei.de/ping/
http://rpc.blogrolling.com/pinger/
http://rpc.britblog.com/
http://rpc.icerocket.com:10080/
http://rpc.newsgator.com/
http://rpc.reader.livedoor.com/ping
http://rpc.tailrank.com/feedburner/RPC2
http://rpc.technorati.com/rpc/ping
http://rpc.technorati.jp/rpc/ping
http://rpc.twingly.com/
http://rpc.weblogs.com/RPC2
http://rpc.wpkeys.com/
http://services.newsgator.com/ngws/xmlrpcping.aspx
http://signup.alerts.msn.com/alerts-PREP/submitPingExtended.doz
http://topicexchange.com/RPC2
http://trackback.bakeinu.jp/bakeping.php
http://wasalive.com/ping/
http://weblogs.com/
http://www.a2b.cc/setloc/bp.a2b
http://www.bitacoles.net/ping.php
http://www.blogdigger.com/RPC2
http://www.blogoole.com/ping/
http://www.blogoon.net/ping/
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogpeople.net/servlet/weblogUpdates
http://www.blogroots.com/tb_populi.blog?id=1
http://www.blogshares.com/rpc.php
http://www.blogsnow.com/ping
http://www.blogstreet.com/xrbin/xmlrpc.cgi
http://www.holycowdude.com/rpc/ping/
http://www.imblogs.net/ping/
http://www.lasermemory.com/lsrpc/
http://www.mod-pubsub.org/kn_apps/blogchatter/ping.php
http://www.newsisfree.com/RPCCloud
http://www.newsisfree.com/xmlrpctest.php
http://www.popdex.com/addsite.php
http://www.snipsnap.org/RPC2
http://www.weblogues.com/RPC/
http://xmlrpc.blogg.de
http://xping.pubsub.com/ping/
http://zhuaxia.com/rpc/server.php
https://phobos.apple.com/WebObjects/MZFinance.woa/wa/pingPodcast

Nah.. apa saja jenis font tersebut ?

1. Palatino Linotype / Palatino

WINDOWS 97.09% / MAC 78.86%

Alternatif pengganti font Times dan Georgia.

2. Tahoma

SUPPORT: WINDOWS 96.09% / MAC 72.02%

Font yang bagus sebagai pengganti Arial atau Helvetica.

3. Impact

WINDOWS 95.85% / MAC 88.08%

Font ini cocok sekali digunakan untuk headlines.

4. Century Gothic

WINDOWS 85.44% / MAC 42.50%

Font ini memiliki karakter yang elegan. Dan jenis font ini juga sangat bagus untuk headline.

5. Arial Black

WINDOWS 97.73% / MAC 96.18%

Memiliki kesamaan kesan dengan font Impact.

6. Arial Narrow

WINDOWS 87.08% / MAC 91.01%

Font ini cocok jika dijadikan sebagai sub judul headline.

7. Copperplate / Copperplate Gothic Light

WINDOWS 58.13% / MAC 85.85%

Jenis font ini lebih banyak digunakan oleh Mac User.

8. Gill Sans / Gill Sans MT

WINDOWS 43.09% / MAC 90.82%

Satu lagi inovasi yang dikeluarkan oleh Blogger. Sebelumnya saya memposting Fitur Terbaru Blogspot bisa Menambahkan Halaman, kini blogger membuat para blogger lebih terbuai, karena mudah mengedit template sendiri dengan “Blogger Template Designer“. Blogger telah mempersiapkan Template baru dengan 15 pilihan sebagai template default. Semua template dapat dengan mudah ditata letaknya serta kita dapat memodifikasi dan mendesain ulang template tanpa harus memahami tentang CSS dan HTML.

Nah penasarankan ? Jika begitu coba dulu tonton video dibawah ini yang menggambarkan kemampuan dari fitur Blogger Template Designer.

Fitur apa saja yang ada pada Blogger Template Designer ?

Terdapat 15 default template, dan dikelompokkan kedalam kategori Simple, Picture Window, Awesome Inc, dan Watermark.

Banyak terdapat pilihan Layout, 1 kolom, 2 kolom dan 3 kolom yang bisa diubah lebarnya dan dikelompokkan tata letaknya

Banyak sekali gambar latar (background) yang bagus dan menarik dari iStockphoto

Bagaimana memulai Blogger Template Designer ?

1. Pertama silahkan Login di http://draft.blogger.com

2. Kemudian klik Tab Layout dan kita akan menjumpai Tab Template Designer seperti terlihat pada gambar dibawah ini.

3. Klik link tersebut, anda sudah siap menggunakannya.

4. Untuk tahapan penggunaan, silahkan tonton lagi dengan seksama Video diatas.

5. Klik link ini untuk melihat contoh dari hasil Blogger Template Designer.

Selamat Mencoba

Jika sudah punya terus apa yang dilakukan untuk diterapkan ke blog kita? Pada kesempatan ini, saya akan memberikan tips bagaimana caranya untuk membuat suatu custom domain untuk blogspot. Langkah-langkahnya pun tidak terlalu panjang dan berbelit.

Saat ini saya akan menjelaskan caranya. Sebagai sample saya menggunakan domain gratis .CO.CC yang anda bisa dapatkan gratis setahun. Tapi jangan kuatir. Anda bisa menerapkannya pada domain berbayar milik anda sendiri.

Selain itu saya akan menggunakan fitur dari DNS Park untuk mengatur pengaturan domain yang saya miliki

1. Buka DNS Park. Setelah tampilan muncul. daftar dengan mengklik menu “Register Now!”

   

2. Setelah itu isi formulir yang ada sesuai dengan perintah.

   

3. Setelah semua diisi dan disubmit, maka buka email yang anda daftarkan tadi. Karena ada email konfirmasi dari . Setelah email tersebut dibuka, buka link yang diberikan lalu login.

   

4. Setelah login klik DNS Hosting, lalu Add domain.

   

5. Setelah itu akan ada daftar isian yang harus diisi.

   

6. Setelah mengklik add now. maka akan ada tampilan infonya diatas form bahwa alamat domain sudah ditambahkan. Sekarang klik edit domain disebelah kiri.
7. Klik nama domain anda.
8. Setelah itu, akan ada daftar-daftar pengaturan yang bisa diatur dan pengauran name server yang harus dimasukkan ke pengaturan domain anda. Yang saya beri warna kuning merupakan isian yang harus dimasukkan ke pengaturan domain anda.

   

9. Setelah anda catat. Jangan ditutup jendela DNS Park. Buka di tab  baru alamat dimana anda membeli domain. Saya menggunakan .CO.CC sebagai sample. Dan dibawah ini merupakan tampilan dari .CO.CC

   

10. Setelah itu pada .CO.CC klik salah satu domain yang anda atur. Dan muncul tampilan baru. Klik setup.
11. Setelah itu akan muncul beberapa pilihan. Klik menu Name Server. Maka akan ada form isian. Isikan dengan apa yang anda telah catat pada langkah 7. Klik (+ Add More…) Untuk menambah isian dan klik setup jika sudah selesai.
12. Jika sudah. Maka dibutuhkan beberapa menit atau maksimal 48 jam untuk proses update.  Sekarang pindah lagi ke DNS Park. pada jendela bawah ganti A dengan CNAME, pada alias name isi www, dan pada destinion name isi dengan ghs.google.com. Setelah itu klik update all. 
13. Sementara proses update keduanya berlangsung, kita atur langsung saja blog kita agar diubah nama domainnya. Buka blogger kemudian login lalu klik pengaturan pada blog yang anda pilih.
14. Klik publikasikan.
15. Setelah itu klik domain ubahsuaian.
16. Kemudian klik beralih ke pengaturan lanjut
17. Setelah itu isi nama domainnya ke kotak isian tersebut. Setelah selesai klik simpan setelan.

Selesai sudah pengaturan yang harus dilakukan. Sekarang anda tinggal menunggu proses update domain anda.

Jika anda pernah menggunakan Facebook dan Twitter, ada fasilitas berbagi yang bisa diintegrasikan pada blog yaitu seperti Tombol Facebook Share dan Retweet. Sehingga akan memudahkan pengunjung blog kita untuk melakukan sharing informasi kepada jaringannya. Begitu pula dengan Google Buzz.

Nah sekarang kita akan coba membuat tombol untuk sharing informasi dengan menggunakan Google Buzz pada blogspot.

Adapun langkah-langkahnya adalah sbb :

1. Login kemudian pilih Layout > Edit HTML dan klik Expand widget templates.

2. Kopikan kode dibawah ini dibawah :

&lt;div style=&quot;float:<em>right</em>;padding:4px;&quot;&gt;
&lt;a expr:href='&amp;quot;http://www.google.com/reader/link?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title + &amp;quot;&amp;amp;srcTitle=&amp;quot; + data:blog.title+ &amp;quot;&amp;amp;srcURL=&amp;quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'&gt;
&lt;img alt='Buzz It' src='<b>http://lh6.ggpht.com/_FuXX2m46MaY/S3w9LFvtEhI/AAAAAAAAAVg/343DQn_ZFzc/buzzit.png</b>' style='border:0px;'/&gt;&lt;/a&gt;
&lt;/div&gt;

4. Pastekan kode dibawah kode berikut :

<div class='post-header-line-1'/>

atau bisa juga diletakkan sebelum kode :

<data:post.body/>

5. Simpan template anda, dan lihat hasilnya. Atau bisa dilihat di PC Guru Box.

Meta Tag bisa juga diterapkan ada blog platform Blogger. Jadi jika anda ingin mempromosikan blog anda Meta Tag merupakan cara yang patut dicoba.

Untuk langkah awalnya. Sebaiknya kita daftarkan dulu blog kita pada google. Dengan mengklik link “ini”. Setelah anda mengkliknya maka pada kolom isian URL ketikkan alamat blog atau situs anda. Kemudian Comments isi dengan keterangan blog atau situs anda atau kosongkan saja. Dan terakhir ketikkan kode verifikasi dibawahnya.

Setelah anda mendaftarkannya pada google. maka selanjutnya menambahkan meta tag untuk informasi tambahan, keyword bagi situs atau blog anda yang merupakan script yang paling dicari google untuk informasi sebuah situs. Klik link “ini”. Link ini akan mengarahkan anda ke meta tag creatoryang akan membantu anda membuat script meta tag jika anda kutang mahir tentang script ini.

Di situs tersbut terdapat beberapa kolom isian yang anda bisa isi tentang isi dari blog atau situs yang anda punya.

1. Title : Isi dengan judul blog atau situs anda (pada pemilik blogger jangan isi dengan simbol ‘).
2. Description : Isi dengan deskripsi tentang blog atau situs anda yang biasanya merupakan penjelasan tentang isi blog atau situs anda.
3. Keyword : Isi dengan kata yang berhubungan dengan blog atau situs anda. Misal jika isi blog atau situs anda tentang kompuer maka keywordnya adalah “komputer, hardware. software, dll..” Setiap kata pisahkan dengan koma dan spasi. Jangan diisi dengan kata yang melenceng dari isi blog atau situs anda. Karena biasanya akan dianggap phising oleh google atau anti virus yang memiliki internet security.
4. Copyright : Isi saja dengan “Copyright | (Nama Anda)” atau anda bisa mengisnya sesuai selera.
5. Author : Isikan dengan nama anda.
6. Email : Isi dengan email anda. Sebaiknya jangan diisi sebab email memamerkan email akan membuat inbox anda menjadi penuh dengan spam.
7. Language : isi saja dengan english dulu nanti kita akan mengubahnya.
8. Charset : Isi dengan ISO-8859-… pilih antara 1-9
9. Distribusi : Global.
10. Rating : Pilih sesuai dengan selera anda.
11. Robots : Pilih saja INDEX.FOLLOW.
12. Revisit after : Isi terserah anda,
13. Expires : Jika anda situs atu blog anda bersifat sementara ketikkan kapan anda akan berhenti.
14. Cheklist kedua kotak yang ada dibawah kemudian klik tombol Get Tags

Jika anda sudah mendapatkan scriptnya maka copy script anda seperti :

<head>
    <title>Nama Situs</title>
    <meta name="description" content="ABCDEF">
    <meta name="keywords" content=" IT, Technologies, Teknologi.">
    <meta name="copyright" content="Copyright | Author">
    <meta name="author" content="Penulis">
    <meta name="Charset" content="ISO-8859-9">
    <meta name="Distribution" content="Global">
    <meta name="Rating" content="General">
    <meta name="Robots" content="INDEX,FOLLOW">
    <meta name="Revisit-after" content="7 Days">
</head>

kopikan saja dari <meta tag… pertama sampai <meta tag… terakhir.

Setalah anda mengkopinya maka buka edit html pada blogger atau edit html file index situs anda. Cari <title>Nama Situs Anda</title> yang biasanya terletak di atas. Setelah ketemu, pastekan dibawahnya. Edit setiap meta seperti <meta name="description" content="ABCDEF"> dengan menambahkan tanda / sebelum tanda > contohnya menjadi <meta name="description" content="ABCDEF"/>. Pastikan semua meta tag sudah diberi tanda / sebelum tanda > . Setelah itu simpan perubahan pada blogger atau situs anda.

Sebagai contoh anda dapat melihat pada blog ini. Disini saya mencoba membuat dua halaman yaitu About Me dan Contact Me. Dengan adanya fitur halaman ini kita bisa lebih leluasa mengembangkan blog. Membuat halaman pada blog semudah kita melakukan posting artikel. Tinggal pilih menu New Page, kemudian ketikan konten yang diinginkan, lalu pilih posisi peletakan pada template, publish. Jadi deh halaman anda.

Makin Penasaran ajakan ? Kalo iya, ayo kita coba untuk membuatnya. Adapun langkah-langkah untuk membuat halaman adalah sbb :

1. Login ke situs draft.blogger.com.

2. Pada Tab Menu Post, klik Edit Pages.

3. Lalu Pilih New Page. Dan Isikan Judul Halaman pada Page Title, dan ketikan informasi yang ingin disampaikan pada editor blogger. Jika selesai, Klik Tombol Publish Page.

4. Berikutnya kita diminta untuk memilih lokasi peletakan Halaman pada Blog. Bisa diletakkan pada Sidebar, Menu Tab atau dibuat menu link tersendiri. Jika telah dipilih, klik Tombol Save And Publish.

5. Jadilah halaman anda. Silahkan lihat hasilnya pada blog anda.

*) Sebagai catatan, anda hanya bisa menambahkan halaman maksimum sampai 10 halaman, jadi gunakanlah dengan semaksimal mungkin .

Ternyata juga tidak terlalu sulit. Mau tau caranya ? Saya akan membantu teman-teman untuk mewujudkannya, Penulisan kode apa saja yang bisa dilakukan dengan Syntax Highligter ?Diantaranya adalah : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. Sangat banyak bukan ?

Adapun langkah-langkahnya adalah sebagai berikut :

1. Login dan Klik "Layout" > "Edit HTML" dan klik “Expand Widget Templates”.

2. Klik situs http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, kemudian copy semua kode yang ada.

3. Paste code css tersebut sebelum tag berikut ]]--></b:skin>

4. Kemudian copykan kode berikut ini sebelum tag </head> :

<!– Add-in CSS for syntax highlighting –>
<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>

5. Langkah terakhir adalah memasukkan kode dibawah ini sebelum tag </body> :

<!– Add-in Script for syntax highlighting –>
<script language=’javascript’>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

6. Untuk menuliskannya kedalam blog, gunakan format seperti dibawah ini :

<pre name="code" class="html">
….ketikkan kode yang anda inginkan disini….!
</pre>

Untuk menuliskan kode tertentu, silahkan ubah tulisan yang berwarna merah (html) dengan jenis kode yang ingin dituliskan, seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Sebagai contoh hasilnya bisa dilihat pada blog ini Syntax Highlighter Kode.