Tag Cloud

Most of blogging services such as blogger, and wordpress provide a tag collection that lets visitors be easily able to understand what topics a page tells according to keywords. This snippet is powered by jQuery while many other tag clouds runs by PHP. This original source code is built by Johann Burkard. Special thanks to him. There are two options: Highlighten a keywords, and Search a keyword via Google Custom Search.

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 font color background color

text align font family

* Optional settings

mode max words sort highlight color

search engine unique ID language code

search result your search result page URL

where to show the search result

<!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.dynacloud-5m.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.wordstats.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6W2C3whvuZdQnBLSzZkTXlLbXM/jquery.wordstats.en.js"></script>
<style type="text/css">
.tag-cloud-container{
	/*widget_width*/width:280px;
	/*widget_height*/height:280px;
  	/*font_color*/color:#0088CC;
  	/*text_align*/text-align:center;
  	/*background_color*/background-color:transparent;
  	/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;
	position:relative;
	padding:10px;
	margin:0;
	overflow:hidden;
	font-size:12px;
}
.cloud_highlight {/*highlight_color*/background-color:yellow;}
.dynacloud a {outline:none;color:inherit;text-decoration:none;display:inline-block;margin-right:5px;margin-bottom:5px;line-height:100%;opacity: .9;-moz-opacity: .9;filter: alpha(opacity=90);}
.dynacloud a:hover {opacity: 1.0;-moz-opacity: 1.0;filter: alpha(opacity=100);}
.tag-cloud-container .reset-keyword{cursor:pointer;position:absolute;z-index:1;bottom:0;right:0;}
.tag-cloud-container .reset-keyword img {border:none;}
</style>

<script type="text/javascript">
$(document).ready(function(){
	/*var_cloud_mode*/$.dynaCloud.type=0;
	/*var_max_words*/$.dynaCloud.max=30;
	/*var_sort_word*/$.dynaCloud.sort=false;
	var css = window.top.document.createElement('style');var def = '.cloud_highlight{background-color:'+/*var_highlight_color*/""+';}';css.setAttribute("type", "text/css");if (css.styleSheet) {css.styleSheet.cssText = def;} else {var tt1 = window.top.document.createTextNode(def);css.appendChild(tt1);}window.top.document.getElementsByTagName('head')[0].appendChild(css);$('.dynacloud').dynaCloud();
});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div class="tag-cloud-container"><p id="dynacloud" class="dynacloud"></p><a class="reset-keyword" title="Reset"><img src="https://googledrive.com/host/0B6W2C3whvuZdSWdabXZ5MnZ1REE/refresh.png" /></a></div>
<!--begin for google custom search-->

<!--end for google custom search-->
</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.