Date for Blogs

This is a iOS icon-inspired widget to display Month and day. As default it will show current date (based on client system time), or it will display Blog-posting date for iWeb Blog entries.
Available sizes: Small (70x70), Medium (85x85), and Large (256x256).

* This widget is also included in Pro Pack. Pro versions enable users to save and load their code with additional customizable options.

Preview

Build your own

Choose the widget size.
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 also copy & paste each code in the <head> and <body> to each tag.)

* Optional settings

size

<!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">
table.cal_box {
  	font-family:Verdana, Geneva, sans-serif;
  	text-align:center;
	border-collapse:collapse;
	border:none;
	vertical-align:middle;
	line-height: 100%;
}

table.cal_box.small {
	width:70px;
	height:70px;
	background: url('https://lh3.googleusercontent.com/-Dk1PifKppBY/UXdEXkaCDbI/AAAAAAAAAKc/YnHjbH09JCc/s70/calendar-empty-70x70.png') no-repeat center;
}

table.cal_box.medium {
	width:85px;
	height:85px;
	background: url('https://lh6.googleusercontent.com/-rmOb3_TP9s0/UXdEXu5TJgI/AAAAAAAAAKg/GbX2vybG_jA/s85/calendar-empty-85x85.png') no-repeat center;
}

table.cal_box.large {
	width:256px;
	height:256px;
	background: url('https://lh6.googleusercontent.com/-OMHWbHq4Z0w/UXdEXldrf8I/AAAAAAAAAKk/tOlJke2M7Uk/s256/calendar-empty-256x256.png') no-repeat center;
}

table.cal_box tr, table.cal_box td {padding:0;margin:0;vertical-align:middle !important;}
table.cal_box td.cal_month {height:35%;color: white;}
table.cal_box td.cal_day {height:52%;color:black;font-weight:bold;}
</style>

<script type="text/javascript">
	function getmonthstring(month){var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];return months[month-1]}
	$(document).ready(function(){$(".cal_box").each(function(){var c=$(this).width();$(".cal_month",this).css({"font-size":Math.ceil((c/100)*12)+"px","line-height":Math.ceil((c/100)*12)+"px"});$(".cal_day",this).css({"font-size":Math.ceil((c/100)*42)+"px","line-height":Math.ceil((c/100)*42)+"px"});subdirs=window.top.document.URL.split("/");var a=false;if(subdirs.length>4&&subdirs[subdirs.length-4]=="Entries"){a=true}var f=new Date();var b=f.getDate();var e=f.getMonth()+1;if(a){filename=subdirs[subdirs.length-1].split("_");if(!isNaN(filename[0])&&filename[0].length>0){b=filename[0]}if(!isNaN(subdirs[subdirs.length-2])&&subdirs[subdirs.length-2].length>0){e=subdirs[subdirs.length-2]}}$(".cal_month",this).html(getmonthstring(e));$(".cal_day",this).html(b)})});
</script>
</head>
<body style="background: transparent; margin: 0pt;">
<!--DATE FOR BLOG BEGIN--><table class="cal_box small"><tr><td class="cal_month"></td></tr><tr><td class="cal_day"></td></tr><tr><td></td></tr></table><!--DATE FOR BLOG END-->
</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.

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.