Sonic CD

Sonic CD - SEGA

It’s time to usher the past into the future in this enhanced recreation of Sonic CD!

Sonic travels to the distant shores of Never Lake for the once-a-year appearance of Little Planet - a mysterious world where past, present, and future collide through the power of the Time Stones that lie hidden within it.

Screenshots

Grand Theft Auto 3

Description

Welcome to Liberty City. Where it all began.
Rockstar Games celebrates the 10th anniversary of one of the most influential games of all time. The critically

Grand Theft Auto 3 - Rockstar Games

Screenshots

How to use Google's Font API with Blogger

Web fonts have become a popular web design trend over recent months. As I explained in a previous post, the @font-face technique can be problematic when applied to Blogger templates. But since Google have now released their font API, we're able to display non-standard fonts in our Blogger templates with ease!

Here's an overview of the Google Font API and how we can use this to enhance our Blogger-based designs.

What is Google's Font API?

The Google Font API enables us to display web fonts in any web page. We can choose to display text in a variety of high-quality open-source web fonts for both personal and commercial projects. No sign-up is required, and it's really easy to set up.

What fonts can we use?

All fonts available for use with the API are listed in Google's Font Directory. Here's a few examples of the styles we can use:

At the time of writing, there is a small selection of fonts available to use through the API. As word spreads that Google is pioneering this project, I'm sure many font developers and foundries will begin to add open source variants to the directory.

How to use the Google Font API

Using Google's Font API to display non-standard fonts is very easy, and only requires a few minutes to set up.

Firstly, you'll want to choose the font you'd like to use from Google's Font Directory. Click on the font you'd like to use to be taken to a page displaying how the font appears at different sizes.

For this example, I'll use Cantarell by Dave Crossland:

Now click on the highlighted "Get the code" tab to generate the code we need to add to our Blogger template:

Copy the embed code to your clipboard or paste into a simple text editor for later use.

Now go to Design>Edit HTML in your Blogger dashboard, and use your browser's search function to locate the opening tag. Paste the embed code immediately after this line.

You will also need to add a forward slash just before the closing ">" symbol in your code, so that this:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

becomes this:

<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'/>

his is because Blogger uses strict HTML markup and considers the original font embed code to be an open tag; the forward slash "self-closes" the tag and enables your template to be properly parsed.

Finally, save your template.

This step adds the required CSS to embed the fonts we'd like to use in our Blogger design, though these fonts will not display unless we specify the textual areas of the layout which should be changed. In order to do this, we need to add additional style statements to the section of our template.

For example, if we wanted to use the Cantarell font for the post titles, we would add the following line just beneath the closing </b:skin> tag :

h2.post-title {font-family: Cantarell, Sans=Serif;}

I've listed a few CSS statements you could add for various text areas of the template over on this page (opens in a new tab/window).

Once you've added the style statements appropriate for your design, preview your template to see how the changes will appear. If all is well, you can proceed to save your template.

Why is this good for Blogger users?

This new API allows us to have even more control over the designs of our Blogger templates without having to register for a web fonts service or be concerned about cross-domain policies.

All of the fonts available for use through the Google Font Directory are open source. We are able to use them without restriction in both personal and commercial projects without the need to request a license.

Blogger template designers can now use these fonts to enhance their templates and be satisfied that the fonts will display as intended in the majority of browsers (admittedly, this was an issue which prevented me from including web fonts in my own designs until now!).

I also wonder if the font API will be integrated into Blogger's new template designer in the coming months...?

Add a Lightbox-Style Contact Form to your Blog

While researching customization methods for my forthcoming eBook, I was really impressed at how easy it is to add a Lightbox-style contact form to our sites using ThickBox:

Using Thickbox to display a contact form in this way enables your readers to email you without having to leave the page. We can add this functionality in a simple HTML gadget, and there is no need to edit the HTML of our template at all.

In this post, I'll explain how easy it is to add a lightbox-style contact form to your Blogger blog using Thickbox and a free Kontactr account.

Create a contact form with Kontactr

At present, Blogger does not offer the means to integrate a contact form natively in our blogs. Since we cannot (easily) use PHP in our Blogger templates, the ideal solution is to use an external service to generate a contact form.

My preferred service for simple contact forms is Kontactr - I've been using Kontactr for several years now, and have found this to be both reliable and easy to implement.

So first of all, pop over to Kontactr and create your free account. It takes only a few minutes to register and set up your very own contact form which we'll be using to display in our lightbox-style display:

Once you've created an account and contact form, you'll be presented with a page like this:

Make a note of the URL for your contact form - we'll need to add this to our HTML gadget shortly.

Add "Contact Me" gadget to your Blogger template

We will be using Thickbox to generate the functionality for our lightbox-style contact form. Unlike the original Lightbox script, Thickbox enables us to embed rich content in our display. We'll be embedding our contact form within an iframe using this functionality.

On the Page Elements section of your Blogger dashboard, choose to add a new HTML/JavaScript gadget in the area you would like your "Contact Me" link to appear.

Paste the following code into your HTML gadget, replacing "URL-OF-YOUR-KONTACTR-FORM" with the URL of your own contact form, and "Send me an Email" with the text you would like to display:

<script type="text/javascript" src="http://bloggerbuster-tools.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="http://bloggerbuster-tools.googlecode.com/files/thickbox.js"></script>
<a href="URL-OF-YOUR-KONTACTR-FORM?TB_iframe=true&height=480&width=640" class="thickbox">
Send Me An Email
</a>

Beneath the code you've just edited, paste the following section of CSS code:
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
font: 12px Arial, Helvetica, sans-serif;
color: #333333;
}
#TB_secondLine {
font: 10px Arial, Helvetica, sans-serif;
color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
height:100%;
width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
display:block;
margin: 15px 0 0 15px;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #666;
border-left: 1px solid #666;
}
#TB_caption{
height:25px;
padding:7px 30px 10px 25px;
float:left;
}
#TB_closeWindow{
height:25px;
padding:11px 25px 10px 0;
float:right;
}
#TB_closeAjaxWindow{
padding:7px 10px 5px 0;
margin-bottom:1px;
text-align:right;
float:right;
}
#TB_ajaxWindowTitle{
float:left;
padding:7px 0 5px 10px;
margin-bottom:1px;
}
#TB_title{
background-color:#e8e8e8;
height:27px;
}
#TB_ajaxContent{
clear:both;
padding:2px 15px 15px 15px;
overflow:auto;
text-align:left;
line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
padding:15px;
}
#TB_ajaxContent p{
padding:5px 0px 5px 0px;
}
#TB_load{
position: fixed;
display:none;
height:13px;
width:208px;
z-index:103;
top: 50%;
left: 50%;
margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
z-index:99;
position:fixed;
top: 0;
left: 0;
background-color:#fff;
border:none;
filter:alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
height:100%;
width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
clear:both;
border:none;
margin-bottom:-1px;
margin-top:1px;
_margin-bottom:1px;
}

Save your gadget and preview your blog. You should now see a simple text link in your layout which, when clicked, brings up a lightbox-style contact form in which your Kontactr email form is embedded!

Advanced Methods

To demonstrate this method, I chose to use Kontactr for embedding a simple free contact form.

However, we can use this method to display an alternative contact form (or indeed any other webpage) in your site. Simply replace URL-OF-YOUR-KONTACTR-FORM with the URL of the page you would like to display. This technique could also be used to display large images by using the URL of a hosted image.


The scripts required to operate the Thickbox function are reliably hosted on Google Code. If you prefer to host these scripts yourself (or perhaps build upon them), you can download the scripts I have used from the official ThickBox page.

73 Add Facebook "Like" Box Beneath your Blogger Posts

Facebook has become one of the most popular tools among Bloggers for syndicating blog posts. By adding a stylish Facebook "Like" box beneath your articles in Blogspot, you offer readers a temptingly easy means of sharing your posts with their friends.

Aneesh of Blogger Plugins has developed a simple, customizable way of installing a Facebook Like box for each page of your Blogger-based site. This tool is based on the original code and design developed by Mia of Dezign Matterz. I'm using a slightly altered version of this widget here on Blogger Buster.

In this post, I'll offer an overview of how to install Aneesh/Mia's stylized Facebook Like box, and an additional method for adding a simpler "Like" widget to your Blogger/Blogspot site.

How to install a stylized Facebook Like Box

Head over to the installation page at Blogger Plugins and fill in the form. You'll need to enter the URL of your Facebook Fan page or profile, and also your desired width in pixels.

The code beneath the form will update once you've entered these details.

If you're using one of the newest Blogger templates (which functions with the Blogger Template Designer) you can add the CSS style code in Design>Template Designer>Advanced>Add CSS section of your dashboard if you prefer. Alternatively, follow the instructions in Aneesh's post to add directly in your Blogger template file.

Finally, add the customized code beneath the <data:post.body/> tag in your blog's HTMl code and save your template. After this simple installation, you'll see the Facebook Like box appear on item pages of your site.

How to install a simple Facebook Like box

If you'd prefer to add a simpler Like box, you can install a widget like this (with or without fan avatars) instead:

To add this style of widget, go to Design>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.

Locate the <data:post.body/> tag using your browser's search function and immediately below this paste the following snippet of code:

<b:if cond='data:blog.pageType == &quot;item&quot;>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>

</b:if>

You'll need to make a few slight alterations for this widget to work for your specific template:

• If you would like to show the avatars of people who have liked your page, change the section highlighted in red to "true"
• Change both of the values highlighted in yellow to the width in pixels you would like to present your widget.

Finally save your template and enjoy your new Facebook Like box which will be displayed on item pages of your site.

163 Easy Post Summaries and Thumbnails for Blogger Blogs - No JavaScript Required!

The ability to display post summaries and automatic thumbnails is one of the most sought-after Blogger customizations. Using such a feature enables us to create a cohesive layout on non-item pages with the entire post and full-sized image on item pages.

Recent changes to Blogger's functionality now enables us to achieve this using only Blogger code - no need for JavaScript, awkward CSS customizations or restrictions on the length or format of our posts.

With only a few small changes to our Blogger template, we can display post summaries and thumbnails using this easy to manage hack.

How to add Blogger post summaries and thumbnails in three simple steps

Here's my step-by-step guide to the easiest solution for post summaries and thumbnails with Blogger:

Step 1 - Back up your template!

It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries and thumbnails on non-item pages

The next stage is to add the Blogger code which will display a summary and thumbnail of our posts. Go to Design>Edit HTML and check the Expand widget templates box and search for the following line of code:

<data:post.body />

Preview the change to your template and you'll see that your posts will appear in a format similar to this:

As seen in the screenshot above, the thumbnail appears above the summary. We can align the thumbnail more cohesively to the left or right of the summary by adding CSS to our template.

At this stage, you can choose to save the edit to your template or add the CSS and preview the final effect before committing the changes to your site.

Step 3 - Add CSS to align the thumbnail image

While still on the Design>Edit HTML section of your dashboard, search for the following line:

</b:skin>

Immediately before this line, paste the following CSS statement:

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

This will align the thumbnail to the left of the post summary, and allow some distance between the thumbnail and text like this:

If you would prefer to align your thumbnail image to the right, paste the following code instead:
.thumb img {
float: right;
margin: 0 0 10px 10px;
}


Replace this line with the following code:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Preview your template to see how this makes your posts appear on the home page. When you're happy with the layout, save your template and enjoy your automated thumbnails!

How to Add Post Titles to Read More Links in Blogger

This is a very easy customization and the modified Jump-Link will inherit any current style you've applied to this section. Here's how to add this featre in a single, simple step.

Go to Design>Edit HTML in your Blogger dashboard and check the Expand widget templates box. Using your browser's search function (usually CTRL or CMD + F), locate the following section of code:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Replace this with the following:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/> <data:post.title /></a>
</div>
</b:if>

Preview the change you've just made - if all is well, you should now see the title of your post displayed beside the text you've chosen for your Jump-Link. You can then proceed to Save your template and enjoy this quick and easy tweak to your Blogger template.

good luck and enjoy

Blog Widget

Random Posts Widget for Blogger with Thumbnails

The Random Posts Gadget will display a list of Random Posts(from your blog) on your Blog’s Sidebar. The Gadget has an options panel and can be configured to meet your needs. The Gadget inherits styles from your Blog. But you can override the colors if you want(this was done to support third party templates which doesn’t have the skin variables properly designed).

About the Various Options

Maximum Length of Post Title – Your post titles can be too long. In that case you can limit the title to x number of characters using this parameter.

Snippet Style – You can display the snippet with Post Summary, Post Thumbnail , or both or none.

Feed – The default Option “Summary Feed” will scan your post summary feed. This is the faster and efficient option and i would advise you to opt this one. If you choose “Full Feed” , the gadget will be slower but you will get YouTube Thumbnails also.
Note:- If you want to grab the images or YouTube thumbnails, then you should have “Site Feeds” set to Full. If you opt for the Media Thumbnail only, then the short feed will be used by default.

Thumbnail Dimensions – Size of the Thumbnail in pixels. The gadget doesn’t generate any Thumbnail. It just uses the media thumbnail,YouTube thumbnail , or any image in the post and scales it to the specified dimensions

Summary Length - If you have opted to display the post Summary, then you can control the length of the summary(in characters)

Post Meta Style – You can display the Post Date, Comment Count and a Read More Link.You can choose any combination of these three.

Font and Font Size– By Default, the container’s font and Font Size is inherited into the Gadget. But if you are using a 3rd party template, then these might not be properly inherited. In that case you can use this Option to over ride these parameters.

Extra Styling – Allows you to specify the position of the Thumbnail, and whether to underline the links or not.

Border Color – You can either opt for No Border, or select one of the 140 available colors. If you are not sure about how these colors look like, then take a look at this color chart at W3Schools - http://www.w3schools.com/html/html_colornames.asp

Link Color and Text Color – By default , the colors will be inherited from your Blog. If you want to override this , you can choose one out of the 140 different colors.

Widgets

Recent Posts Widget with Thumbnails

At least some of you would be familiar with My "Recent Posts with Thumbnails" Gadget for Blogger. I had got so many complaints that the Gadget fails to load or has some issues. So I decided to make a Widget version of the same.

Why the other Gadget fails at times?

The other gadget is made using the Gadget API. The API renders the gadget as an iFrame with all the parameters appended to the iFrame URL. When the iFrame url becomes too big, browsers have issues rendering the gadget. This primary reason behind this is that the API appends so many style parameters to the iFrame URL thereby making it pretty lengthy.The current page url is also a parameter.That is why some people complain that it is working on the home page, whereas it doesn't work on some of the post pages. The reason is that your home page url is shorter in length than your post page url. So it is almost impossible to make the gadget error free.

So What now?

This new Widget doesn’t rely on the Gadget API, and is not loaded as an iFrame. This is a plain JavaScript widget, and will work across all browsers.

What’s special about this new Widget?

If you are good at CSS, you can make the widget exactly as you want. There is no limit in customizing this Widget. This doesn’t mean that it is useful only to those who are familiar with CSS. The Widget by default will inherit your Blog’s Styling. So it should look pretty neat with the default Styling

Options in the Widget Installer

1. Blog URL: This should be the URL of a blogger Blog. If you are installing the Widget on the same blog then you can leave this field blank . This field is useful for those who have multiple blogs..
2. Number of Posts – The number of posts displayed in the Widget
3. Maximum title Length – This option can be used to chop off really long Post Titles. If a post title is longer than this length, the widget will chop off the rest of the title
4. Show Thumbnail – It’s pretty much obvious from the name
5. Show Default Thumbnail – If this option is selected, and your post doesn’t have an image, then a default image will be displayed.
6. Thumbnail Dimension – The gadget can generate square thumbnails of any size. Use this option to set the dimension of the thumbnail.
7. Float Thumbnail to – This option can be used to align the image thumbnail to the left or to the right
8. Thumbnail Margin – You can set a 5px margin to the image, so that the thumbnail stays apart from the post summary. You can override the margin by selecting No.(You can then manually style it using CSS)
9. Show summary
10. Summary size – If summary is more than this length, then the widget will chop off the rest
11. Show post date
12. Show Comment Number
13. Show Read more Link
14. Read More Text – This is the Text Shown on the Read More Link
15. Use Full Feed – By default the Widget will use the Blogger Summary feed which is smaller in size. If you select the Full Feed option, it will use the Full Feed which is bigger in size, and hence the Widget would get slower. The advantage is that, you would get thumbnails of YouTube videos that you have posted.
16. Sorting – Helps you in displaying the recently published posts or recently updated posts.

click here to get widget

Widget for blog

Google Analytics in Blogger

Blogger has added a new option to easily integrate Google Analytics with your Blog.

To Add your Google Analytics Tracking code, you just need to specify your Google Analytics Account number in your Blogger Dashboard. To do that Go to Settings > Other and fill up the “Google Analytics Account number” field, Once done Save the Settings. Now Blogger will automatically add the analytics tracking code to your blog(even on the mobile version).

Adding The Analytics Account number in Blogger

Go to Settings > Other and provide your Google Analytics Account number.

Click the Save Settings Button when done.

If you are using a Custom template, then you might have to apply the fix mentioned at the end of the tutorial.

If you don’t know your Analytics Account number, then read on:

1. Login to analytics

2. Now Click on the Edit Link to the right of your Blog’s profile(If don’t yet have a Website profile, then you can create one)

3. Now you will be taken to a page like :

4. Click on the “Check Status” link

You will see a screen like

5. Copy the Web Property ID from there. That’s your Analytics Account number which you can provide in the Blogger Settings.

Fix:

If you are using a custom template, then the Google Analytics code might not be added to your Blog. To check that Edit your template(Template > Edit HTML) and look for(Ctrl + F or Cmd +F)

If it is not there in your template, then add it above

Widget

Developing Web Widget with HTML, CSS, JSON and AJAX: A Complete Guide to Web Widget [Paperback]

THE HANDS-ON, TUTORIAL-BASED GUIDE TO BUILDING SECURE AND HIGH PERFORMANT WEB WIDGET Get up to speed for developing web widget with design guidelines, standard practices, security measures and techniques for high performance. Developing Web Widget with HTML, CSS, JSON and Ajax is the first guide to creating web widgets, tiny web applications that can be embedded in a web page, blog or social profile. Inside, author of the bestselling book Creating Vista Gadget, Rajesh Lal provide readers with a methodology for building widget using standard web technologies like HTML, CSS, and JavaScript. Developing Web Widget starts with a step-by step tutorial starting from Hello World Widget to an advanced Web Widget which uniquely identifies the user based on the url and not only display user data but also update data. Reader will learn how to use techniques to ensure security and add high performance to the web widget. You will also learn how to create RSS based widgets using Ajax, Proxy Server and Google Ajax Feed API and Widgets based on Facebook APIs. The star Widget developed in the book is now a popular free service. To see it live, visit http://addrating.com All code can be downloaded from the companion website. http://widgets-gadgets.com