Creating a Custom Widget Footer

From developer.newsgator.com

Jump to: navigation, search

Custom Footers in Widgets

Custom footers can be implemented to enhance the overall design of a widget. Instead of the standard "Get This," you can add whatever wording and graphics you'd like.

Designing a Custom Footer

At the very top of your widget HTML, place the custom footer code. A very simple example would be the following:

{stringify CustomFooter}
	<div class="footerClass">
		<a onclick="${ShowGetThisJS}"><img src="GetThis.jpg"></a>
	</div>
CustomFooter

Although you don't see it, this is the code behind the default footer. If you wanted to make only small adjustments, you could simply copy this into the CustomFooter tags and make any modifications there:

{stringify CustomFooter}
	<div class="buzzFooter" style="width:100%; padding:0px; background-color: #EEE;"> 
		<div style="float:left; width:66px; background-color:#eee;">
		<nobr>
		<a title="Get This" style="cursor: pointer;" href="javascript:void(0)" onclick="${ShowGetThisJS}">
		<img border="0" style="margin: 3px;" alt="Get This" src="${BuzzAppUrl}/images/getThis_grey.png" /></a>
		</nobr>
	</div>
	<div style="float:right; text-align:right; padding:7px 4px 0px 3px !important; padding:4px 4px 0px 3px; width:55px;">
		<img border="0" style="cursor: pointer;" onclick="window.open('http://www.newsgatorwidgets.com')" 
		src="${NGBaseUrl}/NGBuzz/Images/PoweredbyNG.gif" alt="Powered by NewsGator" />
	</div>
	<br clear="all" />
	</div>
CustomFooter

Calling the Custom Footer

The default widget footer function call looks like this. It is located towards the bottom of the widget HTML code:

${% getBuzzFooter() %} 

To call your custom footer, change it to:

${% getBuzzFooter({footerTemplate:CustomFooter}) %}
Personal tools