Trik Posting SourceCode di WordPress


Apakah anda orang yang sedang membuat tutorial pemrograman pada blog anda di WordPress? anda ingin menyertakan script program yang syntaxnya dihighlight secara otomatis pada tulisan anda tapi kebingungan tidak tahu caranya? Jangan khawatir.. kami punya solusinya..

*hehe gaya iklan banget 😀

Caranya adalah dengan menulis script program anda diantara tag
[ sourcecode lang=”abc” ] dan [ /sourcecode ]. Parameter language yg disupport: actionscript3, bash, coldfusion, cpp, csharp, css, delphi, erlang, fsharp, diff, groovy, javascript, java, javafx, matlab (keywords only), objc, perl, php, text, powershell, python, ruby, scala, sql, vb, xml.

Jika bahasa pemrograman yang anda inginkan tidak disupport oleh fitur syntax highlightingnya WordPress, pilih saja diantara bahasa-bahasa tersebut yang paling mirip syntaxnya. Misalnya saya sendiri biasa menulis ActionScript dan menggunakan parameter ‘javascript’ karena syntax ActionScript 2.0 mirip dengan JavaScript.

Contoh sebuah script C++ sebelum dikasih tag “sourcecode”:

#include
#include

int main(int argc, char *argv[])
{
QApplication app (argc, argv);
QLabel *label = new QLabel(“Hello Qt!”, 0);
app.setMainWidget(label);
label->show();
return app.exec();
}

//initulisansengajadibuatpanjangpanjanguntukngetesthorizontalscrollnyajalanapakagakgitulohjadidianggapnyasatubarispenuhgakkepotong

setelah dikasih tag dg lang-param ‘cpp’:

#include <qapplication.h>
#include <qlabel.h>

int main(int argc, char *argv[])
{
QApplication app (argc, argv);
QLabel *label = new QLabel("Hello Qt!", 0);
app.setMainWidget(label);
label->show();
return app.exec();
}

//initulisansengajadibuatpanjangpanjanguntukngetesthorizontalscrollnyajalanapakagakgitulohjadidianggapnyasatubarispenuhgakkepotong

Beberapa error yang biasanya timbul adalah scriptnya gak ke’render’ sebagaimana mestinya. Dari beberapa kejadian yang saya alami, bisa saya ambil kesimpulan ini karena nulis tagnya di tempat lain baru dicopy ke blog.. ternyata tanda apostrof (tanda koma yg suka ada di atas seperti ini -> ‘) di editornya WP dianggap beda dengan symbol apostrof di text editor lain. Jadi solusinya buatlah tag [ sourcecode language=”xyz” ][ /sourcecode ] pada editor blog.. biasanya cara ini ampuh. Error lain yang suka ada misalnya symbol & tiba-tiba jadi & atau simbol < jadi < kalau gini biasanya tinggal diedit saja di editor WYSIWYG-nya WordPress..

Demikianlah kiranya yang dapat saya sampaikan pada kesempatan hari ini, moga-moga trips nan singkat ini bisa dimanfaatkan sebaik-baiknya oleh para penulis blog tutorial,

Wassalam 8)
-F4154LMAN-

Referensi:
http://en.support.wordpress.com/code/posting-source-code/

Iklan

Buat Animasi Jam Analog dan Digital dengan Flash


Disadari atau tidak, jam sudah menjadi benda yang sangat penting dalam aktifitas keseharian kita. Dengan jam kita bisa melihat petunjuk waktu dan berjalannya, sehingga kita dapat melakukan rutinitas kegiatan dan acara sesuai pada jadwalnya. Terbayang kan bagaimana kacaunya hidup sehari-hari jika alat penunjuk waktu yang satu ini tidak pernah ada? Nah, sekarang ceritanya kita ingin membuat animasi Flashnya, gimana caranya?

Flash memiliki sebuah predefined Date class yang berguna untuk mengambil data berupa waktu dan tanggal relatif terhadap GMT/UTC atau relatif terhadap local time (yaitu waktu di sistem operasi dimana Flash Player tersebut sedang berjalan), sehingga kita dapat membuat aplikasi yang berhubungan dengan tanggal atau waktu seperti misalnya jam, kalender, timer, dan lain-lain.

Karena judulnya buat animasi jam, jadi disini saya hanya bahas cara membuat jam saja, baik digital (hanya menampilkan digit angka) maupun analog (seperti jam dinding pada umumnya).

1. Jam Digital

Buat 3 buah teks untuk tampilan jam, menit, dan detik. Kemudian ubah tipe teks ketiga-tiganya menjadi dynamic text, pada kolom variabelnya berikan nama teks_displayJam, teks_displayMenit, teks_displayDetik.

buat 3 kotak teks

buat 3 kotak teks

Terakhir baru berikan script di frame tersebut:

var dateObj:Date;
var jam:Number;
var menit:Number;
var detik:Number;
var teks_displayJam:String;
var teks_displayMenit:String;
var teks_displayDetik:String;

this.onEnterFrame= function()
{
    dateObj = new Date()
    jam = dateObj.getHours();
    menit = dateObj.getMinutes();
    detik = dateObj.getSeconds();

    if(jam < 10)
        teks_displayJam = "0" + jam.toString();
    else
        teks_displayJam = jam.toString();

    if(menit < 10)
        teks_displayMenit = "0" + jam.toString();
    else
        teks_displayMenit = menit.toString();

    if(detik < 10)
        teks_displayDetik = "0" + detik.toString();
    else
        teks_displayDetik = detik.toString();
}
hasil akhir

hasil akhir

2. Jam Analog

Pertama-tama buat 3 buah movieclip berbentuk garis yang akan berperan sebagai jarum penunjuk pada jam (jam, menit, dan detik) berikan instance name pada masing2 jarum dengan nama mc_jarumJam, mc_jarumMenit, dan mc_jarumDetik. Satu hal yang perlu diperhatikan adalah saat mengconvert masing2 garis menjadi symbol, set registration point ke titik tengah-bawah (lihat kotak yg ditunjuk mouse).

set registration point

set registration point

Gambar sebuah kerangka jam yang akan ditempati jarum-jarum tersebut, kreasikan sendiri desain bentuk, warna, dan ukurannya sebagus mungkin. Buat juga sebuah titik tepat di tengah-tengahnya agar mudah menyusun jarum-jarumnya, sekarang pasangkan ketiga jarum yang kita buat di awal tadi saling tumpang tindih, dengan acuan bagian bawah ketiga movieclip jarum berada di titik tengah jam, sehingga bagian atasnya mengarah tepat ke angka 12.

susun jarum

susun jarum

Terakhir berikan script pada frame:

this.onEnterFrame = function()
{
    var dateObj:Date = new Date();
    var detik:Number = dateObj.getSeconds();
    var menit:Number = dateObj.getMinutes();
    var jam:Number = dateObj.getHours();

    mc_jarumDetik._rotation = detik*6;
    mc_jarumMenit._rotation = menit*6;
    mc_jarumJam._rotation = jam*30;
    mc_jarumJam._rotation += (menit/2);
}
hasil akhir

hasil akhir

Tutorial lengkap ttg pembuatan Jam Digital dan Analog ini bisa dilihat di tabloid PC-Mild edisi 24/2008 (8 desember) 😉

. Continue reading “Buat Animasi Jam Analog dan Digital dengan Flash”

2 Tahun Blog {F4154LMAN}


Alhamdulillah, gak kerasa blog si gw (hmm.. sejak kapan saya menggunakan kata gw sebagai kata ganti orang pertama?) udah dua tahun usianya (blog dibuat 30 November 2006 dan posting pertama tanggal 14 Desember 2006).. kalau dia tuh diibaratkan manusia, bisa dibilang sekarang sedang masa lucu2nya.. wew! Continue reading “2 Tahun Blog {F4154LMAN}”

Cara Menerbitkan Post Pada Jadwal Tertentu Secara Otomatis di WordPress


Ada beberapa postingan tertentu yang hanya akan bagus jika diposting pada momen-momen tertentu (misalnya posting buat hari ulang tahun, hari besar tertentu, atau event2 lainnya), nah bisa jadi kadang kita udah buat draftnya jauh-jauh hari tapi begitu hari-H kita lupa menerbitkan draft yg udah kita buat tadi.. bisa dibayangkan akibatnya ketika besok2nya ingat tulisan kita sudah basi… oh no 😦 dan kalau saat hari-H kita tidak ada fasilitas akses internet gimana??

Oke2 tenang.. jangan khawatir dulu saudara2 8) ehm, WordPress sebagai yang terdepan di dunia blog ternyata memiliki settingan fitur ‘publish schedule’ yang bisa mempublish secara otomatis!

Gimana caranya?

Setalah draft tulisan selesai, pada saat edit post lihat di bagian kanan ada opsi Publish (ada kan?), klik sunting (kebetulan lg make WordPress bahasa Indonesia 😀 ), kemudian ubah tanggalnya ke waktu yang kita inginkan, misalkan kita ingin buat postingan yang otomatis terbit pas taun baru maka settingannya: Jan 01, 2009 @ 00:00, klik OK, kemudian akan muncul tombol ‘schedule’ yg warnanya biru, klik tombol schedule itu (jangan lupa! klo nggak bakal gagal). terakhir… kita tinggal menunggu saja tulisan akan terbit pada jadwal yang kita set tadi.. sederhana kan 😉 tapi jauh lebih praktis dibandingkan buat reminder… hehe

lihat widget paling kanan atas

lihat widget di kanan atas

NB:

postingan ini juga dipublish secara otomatis lho.. keren kan? 8) ehm

salah satu ciri schedulenya sukses adalah pada halaman sunting tulisan (../wp-admin/edit.php) ada keterangan countdown berapa lama lagi postingan bakal dipublish (lihat gambar dibawah)

.

.

.

eng ing eng

.

.

.

wew, posting akan terpublish otomatis 46 menit lagi!

wew, posting akan terpublish otomatis 46 menit lagi!

Cara Buat Favicon untuk Blog di WordPress.com


Tau istilah favicon kan? itu lho ikon kecil di address bar atau di tabnya browser yang menunjukkan identitas sebuah situs.

favourite-icon
situs WordPress, Wikipedia, Google, dan Blogger punya Favicon lucunya masing2

Ternyata blog kita yang di WordPress.com pun bisa ditambahin favicon, baca deh di post terbaru di WordPress.com yang judulnya ‘Go Get a Blavatar‘. Jadi Blavatar tuh avatar blog yang bakal ditampilkan sebagai favicon dan akan muncul juga pada pingback comment di blog lain.

Caranya gampang pisan, sodara2 :

1. Masuk ke dashboard blog
2. Masuk ke menu ‘options’ (penataan)
3. Lihat bagian ‘blog picture’, upload sebuah gambar buat favicon (.jpg atau .png)

blog-picture

browse gambar

4. Crop gambar yang mau diambil

favourite-icon2

Potong gambarnya

5. Selesai 😉

akhirnya blog saya punya avatar (T_T)

akhirnya blog saya punya avatar (T_T)

Lihat bahwa sekarang blog ini punya identitasnya sendiri

huehehe.. 8)

Pamer nih? pameeer....

Pamer nih? pameeer.... ciee

Pinguin Joged


Atraksi sederhana berupa goyang ngebor.. eh kesetrum seekor pinguin yang akan terus bergoyang manakala batere ditempatkan di tempat yang benar.

joged

drag baterenya ke tempat yang benar

Cara membuatnya sangat mudah: Sediakan 2 buah movieclip, Pinguin bergoyang [pinguin_mc] dan Batere [batere_mc], tambahkan gambar kabel yang akan menghubungkan pinguin dengan batere, kemudian berikan sedikit script untuk mengatur goyangan pinguin dengan syarat koordinat x dan y dari batere.

batere_mc.onPress = function(){
startDrag(this);
}

batere_mc.onRelease = function(){
stopDrag();
}

this.onEnterFrame=function(){
if(batere_mc._x >= 85
&& batere_mc._x <= 110
&& batere_mc._y >= 155
&& batere_mc._y <= 165){
pinguin_mc.play();
}
else {
pinguin_mc.stop();
}
}

Download SWF+FLA-nya di http://tinyurl.com/F4154LMAN-pinguinjoged

Readomattic, Fitur Baru di WordPress.com


Nyadar gak sih di waktu login ke dashboardnya blog di WordPress.com, di menu admin paling kanan ada menu baru yg namanya Readomattic?

readomattic

ini nih readomattic tuh

Sampai postingan ini ditulis belum ada keterangan resminya di WP.com, tapi udah bisa dicoba2 sih..  (asalnya sih blank, tapi pas saya ubah bahasa blognya jadi english eh bisa!!) Readomattic ini merupakan fitur yg baru di WordPress.com, semacam feed reader gitulah.. buat langganan feed Blog2 yg dihosting di WordPress.com, Top Post berdasarkan kategori, Tag, dan Twitter feeds. Jadi mungkin Readomattic tuh gabungan Fitur terdahulu (Blog Surfer+Tag Surfer) ditambah ‘Twitter Surfer’.

reado

halaman edit subscription

Tapi sayang euy cuman bisa subscribe blog yg di WordPress.com sama Twitter, kurang asyik kan? 😕