Trial: Experience "Build Your Own" Wizard

There are 70+ Widgets in Pro Pack. Here are two free widgets (Apple style navigation menu, Auto Fading Text) that you can try to build. Experience how "Build your own" wizard works.
After you input data in the wizard, must click "Apply these settings" button. Finally, you can copy & paste your custom code into your tool by pressing Command + C / V (Macintosh) or Control + C / V (Windows, Chrome OS, Android...)
Please click to see how to insert a widget into the builder listed right. If your tool is not listed right, click "Web Editor". You'll come to know how easy it is! Go to purchase

Apple style Navigation menu
Auto Fading Text

iWeb
EverWeb
Dreamweaver
Adobe Muse
Wordpress
Blogger
Rapidweaver
Wix.com
Web Editor

Apple style Navigation menu (without Drop down menu)

* Customize styles (you don't need to input the width of this widget. it will be automatically set according to the number of menu.)

width font family current index

* Insert contents

top menu link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml" 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>
<style type="text/css">
#menu-container {
	/*widget_width*/width:500px;
	/*widget_height*/height:37px;
}

#navigation-menu{
	position:relative; display:block; width:100%; height:35px; margin:0px; padding: 0px;
	-khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
	-khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px;
	/*font_size*/font-size:12px;/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;line-height: 35px; text-decoration: none; z-index:199;
}
/* VML FOR IE */
v\:roundrect,
v\:fill { behavior:url(#default#VML); }
#navigation-menu-roundrect,#navigation-menu-fill { display:block; position:absolute; width:100%; height:35px; top:0; left:0; z-index:2; }
#navigation-menu-shadow {  display:block; position:absolute; width:100%; height:35px; top:-1px; left:-2px; z-index:1; -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); }
#navigation-menu ul{height:35px;list-style:none;margin:0;padding:0;position:relative; display:block; margin:0; padding:0; zoom:1;}
#navigation-menu li{float:left;padding:0px;display:inline;text-align: center;color: white;}
#navigation-menu li a{color:#cccccc;display:block;margin:0px;height:35px;overflow:hidden;background:url('https://lh3.googleusercontent.com/-QODGPvBxdKc/UXdD4tdof8I/AAAAAAAAAIw/-YkDg0SeqfI/s300/top_navigation.png') no-repeat;color: white;text-align: center;width:100px;background-position:100% 0;outline:none;text-decoration: none;}
#navigation-menu ul li.item-first a { width:100px; background-position:0 0; }
#navigation-menu ul li.item-first a.before { background-position:0 -35px; }
#navigation-menu ul li.item-first a:hover,#navigation-menu ul li.item-first a:focus  { background-position:0 -70px; }
#navigation-menu ul li.item-first a:active { background-position:0 -105px; }
#navigation-menu ul li.item-last a { width:100px; background-position:-100px 0; }
#navigation-menu ul li.item-last a.before { background-position:-100px -35px; }
#navigation-menu ul li.item-last a:hover,#navigation-menu ul li.item-last a:focus { background-position:-100px -70px; }
#navigation-menu ul li.item-last a:active { background-position:-100px -105px; }
#navigation-menu ul li a.before { background-position:100% -35px; }
#navigation-menu ul li a:active { background-position:100% -105px; }
#navigation-menu ul li a:hover,#navigation-menu ul li a:focus,#navigation-menu ul li:hover a{background-position:100% -70px;color:#FFFFFF;text-decoration:none;}
#navigation-menu ul li.item-first a:hover,#navigation-menu ul li.item-first a:focus,#navigation-menu ul li.item-first:hover a{background-position:0 -70px;}
#navigation-menu ul li.item-last a:hover,#navigation-menu ul li.item-last a:focus,#navigation-menu ul li.item-last:hover a{background-position:-100px -70px;}
#navigation-menu ul li a.current,#navigation-menu ul li a.current:hover {width:100px;background-position:100% -140px;}
#navigation-menu ul li.item-first a.current,#navigation-menu ul li.item-first a.current:hover {width:100px; background-position:0 -140px;}
#navigation-menu ul li.item-last a.current,#navigation-menu ul li.item-last a.current:hover {width:100px; background-position:-100px -140px;}
</style>

<script type="text/javascript">
/* don't change this script line */
var touch_mode=false;function getparentID(){var a="";try{if(window.top.document == document || typeof(window.top.document.domain)=="undefined"){return a}}catch(err){return a}var ifs = window.top.document.getElementsByTagName("iframe");for(var i = 0, len = ifs.length; i < len; i++) {var f = ifs[i];try{var fDoc = f.contentDocument;if(fDoc === document) {if(f.id.indexOf("widget")==0 && f.id.lastIndexOf("frame")==(f.id.length-5)){b=f.id.split('-');a=b[0]}else{a = f.id}break}}catch(err){}}return a}$(document).ready(function(){if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))||(navigator.userAgent.match(/iPad/i))){touch_mode=true}var e=window.top.document;fullurl=e.URL.split("/");var c=fullurl[fullurl.length-1];if(c.length==0 && fullurl.length > 4){c=fullurl[fullurl.length-2];}c=c.replace(/\./g,"\\.");var b=false;if($(".current").size()==0){$("#navigation-menu>ul>li").each(function(f){var g=$(">a",this);if(isCurrentpage(this,c)){g.addClass("current");return false}if($("ul li",this).size()>0){g.addClass("dir")}$("ul li",this).each(function(h){if(isCurrentpage(this,c)){g.addClass("current");b=true;return false}});if(b){return false}})}if(e!=document){var d=getparentID();var a=$("#"+d,e).height();if(touch_mode){$(".dir").click(function(){var z=null;$(".dir").each(function(){if($("ul",$(this).parents("li")).is(':visible')){z=this}});if(z){$("ul",$(".dir").parents("li")).css("display","none");if(this!=z){$("#"+d,e).css("z-index",9999).height(($("ul li",$(this).parents("li")).size()*35)+a+"px");$("ul",$(this).parents("li")).css("display","block")}else{if($("#"+d,e).height()!=a){$("#"+d,e).height(a+"px")}}}else{$("#"+d,e).css("z-index",9999).height(($("ul li",$(this).parents("li")).size()*35)+a+"px");$("ul",$(this).parents("li")).css("display","block")}return false})}$("#navigation-menu>ul>li").hover(function(){if($("ul li",this).size()>0){$("#"+d,e).css("z-index",9999).height(($("ul li",this).size()*35)+a+"px")}},function(){});$("#navigation-menu").hover(function(){},function(){if($("#"+d,e).height()!=a){$("#"+d,e).height(a+"px")}})}});function isCurrentpage(c,a){if(!$("a",c).is("a")){return false}var b=$("a",c).attr("href");if(b!=undefined&&b.length>0){b=b.replace(/ /g,"%20");var d=new RegExp(a,"i");if(b.search(d)!=-1){return true}}return false};
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div id="menu-container"><div id="navigation-menu"><ul>
<!--begin to insert contents-->

<!--end to insert contents-->
</ul></div></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, click here).

- 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 menu from this preview. It will make you leave this page out so that you may lose your own code.

Auto Fading Text

* Customize styles

width font size font color font family

* Optional settings

reading contents from pause time animation duration max feeds (In trial version, available up to 3)

RSS feed address(e.g. "http://www.engadget.com/rss.xml")

max letters where to open a link words for a link

* Insert contents (only available for reading contents from this source code)

description

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>
<style type="text/css">
#ticker-container{
	/*widget_width*/width:500px;
	/*font_color*/color:black;
	/*font_size*/font-size:12px;
	/*font_family*/font-family:Lucida Sans Unicode,Lucida Grande,sans-serif;
	min-height:16px;
	line-height:125%;
}
#ticker-content ul li a{/*link_color*/color:black;}
#ticker-container{margin: 0;padding: 0;overflow: hidden;}
#ticker-content ul{width:100%;list-style:none;margin:0;padding:0;}
#ticker-content ul li a:link,#feed-content ul li a:visited{text-decoration:none;outline:none;}
#ticker-content ul li a:hover,#feed-content ul li a:active{text-decoration:underline;}
</style>

<script type="text/javascript">
var xmldata=[/*begin to insert contents*/

/*end to insert contents*/];

/*var_ticker_mode*/var ticker_mode=1; // 0: data from array 1: data from RSS Feed 2: data from XML
/*var_feed_limit*/var feed_limit=3; // max:20
/*var_feedURL*/var feedURL="";
/*var_dataURL*/var dataURL="";
/*var_twitterid*/var twitterid="";
/*var_word_link*/var word_link="Go to this page";
/*var_max_letters*/var max_letters=70;
/*var_animation_duration*/var animation_duration=1000;
/*var_pause_time*/var pause_time=5000;
/*var_target*/var target="_blank"; // "_top" (same) or "_blank" (new window)

/* don't change this script line */
var isPaused=false;var current_index=0;function loaditems(d){while(xmldata.length){xmldata.pop()}var c=$("item",d);c.each(function(a){xmldata.push({title:$(this).attr("title"),link:$(this).attr("url")})})}function loadrssfeed(){var a={date:true,content:true,snippet:false,showerror:true,errormsg:"",key:null};return $(this).each(function(c,f){var b=$(f);if(feedURL==null){return false}if(ticker_mode==3){feedURL="https://api.twitter.com/1/statuses/user_timeline.rss?screen_name="+twitterid}var d="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q="+encodeURIComponent(feedURL);if(feed_limit!=null){d+="&num=3"}if(a.key!=null){d+="&key="+a.key}$.getJSON(d,function(e){if(e.responseStatus==200){_callback(f,e.responseData.feed,a)}})})}var _callback=function(h,a,c){if(!a){return false}for(var f=0;f<a.entries.length;f++){var g=a.entries[f];var b=g.title;if(ticker_mode==3){b=b.slice(twitterid.length+1)}var d='<li><a href="'+g.link+'" target="'+target+'" title="'+word_link+'">'+rss_truncate(b,max_letters)+"</a></li>";$("#ticker-content ul").append(d)}launchanimation()};function rss_truncate(c,a,b){if(c.length<=a){return c}if(b==undefined){b="..."}return c.substr(0,a).replace(/\s+?(\S+)?$/g,"")+b}function drawitems(){for(var b=0;b<xmldata.length;b++){var a="<li>";if(xmldata[b].link.length>0){a+='<a href="'+xmldata[b].link+'" target="'+target+'" title="'+word_link+'">'}a+=rss_truncate(xmldata[b].title,max_letters);if(xmldata[b].link.length>0){a+="</a>"}a+="</li>";$("#ticker-content ul").append(a)}launchanimation()}function launchanimation(){fadeoutin=function(a){if(isPaused){return}$("li:eq("+current_index+")",a).fadeOut(function(){current_index++;if(current_index==$("li",a).size()){current_index=0}$("li:eq("+current_index+")",a).fadeIn(animation_duration)})};$("#ticker-content").each(function(){var c=$(this);var b=0;c.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:0,padding:0,display:"none"});$("li:eq(0)",c).show();c.children("ul").children("li").each(function(){if($(this).height()>b){b=$(this).height()}});c.children("ul").children("li").each(function(){$(this).height(b)});c.height(b*1);var a=setInterval(function(){fadeoutin(c)},pause_time+animation_duration);c.bind("mouseenter",function(){isPaused=true}).bind("mouseleave",function(){isPaused=false})})}$(document).ready(function(){switch(ticker_mode){case 0:drawitems();break;case 2:$.get(dataURL,{},function(a){loaditems(a);drawitems()},"xml");break;default:loadrssfeed();break}});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<div id="ticker-container"><div id="ticker-content"><ul></ul></div></div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, click here).

- 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.