Threaded Mode | Linear Mode

***wenkhairu*** · 02-06-2012, 10:34 AM

Canvas merupakan salah satu dari banyak fitur yang ada pada html5, dengan canvas kita bisa melakukan drawing / menggambar sebuah object pada halaman web tanpa menggunakan image, pada canvas kita juga membuat sebuah animasi tanpa menggunakan bantuan thrid party aplikasi seperti flash, pada kesempatan kali ini saya akan mencoba mengajak teman-teman untuk membuat sebuah tag cloud menggunakan canvas pada html5 tag cloud ini nantinya akan ber-animasi seperti halnya tag-cloud yang ada pada plugin wordpress, bisa berputar-putar layaknya sebuah animasi flash, disini kita hanya membutuhkan sebuah plugin yang namanya tagCanvas, tagCanvas ini sebenarnya modifikasi dari ExplorerCanvas, oke dari pada banyak basa basi lebih baik kita mulai saja, untuk membuat sebuah tag cloud berbasis html5 ini yang kita butuhkan adalah

jquery Terbaru
excanvas untuk browser IE
jquery.tagcanvas.min.js Merupakan plugin untuk Jquery

Instalasinya cukup mudah, yang pertama kita hanya perlu memanggil Jquery, kemudian di lanjutkan dengan memanggil tagCanvas yang merupakan plugin untuk Jquerynya, dan kita tambahkan baris untuk mengantisipasi jika pengunjung menggunakan browser IE (Internet Explorer),

PHP Code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
    <title>Tag CLoud Dengan HTML5<title>
    <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jquery.tagcanvas.min.js" type="text/javascript"></script>
    </head>
    <body>    
    </body>
</html> 

Kemudian kita mendifinisikan letak canvas yang akan kita gunakan nantinya dalam scop body pada halaman web kita, dan meng-aktivkannya begitu halaman diload dalam kasus ini kita menggunakan Jquery, walapun pada dasarnya tagCanvas bisa digunakan tanpa menggunakan Jquery, tetapi akan lebih mudah jika kita menggunakannya dengan gabungan Jquery

PHP Code:

<!DOCTYPE HTML>
<html lang="en">
    <head>
    <title>Tag CLoud Dengan HTML5<title>
    <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="jquery.tagcanvas.min.js" type="text/javascript"></script>
    <script>
    $(function(){
        if(!$('#myCanvas').tagcanvas({
          textColour: '#0A67C5',
          textFont:"roid Sans',Arial",
          outlineColour:    "#000",
          outlineThickness : 0,
          shadow:   "#000000",
          frontSelect:true,
          reverse: true,
          txtOpt:   true,
          depth: 0.8,
          maxSpeed: 0.05
        },'tags')) {
          $('#myCanvasContainer').hide();
        }
    });
    </script>
    </head>
    <body>
        <div id="myCanvasContainer">
          <canvas width="240" height="220" id="myCanvas">
            <p>Browser Ente ga Suport canvas HTML5 om</p>
          </canvas>
        </div>
        <div id="tags">
          <ul>
            <li><a href="http://www.devilzc0de.org/forum" target="_blank">Devilzc0de</a></li>
            <li><a href="http://www.antijasakom.net/forum" target="_blank">Antijasakom</a></li>
            <li><a href="http://www.labs-khairu.com" target="_blank">My Labs</a></li>
            <li><a href="http://www.berita-hacker.com" target="_blank">Berita Hacker</a></li>
          </ul>
        </div>
    </body>
</html> 

Cukup Mudah kan cara membuat Tag CLoud Dengan HTML5 dan TagCanvas Plugin dari Jquery ? untuk demonya teman-teman bisa melihat pada bagian sidebar blog saya ini, untuk opsi-opsi yang bisa teman-teman gunakan sebenarnya cukup banyak, hanya saja saya pikir bagian yang digunakan adalah bagian-bagian yang penting sajam, jika teman-teman masih merasa kurang puas dengan opsi yang sudah ada teman-teman bisa langsung mengeceknya di situs penyedia aslinya, disana di jelaskan opsi-opsi yang bisa teman-teman gunakan, sekian dulu and Thanks for reading

**t3k0** · 02-06-2012, 10:53 AM

keren om tag cloudnya, bisa muter-muter tersipu

**linuxer46** · 02-06-2012, 10:56 AM

bisa masuk ke wp gretongan gak ya? piss

Killu4 · 02-06-2012, 10:59 AM

Barusan abis cek dari tkp,wow keren om wenk wew

***wenkhairu*** · 02-06-2012, 12:11 PM

(02-06-2012 10:56 AM)linuxer46 Wrote: bisa masuk ke wp gretongan gak ya?

bisa aja om, gampang kok, ne contohnya

ne codenya ane taro di sidebar.php

PHP Code:

    <script src="http://khairu.net/newass/js/jquery.min.js" type="text/javascript"></script>
    <script src="http://khairu.net/newass/js/jquery.tagcanvas.js" type="text/javascript"></script>
    <script>
    $(function(){
        if(!$('#myCanvas').tagcanvas({
          textColour: '#0A67C5',
          textFont:"roid Sans',Arial",
          outlineColour:    "#000",
          outlineThickness : 0,
          shadow:    "#000000",
          frontSelect:true,
          reverse: true,
          txtOpt:    true,
          depth: 0.8,
          maxSpeed: 0.05
        },'tags')) {
          $('#cloud').hide();
        }
    });
    </script>
    <ul id="cloud">
        <li>
            <h2>Popular Tags</h2>
        </li>
        <div id="tags">
        <?php if ( function_exists('wp_tag_cloud') ) : ?>
        <li>
        <ul>
        <?php wp_tag_cloud('smallest=8&largest=22'); ?>
        </ul>
        </li>
        <?php endif; ?>    
        </div>
    </ul>
    <div id="myCanvasContainer">
      <canvas width="200" height="200" id="myCanvas">
        <p>Browser Ente ga Suport canvas HTML5 om</p>
      </canvas>
    </div> 

**linuxer46** · 02-06-2012, 02:05 PM

(02-06-2012 12:11 PM)wenkhairu Wrote:
(02-06-2012 10:56 AM)linuxer46 Wrote: bisa masuk ke wp gretongan gak ya?

bisa aja om, gampang kok, ne contohnya

ne codenya ane taro di sidebar.php

PHP Code:

<script src="http://khairu.net/newass/js/jquery.min.js" type="text/javascript"></script> <script src="http://khairu.net/newass/js/jquery.tagcanvas.js" type="text/javascript"></script> <script> $(function(){ if(!$('#myCanvas').tagcanvas({ textColour: '#0A67C5', textFont:"roid Sans',Arial", outlineColour: "#000", outlineThickness : 0, shadow: "#000000", frontSelect:true, reverse: true, txtOpt: true, depth: 0.8, maxSpeed: 0.05 },'tags')) { $('#cloud').hide(); } }); </script> <ul id="cloud"> <li> <h2>Popular Tags</h2> </li> <div id="tags"> <?php if ( function_exists('wp_tag_cloud') ) : ?> <li> <ul> <?php wp_tag_cloud('smallest=8&largest=22'); ?> </ul> </li> <?php endif; ?> </div> </ul> <div id="myCanvasContainer"> <canvas width="200" height="200" id="myCanvas"> <p>Browser Ente ga Suport canvas HTML5 om</p> </canvas> </div>

om

c4b1t · 02-06-2012, 03:17 PM

Maknyooss Om...cocok bwat yg pngen bljar,
tp kl bwat pemalas sprti ane mending pke generator aj langsung jadi,
simple tinggal copas aja source code >> beres xixixi

TKP >> tag cloud generator _www.tag-cloud.de
Cara : cuma copy url+tag yg mw dimasukan ke tag clud ato otomatis jga bisa

btw boleh donk Om ajarin bwat yg jlan d blogspot, :ngarep banget Om....
g pnya dana bwat beli domen+hosting :'(

lionel [RJ] · 02-06-2012, 06:47 PM

ini kl di wp ini ky WP-Cumulus flash kan om wenk...
mantap

pake html5 smangat

ikutan

***ketek*** · 02-06-2012, 11:00 PM

mangstap om wenk mantap

html5 + css3 + jquery = kreatifitas tiada batas malu

Possibly Related Threads...
Thread:		Author	Replies:	Views:	Last Post
	[Ask] [Ask] Membuat Cheat Suatu Game	c4b1t	13	3,258	04-12-2012 11:24 PM Last Post: opiero
	[Tutor] Membuat Komentar Facebook Dan Komentar Blog	cliquersz	11	542	04-10-2012 05:29 PM Last Post: Mazda14
	[Tutor] Membuat Gambar Pada Halaman Browser Menari	cliquersz	4	278	03-27-2012 04:21 PM Last Post: Mr.AT (91)
	Merename file dalam server dengan code html	blackraptor	1	164	03-17-2012 04:52 PM Last Post: afika666
	[Solved] Sedikit Pertanyaan Tentang Validasi Email dengan Javascript	suicidal	4	294	03-17-2012 03:32 PM Last Post: messi10
	[Ask] cara membuat textarea ada di depan pdf ketika di resize	darkslayer	5	222	03-09-2012 12:57 AM Last Post: darkslayer
	[Tutor] Layout Multi Kolom Dengan CSS3	wenkhairu	12	625	02-21-2012 12:21 AM Last Post: ketek
	Membuat terminal menggunakan html	DC_Nanda23	29	1,362	02-17-2012 08:12 AM Last Post: DC_Nanda23
	[iseng] gambar android dengan HTML+CSS	Keonx	6	367	01-31-2012 12:02 PM Last Post: Keonx
	[Solved] Membuat Random Post dengan efek Running text	CyberKaze	8	687	12-18-2011 02:01 AM Last Post: CyberKaze