 |
| Example Xbox Gamercar |
| A "compact" button appears like this |  |
| A "modular" button appears like this: |  |
<data:post.body/><b:if cond = 'data:blog.pageType == "item"'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>
<b:if cond...> and </b:if> tags which we previously added in the template code.<b:if cond = 'data:blog.pageType == "item"'> <!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1020104213976883876" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>
</b:if>
Since Blogger launched the Gadget directory, I've been keeping track of new submissions and developing several gadgets of my own. While Blogger's directory is searchable, I realised that many bloggers would find descriptive reviews, screenshots, developer details and installation instructions a useful addition to the brief descriptions offered in the directory listings.
Here's something interesting I've been working on lately: a "Tagnetic Poetry" widget/add-on for Blogger.
Since it's launch back in 2006, Twitter has become a leading pioneer in the world of social media. Bloggers in particular find this service an invaluable tool for syndication, news stories and community conversation.
<div class='post-footer'><a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'>Tweet This</a>
<a expr:href='"http://twitter.com/home?status=Reading " + data:post.title + " @YOUR-TWITTER-USERNAME " + data:post.url' title='Tweet it on Twitter'><img src="http://image-host.com/your-image-link.jpg" alt="Tweet This" /></a>
<script src="http://danzarrella.com/tb.js"></script> <b:includable id='backlinks' var='post'><h4>Tweetbacks<h4>
<script src="http://danzarrella.com/tb.js"></script>
8191003@N02
For those of us who hide the Blogger nav-bar, it can be awkward to access our Blogger dashboards to create a new post, change settings or customize the layout of our blogs.
<b:section class='sidebar' id='sidebar' preferred='yes'>Immediately after this line, paste the following section of code:
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >
<param name="movie" value="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>
<b:loop values='data:labels' var='label'>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'><data:label.name/></a>
</b:loop>
</tags>" />
<p>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></p>
</object>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
<object type="application/x-shockwave-flash" data="http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf" width="250" height="200" allowscriptaccess="always" >Change these dimensions (in pixels) to a more appropriate size for your sidebar or widget section. Note: it is better for the tag cloud to be wider than it is tall (landscape proportions) which enables proper display of the tags.
<param name="bgcolor" value="#ffffff" />
<param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags>This six character tag is actually a hex value without the preceeding # symbol. You can alter this to be any hex color code you prefer.
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='12'>
