ADVERTISEMENT
A quick reference of links, solutions, and remedies to difficulties commonly encountered when modifying Blogger templates, and other recommended blogging utilities. All tips, tricks, and hacks that have been vital to me one time or another when customizing a Blogger template. Hopefully they will put your Blogger-template-design-woes to rest as well!Add Fullsize or "Expandable Images"
- Get the Script from Css Reflex - This is a script I was really happy to find. Naeem Noor from Css Reflex shares his script to add Fullsize to Blogger blogs. Fullsize allows images to enlarge and collapse simply with a click and is supported by all modern browsers
"Calendar" & Other Custom Date Formats
- Blog Godown's Custom Date How To Instructions & Hack - You may have seen a blog that displays the post's date in a square box resembling a miniature calendar, or in other unusual styles (such as the winged coffin that I use display my own post dates in this present template.) To achieve this look you will need to add some CSS, a bit of JavaScript, and make some editing to your templates code.Some coding knowledge would be a plus, but it's still relatively simple. Guatam of Blog Godown was kind enough to find this hack for me and posted the how to instructions.
Make Sidebar & Main Column Equal Height
- The Technology Hub's Equal Height jQuery Script - Some template designs leave the left sidebar looking of-kilter with a sidebar that does not reach the height of the page as does the main column. Height discrepancies between the main column and sidebar can easily be eliminated with the addition of a simple and easy to implement jQuery and cut-short JavaScript code. Works perfectly in all modern browsers.
Image Transparency Effect
- Cheth Studios Image Transparency Effect Tutorial - I use image transparency CSS styling in the post footer of my blog, making the icons subdued and opaque unless being "moused-upon," upon which their true colors are shown. Cheth from Cheth Studios provides the simple CSS and instructions to add image transparency to blogger, which you can customize to suit your tastes.
Three Column Footer
- Blogger Buster's three column footer tutorial. - A three column footer allows a lot of content and information to be displayed without appearing "cluttered," not to mention it's a nice way to "wrap up," a blog design. Achieving this does require adding & removing parts of code in your blog's HTML, but little or no coding knowledge is required with the handy cut and paste instructions from Amanda at Blogger Buster.
Post Summary/Read More Hack
- Get the Read More Hack & Script from BloggerStop.Net - The read more hack I use automatically creates a post summary with image thumbnail and adds the read more link to new and old posts with a small JavaScript file. (requires file host that supports .js files) Choose the length of summary and size of thumbnail image.
Blogging Utilities
- Kontactr- Add a free contact form to your blog for your visitors to easily send a message to your email box without having to display your email address or requiring them to leave your blog.
- DISQUS- A free alternative commenting system with some more dynamic features than the default blogger commenting system
- favicon.cc - Really cool free online favicon maker and optional favicon host, allows image uploads and pixel by pixel editing.
- Ripway.com - Free file hosting, allows hosting of JavaScript files and direct linking
- Fileden.com - Free file hosting lot of bandwidth (no JavaScript files however) and direct linking
- Fileave.com - Free file hosting, similar to Ripway
- Simple Code - Generates markup from normal HTML that will display "as is" i.e. when displaying codes
- BrowserShots.org - See screen-shots of your site looks in various browsers, operating systems and and other settings
- PRChecker.info - Generates the Google PageRank of your blog and an optional image to display
Handy Copy & Paste Codes
- How to Add a "Back to Top" Link: To add a back to top link to yur blog, copy and paste this code in your template's HTML or into an HTML/JavaScript widget where you would like it to appear. You may change the bold text to whatever you want the link to say.
<a href="#" rel="nofollow" title="back to top!">back to top!</a>
- How to Add Social Bookmarking Links to Posts: If you'd like social bookmarking links in each post for your users to share & save it with, the codes for a few popular services are below which you can copy and pate into your blogs HTML. To add these codes in your posts footer, go to the Layout tab from your Dashboard, and click Edit HTML. Then check "expand widget templates." Search for the following bit of code in your HTML and then paste the codes to the Social Bookmarking sites you'd like directly after it:
<div class='post-footer-line post-footer-line-1'> The bold text is how the link will read and may be replaced with alternate text or an image/icon of your choice if you'd prefer.
Delicious
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Delicious'>Add to Delicious</a>
Digg
<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Digg This Post'>Digg This Post</a>
<a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share on Facebook'>Share on Facebook</a>
<a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Email This Post'>Email This Post</a>
StumbleUpon
<a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble This Post'>Stumble This Post</a>
Twitter (Twitthis.com)
<a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This Post'>Tweet This Post</a> Technorati
<a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Technorati Favorites'>Add to Technorati Favorites</a>
<a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Reddit'>Add to Reddit</a>
Google Bookmark
<a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Add to Google Bookmarks'>Add to Google Bookmarks</a>
Yahoo!Bookmarks
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title=' Add to Yahoo! Bookmarks'>Add to Yahoo! Bookmarks</a>
Design Float
<a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Float This Post'>Float This Post</a> I hope these resources do prove useful to you and your blogging needs.
