lovethemedownload

One of the functions most voted for in Blogger's recent Product Ideas forum was the ability to summarize blog posts on non-item pages. I've written about a few different approaches to this, but these methods were never so easy to implement. Luckily I came across this tutorial from Quite Random which offers the simplest - and most useful - method of displaying post summaries automatically for our Blogger posts, complete with a thumbnail from images used in our posts. This customization is very easy to implement (there are literally only two steps) with very little editing of the template required. I installed with immediate success on several templates to test it out, and with only a little tweaking on one of my most customized designs. In short, this is a fabulous implementation of post summaries for Blogger. Be sure to pop over to Quite Random to check out this post and learn how to install this hack for your own Blogger blogs. However... This is not my only sour...

Displaying links to "related posts" beneath individual entries on our blogs is a tried and trusted method of providing useful and interesting reading material for our readers. I've written about several different methods which Blogger users can choose to display related posts - all of which perform their function well enough. But after seeing several of my favourite sites displaying links to related items with thumbnails using LinkWithin's free service, I was intrigued to discover how well this may be adapted for use with Blogger. About LinkWithin LinkWithin is a free service offered by a small team based in New York. This free service enables us to display related posts with thumbnails below our blog posts (the thumbnail is taken from an image within the post it links to). We retrieve and index all stories from your blog archive, not just recent stories, making them accessible to new or casual readers of your blog who would not otherwise encounter them. The pos...

While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the Recommended (Popular) Posts Gadget. This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer. In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts. Want to see how it works? Take a look in the sidebar to see a list of posts recommended by readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of , so feel free to recommend any other posts you may like!). Those of you reading this in a feed r...

As announced yesterday , Blogger have now enabled selective post summaries for our blogs. This means we can add a "jump break" in our posts, after which any content will only be visible on item pages. Those of us using customized templates will probably need to add the code required for this function to work. In this article, I'll explain how easy this is to implement, as well as some helpful hints for customizing the "Read More" link. Will the "Read More" feature work for my customized template? For most Blogger users, adding the code required for Blogger's post summaries will enable selective summaries without error, even if you've already added the code to summarize your posts using the <span class="readmore"> hack. The only templates this method will not work with is those which have added an automatic post summaries hack, which summarizes the posts based on the number of characters or words. This is because such cust...

Aneesh of a new "Related Posts" script for Blogger which displays thumbnails of images in addition to linked post titles: In appearance, this Blogger "add-on" is similar to the LinkWithin script . Each section is highlighted in a complementary colour when the mouse hovers over it, and the entire section is clickable, leading to the URL of the "related post" displayed. Unlike the LinkWithin script, this add-on links directly to the post page it references, and relies on Blogger's label feeds to display posts of true relevance to the post on which it appears. Aneesh's script seems relatively easy to install. Furthermore, almost all aspects of this add-on may be customized including the style (by editing the CSS), the number of related posts to be displayed and the title of the section in which it is contained. The image thumbnails displayed for each related post are generated from the thumbnail associated with the relevant post page. Ther...

A question I'm asked a lot is how to use @font-face (or other font-replacement techniques) with Blogger. Now I have to admit, after dozens of failed attempts, heavy experimentation and keyboard-bashing I was almost ready to give up on this and admit defeat.Most of the techniques I tried were either unreliable or simply did not work! Luckily, @ kernest and @ abu_farhan came to my rescue via Twitter by pointing me in the direction of Kernest's free (and premium) font-based service . Why use Kernest? When designing for the web, @font-face is the most-used technique for replacing boring standard fonts for stylish typographical styles. Using @font-face we would need to find reliable hosting for the fonts we use in our designs that enables us to utilize fonts across with no domain-restrictive policies in place. There are also permission and copyright issues involved with embedding fonts in web pages, making the whole process even more complicated. Particularly a...

Web fonts have become a popular web design ekspresi dominan 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. ...

With all the changes to Blogger's template system, it seems no wonder that my original tutorial for hiding the Blogger nav-bar no longer works effectively (particularly for newer template designs). In case you were wondering, it is possible to hide the Blogger nav-bar (which displays a search box and useful links). The principle is the same as in my previous tutorial in that we simply need to add a few lines of CSS to our Blogger template code. Here's how my updated technique to hide the Blogger nav-bar in a few simple steps: Go to Design>Edit HTML in your Blogger dashboard Using your browser's search function, locate the closing </b:skin> tag in your template's HTML markup. Immediately before this line, paste the following section of code: #navbar-iframe, #navbar, .navbar {height:0px; visibility:hidden; display:none; margin: 0 !important;} Preview the changes to ensure everything looks the way it should, then click "Save". That...

One of the customizations I use most when designing Blogger templates is creating a "featured content" section to be displayed only on the home page. I often use this technique to display a content slider, mini-portfolio or slideshow above the main posts section. Take a look at the home page of my site, Just Great Film, to see an example of this in action (click on images for full screen previews): Here's an easy way to restrict the display of a gadget to your blog's home page. Back-up your existing template Before making any changes to the HTML code of your Blogger template, it's advisable to make a backup of your existing, working template code, just in case you make a mistake when editing or accidentally save unwanted changes! To make a back-up of your Blogger template, simply go to Layout>Edit HTML in your Blogger dashboard and click the "Download full template" link near the top of the page. This will prompt you to save y...

If you use a third party template or customize the design of your blog, chances are you'll need to find hosting for images used in the design. Many Blogger designers use Photobucket, Flickr and other free image hosting solutions. It's also possible (albeit unnecessarily complicated) to upload images to Blogger or Google Sites. But my personal favoured image hosting service is Picasa Web Albums . This free Google powered service offers unlimited bandwidth and a generous 1gb of storage - perfect for serving up any images you need for template visualisation. If you already host a blog with Blogger, any images which you upload to your blog posts will already be hosted on Picasa Web Albums in folders according to your blog name, even if you haven't already activated your Picasa account. Simply go to the Picasa Web Albums home page and log in using your Google account. Once logged in, you'll see all of your Picasa hosted albums, including any which are utilized fo...

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