Membuat / Menulis SVG Code

*RePosting dari rumah lama.

Yuuuk mari langsung aja yak??

ini adalah termasuk dalam basic advance dalam pembuatan manual SVG code menurut saya.
di sini akan saya ambil contoh untuk device 480x360 (onyx)
untuk menulisnya gunakan Notepad++

sebelum mulai, penulisan svg code ini untuk "fix icon" bukan yang bisa ditentukan sendiri oleh user. 
Mariiiii,,
Pertama, siapkan dulu icon2 nya (image extention .png) misal size nya 100x100 pixel dan saya kasih nama : Messages.png

Quote:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svghttp://www.plazmic.com/svg/schema/svg.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:pz="http://www.plazmic.com/plazmic_extents" id="TESTING" xml:space="default" width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet">

    <g id="TB_Messages">
        <image id="Msg" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages.png"/>
        <image id="Msg-fokus" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages_f.png"/>
        <set attributeName="display" begin="TB_Messages.focusin" to="none" xlink:href="#Msg"/>
        <set attributeName="display" begin="TB_Messages.focusin" to="inline" xlink:href="#Msg-fokus"/>
        <set attributeName="display" begin="TB_Messages.focusout" to="inline" xlink:href="#Msg"/>
        <set attributeName="display" begin="TB_Messages.focusout" to="none" xlink:href="#Msg-fokus"/>
        <loadScene begin="TB_Messages.activate" xlink:href="x-exec://net_rim_bb_messaging_app.Messages"/>
    </g>
</svg>

Simple kan?? hehehehe
yuuuk, kita bahas tiap perintah nya :

Code:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:pz="http://www.plazmic.com/plazmic_extents" id="TESTING" xml:space="default" width="100%" height="100%" viewBox="0 0 480 360" preserveAspectRatio="xMidYMid meet">

code bagian ini harus ada karena itu basic command nya, bisa anda peroleh dari hasil compile ataupun dari composser yang d export ke .svg

id="TESTING" = id dari svg itu sendiri..terserah mo d kasih nama apa aja juga boleh..

viewBox="0 0 480 360" = d sini saya setting "x" dan "y" pada posisi "0" (pojok kiri atas dari layar)
untuk normal nya dari composser dia akan tertulis "-240 -180 480 360" (layar d bagi 2) ... dalam perhitungan menentukan posisi saya kira akan lebih enak jika pakai yg "0" 

Code:

<g id="TB_Messages">

yang akan menunjukkan id button dari image yg kita buat.

Code:

<image id="Msg" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages.png"/>

id untuk menampilkan dari image pada posisi normal

Code:

<image id="Msg-fokus" width="100" height="100" x="0" y="0" display="inline" xlink:href="Images/Messages_f.png"/>

id untuk menampilkan dari image pada posisi fokus

Code:

<set attributeName="display" begin="TB_Messages.focusin" to="none" xlink:href="#Msg"/>
<set attributeName="display" begin="TB_Messages.focusin" to="inline" xlink:href="#Msg-fokus"/>
<set attributeName="display" begin="TB_Messages.focusout" to="inline" xlink:href="#Msg"/>
<set attributeName="display" begin="TB_Messages.focusout" to="none" xlink:href="#Msg-fokus"/>

adalah setting untuk image fokus dan normalnya. lihat pada bagian begin dan to sertaxlink:hrefnya

Code:

<loadScene begin="TB_Messages.activate" xlink:href="x-exec://net_rim_bb_messaging_app.Messages"/>

adalah untuk menampilkan isi / fitur dari image tersebut. (di sini saya ambil contoh untuk mengakses fitur Message dari bb kita)

Sekian dulu simple tutorial ini..
jika ada permasalahan, silahkan post d sini aja yak? biar kita pecahkan sama2...

terimakasih..
Make It Better Than Ever

Read More »

Shrink your SVG Button Code (BlackBerry Themes Builder & Composer)

ORIGINAL BY Jizzomaru 
Hai.. BZT dondoters and BZoners,
Kali ini kami dari BZThemers ingin berbagi tips cara menshrink koding SVG yang notabene hasil export dari composer amat sangat banyak baris yang tidak perlu dan bisa di buang, dengan menshrink kode dalam SVG selain meminimalisasi size dari SVG tersebut, dapat memudahkan kita untuk memanage setiap baris kode pada SVG kita.

Banyak sekali developer themes yang membuat/mencoding SVG nya secara manual dari nol, tanpa menggunakan bantuan dari Composer, hal ini tentu sangat memberikan keuntungan tersediri bagi developer themes tersebut, okey tanpa banyak bicara mari kita mulai proses shrinking SVG.

Perhatikan baris kode dari SVG yang saya buat dari hasil export BlackBerry Composer, yang isinya hanya satu tombol….

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->
<g id="tabImage">
<image id="img_1_1_11" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png"/>
<image id="img_11_1_12" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_13" x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_14"  x="0" y="0" width="68" height="68" xlink:href="Images/tabImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="tabFocusImage">
<image id="img_1_1_15" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_16" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_17" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_18" x="0" y="0" width="68" height="68" xlink:href="Images/tabFocusImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_11" id="_anim_3" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_11" id="_anim_4" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_11" id="_anim_5" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_6" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_7" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_12" id="_anim_8" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_9" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_10" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_13" id="_anim_11" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_12" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_13" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_14" id="_anim_14" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_15" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_16" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_15" id="_anim_17" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_18" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_19" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_16" id="_anim_20" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_21" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_22" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_17" id="_anim_23" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_24" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_25" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_18" id="_anim_26" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wkwkw.. sesu anu banget kan,,, satu tombol bisa menghasil kan baris kode sebanyak itu, bayangkan apabila kita membuat 6 atau 12 tombol pada composer…(dalam pikiran kalian pasti bilang WOOGH!!) 

Okay selanjutnya, tetap tegakkan kepala kalian…hehe (boleh siapin panadol) :

Code:

<g id="tabImage">
* kode awal tab image ketika normal state (biasanya full transparent)

Code:

<g id="tabFocusImage">
* kode awal tab image ketika focus state (background biru)

Code:

<g id="normalImage">
* kode awal icon image ketika normal state

Code:

<g id="focusImage">
* kode awal image ketika focus state

Pada tutorial ini saya hanya ingin menampilkan tombol icon saja, dan tidak membutuhkan tab image, jadi saya akan meghilangkan, memangkas, memotong, menghapus, mendelete dan men men lainnya….so perhatikan perubahan kode dibawah ini

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->


<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate"  values="visible;visible"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wkwk… lumenyan kan sekarang agag lebih ramping kodenya…. Sekarang mari kita shrink lagi kodenya karena masih ada beberapa baris yang menurut saya tidak perlu dan mubazir….sekali lagi perhatikan perubahan kode dibawah ini..lihat baris yang di cetak tebal…

Quote:<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version: 6.0.0.21 - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlnsz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g id="Layer_1">
<!-- pz:tag type="layer" -->
<g id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->


<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
<image id="img_11_1_20" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_21" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_22" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png" visibility="hidden"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_11_1_24" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_21_1_25" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
<image id="img_31_1_26" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages" begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate” values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_30" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_31" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_20" id="_anim_32" attributeName="visibility" begin="Theme_Button_1.activate” values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_33" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_34" attributeName="visibility" begin="Theme_Button_1.focusout" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_21" id="_anim_35" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze” />
<animate xlink:href="#img_31_1_22" id="_anim_36" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_37" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_22" id="_anim_38" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden"
keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_42" attributeName="visibility" begin="Theme_Button_1.focusin" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_43" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_11_1_24" id="_anim_44" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_45" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_46" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_21_1_25" id="_anim_47" attributeName="visibility" begin="Theme_Button_1.activate" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_48" attributeName="visibility" begin="Theme_Button_1.focusin" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_49" attributeName="visibility" begin="Theme_Button_1.focusout" values="hidden;hidden" keyTimes="0;1" dur="0.45s" fill="freeze" />
<animate xlink:href="#img_31_1_26" id="_anim_50" attributeName="visibility" begin="Theme_Button_1.activate" values="visible;visible" keyTimes="0;1" dur="0.45s" fill="freeze" />
</svg> 

Mari kita delete yang dicetak tebal tersebut….

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
<g  id="Theme_Button_1"
transform="translate(-204 23)">
<!-- pz:tag type="button" -->
<g  id="Theme_Button_1-Contents">
<!-- pz:tag type="layer" -->
<g id="normalImage">
<image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
</g>
<g id="focusImage">
<image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
</g>
</g>
</g>
</g>

<!-- pz:tag output="anim" -->

<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Wow….wow….wow…. amazing…..sekarang kode nya mulai terlihat sangat sexy…. (tidak buncit lagi )…..tapi tunggu dulu jangan girang dulu, belum selesai masih ada lagi, kode diatas belum selesai, kenapa…???? Karena jika kalian import SVG nya pada TB (Themes Builder) saya jamin tombolnya tidak sido muncul…., kok bisa sih..??? hehe… karena jika kalian perhatikan pada baris animate nilai valuesnya masih hidden;hidden, nah kita harus perbaiki baris tersebut….so mari nengok ke bawah lagi yuk..

Code:

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />

Img_1_1_19 adalah id referensi untuk normal button state icon dan Img_1_1_19 untuk focus button state icon, dari kode di atas nilai values nya masih hidden, oleh karena itu kita harus menyesuaikan nilai valuesnya supaya sesuai sebagaimana mestinya… lets cekidot perubahannya…

Code:

<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden"
  keyTimes="0;1"  dur="0.45s" fill="freeze" />

<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values=" visible;visible "
  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values=" visible;visible "  keyTimes="0;1"  dur="0.45s" fill="freeze" />

Nah wis rampung sekarang , untuk kode keseluruhannya lihat baris berikut.

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated by BlackBerry Composer Version:  6.0.0.21  - Apr 18 2011 -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents" id="Untitled_10" xml:space="default" width="480" height="360" viewBox="-240 -180 480 360" preserveAspectRatio="xMidYMid meet">
<g  id="Layer_1">
<!-- pz:tag type="layer" -->
  <g  id="Theme_Button_1" transform="translate(-204 23)">
  <!-- pz:tag type="button" -->
     <g  id="Theme_Button_1-Contents">
     <!-- pz:tag type="layer" -->
     <g id="normalImage">
           <image id="img_1_1_19" x="0" y="0" width="68" height="68" xlink:href="Images/normalImage_img_1_1.png"/>
     </g>
     <g id="focusImage">
           <image id="img_1_1_23" x="0" y="0" width="68" height="68" xlink:href="Images/focusImage_img_1_1.png" visibility="hidden"/>
     </g>
    </g>
  </g>
</g>

<!-- pz:tag output="anim" -->
<loadScene xlink:href="x-exec://net_rim_bb_messaging_app.Messages"  begin="Theme_Button_1.activate"/>
<animate xlink:href="#img_1_1_19" id="_anim_27" attributeName="visibility" begin="Theme_Button_1.focusin"  values="hidden;hidden” keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_28" attributeName="visibility" begin="Theme_Button_1.focusout"  values="visible;visible" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_19" id="_anim_29" attributeName="visibility" begin="Theme_Button_1.activate”  values="hidden;hidden" keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_39" attributeName="visibility" begin="Theme_Button_1.focusin"  values=" visible;visible " keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_40" attributeName="visibility" begin="Theme_Button_1.focusout"  values="hidden;hidden"  keyTimes="0;1"  dur="0.45s" fill="freeze" />
<animate xlink:href="#img_1_1_23" id="_anim_41" attributeName="visibility" begin="Theme_Button_1.activate"  values=" visible;visible "  keyTimes="0;1"  dur="0.45s" fill="freeze" />
</svg>

Eeeng iiiiing eeeeng….. sekian sodara sodara BZoners dan BZT dondoters kode nya sudah ramping sexy dan siap diproduksi…#eh dimasupin ke TB…haha sekian dulu Tips dan Tricks or Tutorial gendeng dari kami….


Mmwuach….

Read More »

Pengenalan SVG dan Manual Coding

ORIGINAL BY Jizzomaru
SVG Code atau SVG Document merupakan file konfigurasi yang ditulis dalam bahasa XML, dan biasanya ciri khas dari document ini adalah mempunyai extension (.svg). SVG merupakan singkatan dari Scalable Vector Graphic yang artinya dalam bahasa kita adalah tampilan antar muka dengan basis vector yang dapat disesuaikan, dibentuk atau diukur maupun diapain aja juga bisa terserah imajinasi anda.

Dokumentasi SVG Code for BlackBerry

Spoiler : 

Download This Document

---

Hidden command :

Wallpaper:

Code:

x-object:/Image?src=wallpaper

Date:

Code:

x-object:/CurrentDateTime?clocktype=date

Time:

Code:

x-object:/CurrentDateTime?clocktype=time

Battery:

Code:

xlink:href="x-object:/BatteryLevel"

Coverage:

Code:

xlink:href="x-object:/Coverage"

Roaming Icon:

Code:

xlink:href="x-object:/Roaming"

GPS Mode Icon:

Code:

x-object:/GPSMode

Alarm Icon:

Code:

x-object:/AlarmIndicator

System Status:

Code:

x-object:/SystemStatus

Indicators:

Code:

xlink:href="x-object:/GridIndicators

Wifi Signal:

Code:

x-object:/WLANSignalLevel

Owner Name:

Code:

x-object:/OwnerInfo?id=name

Owner's Info:

Code:

x-object:/OwnerInfo?id=info

'PERHATIAN !!!'

Sebagian dari code ini ada yang masih berfungsi ada yang tidak tergantung juga tipe device BlackBerry nya

---

Contoh SVG Code untuk menampilkan Owner Info Text di HomeScreen :

Code:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Self Writing SVG Code by Jizzomaru SVG Writer -->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/2000/svg http://www.plazmic.com/svg/schema/svg.xsd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:pz="http://www.plazmic.com/plazmic_extents"
id="WarZone" xml:space="default" width="100%" height="100%"
viewport-fill="#ffffff" viewBox="-240 -160 480 320" preserveAspectRatio="xMidYMid meet">

<g  id="bg-layer">
    <!-- pz:tag type="layer" -->
<image id="banner-svg"
    x="-240" y="-160" width="480" height="320"
    xlink:href="Images/banner-svg_img_1_1.png"/>
   
<image
      x="-212"
      y="-120"
      width="230"
      height="18"
      xlink:href="x-object:/OwnerInfo?id=name&width=230&height=18&
      font-family=BBCondensed&font-style=bold&font-size=10&fill=efefef&valign=top&align=left"/>
     
</g>
</svg>

Kode ini berguna bila kita ingin membuat themes yang mengIncludekan ID / nama sang pemilik device di HomeScreen #:-s ...


Selamat Belajar yah

Shrink your SVG Button Code (BlackBerry Themes Builder & Composer)

'PERHATIAN'

Quote Posting TS akan saya hadiahkan bata merah..
Peace

Read More »