Tutorial Blogger by Shannenpio

Sabtu, 17 Juli 2010

Cara Merubah Ukuran Tag Cloud Cumulus dengan Box Fleksibel

Supaya tag cloud cumulus full color yang sampeyan buat berdasar posting beberapa waktu yang lalu bisa ditempatkan di widget manapun dengan lebar kolom yang tersedia di blog, maka harus kita ubah desain boxnya dengan yang lebih fleksibel hingga ketika ukuran tag cloud di rubah maka box akan langsung menyesuaikan diri secara otomatis. Satu persatu akan kita bahas perubahan beberapa varible tag cloud dan box-nya secara berurutan.

Untuk mengikuti tutorial ini sebaiknya buka dulu tutorial tentang cara membuat label animasi tagcloud cumulus melalui link di bawah ini:

Rubah Box Tag Cloud Cumulus Full Color


Bentuk Susunan Desain Tag Cloud Full Color - Box
<DIV>
Javascript Tag Cloud Full Color
</DIV>
Untuk lebih jelasnya silahkan buka kembali posting tentang tag cloud full colornya dengan KLIK link di bawah ini:
Membuat Tag Cloud Cumulus Full Color

Kode HTML dan Javascript Tag Cloud Full Color - Box yang digunakan sesuai posting sebelumnya
<div class="menuTitle" style="text-align:center;font:18px Droid Serif;font-weight:bold;color:blue;">Label Tag Cloud mitrabaraya reyot</div>
<div class="box4" style="background:#222; width:278px;border:8px solid #333;margin:20px 0 20px 16px;">
<div class="box3" style="background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-1.png) center repeat-x;border:3px solid #555;width:272px;">
<div class="box2" style="background:transparent;width:266px;border:3px solid #777;"> 
<div class="box1" style="background:#999; width:250px; background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-02.png) center no-repeat;border:3px solid #999;padding:0  5px">
Javascript Tag Cloud Full Color
</div>
</div>
</div>
</div>

Rubah kode HTML Box Tag Cloud Full Color menjadi seperti di bawah ini :
<center>
<div class="menuTitle" style="text-align:center;font:22px Droid Serif;font-weight:bold;color:blue;">Label Tag Cloud mitra baraya</div>
<div class="box4" style="float:left;background:#222;border:6px solid #333;margin:20px 4px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">
<div class="box3" style="float:left;background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-1.png) center repeat-x;border:3px solid #555;">
<div class="box2" style="float:left;background:transparent;border:3px solid #777;"> 
<div class="box1" style="background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-02.png) center no-repeat;border:3px solid #999;padding:0  5px;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;">

Javascript Tag Cloud Cunulus Full Color

</div>
</div>
</div>
</div>
</center>

Rubah ukuran Tag Cloud Full Color
Setelah box selesai di perbaharui, sekarang kita akan rubah ukuran tag cloud full colornya melalui perubahan kode pada javascript. Lihat pada javascript dengan kode seperti di bawah ini :
var so = new 
SWFObject("https://sites.google.com/site/mitrabarayaprojec/cumulus-tagcloud/mitrabaraya_swf_cumulus.swf", "tagcloud", 
"250", "250", "7", "#333333");
- Kode yang berwarna kuning berfungsi untuk merubah lebar (width) tag cloud. Rubah sesuai lebar yang diinginkan sesuai kolom widget yang tersedia. Semakin diperbesar nilainya maka akan semakin lebar.
- kode yang berwarna hijau berfungsi untuk merubah tinggi tag cloud (height). Semakin besar nilainya maka akan semakin tinggi.

Box Kedua Tag Cloud Full Color
Sampeyan dapat juga memodifikasi box dalam bentuk seperti ini :
<center>
<div class="menuTitle" style="text-align:center;font:22px Droid Serif;font-weight:bold;color:blue;">Label Tag Cloud mitra baraya</div> 
<div class="box4" style="float:left;background:#222;border:6px solid #333;margin:20px 4px;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;">
<div class="box3" style="float:left;background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-1.png) center repeat-x;border:3px solid #555;">
<div style="color:yellow;margin:3px;">mitra baraya</div>
<div class="box2" style="float:left;background:transparent;border:3px solid #777;"> 
<div class="box1" style="background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-02.png) center no-repeat;border:3px solid #999;padding:0  5px;border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px;">  

Javascript Tag Cloud Cunulus Full Color

</div>
</div>
</div>
</div>
</center>

Merubah Kecepatan Animasi gerak Tag Cloud Cunulus Full Color
Perbesar atau perkecil kode yang berwarna merah pada kode di bawah ini :
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "250");
Semakin kecil nilai "tspeed", maka kecepatan semakin lambat. Sebagai contoh gantilah dalam nilai 100.

Merubah Warna dan Ukuran Font Tag Cloud Cunulus Full Color
Lihat Kode yang seperti berikut ini :
<a href='Link-24' style='9' color='0x37fbcf' hicolor='0xb4acfb'>Nama Link-24</a>
  1. style='9' : Angka 9 dapat dirubah untuk memperbesar dan memperkecil ukuran font.
  2. color='0x37fbcf' hicolor='0xb4acfb' Kedua kode di samping berfungsi untuk merubah warna font pada link yang ditampilkan di tag cloud full color.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :





» Happy Blogging - mitrabaraya «

Diposting oleh Shannenpio Cloning di 11.07 0 komentar  

Label: , , , ,

Sabtu, 10 Juli 2010

Tag Cloud Cumulus Full Color: Buat dan Pasang Label Cloud Cumulus Full Color

Berbagai pertanyaan seputar widget label tag cloud cumulus full color berikut cara membuat background pada tag cloud cumulus spektacular ini kiranya akan langsung terjawab melalui panduan dan tutorial blogger cara membuat dan memasang widget label tagcloud animasi cumulus full color ini.

Untuk membuat tag cloud spesial ini, silahkan sampeyan membuka terlebih dahulu Panduan Praktis Cara Membuat Tag Cloud Animasi Cumulus Suka2 yang telah terposting beberapa waktu yang lalu. Silahkan KLIK link di bawah ini :

Tag Cloud Animasi Cumulus Suka-Suka

Kode HTML dan Javascript untuk membuat Tag Cloud Cumulus Full Color

<center>
<div class="menuTitle" style="text-align:center;font:18px Droid Serif;font-weight:bold;color:blue;"><a href="http://mitrabarayaonline.blogspot.com" style="text-decoration:none;">mitrabaraya-cumulus</a></div>
<div class="box4" style="background:#222; width:278px;border:8px solid #333;margin:20px 0 20px 16px;">
<div class="box3" style="background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-1.png) center repeat-x;border:3px solid #555;width:272px;">
<div class="box2" style="background:transparent;width:266px;border:3px solid #777;"> 
<div class="box1" style="background:#999; width:250px; background:transparent url(https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_bg_cumulus-02.png) center no-repeat;border:3px solid #999;padding:0  5px">
<script type="text/javascript" src="https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_Cmls.js"></script>
<div id="flashcontent"><a href="http://mitrabarayaonline.blogspot.com" style="text-decoration:none;">mitra-baraya</a></div>
<script type="text/javascript">
var so = new 
SWFObject("https://sites.google.com/site/mitrabarayaprojec/cumulus-tagcloud/mitrabaraya_swf_cumulus.swf", "tagcloud", 
"250", "250", "7", "#333333");
// uncomment next line to enable transparency
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x000000");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "250");
so.addVariable("tagcloud", "<tags><a href='Link-1' style='16' color='0x69fd59' hicolor='0xfb3f20'>Nama Link-1</a><a href='Link-2' style='22' color='0xe3d002' hicolor='0xfbacac'>Nama Link-2</a><a href='Link-3' style='16' color='0x6dc6fe' hicolor='0xf978fb'>Nama Link-3</a><a href='Link-4' style='20' color='0x787bfb' hicolor='0xfd8ff1'>Nama Link-4</a><a href='Link-5' style='9'  color='0xdcdf00' hicolor='0xb4acfb'>Nama Link-5</a><a href='Link-6' style='16' color='0xdfa300'  hicolor='0x78fbf9'>Nama Link-6</a><a href='Link-7' style='16' color='0xdf1f00' hicolor='0x78fb7e'>Nama Link-7</a><a href='Link-8' style='12' color='0xfbf378' hicolor='0xb17501'>Nama Link-8</a><a href='Link-9' style='16' color='0xfcf9fd' hicolor='0xfbc878'>Nama Link-9</a> <a href='Link-10' style='16' color='0xfd332f' hicolor='0xfbd687'>Nama Link-10</a><a href='Link-11' style='27'  color='0xc7fcfd' hicolor='0xfb835e'>Nama Link-11</a><a href='Link-12' style='13' color='0x9497d7'  hicolor='0x14eefc'>Nama Link-12</a> <a href='Link-13' style='14' color='0x010bde' hicolor='0xfdc2b3'>Nama Link-13</a><a href='Link-14' style='16' color='0x01dbde' hicolor='0x8ba08b'>Nama Link-14</a><a href='Link-15' style='11' color='0xfe5003' hicolor='0x16de01'>Nama Link-15</a><a href='Link-16' style='16' color='0xfef2c4' hicolor='0xef0000'>Nama Link-16</a> <a href='Link-17' style='11'  color='0xc8fcca' hicolor='0xfa9cfb'>Nama Link-17</a><a href='Link-18' style='16' color='0xefdb00'  hicolor='0x12e102'>Nama Link-18</a><a href='Link-19' style='22' color='0x02e9fe' hicolor='0x9aaaf9'>Nama Link-19</a><a href='Link-20' style='27' color='0xef7000' hicolor='0xf9fc02'>Nama Link-20</a><a href='Link-21' style='9' color='0xfb5724' hicolor='0xffffff'>Nama Link-21</a><a href='Link-22' style='16' color='0x24fb2f' hicolor='0xfd8fa9'>Nama Link-22</a> <a href='Link-23' style='20' color='0xfe3324' hicolor='0xacabab'>Nama Link-23</a><a href='Link-24' style='9' color='0x37fbcf' hicolor='0xb4acfb'>Nama Link-24</a><a href='http://mitrabaraya.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html' style='22'  color='0xaffb37' hicolor='0xffffff'>Tag Cloud Cumulus Full Color</a></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
</div>
</div>
</div>
</div>
</center>

Langkah Pemasangan Label Tag Cloud Cumulus Full Color

  1. Silahkan coba seluruh kode tanpa melakukan perubahan apapun.
  2. Setelah percobaan berhasil dengan baik silahkan untuk mengganti beberapa kode untuk penyesuaian dengan kebutuhan yang ingin di tampilkan.
  3. Akan lebih baik jika javascript dan file flash-nya diupload sendiri di file hosting agar tagcloud dapat selalu terloading dengan baik karena apabila javascript dan file flash ini nantinya digunakan banyak blogger maka bandwidth akan tersita habis!
  4. Panduan upload javascript (https://mitrabarayaprojec.googlecode.com/svn/mitrabaraya_Cmls.js) dan file flash/.swf (https://sites.google.com/site/mitrabarayaprojec/cumulus-tagcloud/mitrabaraya_swf_cumulus.swf) dapat sampeyan buka melalui link berikut:
    Panduan Upload dan simpan file di Google Sites
  5. Khusus upload javascript, selain di Google Sites, sampeyan bisa upload di yourjavascript.com. Buka link berikut untuk mengikuti panduannya:
    Panduan Upload dan simpan javascript di yourjavascript.com
  6. Panduan berikutnya untuk upload file .swf di swfCabin dan cara mendapatkan linknya :
    Panduan Upload dan cara mendapatkan link file .swf di swfCabin
  7. Setelah proses upload sekaligus penyimpanan javascript dan file cumulus.swf selesai, lanjutkan dengan Login ke BloGGeR
  8. Dasboard (Dasbor) : KLIK link Layout/Tata Letak atau Design/Rancangan.
  9. Setelah Elemen Laman (Page Element) terbuka, KLIK Add Gadget (Tambah Gadget) pada bagian sidebar.
  10. KLIK HTML/Javascript.
    11. Copy-Paste : Copy semua kode HTML dan Javascript, kemudian Pastekan di box widget yang tersedia.
  11. KLIKSAVE/Simpan
  12. Buka Blog (Open Blog) dan lihat hasilnya.

Keterangan/Catatan :

  1. Lebar dan tinggi cumulus full color = 250px. Jika ingin merubah ukuran tinggi dan lebarnya, rubah pada :
    - var so = new
    SWFObject("https://sites.google.com/site/mitrabarayaprojec/cumulus-tagcloud/mitrabaraya_swf_cumulus.swf", "tagcloud",
    "250", "250", "7", "#333333");
  2. Sesuaikan juga lebar box pada :
    - <div class="box4" style="background:#222; width:278px;
    - Rubah angka 278 sesuai selisih perubahan lebar yang sampeyan lakukan terhadap lebar tag cloud (selisih perubahan dengan perubahan terhadap width 250).
  3. Rubah Link-1 s/d Link-24 dengan URL menu/label yang ditampilkan :
    - Misalnya Nama-link : Tagcloud
    - Link : http://mitrabarayaonline.blogspot.com/tagcloud.html
  4. Rubah juga Nama Link-1 s/d Nama Link-24 sesuai kebutuhan blog.
  5. Seluruh script mulai dari :
    - "<tags><a href='Link-1' style='16' color='0x69fd59' hicolor='0xfb3f20'>Nama Link-1</a> ........ hingga
    - <a href='http://mitrabarayaonline.blogspot.com/2010/07/tag-cloud-cumulus-full-color-buat-dan.html' style='22' color='0xaffb37' hicolor='0xffffff'>Tag Cloud Cumulus Full Color</a></tags>");
    so.addParam("allowScriptAccess", "always");

    Harus dibuat dalam bentuk rapat dan tidak terputus (link dan Nama link)

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


       -       


» Happy Blogging - mitrabaraya «

Diposting oleh Shannenpio Cloning di 07.28 0 komentar  

Label: , , , ,

Subscribe to: Postingan (Atom)