20 November 2011

TUTORIAL CARA BUAT SPHERE LABEL | LABEL ANIMASI BLOGUMULUS



Macam mana cara nak buat Labels ada awan-awan terbang macam blog OdahOne ni? Boleh ajar tak?

Ok, caranya senang jek...Ikut langkah-langkah kat bawah ni step by step sure berjaya buat labels awan nano yang berterbangan kat blog anda...OdahOne suka buat tutorial secara bergambar untuk senang faham...So, jangan pening kepala kalau tengok banyak sangat gambar...KLIK pada gambar untuk lihat image yang lebih besar & jelas...Boleh try & error buatlah sampai anda berjaya...Kita mulakan dari A to Z...

1. Firstly, SIGN IN dulu ke account blogger anda. Then, KLIK pada 'Design'


2. KLIK 'Template'  & seterusnya klik 'EDIT HTML'

3. KLIK 'Proceed' untuk ke langkah seterusnya

4. KLIK  untuk tick pada 'Expand Widget Templates' & kemudian jangan lupa KLIK 'Save Template' untuk buat backup template yang asal supaya kalau berlaku error time kita edit template boleh recover semula dengan script template yang asal

5. Tekan 'F3' atau 'Ctrl F' supaya keluar menu macam di atas. Kemudian copy code ini;  <b:section class='sidebar' id='sidebar' preferred='yes'> & paste diruangan tersebut & press 'ENTER'

6. CARI code seperti berikut atau yang seakan-akan sama;


<b:section class='sidebar' id='sidebar' preferred='yes'>

7. Bila dah jumpa, COPY pulak code yang kat bawah ni & PASTE di BAWAH code di atas (boleh rujuk ***Contoh Bergambar)

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

***Contoh Bergambar code yang telah Di PASTE. ***CODE <b:section class='sidebar' id='sidebar' preferred='yes'> mungkin  berbeza mengikut template masing-masing, cari code yang seakan-akan sama dengan code tersebut

8. LASTLY, klik 'Save Template' untuk simpan & lihatlah hasilnya pada blog anda


Belum habis lagi...ada lagi ni...

Untuk EDIT Label Animasi Awan Nano (Blogumulus) ini mengikut kesesuaian blog anda ikuti pula langkah-langkah yang berikut;


1. ADJUST / MODIFIED LEBAR, TINGGI & WARNA BACKGROUD 

Variable untuk lebar dan tinggi ada pada baris script berikut, cari & edit pada script tersebut mengikut kesesuaian blog anda

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 menunjukkan lebar widget (saiz standard)
300 menunjukkan tinggi widget (saiz standard)
#ffffff menunjukkan warna background (warna default ialah White boleh ubah guna code warna sendiri)
*Klik SINI untuk pilih code warna anda
Contoh : Kalau nak gunakan background warna merah gantikan code #ffffff berikut dengan yang ini #ff0000

2. TUKAR WARNA TEXT

so.addVariable("tcolor", "0x333333");

"tcolor" adalah flash variable, jadi pastikan anda hanya menggantikan angkanya sahaja. 333333 ialah warna default iaitu Dark Grey. Gantikan angka tersebut dengan code warna pilihan anda.
*Klik SINI untuk pilih code warna anda

3. TUKAR KELAJUAN PUTARAN

so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);

100 menunjukkan kelajuan standard putaran label (labels yang bergerak seakan-akan awan, lagi tinggi lagi laju dia berputar)
*Cuba gerakkan cursor pada labels yang telah siap untuk melihat kelajuannya berputar

4. TUKAR UKURAN FONT

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

12 menunjukkan ukuran font standard yang digunakan
*Kurangkan angka 12 untuk kecilkan font & tambah kalau nak besarkan lagi font 

5. TUKAR BACKGROUD JADI TRANSPARENT

//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);

Kalau nak buat background jadi transparent just delete tanda // dari script di atas


SEKIAN...TERIMA KASIH

Selamat Mencuba! Kalau ada sebarang pertanyaan jangan malu untuk bertanya...OdahOne akan cuba, try & test untuk menjawabnya...


Credit untuk Encik Roy Tanck kerana mencipta Labels Awan Nano ni...Boleh Klik SINI untuk tutorial asal

"CARA UNTUK LETAK IKLAN CHURP CHURP BERGAMBAR DALAM BLOG | TUTORIAL"
Related Posts Plugin for WordPress, Blogger...