Word Cloud

This word cloud snippet does not scan primary keywords in a specific page as well as filter top of frequently occurring words. Instead of scanning keywords, this widget displays pre-defined tags. Thus you can directly input stylish tags that can be linked to specific urls. This original source code is created by www.sjeiti.com (http://plugins.jquery.com/project/TagCloud).

Preview

Build your own

Input data in the fields below.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can get an iFrame code by clicking "Make an iFrame" button.)

* Customize styles (+10px paddings will be added inside the widget.)

widget width widget height background color

font family

* Optional settings

cloud style font color (max) font color (min)

font size (max) font size (min) sort where to open a link

* Insert contents

text link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.tagcloud.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.tinysort.min.js"></script>

<style type="text/css">
.word-cloud-container {
  	/*widget_width*/width:280px;
	/*widget_height*/height:280px;
	/*text_align*/text-align:center;
  	/*background_color*/background-color:black;
    /*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;
	padding:10px;
	margin:0;
	overflow:hidden;
}
.word-cloud-container ul {width:100%;height:100%;visibility:hidden;}
.word-cloud-container ul li a {outline:none;color:inherit;text-decoration:none;margin-right:5px;}
.word-cloud-container ul li a:hover {text-decoration:underline;} 
</style>

<script type="text/javascript">
$(document).ready(function() {
	var aLi = $(".word-cloud-container ul>li");var iLi = aLi.length;$.each(aLi,function(i,o){$(o).val(Math.round(iLi*Math.pow(1-i/iLi,2)));});
	/* WORD CLOUD SETTING BEGIN *//* WORD CLOUD SETTING END */
	$('.word-cloud-container ul').css('visibility', 'visible');
});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div class="word-cloud-container"><ul>
<!--begin to insert contents-->
<!--end to insert contents-->
</ul></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

- iFrame code for non-iWebsites (other tools except for iWeb)

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.