Before this, I have make a list of cool Tumblr Theme design and some tumblr free theme. I receive a lot of good amount of feedback, trackback and traffics from that post. Well, everyone love the tumblr design. Simple but work like charm. I also wanted to make my own Tumblr theme design, but it need time for me to study the codes. It just a simple xhtml & css code. So, here we go again, the Tumblr Theme coolest design roundup 2!

Jam Factory Online Portfolio

This theme design is really awesome. If you were looking for a tumblr theme that has been integrate with flash, JamFactory is a good example. This Tumblr theme owner using flash at the header and the link navigation bar. He also use .png transparency in this theme. Really awesome. You should check his tumblr theme at → JamFactory Tumblr Theme.

Dustin Hoffman’s Word

My first impression when looking at this theme is, “Oh, look at his tweeter. That’s so cool”. Dustin has style his tumblr theme with different css style on each different type of post. This tumblr design color scheme is really good. Check out his tumblr → Dustin Hoofman’s Tumblr Theme.

Dustin Develop

Well, this tumblr theme developer is also the same as above. But this one is much more attractive. With a bright colour scheme and using hot magma with dinasour in it, this is another coolest tumblr theme design.  Just like his tumblr theme above, this tumblr theme was also style with different css for every each different post type. Well, his tumblr design make you feel back in the Jurassic World !. Checkout this tumblr theme → Dustin develop Tumblr Theme.

Im in like with you

ImInLikeWithYou. Nice catchy domain name. His tumblr theme also really cool. He use rounded corner a lot in this tumblr design. As usual, theme header is the thing that i would like to see first. This theme was own by a web developer. Check out his blog post and his tumblr theme → Iminlikewithyou Tumblr Theme.

Tumblr: it’s the interweb

This tumblr theme design is own by StevenBeelen. This is a portfolio look like tumblr theme. Check it out, He use jQuery in this tumblr theme. Yeah, it’s really cool to see eveything pop-up and play just inside the box. Well, jQuery is a really cool thing to be integrate in your web design. Checkout his design → Steven Beelen Tumblr Design.

Extra Firm Hold

Cookies! This personal Tumblelog has simple & cool design. Using white color and wood textures in his design, the tumblr header once again impress me. Cookies and headphone. Well, this tumblr theme is well build. He has his twitter update on the right sidebar. On the earphone, he has his latest tune in his last.fm profile. Why not check it out by yourself → Extra Firm Hold Tumblr Theme.

That’s all for this second Tumblr theme collest design Roundup. There’s more and more cool tumblr theme will be created soon and I will take some of my time to show it to you!

Related posts:

1. 6 cool tumblr blog theme design
2. Tumblr Theme: Minimal ch;
3. How To Create Your Own Custom Tumblr Theme?

Ziked – Tumble log of a crazy diamond

Ziked is one of my most top list in Tumblr theme design. It has a clean layout with wood textures as the background. What make his tumblr layout even much more cool is the paper note textures. Well, it make his tumble log look like a real notebook or papernote. Yeah, he is trying to change the world. Haha. Visit  → Ziked Tumblr log.

Hello, Adam

Hello, Adam tumblr log design is simple but yet cool. I love the most his tumble log color combinations. Soft brown with some pink and light blue tumblr themes. Adam is a graphics designer. Hire him for a design. Adamjustkidding, visit his tumblr.

Chopan

My first impression when i visit this tumblr log was, WOW! Look, everyone must be impress by his skill. At first, the header is made with a grungy style. And you also can checkout the css span technique at his navigation bar. I might not be able to understand what he is write on his blog since it is in foreign language. But who care, i heart Chopan Tumblr blog design. Visit  → Chopan Tumblr log.

Funky Love Bunny

A dark tumblr theme template. A colourful tumblr layout with dark as it main colour. This tumblr blog discuss a lot about random thing that Funky Love Bunny love the most. He use a lot the Cooper Black font in this tumblr theme design. Just visit → FunkyLoveBunny!

Rashy Streakers

A basiclly grungy tumblr theme design. Hey, look at his theme. I know it take a really hard work to do that. He use pencil sketches in his tumblr design. Yeah, it just a simple tumblr theme design. But it is rare to see something like that. Mostly, he also do post things that related with design. Visit his tumblr log  →  RashyStreakers.

Almost Everything!

It’s a show on the internets. Well, just like how this tumblr log title describe it all. Almost everything is an online series that showed in Internet. So, this tumblr log was design for a video based tumblr theme. The theme use a papernote texture as it’s main background. A sketches font that look like the Pointy Font. Just watch it  →  Almost Everything!

Well, that is the list for my 6 cool tumblr themes design that i have stumbled upon. There’s a lot more out there. I need to take time to check them out and reveal them here. Haha. As conclusions, everyone must love tumblr! You also can read about my 7 cool tumblr themes for tumblr-log at my late blog.

Related posts:

1. Tumblr Theme coolest design roundup 2
2. Tumblr Theme: Minimal ch;
3. Simple Tumblr Theme: ProWhite 2.0

I have stumbled upon this web design tutorials compilation from woork blog. Yeah, if you are looking for latest idea and trick in designing this is the post that you should read for. Antonio has listed over 25 list of awesome web design tutorials for designers. You should take a look on it. You will get some inspirations from it.

There 25 awesome web design tutorial listed there:

1. Most used CSS Tricks
2. Simple, Powerful Product Highlighter with MooTools
3. Timeframe: Prototype date range component
4. Rating Boxes with Starbox
5. Navigation bar with tabs using CSS and sliding doors effect
6. Create beautiful tooltips with ease
7. Solving 5 Common CSS Headaches
8. Lazily load functionality via Unobtrusive Scripts
9. Nice calendar with date-pickers
10. Fantastic News Ticker Newsvine-like using Mootools
11. Ajax Forms with jQuery
12. Sexy Sliding JavaScript Side Bar Menu Using Mootools
13. Pure CSS Animated Progress Bar
14. Drag & Drop Sortable Lists with JavaScript and CSS
15. PHP components: Autosuggest
16. Slick Tabbed Content Area using CSS & jQuery
17. Multiple File Upload Magic With Unobtrusive Javascript
18. Add grunge effect to text using simple CSS
19. Creating a fading header
20. Accessible unobtrusive content scroller
21. How to Display Your RSS Count in a Cool Tooltip
22. Ext Accordion Widget Example
23. LightboxXL -prototype plugin
24. Change form elements appearance using FancyForm
25. FORM elements design using CSS and list (ul and dl)

Interesting? Then read all this tutorial: 25 Awesome tutorials for web designers.

Related posts:

1. Tumblr Theme coolest design roundup 2
2. 6 cool tumblr blog theme design
3. Thinking of new theme design for this blog

What is my inspirations? I got this inspirations when stumble upon at Kreativ Use blog. The 30 Cool Pink-ish Web Designs blog did give me some inspirations for the color combinations. Well, at least it does blend well.

So, I think im gonna coded this template into HTML & CSS first. Yeah, it is coding is painful for newbies like me. But i give a try for this. After I have finish coding this to HTML & CSS template, then I will convert it into WordPress Theme. Well, converting html templates to wordpress is much more easier since you just need to substitute the php codes to replace the HTML. Haha. Let see how this thing gonna work.

Designer out there, do have any idea to share with me? At least an easy tips to make a WordPress Theme does help me too. Dont worry, i’m a fast-learner person.

Related posts:

1. 6 cool tumblr blog theme design
2. Tumblr Theme coolest design roundup 2
3. New Year with a new theme !

Oke, you tired with Friendster Hide Codes Layout and think it lame? Well, why not switch into Friendster Javascript Layout aka Friendster JS LAyout. Well, javascript has been known as one of the powerful code language in this world web wide. Apart from injecting external css file to Friendster, you could also injected a javascript file in it. So, today let try to make your own One Column Friendster layout with this Friendster JS Trick.

Now, in Friendster CSS Hide codes you only can hide the boxes right? But, with js you can manipulate the location of the box because js language can change the position of a Div tag. So, if you want to create a single column friendster layout with featured friends, group and friends underneath the comment box, you can apply this One Colum Friendster Layout script. Pretty easy. Just copy the below code. Code credit to Feruzz from Ftalk.

/**
* One Column Friendster Profile (Pure DOM)
* Copyright 2008 by FeRuZZ © http://profiles.friendster.com/feruzz
* In Cooperation with FriendsterTalk @ http://friendstertalk.com
* Timestamp: June 02, 2008
* Browser Compatibility: IE6, IE7, Firefox 2, Firefox 3, Opera 9, Safari 3.0
**/

/*global oColumn, attachOnLoadHandler, window, document*/

if (!attachOnLoadHandler(function () {
    oColumn.init();
})) {
    window.onload = function () {
        oColumn.init();
    };
}

(function () {
    oColumn = {
        $width: "630px", //Default width
        $IE: /*@cc_on!@*/false, //IE

        init: function () {
            var tableleft = oColumn.$$("ltd", "td")[0].getElementsByTagName("ul")[0];
            var tableright = oColumn.$$("rtd", "td")[0].getElementsByTagName("ul")[0];
            var ctrlpnl = oColumn.$$("commonbox controlpanel", "div")[0];
            if (!oColumn.$IE) {
                tableleft.parentNode.parentNode.parentNode.appendChild(tableright);
            } else { //Fixed for IE
                ctrlpnl.parentNode.parentNode.appendChild(tableright);
            }
            var tabledata = document.getElementsByTagName("td")[0].getElementsByTagName("img"), x = 0;
            while (x < tabledata.length) {
                if (tabledata[x].src === "http://images.friendster.com/images/spacer.gif") {
                    tabledata[x].style.display = "none";
                }
                x += 1;
            }
            var tableparent = oColumn.$$("commonbox", "div"), y = 0;
            while (y < tableparent.length) {
                tableparent[y].style.width = oColumn.$width;
                y += 1;
            }
            try {
                var removeads = oColumn.$$("standalonebox ads", "div")[0];
                removeads.style.display = "none";
                var banner = document.getElementById("banneradrow");
                banner.style.display = "none";
            } catch (e) {}
        },

        $$: function (strClass, nodeName, pElem) {
            nodeName = nodeName || "*";
            pElem = pElem || document;
            var objElm = pElem.getElementsByTagName(nodeName);
            if (!objElm.length && nodeName === "*" && pElem.all) {
                objElm = pElem.all;
            }
            var results = [];
            var delim = strClass.indexOf("|") !== -1 ? "|": " ";
            var rClass = strClass.split(delim);
            for (var i = 0, j = objElm.length; i < j; i += 1) {
                var rObjClass = objElm[i].className.split(" ");
                if (delim === " " && rClass.length > rObjClass.length) {
                    continue;
                }
                var c = 0;
                comparisonloop:
                for (var k = 0, l = rObjClass.length; k < l; k += 1) {
                    for (var m = 0, n = rClass.length; m < n; m += 1) {
                        if (rClass[m] === rObjClass[k]) {
                            c += 1;
                        }
                        if ((delim === "|" && c === 1) || (delim === " " && c === rClass.length)) {
                            results.push(objElm[i]);
                            break comparisonloop;
                        }
                    }
                }
            }
            return results;
        }
    };
})();

Copy all the codes and paste it in your notepad. You can follow this tutorial anyway: Create Friendster Hide CSS File. Just make sure to change it with .js extension not .css extension. Name it with anything and put .js at the back. Eg: Onecolumnfs.js.

Then generate the file with CSS & JS Linker generator. Click here for the generator. To access it, just use this:

Username: TheCradel
Password: Member

Select the Javascript Link generator, not the CSS Link Generator. Just select any from 1 to 10. All of it works. Well, kudos to Angell Deville for making the linker generator. OR, if you don’t want to copy and paste those js code, i have make my own:

http://h1.ripway.com/artkamek/fshides/onecolumnlayout.js

Just generate it with the CSS & JS Linker. Then, paste it into your Media Box.

To change the width of the box, find this below codes:

(function () {
    oColumn = {
        $width: "630px", //Default width
        $IE: /*@cc_on!@*/false, //IE

Change the red bold color code with any with that you think suitable with your Friendster Layout. You also can combine this trick with Friendster Hide Codes Layout trick. Compile you css and js code using this javascript code:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "JS_URL_HERE";
document.getElementsByTagName("head")[0].appendChild(script);
var css = document.createElement("link");
css.type = "text/css";
css.rel = "stylesheet";
css.href = "CSS_URL_HERE";
css.media = "screen, print";
document.getElementsByTagName("head")[0].appendChild(css);

Edit the codes below, replace JS_URL_HERE with your JS Direct URL and CSS_URL_HERE with your CSS Direct URL. Open a Notepad. Copy the codes above and save it as newfile.js Upload the “newfile.js” to Ripway.com. Get the Direct URL of “newfile.js” (e.g.,http://h1.ripway.com/artkamek/fshides/newfile.js) and GENERATE it with Fslinker.bogspot.com Javascipt Link Generator.

Related posts:

1. Friendster layout updated !
2. Custom Friendster Layout
3. Friendster Add as friend link alternative