Thursday, October 29, 2009

Free Social Network Icons Updated

Free Social Network Icons Updated height=Presenting new and improved versions of my free twitter icons set, and my free Subtle Grey and Lighter Gray social network and bookmark icons. I have added new icons to each set as well as made improvements to all three.

One thing that hasn't changed is the license agreement for using them, all of these icons remain free for both personal and commercial use, no attribution link required. The only requirement is that these icons are not redistributed, please refer others to download them from here.

Lighter Gray II

I mention this set first because it has been entirely re-done. All icons have been polished and cleaned up. I re-designed the email icon and added two new icons: Google and Reddit, bringing the total number of free icons to 17. Icons are 16 by 16 pixels and in transparent PNG format.
Lighter Gray Social Network and Bookmark Icons

Subtle Grey

Several icons have been polished and cleaned up in this set of icons as well, the email icon has also been completely redesigned and also has been expanded to include Google and Reddit icons, bringing the total number of free icons in this set to 17 as well.Icons are 16 by 16 pixels and in transparent PNG format.
Subtle Grey Social Network and Bookmark Icons

Twitter Icons and Graphics Set

This set has gone from 14 free icons to eighteen, with three new transparent PNG twitter logo icons added, and the addition of a blank banner to customize your own "Latest Tweet," or "Follow Me," banners, or any other way that you'd like to use it. Icons are of various sizes and in transparent PNG format.
Free Twitter Icons and Graphics
Sorry! This file is unavailable

I hope that someone will like these icons for find them useful. Feel free to add your comment below. If you have any difficulty with these icons please let me know as well.




Saturday, October 24, 2009

Free Blogger Template: Sugar Apple

Free Blogger Template: Sugar Apple Presenting "Sugar Apple," an easy to customize free XML Blogger Template, I designed and coded, that's fully functional "right out of the box," and also available in an imageless version. To clarify, "right out of the box," means that upon uploading to Blogger this template is fully functional.


XML Blogger Template
By Lauren Thompson
Free Blogger Template: Sugar Apple

Template Features

  •  Fixed width, 2 or 3 columns in the main section
  • 3 column footer
  • All sections "widgetized" or "gadget ready"
  • Super-easy to use optional and customizable Linkbar. No coding knowledge, nor even searching through code, is required to add menu links. Add links to the Linkbar in the "Page Elements" section under the "Layout" tab in Blogger's Dashboard.
  • Title code set up revised for proper display and for enhanced SEO
  • Free matching favicon already implemented, hosted by favicon.cc requiring no editing by user
  • Images hosted by photobucket allowing direct/hot inking also implemented into design so they should be work immediately (With optimized file sizes to maintain a reduced loading time of blog.) If would like to host the images yourself, you can download the images from here. (Images are also included in the zip file for convenience.)
  • Embedded comment form below posts
  • Supports Blogger Dashboard editing tools, fonts and colors and more may be customized via the "Template Designer," within the "Advanced," subcategory.


License

ATTRIBUTION
  • Templates are free to use in Blogger blogs, however, the link back to http://www.nymFont.com (usually located in the bottom footer) must not be removed.
  • Do not redistribute this template for paid download.
  • Do not add your own links to the template code and redistribute.
MODIFICATION
  • Modifications to the template are allowed either through the Blogger Dashboard or directly in the code, however, the link back to Nymphont/NymFont (http://www.nymFont.com) still must remain intact and again, not be removed, thank you. 
  • Do not add your own links to the template code and re-distribute.

REDISTRIBUTING & SHARING
  • If you are going to redistribute the template, you are not permitted to add your own links to the template.
  • In addition, it is asked that you do not link directly to my files for the download, nor upload them to your own servers for download. Instead you must link back to my own page for the template, or simply to the index of this website, http://www.nymfont.com
  • The terms and license for the template(s) must be stated and given whenever redistributing

This is non-negotiable. If you want to share or redistribute my templates, this is how it must be done. If you don't want to abide these terms, then you don't want to share or redistribute my templates.


Additional Details

The images used in this template are stored in my photobucket.com account which does allow direct or "hot-linking," it is recommended; however, that users with access to image hosting download the images from here and upload them to their own server, should the bandwidth be exceeded in the future.

Images are also now included in the zip download for convenience. Feel free to contact me or leave a comment if you need assistance replacing the images. An image-less version of the template is also included with the zip for convenience.

Occurrences where the blog's title is displayed in the demo will automatically be replaced with the user's own blog title. ( the top left where it says "sugar apple," for instance and in the footer as well)

Leave the linkbar widget empty widget if you do not want to use it, the blog is designed so that it looks good either way, it is not a required part of the template.

I would love to know your reaction and any thoughts regarding Sugar Apple so please do leave a comment below. Give your life a listen and stay tuned, ~Lauren


Saturday, October 17, 2009

25 Beautiful Pink and Black Web Designs

25 Beautiful Pink and Black Web Designs Love it or hate it, the color pink is a color that is often used in web design. Paired with black, it makes for one of my own personal favorite web color schemes. I use the colors myself.

October is breast cancer awareness month as well, so I've rounded up 25 web designs sharing this color combination that are sure to inspire.

Pink and black along with shades of gray make for excellent web design colors. In this roundup you will find a mix of personal sites, flash sites and corporate sites that exemplify how pink and black should be done, along with what I personally liked or think about their design.

Nice shading that creates an interesting light effect on the background.
Daniel Schutzsmith - All Around Web nerd

Rut m.fl
Unique layout with crisp graphics.
Rut m.fl

Flash site which clearly expresses the message intended.
Sex and the City - The Movie

Clear navigation and again nice shading to create lighting effects on the background.
The Image Boutique

Interesting graphics and great texture
CSSHazard

Beautifully simple and nice bold sans-serif type used
OKsuzi - Marketing Services

Nice flash withe cute illustrations
PULCOPIYO

Manages to include a lot of content and still have a minimal sort of style with the use of simple graphics.
the pink crow

This is one of my favorites, and I don't typically like flash sites. They use beautiful shading and imagery and use flash effectively I think.
Swallow.net

Very user-friendly in appearance, feels welcoming, great design.
EC Media

It's only fitting that Fuel Your Interface would itself have such a fabulous interface. This site has a perfectly organized grid-based layout, everything is clearly defined and easy to identify. I am a big fan of the Fuel Brand websites.
Screencapture

Hey, wait a second, how did this get in here? He he he. (sceencap updated 10/30/09)
Nymphont

Great graphics and animation in this nice design
Pink Feet

Wonderful clean and modern design that uses refreshing sans-serif type. Must see flash intro/splash screen. Trust me.
The Happy Corp

Interesting and unique layout with nice crisp images
Elan Chilas

Really fun and bright style with an interesting use of flash
Yokaboo

Nothing too "unusual" about this design, but its a nice clean web 2.0 style, with gradients used niced to create depth to the menus and other areas.
Screencapture

Another personal favorite of mine. I love the specific tones they used and the interesting photographs of people used. Great design.
Snog

Really unique and interesting layout style and cool imagery
Bar Music Hall

Truly one of my favorite web designs ever, I had to include ECTOMACHINE. Love it, absolutely love it.
ECTOMACHINE

Lots of content presented in a nice, organized fashion.
Screencapture

The color here borders on purple, but I thought this site was too cute not to show. Love the separation in the design by using different shades on the header, body, and footer.
Cow & Monkey

Very hip/trendy use of imagery and grunge fonts and textures.
Screencapture

I had some hesitation about including this site because of the name, but it's still a perfectly nice layout, and I love the suble flourishes in the background and nice reflection given to the menu.
Screencapture

What better site to end with than the stunning Remix Creative website. Simply marvelous design. Love the extra large text and overall look of this site.
Remix Creative

Wait! We're not done yet! I saw this site shortly after posting this, I just had to include it. The Effing Card Company rocks the colors pink and black so well.
The Effing Card Company
I hope you have enjoyed these sites as much as I have! Feel free to share your thoughts below on these sites or let me know of any other great pink and black web designs!

Tuesday, October 13, 2009

Handy Blogger Resources and Utilities

Handy Blogger Resources and Utilities 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 
  • 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>

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

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

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