diff --git a/_src/_posts/2009-01-05-the-mac-in-futurama.markdown b/_src/_posts/2009-01-05-the-mac-in-futurama.markdown
index 911f2d0c..7363ba72 100644
--- a/_src/_posts/2009-01-05-the-mac-in-futurama.markdown
+++ b/_src/_posts/2009-01-05-the-mac-in-futurama.markdown
@@ -11,41 +11,14 @@ categories:
---
-
Time for some Mac Futurama crossover geekiness! In a fun watching process I've compiled a list of all the references to Apple's Macintosh and other Apple products. In Futurama we mainly see references to the old, classic Macs running [System 6](http://en.wikipedia.org/wiki/Apple_System_Software_6), [System 7](http://en.wikipedia.org/wiki/System_7) or [OS 9](http://en.wikipedia.org/wiki/Mac_OS_9) ending with the colorful iMac G3. This is likely caused by the timeframe in which Matt Groening and David X. Cohen developed the first season of Futurama (1997-1999).
-
-
So the following screens from Futurama refer all to Macs available in or before 1999. Also you'll find some nice links to downloadable Futurama stuff for your Mac at the end of this article. And may the lawyers of Twentieth Century Fox now please stop reading.
For orientation: I've followed the original four season production cycle and not Fox's five seasons splitting. The "real" Season 5 are the recently released DVD movies/Episodes on Comedy Central.
-
-
-
-
- * Season 1
-
-
- * Season 2
-
-
- * Season 3
-
-
- * Season 4
-
-
- * Season 5
-
-
- * Futurama Stuff For Your Mac
-
-
-
-
_All screens (C) 1999 by Twentieth Century Fox Film Corp._
@@ -53,9 +26,6 @@ _All screens (C) 1999 by Twentieth Century Fox Film Corp._
## Season 1
-
-
-
## 1ACV02 - The Series Has Landed
diff --git a/_src/_posts/2009-02-01-portal-thingy.markdown b/_src/_posts/2009-02-01-portal-thingy.markdown
index e401727b..29a78151 100644
--- a/_src/_posts/2009-02-01-portal-thingy.markdown
+++ b/_src/_posts/2009-02-01-portal-thingy.markdown
@@ -1,21 +1,20 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-02-01 06:01:28+00:00
layout: post
-slug: portal-thingy
+
title: 'Portal Thingy: matthiaskretschmann.com'
+image:
+author: Matthias Kretschmann
+
+date: 2009-02-01 06:01:28+00:00
wordpress_id: 504
categories:
- personal
---
-Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal.
[](http://matthiaskretschmann.com)
+Just some self reference here. I've launched a slick new site under [matthiaskretschmann.com](http://matthiaskretschmann.com) today which has an absolute simple concept. It's kind of a digital business card site for being digitally present under my name. Beside that it has Links to my social media stuff so it's easier for you to stalk me. In the 90's we probably would have called it a Portal.
-
-
As you can read in the sliding Colophon at the bottom of the site, it is written in valid XHTML 1.1 and CSS3 code and makes heavy use of jQuery. But, of course, it is fully functional without JavaScript enabled. Even the tab interface remains intact in such a case which is done by some PHP magic. Just the print and text-size buttons in the lower right will be gone without JavaScript. But that's ok because their functionality can be implemented just with JavaScript anyway.
For your learning pleasure I've let my comments in my [jQuery file](http://matthiaskretschmann.com/js/effects.js) intact and you'll also find the sources for code-parts where I didn't wanted to invent the wheel again. Although slightly modified by me, this includes the code for the vCard popup bubble when hovering over the header ([by jqueryfordesigner.com](http://jqueryfordesigners.com/coda-popup-bubbles/)) and the text-resizing function ([from dev-tips.com](http://dev-tips.com/featured/jquery-tip-font-resizing-with-animation-effects)) .
@@ -38,8 +37,6 @@ If you find a bug or have any additions feel free to [contact me](/contact), pos
## Inspiration
-
-
With the concept of this little site I've kinda jumped on the bandwagon which obviously was started by [Tim van Damme's excellent small site under timvandamme.com](http://timvandamme.com/).
[](http://timvandamme.com)
@@ -52,37 +49,13 @@ Another great version based on Tim's concept was crafted by [Mr. Foliage-O-Meter
Finally I find it very interesting to compare the jQuery code of the three sites afterwards. We all have some sort of tab interface with fancy stuff going on when the tabs change. But we wrote three completely different versions of code for that purpose but all with the same JavaScript library. Oh mighty flexible jQuery!
-
-
## More Business Card Style Sites
-
-
-
-
[Icon- and UI-Designer Laurent Baumann](http://lbaumann.com/)
-
-
-
-
[Interface-Designer Maximilian Schöning](http://www.maximilianschoening.com/)
-
-
-
-
[Consultant & Blogger Aref Jdey (Design & Code by yours truly)](http://www.arefjdey.com/)
-
-
-
-
-
-If you run such a site or know of other business card style sites, feel free to post them in the comments.
-
-
-
-
diff --git a/_src/_posts/2009-02-17-out-of-whale-oil.markdown b/_src/_posts/2009-02-17-out-of-whale-oil.markdown
index 9b527aba..133d458a 100644
--- a/_src/_posts/2009-02-17-out-of-whale-oil.markdown
+++ b/_src/_posts/2009-02-17-out-of-whale-oil.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-02-17 20:11:55+00:00
layout: post
-slug: out-of-whale-oil
+
title: '"We Are Out Of Whale Oil"'
+image: Teaser-Out-Of-Whale-Oil.jpg
+author: Matthias Kretschmann
+
+date: 2009-02-17 20:11:55+00:00
wordpress_id: 533
categories:
- goodies
@@ -13,32 +14,18 @@ categories:
Simple, high-resolution Futurama tribute wallpaper pack inspired by the latest Futurama movie Into The Wild Green Yonder. This pack includes 4 versions of the Planet Express ship whale oil indicator in 2 different sizes for desktop and iPhone use. Vivid pink Feminista versions included too ;-)
-
Here're the details for the whole pack:
-
-
-
* 2 high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
-
-
* 2 iPhone versions with empty and full whale oil indicator (320x480)
-
-
* 2 Feminista versions high-rez widescreen desktop versions with empty and full whale oil indicator (2560x1600)
-
-
* 2 Feminista iPhone versions with empty and full whale oil indicator (320x480)
-
-
* Icon folder files for this wallpaper release
-
-
[](http://www.kremalicious.com/goodies/#wall)
Seriously, the pink versions are burning my eyes but the pink is a good reference to the events in the recent movie ;-)
The whole wallpaper pack can be downloaded [from the Goodies section on my website](http://www.kremalicious.com/goodies/) or via this button:
-[download_button version=1.0]
+Download
\ No newline at end of file
diff --git a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.markdown b/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.markdown
index 3662f2a9..8944b704 100644
--- a/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.markdown
+++ b/_src/_posts/2009-03-29-ultimate-coda-wordpress-share-link-bonanza.markdown
@@ -1,10 +1,10 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-03-29 23:12:15+00:00
layout: post
-slug: ultimate-coda-wordpress-share-link-bonanza
+
title: Ultimate Share Link Bonanza For Coda, Wordpress And Everything Else
+author: Matthias Kretschmann
+
+date: 2009-03-29 23:12:15+00:00
wordpress_id: 576
categories:
- design
@@ -13,78 +13,14 @@ tags:
---
-
Ever wanted to include those sharing links to social or bookmarking sites so users can easily submit your content to these sites in a Wordpress site or any other platform? Then you might have experienced a rather time consuming search odyssey to get those links. But fear no more! In this article I've provided a huge collection of all the links to your favorite social sites compiled in two handy Coda Clip files in a plain and a Wordpress version. And the non-Coda users can download an html file with all the links included.
-
-
Additionally you'll find a huge list within this article with the separated links in two versions for each site. And finally I've put together a quick tutorial for using buttons or icons with these links. This way you can easily add content submit/sharing links to your sites in no time.
-## Quick Navigation
-
-
-
-
-
-
-
- * 1. Coda Clips Download
-
-
- *
-
-
- * 1.1 Bonus: Coda Clips Icon
-
-
-
-
-
- * 2. Usage
-
-
- *
-
-
- * 2.1 Share Links
-
-
- * 2.2 Share Links (Wordpress Edition)
-
-
-
-
-
- * 3. Quick Tutorial For Using Icons With These Links
-
-
- *
-
-
- * 3.1 Use The ![]()
Tag Element
-
-
- * 3.2 Use CSS Background Images
-
-
-
-
-
- * 4. HTML File Download And All The Links Separated
-
-
- * 5. Please Jump Around, Then Spread The Word
-
-
-
-
-
-## 1. Share Links Coda Clips Download
-
-
+## Share Links Coda Clips Download
Also all links are plain html code and therefore the non-JavaScript versions of the various social sites' submit capabilities. While most social/bookmark sites have some kind of tool section where they explain the use of their API near all of them want you to use JavaScript to access their API and submit your content to them through the use of a link on your website.
@@ -92,47 +28,35 @@ But I think you don't want to load tons of scripts on your websites if you inclu
To make this a bit more straightforward I provide these links compiled within two Coda Clip files for use with [Panic's Coda](http://panic.com/coda). While the first clip group contains all the plain link snippets the second group includes those snippets for use with Wordpress. Just download and add them to your Coda Clips collection:
-[ Download Share Links Coda Clips v1.0 | zip | 448kb](http://www.kremalicious.com/media/share-link-bonanza-coda-clips.zip)
+Download Share Links Coda Clips
Included are a **total of 40 share links per clip group** for the following social/bookmark sites. This list uses the links provided in the Coda clips so you can test them out here with this article ;-):
_
[Delicious](http://del.icio.us/post?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [StumbleUpon](http://www.stumbleupon.com/submit?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Facebook](http://www.facebook.com/sharer.php?u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/?t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Twitter](http://twitter.com/home?status=Awesome Coda Clips collection! http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Digg](http://digg.com/submit?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&media=NEWS&thumbnails=1), [Design Float](http://www.designfloat.com/submit.php?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Reddit](http://www.reddit.com/submit?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Technorati](http://www.technorati.com/faves/?add=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Yahoo Buzz](http://buzz.yahoo.com/submit/?submitUrl=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&submitHeadline=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Newsvine](http://www.newsvine.com/_tools/seed&save?u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&h=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Magnolia](http://ma.gnolia.com/bookmarklet/add?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Google Bookmarks](http://www.google.com/bookmarks/mark?op=edit&bkmk=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [FriendFeed](http://friendfeed.com/share?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Blogmarks](http://blogmarks.net/my/new.php?mini=1&url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [MySpace](http://www.myspace.com/Modules/PostTo/Pages/?l=3&u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Script & Style](http://scriptandstyle.com/submit?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Blinklist](http://blinklist.com/index.php?Action=Blink/addblink.php&Url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&Title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Slashdot](http://slashdot.org/bookmark.pl?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [LinkedIn](http://www.linkedin.com/shareArticle?mini=true&url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&source=), [Windows Live](https://favorites.live.com/quickadd.aspx?marklet=1&mkt=en-us&url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&top=1), [Furl](http://furl.net/storeIt.jsp?u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Yahoo Bookmarks](http://bookmarks.yahoo.com/toolbar/savebm?opener=tb&u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Mixx](http://www.mixx.com/submit?page_url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Propeller](http://www.propeller.com/submit/?U=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&T=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Yigg](http://www.yigg.de/neu?exturl=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&exttitle=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Mr Wong](http://www.mister-wong.com/index.php?action=addurl&bm_url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&bm_description=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Diigo](http://secure.diigo.com/post?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [N4G](http://www.n4g.com/tips.aspx?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Current](http://current.com/clipper.htm?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&src=st), [Simpy](http://www.simpy.com/simpy/LinkAdd.do?href=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Oknotizie](http://oknotizie.alice.it/post?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Care2](http://www.care2.com/news/compose?share[link_url]=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&share[title]=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Faves](http://www.faves.com/Authoring.aspx?u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Meneame](http://meneame.net/submit.php?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Fresqui](http://ocio.fresqui.com/post?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else), [Funp](http://funp.com/pages/submit/add.php?title=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&via=tools), [Kirtsy](http://www.kirtsy.com/submit.php?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Dealspl.us](http://dealspl.us/add.php?ibm=1&url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/), [Xanga](http://www.xanga.com/private/editorx.aspx?t=Ultimate%20Share%20Link%20Bonanza%20For%20Coda%2C%20Wordpress%20And%20Everything%20Else&u=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/&s=), [Sphinn](http://sphinn.com/submit.php?url=http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/)_
-
-
-## 1.1 Bonus: Coda Clips Icon
-
-
+## Bonus: Coda Clips Icon
There's no special icon for Coda Clips included in the recent Coda version (they use the blank one) so I quickly created one based on the other Coda file type icons. And the nice Panic guys allowed me to distribute this icon here. I've just made the 256px icon a bit sharper than the equivalent other coda file type icons.
If you download the above Coda Clip files this icon is already applied on the clip files but here're just the icon files (icns, folder, iContainer, PNGs):
-[ Download Coda Clips Icon v1.0 | zip | 834kb](http://www.kremalicious.com/media/coda-clips-icon-files.zip)
-
-
+Download Coda Clips Icon
## 2. Usage
-
-
Just download and double click the Coda clip documents and two new clip groups will be created in your Coda Clips HUD with the various clips inside of them. All you have to do in Coda is inserting the clip by double clicking in the Coda Clips HUD and start typing your link text or type your link text first, select it and double click the clip in order to insert it.
That's because both collections have their placeholder selection (the ) located where the link text would be:
-``
+{% highlight html %}{% endhighlight %}
As you can see I've also included the link title value usually with the name of the specific social site. Also I've already encoded all the entities so there shouldn't be any (X)HTML validation errors when using these links in your projects.
And depending on which collection you use additional steps need to be done:
-
-
## 2.1 Share Links
-
-
Everything you need to replace for yourself is written in capital letters:
**YOUR URL**
@@ -143,41 +67,30 @@ For all social sites this title has to be URL-encoded to work correctly. So be s
Apart from that some sites allow you to add and submit more informations than just the URL and the title and those things are also written in capital letters. Also I've included some usage comments where necessary like in the Digg link.
-
-
## 2.2 Share Links (Wordpress Edition)
-
-
The Wordpress edition of these share link collection includes some Wordpress php bits for dynamically creating the whole submit URL so there's no need to manually edit most of the links. The Wordpress template tags used are:
-**** to create the URL dynamically depending on the article under which you have included the share and submit links.
+* `` to create the URL dynamically depending on the article under which you have included the share and submit links.
-**** to dynamically create the title which is used when your content gets submitted to one of the sites.
-
-Anyway as I've said above some sites allow more to submit here and you'll find this also in capital letters. You have to adjust them manually too.
+* `` to dynamically create the title which is used when your content gets submitted to one of the sites.
+Anyway, as I've said above some sites allow more to submit here and you'll find this also in capital letters. You have to adjust them manually too.
## 3. Quick Tutorial For Using Icons With These Links
-
-
I've also written a quick tutorial in case you want to use little images as icons beside your links. To achieve this these two solution provided here should fit every need for this. You can do this by using one of these two techniques realized with HTML and CSS:
-
-
-## 3.1 Use The ![]()
Tag Element
-
-
+## 3.1 Use The <img /> Tag Element
Just include an img element wrapped inside the link tag, like so:
-`
Delicious`
+{% highlight html %} Delicious{% endhighlight %}
And if you want to just use an icon with no text use just an img element without providing any link text:
-``
+{% highlight html %}{% endhighlight %}
@@ -187,41 +100,35 @@ And if you want to just use an icon with no text use just an img element without
To me a more cleaner solution is to use the css background-image property to include the icon images. Just add a class or an id to every share link like so:
-`Delicious`
+{% highlight html %}Delicious{% endhighlight %}
And in your CSS select this class and style it with a background image. Assuming you want the site icon to appear left beside the link text you would also have to add some padding so the text won't overlap the icons:
-
- .delicious {
+{% highlight css %}
+ .delicious {
background: url(delicious.png) no-repeat center center;
padding-left: 20px;
- }
-
+ }
+{% endhighlight %}
If you want to use just icons and no text you should provide a link text anyway but hide it with css. This is a good practice for accessibility and search engine optimization. Also you would have to provide the dimensions of the icon:
-
-
- .delicious {
+{% highlight css %}
+ .delicious {
width: 16px;
height: 16px;
background: url(delicious.png) no-repeat center center;
text-indent: -999999px;
- }
-
-
-
-
+ }
+{% endhighlight %}
## 4. HTML File Download And All The Links Separated
-
-
Sadly Coda's clips aren't in a portable format ([Panic guys](http://panic.com), consider this is a feature request!) so here's a comprehensive list for the non-Coda users of all the links included in the above Coda Clips with plain and the Wordpress version for every site. This comes as a downloadable stripped-down HTML file (meaning there's no HTML site structure included) and as a long list within in this article. First, here's the HTML file download. Just open this locally in your browser or in your favorite editor:
-[ Download Share Links HTML File v1.0 | zip | 104kb](http://www.kremalicious.com/media/share-link-bonanza-html.zip)
+Download Share Links HTML File
And here's the huge list with all the share links in case you quickly want to grab just one of them. But be warned that this is a huge list so this is hidden by default.
@@ -229,15 +136,8 @@ Just click the Toggle All Links button to reveal them and click it again to hide
↓ Toggle All Links ↓
-
-
-
-
-
## Delicious
-
-
**Plain**
``
@@ -245,7 +145,6 @@ Just click the Toggle All Links button to reveal them and click it again to hide
`
`
-
## StumbleUpon
@@ -769,18 +668,8 @@ Just click the Toggle All Links button to reveal them and click it again to hide
**Wordpress**
`Sphinn`
-
-
-
-
-
-
## 5. Please Jump Around, Then Spread The Word
-
-
-
-
If you ever wanted or had to include such sharing links manually in your sites and searched hours for those you should already have recognized the value of this article and if not already happened you can now jump around to express your enjoyment. After this you should immediately bookmark or share this site on your favorite social site. And while you're at it [I could use another coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=krema%40jpberlin%2ede&item_name=kremalicious%2ecom%20%2d%20Buy%20me%20a%20coffee%20or%20two%20or%20three%20or%20more&no_shipping=1&return=http%3a%2f%2fwww%2ekremalicious%2ecom%2fthank%2dyou%2f&tax=0¤cy_code=EUR&lc=US&bn=PP%2dDonationsBF&charset=UTF%2d8).
@@ -789,24 +678,5 @@ And that's it. If you think there should be another site added feel free to post
Also I would like to provide these links as [Espresso](http://macrabbit.com/espresso/) snippets probably as part of the HTML-(or PHP?)-Sugar but this seems to be rather complicated at the moment. As soon as this becomes more straightforward I will add these to this article. But if you're already advanced in creating Espresso sugars and would like to help me with this [please contact me!](http://www.kremalicious.com/about/contact)
-
-
-
-
-
-
-
-## Article Updates
-
-
-
-
-04/05/2009 added the Coda Clips icon download and applied the icon to the clip files in the first download package
-
-
-
-
-
-
diff --git a/_src/_posts/2009-06-04-twitter-crisp.markdown b/_src/_posts/2009-06-04-twitter-crisp.markdown
index 67df9496..3874eb8d 100644
--- a/_src/_posts/2009-06-04-twitter-crisp.markdown
+++ b/_src/_posts/2009-06-04-twitter-crisp.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-06-04 00:16:40+00:00
layout: post
-slug: twitter-crisp
+
title: Twitter Crisp
+image: Teaser-Twitter-Crisp.jpg
+author: Matthias Kretschmann
+
+date: 2009-06-04 00:16:40+00:00
wordpress_id: 794
categories:
- goodies
@@ -13,16 +14,14 @@ categories:
Here's a quick twitter icon for use on your websites which is kind of a by-product from one of my last projects. But I would consider it a waste to just bury this deep in my filesystem so I think it's best I'm throwing this out to you. ;-)
-
-
This icon comes in various formats (PNG, ICNS, iContainer) and in 4 different sizes (128px, 48px, 32px, 16px) with each icon size redrawn (of course). Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these icons while they're hot.
-[download_button version=1.0]
+Download
-Use them on any web project you like and/or [convert them into a send to twitter link](http://www.kremalicious.com/2009/03/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
+Use them on any web project you like and/or [convert them into a send to twitter link](http://kremalicious.com/ultimate-coda-wordpress-share-link-bonanza/). Have fun!
These icons are free for **all your personal and commercial projects** following the [Creative Commons Attribution-No Derivative Works 3.0 License](http://creativecommons.org/licenses/by-nd/3.0/). All I'm asking you is to link back to this URL if you use this twitter icon:
-[http://www.kremalicious.com/2009/06/twitter-crisp/](http://www.kremalicious.com/2009/06/twitter-crisp/)
+[http://kremalicious.com/twitter-crisp/](http://www.kremalicious.com/twitter-crisp/)
[](http://creativecommons.org/licenses/by-nd/3.0/)Twitter Crisp Icon by [Matthias Kretschmann](http://kremalicious.com) is licensed under a [Creative Commons Attribution-No Derivative Works 3.0 License](http://creativecommons.org/licenses/by-nd/3.0/).
diff --git a/_src/_posts/2009-06-24-adiumeetie.markdown b/_src/_posts/2009-06-24-adiumeetie.markdown
index 57043618..3bebf457 100644
--- a/_src/_posts/2009-06-24-adiumeetie.markdown
+++ b/_src/_posts/2009-06-24-adiumeetie.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-06-24 21:00:38+00:00
layout: post
-slug: adiumeetie
+
title: Adiumeetie. Tweetie Style Adium Icon
+image: Teaser-Adiumeetie.jpg
+author: Matthias Kretschmann
+
+date: 2009-06-24 21:00:38+00:00
wordpress_id: 844
categories:
- goodies
@@ -13,8 +14,6 @@ categories:
Here's a new desktop goodie for your pleasure. It's a replacement dock icon for the popular Mac IM client [Adium](http://adium.im/) following the style of atebit's excellent [Tweetie for Mac](http://www.atebits.com/tweetie-mac/) icon.
-
-
While the Tweetie Mac icon (and it's UI) was discussed quite controversial (which caused some very nice Tweetie replacement icons to appear, like [here](http://jonasraskdesign.com/medias/medias.html), [here](http://iconblock.deviantart.com/art/Tweetie-Mix-120360482), [here](http://macthemes2.net/forum/viewtopic.php?id=16795744) or [here](http://www.flickr.com/photos/marcelomarfil/3611311439/)), I grew to like the style of it. But Adium beside Tweetie in the Dock just looked weird... (No offense, [Adam](http://www.artofadambetts.com/weblog/?p=108) ;-)) So I redrew the whole icon and used Adium's duck silhouette on it and made some obvious and subtle changes in comparison to the Tweetie icon. And thanks to [Loren](http://blog.atebits.com/) who kind of rubber-stamped this icon release.
@@ -24,21 +23,14 @@ The icon comes in various formats (iContainer, icns, png) in sizes from 512px-16
-
## Download
-
-
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab this icon while it's hot.
-[download_button version=1.0]
-
-
+Download
## Adium Icon Usage
-
-
Just double click the Adiumeetie.AdiumIcon file and the dock icon gets installed automatically. Then you can select the icon in Adium's preferences under Appearance > Dock Icon from the drop-down menu. After this the icon should be ready as your new Adium icon both in the Dock and in your Applications folder.
The icon is free for your personal use and I hope you'll enjoy it. If you do, don't forget to [spread the word via Twitter](http://twitter.com/home?status=Adiumeetie%3A%20Tweetie%20Style%20Adium%20Dock%20Icon%20from%20%40kremalicious%20http://kremalicious.com/adiumeetie/) and all your other favorite social media sites.
diff --git a/_src/_posts/2009-09-05-delibar.markdown b/_src/_posts/2009-09-05-delibar.markdown
index a5ad6501..3571868f 100644
--- a/_src/_posts/2009-09-05-delibar.markdown
+++ b/_src/_posts/2009-09-05-delibar.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-09-05 19:07:31+00:00
layout: post
-slug: delibar
+
title: Delibar Interface Replacement Icons
+image: Teaser-Delibar-Icons.jpg
+author: Matthias Kretschmann
+
+date: 2009-09-05 19:07:31+00:00
wordpress_id: 936
categories:
- goodies
@@ -13,48 +14,20 @@ categories:
[Delibar](http://www.shinyfrog.net/en/software/delibar/) from [Shiny Frog](http://www.shinyfrog.net) is a [delicious.com](http://delicious.com/) desktop client for OS X which sits in your menubar and gives you quick access to your bookmarks on delicious. But the default menubar icon and the other interface icons look quite disturbing so I've made these simple replacement icons for the [Delibar](http://www.shinyfrog.net/en/software/delibar/) interface.
-
-
-
-
-Please Note: Shinyfrog released a [refreshed version of Delibar](http://www.delibarapp.com/) which sports a nice and completely different UI. So using these icons here along with this new version is probably no good idea ;-)
-
-
-
-
+Please Note: Shinyfrog released a refreshed version of Delibar which sports a nice and completely different UI. So using these icons here along with this new version is probably no good idea.
## Download
-
-
Just head over [to my Goodies page](http://www.kremalicious.com/goodies/) or click the following download button and grab these replacement icons.
-[download_button version=1.0]
-
-
+Download
## Icon Usage
-
-
We're going to replace the default app resources so you should do a backup of the Delibar app or just download a [fresh copy from Shiny Frog](http://www.shinyfrog.net/en/software/delibar/) if anything goes wrong or looks weird.
-
-
-
-
1. Close Delibar if it's running
-
-
2. Ctrl + click or right-click on the Delibar app in your Applications folder and choose _Show Package Contents_
-
-
3. In the opened Finder window browse to Contents > Resources
-
-
4. Drag the contents of the _Icon Resources_ folder from the download package into this place, replacing the current files
-
-
5. Start Delibar and enjoy!
-
-
diff --git a/_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown b/_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
index b71e357e..0dc78280 100644
--- a/_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
+++ b/_src/_posts/2009-12-17-wordpress-post-thumbnails.markdown
@@ -1,10 +1,10 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2009-12-17 04:00:21+00:00
layout: post
-slug: wordpress-post-thumbnails
+
title: Using The New Post Thumbnail Feature In WordPress 2.9
+author: Matthias Kretschmann
+
+date: 2009-12-17 04:00:21+00:00
wordpress_id: 959
categories:
- design
@@ -14,21 +14,28 @@ tags:
WordPress 2.9 added a new feature which allows you to assign an image to an article to make it the post image like it's often used in magazine style themes. This new feature along with a new template tag makes all the custom field hacks usually used for this functionality in the past obsolete. So here's a quick walkthrough to make use of the new post thumbnail feature and of course how to make it backwards compatible.
-
-
-
## 1. Activate The Feature
-
For whatever reason you first have to activate the feature with an entry in your theme's _functions.php_ file in order to get the Post Thumbnail box in the Editor.
So just open up your theme's _functions.php_ file in your favorite editor or create it if there's no such file in your theme folder. Add this little code snippet to this file:
-{% highlight php %}add_theme_support('post-thumbnails');{% endhighlight %}
-For backwards compatibility you should wrap this inside a function check for the new add_theme_support:
-{% highlight php %}if ( function_exists( 'add_theme_support' ) )
- add_theme_support( 'post-thumbnails' );{% endhighlight %}
-This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
+{% highlight php %}
+
+{% endhighlight %}
+
+For backwards compatibility you should wrap this inside a function check for the new `add_theme_support`:
+
+{% highlight php %}
+
+{% endhighlight %}
+
+This makes sure WordPress installation prior to 2.9 won't get screwed up when using a theme with this new feature.
## 2. Add A Post Thumbnail To Your Post
@@ -69,19 +76,22 @@ The code will output a generic `![]()
` tag with a class of wp-post-image. Need
If you want to adjust the generated output of the ![]()
tag you can do this by using some array stuff. So let's say you want to have the post thumbnails to be 200x200px big and another class assigned to it, you can extend the template tag like so:
+
{% highlight php %} 'alignleft' )); ?>{% endhighlight %}
If you want to add more than one class you can do this like so:
{% highlight php %} 'alignleft another_class')); ?>{% endhighlight %}
-And you can add any attributes to the ![]()
tag like a title, rel or an alt attribute. For accessibility reasons you should always add at least the alt-attribute:
+And you can add any attributes to the `![]()
` tag like a `title`, `rel` or an `alt` attribute. For accessibility reasons you should always add at least the alt-attribute:
{% highlight php %} 'alignleft', 'alt' => 'alttext')); ?>{% endhighlight %}
As for the title attribute this will be grabbed automatically from the entry you've made in your Media Library during the upload process but you even could override this too:
-{% highlight php %} 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>{% endhighlight %}
+{% highlight php %}
+ 'alignleft', 'alt' => 'alttext', 'title' => 'titletext')); ?>
+{% endhighlight %}
@@ -93,6 +103,7 @@ Finally if you want to respect the custom sizes you or your users have set under
{% highlight php %} 'alignleft'));
?>{% endhighlight %}
diff --git a/_src/_posts/2010-02-04-ipixelpad.markdown b/_src/_posts/2010-02-04-ipixelpad.markdown
index df03e883..e1a3e3e7 100644
--- a/_src/_posts/2010-02-04-ipixelpad.markdown
+++ b/_src/_posts/2010-02-04-ipixelpad.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-02-04 15:21:42+00:00
layout: post
-slug: ipixelpad
+
title: iPixelPad - Tongue Twisting But Crisp iPad Icons
+image: Teaser-iPixelPad.png
+author: Matthias Kretschmann
+
+date: 2010-02-04 15:21:42+00:00
wordpress_id: 1092
categories:
- goodies
@@ -13,8 +14,6 @@ categories:
So, what to do when [everyone seem](http://www.littleboxofideas.com/blog/design-resources/5-very-useful-free-ipad-icon-sets-for-designers) [to release iPad icons](http://line25.com/articles/free-apple-ipad-icon-set-for-your-website-designs) but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here's my take on the smaller sizes of an [Apple iPad](http://www.apple.com/ipad/) icon, called iPixelPad in the sizes 48px, 32px and 16px. Everything drawn pixel-perfect from scratch. Heck, even the wallpaper.
-
-
They also come in two different versions for each size: with a matte highlight shine and with a harder gloss.
And drawing the homescreen icons was quite funky and if you know the standard iPhone icons I bet you can guess what icons you can see here and in the icon files, at least in the 48px and 32px versions:
@@ -23,17 +22,11 @@ And drawing the homescreen icons was quite funky and if you know the standard iP
The homescreen icons pixels in the 16px version needed all more vivid colors to get them distinguishable from the wallpaper background so they're a bit different from the other sizes. These are the times I wish I could modify just half a pixel.
-
-
## Download
-
The icons come in various formats: iContainer, ICNS, ICO and PNG files for each size. Just click the following download button to grab the whole pack:
-[download_button version=1.0]
-
-
-
+Download
## License
diff --git a/_src/_posts/2010-03-27-office-desk.markdown b/_src/_posts/2010-03-27-office-desk.markdown
index 38f43e8c..b86c8adb 100644
--- a/_src/_posts/2010-03-27-office-desk.markdown
+++ b/_src/_posts/2010-03-27-office-desk.markdown
@@ -1,10 +1,12 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-03-27 21:31:35+00:00
-layout: post
-slug: office-desk
+layout: image
+
title: Office Desk
+image: Office-Desk.jpg
+author: Matthias Kretschmann
+
+date: 2010-03-27 21:31:35+00:00
+
wordpress_id: 1901
categories:
- photos
diff --git a/_src/_posts/2010-07-03-momcorp.markdown b/_src/_posts/2010-07-03-momcorp.markdown
index 4a68339b..4af20725 100644
--- a/_src/_posts/2010-07-03-momcorp.markdown
+++ b/_src/_posts/2010-07-03-momcorp.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-07-03 17:12:53+00:00
layout: post
-slug: momcorp
+
title: MomCorp Wallpaper
+image: Teaser-MomCorp-Wall.png
+author: Matthias Kretschmann
+
+date: 2010-07-03 17:12:53+00:00
wordpress_id: 1453
categories:
- goodies
@@ -13,20 +14,13 @@ categories:
The recent Futurama episode "[Attack of the Killer App](http://en.wikipedia.org/wiki/Attack_of_the_Killer_App)" mocked a phone and a company you probably all have heard of. I've made some wallpapers with the logo of MomCorp presented everywhere in this episode.
-
-
The wallpaper comes in four versions with two color variations and two text variations with Mom's favorite tagline. Here's an overview:
-
-
-
## Download
-
-
You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
-[download_button version=1.0]
+Download
diff --git a/_src/_posts/2010-07-18-typeface-condoms.markdown b/_src/_posts/2010-07-18-typeface-condoms.markdown
index 64869b72..63d7b629 100644
--- a/_src/_posts/2010-07-18-typeface-condoms.markdown
+++ b/_src/_posts/2010-07-18-typeface-condoms.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-07-18 20:28:33+00:00
-layout: post
-slug: typeface-condoms
+layout: image
+
title: Typeface condoms
+image: Typeface-condoms.jpg
+author: Matthias Kretschmann
+
+date: 2010-07-18 20:28:33+00:00
wordpress_id: 1898
categories:
- photos
diff --git a/_src/_posts/2010-08-07-bonsai.markdown b/_src/_posts/2010-08-07-bonsai.markdown
index 8f406cc6..ba5752f6 100644
--- a/_src/_posts/2010-08-07-bonsai.markdown
+++ b/_src/_posts/2010-08-07-bonsai.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-08-07 20:23:31+00:00
-layout: post
-slug: bonsai
+layout: image
+
title: Bonsai
+image: Bonsai-5-Version-2.jpg
+author: Matthias Kretschmann
+
+date: 2010-08-07 20:23:31+00:00
wordpress_id: 1895
categories:
- photos
diff --git a/_src/_posts/2010-09-01-gdr-helvetica.markdown b/_src/_posts/2010-09-01-gdr-helvetica.markdown
index 2f4efc96..15d8b8ef 100644
--- a/_src/_posts/2010-09-01-gdr-helvetica.markdown
+++ b/_src/_posts/2010-09-01-gdr-helvetica.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-09-01 20:21:43+00:00
-layout: post
-slug: gdr-helvetica
+layout: image
+
title: GDR Helvetica
+image: GDR-Helvetica.jpg
+author: Matthias Kretschmann
+
+date: 2010-09-01 20:21:43+00:00
wordpress_id: 1892
categories:
- photos
diff --git a/_src/_posts/2010-12-11-iphone-coasters.markdown b/_src/_posts/2010-12-11-iphone-coasters.markdown
index 84baba93..4f68dab9 100644
--- a/_src/_posts/2010-12-11-iphone-coasters.markdown
+++ b/_src/_posts/2010-12-11-iphone-coasters.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-12-11 21:19:29+00:00
-layout: post
-slug: iphone-coasters
+layout: image
+
title: iPhone Coasters
+image: iPhone-Coasters-1-Version-2.jpg
+author: Matthias Kretschmann
+
+date: 2010-12-11 21:19:29+00:00
wordpress_id: 1889
categories:
- photos
diff --git a/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.markdown b/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.markdown
index 8a1be308..ff10f9d8 100644
--- a/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.markdown
+++ b/_src/_posts/2010-12-29-basically-the-monolith-is-on-my-desk.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-12-29 15:47:12+00:00
-layout: post
-slug: basically-the-monolith-is-on-my-desk
+layout: image
+
title: Basically, The Monolith Is On My Desk
+image: Basically-The-Monolith-Is-On-My-Desk.jpg
+author: Matthias Kretschmann
+
+date: 2010-12-29 15:47:12+00:00
wordpress_id: 1873
categories:
- photos
diff --git a/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.markdown b/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.markdown
index f3ddcff9..35f45e74 100644
--- a/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.markdown
+++ b/_src/_posts/2010-12-29-free-monkey-breath-not-soylent-green.markdown
@@ -1,10 +1,11 @@
---
-author: Matthias Kretschmann
-comments: true
-date: 2010-12-29 21:16:55+00:00
-layout: post
-slug: free-monkey-breath-not-soylent-green
+layout: image
+
title: Free Monkey Breath, Not Soylent Green
+image: Free-Monkey-Breath-Not-Soylent-Green.jpg
+author: Matthias Kretschmann
+
+date: 2010-12-29 21:16:55+00:00
wordpress_id: 1886
categories:
- photos