Check out the Latest Articles:

Wednesday, September 2, 2009

Links to this post

Best Recent Comments w/ Summaries Script for Blogger

Have you wanted to display more than the usual limited 5 Comments offered by the Blogger widget on your page ? along with the Summaries of those Comments ? Well , here is the Ultimate Widget which will allow you to display more than 10 comments & their summaries ! ......

Yes, I understand your plight , all you Bloggers of the infinite Cyber-sphere who would like to display more than the usual alloted measly 5 comments with NO summaries which the Blogger Platform offers presently . Well, search no longer - because I will now give you the ultimate script for exactly this purpose ! Arent you happy ? yes.....I know you are - but I'm even happier to give it to you, because this script will allow you to display up to 25 Comments along with their summaries ! . Well, are you ready to get down to business ? Good ......

Let's get started then :)

Ok , I would like you to go to your Dashboard > Layout > Page Elements > Add a Gadget :

Are you with me so far ? Good - lets continue then :

* Please choose to add a Gadget & choose the HTML/JAVASCRIPT gadget . Once the window opens up , please copy the code below and add it in this box . Please also ADD THE TITLE : "RECENT COMMENTS or LATEST COMMENTS this way you will be able to identify the widget when you are in your Page Elements Editing section ok ? Good . Now , copy the entire code below please :

    <ul style="font-style: italic;"><script style="text/javascript">

    function showrecentcomments(json) {

    for (var i = 0; i < 8; i++) {

    var entry = json.feed.entry[i];

    var ctlink;

    if (i == json.feed.entry.length) break;

    for (var k = 0; k <; k++) {

    if ([k].rel == 'alternate') {

    ctlink =[k].href;




    ctlink = ctlink.replace("#", "#comment-");

    var ptlink = ctlink.split("#");

    ptlink = ptlink[0];

    var txtlink = ptlink.split("/");

    txtlink = txtlink[5];

    txtlink = txtlink.split(".html");

    txtlink = txtlink[0];

    var pttitle = txtlink.replace(/-/g," ");

    pttitle =;

    if ("content" in entry) {

    var comment = entry.content.$t;}


    if ("summary" in entry) {

    var comment = entry.summary.$t;}

    else var comment = "";

    var re = /<\S[^>]*>/g;

    comment = comment.replace(re, "");

    document.write('<li style="text-align:left">');

    document.write('<a href="' + ctlink + '">' +[0].name.$t + '</a>');

    document.write(' on ' + pttitle);


    if (comment.length < 150) {

    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');




    comment = comment.substring(0, 150);

    var quoteEnd = comment.lastIndexOf(" ");

    comment = comment.substring(0, quoteEnd);

    document.write(comment + '...<a href="' + ctlink + '"> (more)</a><br><br>');






    <script src="http://YOUR TITLE">


Please note : You can make further customizations by changing the value 20 (var i = 0; i <>higher or lower value, this value is for the number of comments and you can't have more than 25 comments. Last thing you can modify is font-style: italic; which you can change to font-style: bold; or font-style: normal; to change the font styling.

Now please hit the SAVE feature , and your Recent Comments w/ Summaries will appear on your main page once you view your Blog page . I hope you have enjoyed this article and moreover your new Comment Widget. Enjoy , and keep smiling , Mootools & JQuery love ya & more is coming your way so stay tuned :)

Mia Zoe .


Friday, August 28, 2009

Links to this post

Implementing the Twitter Retweet Button
on your page in one simple step !

There is actually nothing to this , and I am quite aware that many users have been experiencing a great deal of difficulty when it came down to installing & applying this code to their Template . Many users did apply / implement it , however it showed up in the most undesirable place - for some users it even appeared at the bottom of their FOOTER ! Yikes !!!
That's a big No-No, and we will not tolerate a piece of javascript code to rule over our page & our lives now will we ?.......
No siree we will not . Therefore : We will put an end to all that strife right here and now !

This will be just about the simplest and the quickest code installation you will have to do - are you ready ? Ok, great , lets get to it then. Before we begin , if you have a Tweet or Retweet Button presently installed in your page source and it isnt situated where you would like it to be - dont fret over it , simply remove it , we will be placing an entirely new one right now- and yes, rest assured : It is the exact same Retweet Button , enabled with the same identical capabilities.


Scroll down through your page source until you locate the following code :

<div class='post-header-line-1'/>

OR : If you want the Retweet Button at the footer of your posts , please look for this next code then :


Great , now if you have found either one of these two bits of code [ depending upon whether you want the button located at the top or bottom of your posts then we will move on to our next and final step :

Considering you have located your code , please copy the code given below of the Retweet Button and place it / Paste it EXACTLY UNDER either one of the ABOVE two codes . Remembering that one code is for the button to display on top of each post and one is for the button to dispaly at the bottom footer of each of your posts .

Now that you have placed the code below let me explain the Position in which the button will appear :

The code I have applied to the script is for the button to appear at the top RIGHT of your page . If you would like the button to appear the TOP LEFT of your page , simply change the the floating of the element to shift from its present state of Right to Left by simply erasing the word Right & Setting it to Left

<div style="float:right;padding:4px;"><script type="text/javascript">

tweetmeme_url = '<data:post.url/>';


<script type="text/javascript" src=""> </script></div>

That's it , you are done installing your Retweet Button now. Please hit the Save Template Feature and you are done . Refresh your page , go to View Blog and your Retweet will be there . Should you run into any complications , please leave me a comment with a link back to your page so that I may respond to helping you. If you leave a comment as an anonymous user I will not be able to help you .

I hope this post has been helpful to your Blogging needs Enjoy your new Retweet Button & I will catch you in cyberspace :)

Mia Zoe .


Sunday, August 16, 2009

Links to this post

" Read More : & Keep your Reader "

Does your Blog run on forever....with no end in sight ? .If so , then it's no wonder you cannot keep your reader on your page for more than 2 minutes ! You need to implement the " Read More " option on your page immediately !

Yes, I am quite aware of the problem which many Bloggers have concerning their pages which tend to run on forever into next week ! Honestly Bloggers , it does not help your page , you nor your reader in any way , and chances are : Most of your readers will run as far as they can from your page once they see that your blog is longer than the Gettysburg Address ! and I am not exaggerating at this point .
So, what do you say we put an end to this problem and get you to implement a Read More so that you can save the life of your Blog and your reader ? ( and possibly your own :)

This procedure will be as painless and as easy as crossing the street - so , lets begin :

Please go to your Dashboard : go to EDIT HTML > EXPAND WIDGETS and apply the following code precisely above or anywhere above the </head> tag :

Please copy & paste the code below, above the </head> code as specified :


<b:if cond='data:blog.pageType == "item"'>

span.fullpost {display:inline;}


span.fullpost {display:none;}



Now that you have done this , let us scroll further down within our template and find the following code : **[ Please note : Some templates have 2 <p><data:post.body></p> elements - make sure you apply the code below under the 2nd one ! , now look at the entire code below , and look for the Highlighted part of the code , that is exactly where you will place your own code , lets go :

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType == "item"'>



<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'/>





<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'><img align='left' src='' style='border:0px;'/></a>



The code above is only with an image ( which is a clear arrow , such as the one running on my page here ) Now the second code below is with the Arrow Image + text which says " Read More " if you would prefer to have the text as well . Copy which ever code you prefer , or you may choose to change the clear arrow for a different image of you dont like the clear arrow .

<div class='post-body entry-content'>

<b:if cond='data:blog.pageType == "item"'>



<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'/>





<b:if cond='data:blog.pageType != "item"'>

<a expr:href='data:post.url'><img align='left' src='' style='border:0px;'/><br/><b>Read More</b></a>



Now if you have done this , please click Save Template and let us complete one more step before this can take effect and appear on your page ok ? Lets go onto the next & final step now :)

Please look up at your control panel and click on SETTINGS | then click on : FORMATTING from the sub panel below . *** While you are on this page now , you may wish to choose the number of posts which will appear on your page - as most of you have like 20 articles running on your page - and this is a big NO-NO . The best number of posts to have on your page are 3-4 . It makes your page nicer - shorter - and the load time is much better on your users browser and they wont be scared of their browser crashing while they wait for your long page to load , so now would be a good time to choose 4 posts to be displayed on your page :) ***

Ok, if you are finished choosing your number of posts , let us move further down on the same page and all the way at the very bottom , you will see : " Post Template ". Please copy and paste the code below into that box :


<span class="fullpost">

The rest...


Now hit "Save" and go to your Posting ; You will now see this code within your posting box .
Where you see the " Title " , you will post exactly that - your sub-title to your post ( as your Main Title will go above into your Main Title ) . You will write your subtitle and a BRIEF outline of your post there . Now below where it says : " The rest " you will go on to write the rest of your article / post , and you will stop exactly above the </span> tag . Once you are done with your article , filling in your labels & such - just hit the Publish Post button and you are done ! Voila !!!
Now that wasn't so difficult was it ? . This function will appear every time you write a new post . Enjoy & happy blogging ! * If you should run into any trouble , drop me a comment and I will assist you .

Keep smiling , Mootools & JQuery love you :)

Mia Zoe


Saturday, July 25, 2009

Links to this post

Two of the Best Image Sliders on the Web Requiring No Script !

The best two ( 2 ) Image Sliders I have recently stumbled upon requiring not a line of script nor any CSS - for your page !

I know that many of you would like an Image Slider for your site or page - but you're not that script savvy or you simply just dont want to bother adding more script on top of script . Ok, those days are now over . Now mind you , I am quite aware that there are several sites which offer embeddable slideshows for your page - such as Photobucket and of course there's Slide both sites offer various options for their slideshow's , such as different skins and Slide even offers the option of incorporating Media ( such as music ) into your slider as well .

However , there are some of you who might prefer something more professional looking on your page , possessing the capabilities of those so called Quiet Slide which run on JQuery script and are lightweight and dont seem to burden your page within loading time . These Jquery Sliders are sleek , and quite appealing as far as their presentation goes . However , as I mentioned above : some of you may not be Script Savvy and you dont want to go through all the fuss just to place a couple of pictures on your page ..I understand :)

Ok, here is image slider no.#1 - which is Fully customizable ! What does this mean ? well, ok it means this : It is customizable as far as its size ( width & height ) by setting the parameters . Secondly (#2 ) ,the size of the images is also customizable also and thirdly #3 : You can set the number for as many images you wish to display. Basically , this particular slider is a No Brainer and requires no effort , other than you locating the desired images you wish to display , customizing the size, number of images & finally generating the code , copying & pasting it unto your pages in the desired location . Now , this slider is for your Flickr albums / images / sets . However : here is a tiny little tip for all of you who may not be aware as to how to get this Flickr slideshow to work . I know that many of you may not have a Flickr account , or if you do have one - you may not have images uploaded , or you simply dont like your own images and want to use someone else's . This slider will work even if you do not have a Flickr account of your own , and the best part of this particular slider is : You don't have to sign up nor create an account to use it ! ( yes I know , you can thank me now ) .

I will tell you now how you can load someone elses' images unto this particular slider - and they can be any images you like . Take note however : You can only use a set of only One ( 1 ) user at a time - thus : if you want to display images pertaining to ex: Illustration , Digital Photography etc this week which belong to particular user - then you can do just that and the following week, you can choose to display images belonging to a different category and a different user . Ok, so we managed to get through that - now lets move on :)

Firstly , you will want to get to the Slideshow site , which is called Slideoo , once you do , please bookmark it so you will have it for future reference . Once you arrive at the said site , and have a look-over at this beautiful slider , you will open a new tab on your browser and go to Flickr ( and as mentioned previously : you dont need a flickr account ) .

Once you have taken the above two steps - you will now go through the Flickr process : finding images or a users images you wish to display . When you finally do find a set of images you would like to display , here is the next step you need to take : Look at the user's name . A users name is displayed at two places : either on the address ( browser address bar ) or by clicking their avatar and their user name will come up & also : if you choose a particular set of images , and of course it is always displayed right next to their user avatar . Now , you have found the images you like - and you've located the users name . You will now copy the users name from the address bar ( only the name - not the entire URL ),
and paste it into the the Slideoo box which says Enter your user name and click on either of the 2 options given : Use your sets |or | Your Photostream . Now if a user has many sets of images , what will happen is : all of their sets will come up on display on Slideoo . Choose the images from the set which you like , customize the settings ( width , height and image width as well : small , medium, large ) and click on Create your Slideoo. Your Slideoo slideshow will appear above-head where you will be able to see it's final outcome. If you are not happy with the size parameters you have set , you can easily change them again until you are satisfied with the results . Now once you are done and satisfied with what you see , you will see the embed code right there - all you need do is simply copy & paste . Go to your Edit , HTML , Page Elements , choose 'Add a Gadget ' HTML/Javascript and paste the embed code into that - hit save and your slideshow is now on your page ! Now wasnt that simple enough ?

Here is the Slideoo slider for you to sample , the size parameters of the slider are 400 width & 170 height ( height is automatically set by the generator once you choose the width of the slider and the image size - which in this demonstration is set at " medium" ) . What do you think ? Nice huh ?

Now , the slider is not automatic - a user must click on the + & the - button's which are located to the left and the right of the slider to view the images . Once you click on any of the images you will be taken to Flickr and the particular user's album .

Ok , now that we have gotten Image Slider #1 out of the way , time to move on to slideshow no# 2. This slideshow is pretty much like a Beta slideshow within its functionality & appearance and basically looks like a Video . For generating this particular slideshow , you will need to activate an account - which will also come in handy in the future should you wish to edit or reformat your images . Of course I dont have an account with this particular site , therefore I cannot display what the slider looks like - however , here is the site where you can go to and everything regarding it's usability & functionality is explained to you live ! You can sign up for an account if you feel this is more to your liking and start building your slideshow . You can also incorporate your own mp3's into this slider ! It also gives you the option of using your own computer images or using images you like on the web by simply copying and pasting the URL . The final step once you are done is to once again , copy the code and paste it into the Page Elements ' Add a Gadget ' section & voila ! youre done . Here is the site offering the slider which is called Roxio Slideshow . So, I hope you will find these sliders useful and handy for your page . Enjoy & catch you here next time . Till then , keep smiling , Mootools & JQuery love you :)

Mia Zoe .

Monday, July 20, 2009

Links to this post

Not your Usual Flickr : But a Flash Badge !

There are many of you Bloggers out there who want to place the time & date on your pages & the slideshow , but once again : you are given limited options as to both . Many of you either have to place a seperate calendar widget , then another widget displaying the time for your visitors . Ok, you can stop searching & placing 20 widgets on your page . Here is a little piece of script ( 2 lines ! ) which will take care of all that searching now .

As promised : 2 lines of code right here --->

<script type="text/javascript">



Yep, that's all folks ! and the time & date will be displayed as it is over my profile photo ( take a look on bottom of page ) ; and you're done . You can place the code anywhere within your page document , or you can place it as a " widget " from the "Page Elements " section within your layout & put it anywhere you want - thats it for time & date .

Also, I would like to share with all of you a simple online " de-coder " . What is this you may be asking - ok , I will explain : have you tried creating a post and have tried to place a piece of ' code ' and then tried to publish that post and were notified that your post could not be published ? Or when you did publish your post - the code did not show or was just scrambled and looked like "<" or "lt&" yeah , I know - but here is an online tool which will help you insert any type of code into your posts without you having to sit there and figure out what this "<" means in simple language terms . If you have any type of code you wish to interpret within any o your posts simply go here Simple Code , take any piece of code which you may have & want to insert into your post and place it within the first box titled : " Enter markup " and press the " Process " button . Below in the second box , titled ;" Cut and Paste " , you will be given the result markup of the code . Copy & paste this into your post . Now in your post ( prior to ' Publishing ' , the code will look as it does , without the "<" & the ">" tags . However ; once you click publish mode , your code will appear normally . Please bookmark and save this site as you will probably need it in the future for creating other posts which you will want to include code in . I hope this helps :)

Now, as you all may know , when you are creating your page within the " Page Elements ' section , you are given a choice to place a slideshow on your page . You are given a choice to choose either : Flicker , Picasa & Photobucket . Most usually end up choosing Flicker . However , the slideshow which you are given is just one tiny box with not a lot of choice in " customization " . Ok, I have a nifty little piece of info here which I will now share with you all :) Aside from the usual slideshow offered on here by Blogger and the usual slideshow offered by , there is also a Flickr "Badge " which you can create and have displayed on your page as well . Here is the link where you can go to and begin creating your ' Flckr Badge ' . Now once you get there , pay attention : you are given the choice of either an HTML badge or : a Flash Badge . Also , you are given a choice to display either your own photostream or another users photstream . However , if you dont have a Flickr account , or even your own album [ photo stream ] and you dont wantto go searching through limitless 'user albums ' - you can simply choose " Everyone " at first and once you do so , a new option will be given to you as to whether you want to display ' Everyone's public Uploads ' or , you can simply choose ' All Public photos tagged with ' such as : kittens, or flowers , or vector , illustration, web , etc get it . Once you choose your tag word and click the " Next " button below , you will be taken to the next page where you will see a small badge and customization options for the background , border , and the font . Choose your colors from the color chart to your right , and you will see your badge being updated every time you choose a particular color ( you may keep changing the colors until you are satisfied with the results or continue going back to correct anything else you wish ) . Once you are satisfied with your customization , hit the next button again , and you will be given the code for your new badge :
[ *Please note : The Flsh version of the badge cannot be included in this post , however you will be able to post in within your page elements by choosing the HTML/Javascript in ' Add a Gadget ' ]
You may also like to create an HTML badge if you dont want the Flash version : In the HTML version ( if you again dont have a Flickr account and simply choose tag words , ) you will be taken to the next page ( by clicking the next button of course ) , and in the HTML version you are given 3 choices : #1 ) the size of the thumb nail images you want displayed , and #2 ) the number of images you wish to have displayed by clicking the drop down button above ( in the preview you are shown 3 thumbs , once you choose the number of images you will automatically be shown the preview images of that as well ) and # 3) Horizontal, Vertical and Customized version of the slide , so I will choose for demostrational purposes 5 images and the " Horizontal version of this badge and again you will be taken to the customization page where you will again be able to choose what colors you would like for your badge . Once you are done customizing , just click next and you will be given your Flickr badge code & voila ! Youre done - now you can insert it into any part of your page and I hope you will enjoy your new Flickr badge .

More photos or video tagged with web design on Flickr

Hope you enjoyed this piece of info . Catch you in cyberspace & smile , Mootools & Jquery love you :)

Mia Zoe .

Friday, July 17, 2009

Links to this post

doodle.png  on Aviary

Women of Web Design

Ok all of you big boys of Web Design & Development , hold on to your HD's - there's a ' New Kid in Town ...and the kid is a Girl ! . Not any ordinary girl that is either . This little young lady does not only possess beauty - but brains and killer skills at Web Development , coding & Designing !

If the attribute of Multi- Skilled & Multi- Talented can be attributed to one so young and ( did I mention beautiful yet ? ) of the Female gender - then I will go as far as to say that this young little lady packs a wallop of skills . She goes by the alias of "INSIC and as far as I can tell from her brief bio , she is based in Cebu City in the Philippines .

She is aptly skilled at :

* Ajax

* Code Igniter




* JQuery



* Web Design

And God knows what else ( you will just have to get to her site and ask her ) . What I like about her is the statement she makes in the opener of her personal Blog : " Let's see what I can do for you and your business " . Now that statement speaks volumes about a Designer / Developer . It states that the primary focus is centered on you ( the client ) and your needs . This is what moves one ahead in the Design & Development business I believe . The fact that the Designer in charge is not egocentric and has the clients best intentions at heart . Yes , this young little lady's star is quickly rising and is already shinning as bright as her smile .

The irony is : I was looking over some WP galleries a few days ago in my quest for " Originality as far as template design goes - and I came across a WP template she had made ( only I wasn't aware that this was " Her " ! ) . The template is beautiful ( and I fell in love with it as soon as I spotted it amongst a multitude of others ) it stands out & apart from the rest . It is a " Gallery " Template ( one of the more difficult templates to design & code ) and this little lady has left nothing out of this template . It has a very professional look & looks as if it carries the cost of a Premium Theme ; ( I have seen other templates of lesser caliber which cost a fortune + an arm and your mommas leg ! ) which are not of equal quality as the one Ms. Insic has designed ! Now here's the best part for all of you WP users : she has made it FREELY available ! Yep - My only regret at this point is not knowing how to use PHP , so that I could use it myself ! :(

It would have been great if she could have coded it for the Blogger Platform as well - I know that thousands of Bloggers out there would be downloading it per second ! If you think I'm over exaggerating , have a look for yourself right here : Insic WP Template . This theme reminds me of a well designed Italian office ! ( with media ! ) Now what have you got to say about that ??? If you don't think this is a great Design , then I can't help you - sorry . However , maybe Insic Designs can :)

You may want to go over to her well oiled & smooth running website and have a look over at everything this young little beauty has to offer . I believe that you will walk away knowing something more than you don't already know , and more than a few freebies which she is presently giving away which you might find helpful . Do enjoy her site , but moreover : you may just want to hire her to do your next project , put up a website you've been considering ( ? ) ; I believe she will not leave you disappointed - with a face & a smile like that ? She'll surely put a smile on your face as well . Don't believe me ? well, just go have a look for yourself then , and let me know if I was wrong .

You can visit INSIC DeSIGN & Web Development Here InSiC DeSiGns

Catch you in cyberspace & dont forget to smile , Mootools & JQuery do love you :)

Mia Zoe .


Links to this post

Accordions , Rounded Corners & A Host of other Tips & Tricks For Your Site

Here are some great tutorial sites for you to create anything from rounded corners to animated boxes & links via Javascript !

These are some of my favorite sites for online free source tutorials which offer a myriad of tips and the latest tricks on implementing Javascript & just plain old CSS to create some of the spectacular effects which you may have seen on several sites . CSS Juice , is a great site for you to bookmark and keep dropping in on for updates on the latest tricks . They feature practically everything one would require to create some pretty neat effects . You can check them out here : --> CSS Juice
Another great site for Javascript resources is
Rico where you will find some pretty neat apps , as the ' accordion ' is becoming all the rage at the moment with Web designers ; implementing it into just about everything - even 'accordion templates / layouts ' now serving as entire pages . Check it out , I believe you will enjoy it .

Another really great site for resources for just about everything and anything you can imagine is
Script Plaza , now this place is as wide in range of information as the Yellow Pages , or a telephone book ! You will find EVERYTHING there , believe me . When you click on a link , the page will redirect you to a new window which resembles an advertisement - be patient - it will open to the site offering whatever it is you have clicked on or are looking for . * When you find something you are interested in r want , click on the "download " link [ you will not be downloading anything - but that is what will open up a new window & the site which is offering the specified application .

Now , aside from
Soh Tanaka's informative & educational site for just about everything you may have heard of [ and maybe not - ] , there is also one more blog you should check into and that is : " Woork " , hosted and updated on a nearly daily basis by another yet great Developer who gives it t you straight from the edge . You will find his tutorials are easy to grasp and utilize and he makes it very simple to follow along & if you dontt understand something, he will respond to your inquiry . Anotonio Lupetti is right up there with Soh Tanaka as far as web developers go and a truly sweet guy .

I hope the above will help you in finding some answers to your questions so far . Stay tuned , more updates will be soon following . In the meantime , keep smiling , Mootools and Jquery love you !

Mia Zoe .

Links to this post


So-h What ?
If Elvis were alive he'd call Soh Tanaka " The King "

Amongst the multitude of Web Developers & Web Designers out there inhabiting infinite cyberspace , there are those few Web developers & Web designers who stand apart from the rest . Due to their limitless imagination & rockin code skills ! Here is the Top #1 Web developer & Designer ExtraOrdinaire !

If I had to name one extraordinary Web developer with a limitless amount of skill & expertise it would definitely have to be no other than Soh Tanaka . For those web junkies ( such as myself ) out there who are familiar with Soh's name & his work , you know what I am talking about & about whom . Soh Tanaka is not only Revolutionizing the Web as we know it - but moreover : He is Re-Inventing it ! Everytime I visit his site , I am always amazed at this man's skill & ingenuity at taking some of the most common applications and simply not only re-inventing them , but giving them a ' life of their own ' [ if you will ].

Example at hand : Drop down menu's , which have been around for a little while now - and despite Web developer's
not liking them very much due to the fact that they are considered confusing & obtrusive , as well as not being preferred by 'older people' due to the fact that an elder persons navigational skills tend to slow down after a certain age and the such ..ehemm .. most developers tend to avoid incorporating them into their own web-sites . Well, you can bring on the Drop Down Menu & freely & without fear incorporate it back into your website /blog , whatever - because Soh Tanaka has just given new meaning not only to the apprehensively used drop down menu but has made it that much easier to use as well as More ' Sexy ' ( yes , if drop down's can be considered Sexy in any way - Soh has given the drop down an entirely new " Sex - Appeal " ) .
You can check out his famous demo right here & decide for yourself if it's
Sexy or not : Soh's Sexy Drop Down Menu Demo . Now as you can clearly assess , it is quite Sexy now isn't it ? Here is the demo -resource page for it , which Soh wrote the tutorial for , a parent / child Soh affiliate site .

Soh also has another affiliate site , which is primarily his " offspring site " aside from his parent site of and it goes by the name of Design Bombs and believe me : they do Drop Design Bombs all F**k'n Day ! ( which is their motto ) .

Soh's work does not begin nor end with Sexy Drop Down Menu's or Jquery , as he is a never ending spring of resources and ideas . I doubt the man sleeps at all , and if he does : he must surely dream in code . He never ceases to amaze me with his new & innovative apps & creations . Soh's name is on the rise and if you are saying ' So-H What ?! , you better think again - for the next time you are implementing something into your page / website such as a menu or tabs using Jquery , you just may be using a Soh Tanaka script without even being aware of it ! Soh Tanaka can be easily labeled as one of those Rockin Web Designers w/ Killer Skillz ! , and yes - if Elvis were indeed alive , I do believe that if he had known Soh , he would have definitely bequeathed the honored title of " King " unto Soh Tanaka . He definitely deserves it !

If you are in search of something new and innovative & cutting edge - then head on over to Soh Tanaka's site and learn from the
Samurai of Web developers himself & the Guru of Code ! @Soh Tanaka where yu will find & learn much more than sexy menu's ! :) Hope you enjoy & find Soh's site useful & educational ( I know I do ! ) . keep smiling , Mootools & Jquery love you & so does Soh ! Catch ya in cyberspace ~

Mia Zoe .

Friday, July 10, 2009

Links to this post

doodle.png  on Aviary

Presenting Yet Another " ECTOMACHINE " Production

Well it seems that since my last article on ( Great Websites/ Web Designers ) , the boys over at ECTOMACHINE are immersed on an " Upward Spiral " . Talk about a ' Creative Flow ' ! wheww - I am beginning to wonder if these boys sleep at all ? These guys are truly revolutionizing the cornerstone of the www. and if you haven't jumped on the Design Bandwagon they're driving at the moment - you are definitely living under a rock I hate to say . Their newest work is yet another ROCKIN website .....

Yessiree folks , a Design Machine with no " Intention " of stopping any time soon . This newest and latest of their design productions ( for I believe everything these boys will be doing and have done so far - should be termed a Production within itself ; any other title describing their work would simply be degrading in my humble opinion .) ; is just a masterpiece in Progress as far as their concept on ' Identity Branding " goes . Oh yeah , these boys are so skilled at their craft , I now believe with conviction that in their spare time they are ' Surgeons ' indeed ! As the great Rod Serling would say : ' Tonights feature , An ECTOMACHINE which will change the way you presently perceive your web experience and revolutionize your site " ...Let us take a glimpse at this , their newest Production ( take notes boys & girls - as most of you 'Web Designers' out there will have plenty to learn from these Boy-Wonders ) , yes, I believe that I will now be seeing an " Emulation Process " by other ' Designers ' [ which I had mentioned in the prior post ] , concerning ECTOMACHINE's style . Now if ' Replication ' and ' Emulation ' are considered to be the highest form of flattery bequeathed unto an Artist(s) - then these boys down @ ECTOMACHINE better prepare to be ' replicated , emulated & copied ' by many out there ( without any imagination or spark of creativity of their very own - which of course sux & tends to get on my last nerve , but how can one prevent such occurrences ? enabling a GUI hide source code ? hmm..something to be considered here - however : I believe that the fellas over at ECTOMACHINE will not be running out of ' Imagination & Creative Genius ' any time soon - so for all of you ' Copy- Cats ' ( w/ none of the afore mentioned verities - go ahead , copy away - in the end , we who are able to ascertain authenticity can detect a real Mona Lisa from a reproduction :) [ yes, and you know who you all are - so : hate me now ].

Without further ado , let us take a look at the newest Original Masterpiece on the Block of the www by our friends @ ECTOMACHINE [ hold on to your seats now , cause this one will blow you away - it certainly did me . I gasped when I first saw it - I guess this would be as close to what I would like to term ' perfection ' as one can hope to get ] :

doodle.png  on Aviary

As you can clearly asses , [ at least for those of you who have visited the ECTOMACHINE site , you can definitely see that Charlie-X-Media carries & has the ECTOMACHINE signature stamp on it [ unless of course you dont know the difference between the letter A & the number 27 ..] . Albeit , when you do head on over to Charlie-X-Media ( and please do yourselves the favor and go see it up close; a modal window does not do it justice ok ? this is just a preview for the sake of preview-ing ! ) ; the site is simply Dick Tracy combined with Sin City - oh and I do so wanna sin just looking at it ! Charlie -X - Media has of course given credit to where credit is due [ ECTOMACHINE ] , but I will clear one thing up at this point : Charlie-X- Media , has in fact created the site on his own and EcToMachine has put the final finishing elements / touches ( if you will ) along with their branding logo ( which will soon be all the rage along the www. , so keep on eye out for these boys and their signature designs , you will be seeing much more from them . As far as Charlie -Media-X goes , they are a company offering such services in : AV Production | Web & Mobile | Social Media , and from the looks of things : these boys surely seem to be EXPERTS at what they do as well . Thus : if you are in need of any of the above stated categories , then Charlie-X-Media is definitely your ' man ' for the job . Give them a view over , and a drop them a message or just say hello - You can always trust a guy in a grey flannel suit I believe :) Do visit Charlie -X-Media up close - you will agree that is is one helluva site ! happy web surfing & Smile , Mootools & JQuery do love you.

Mia Zoe .

Monday, July 6, 2009

Links to this post

Most Adorable Equinox's

I came across this swf animation and I thought I'd just post it here for your enjoyment . Click on each horse & see what happens . To stop them , click on each one again . One can become an Equinox conductor here . Have fun with this imaginative little swf here & I hope you will enjoy it as much as I did .As per it's ' Author' , there was no site on this however , I believe that it comes from Sweden . Smile , Mootools & JQuery Love you & so do the Swedish Equinox's :)

Mia Zoe .

Thursday, July 2, 2009

Links to this post

More than You can Handle !

Have you been seeing fancy social media icons & other ones depicting various topics on websites and have wanted some for your own Web site or Blog ? well..hold on to your seats because I believe I may have found the best " Icons Set Collection " on the www ! This website has more icons than you can imagine !

The site is called " Icons Etc " ( befittingly so I 'd say ) and there are so many icons on an individual or set download basis which are offered , I spent 3 hours there going through everything - and in the end : I wanted them all !!! yes , they are definitley the best hosted icons I have seen so far out there and if you can't find what you want or like anything you see there - then I'm sorry , but I can't help you with that :)
There are so many , and what I suggest you do is : get yourself an nice beverage , lock your door to your office , take the phone off the hook , and just sit there and look through all of them as I did for the past 3 hours . It is literally my new " Online Candy Button Store " ( and the best part of it all is : It's absolutely ......FREE !!!! yep - now where else can you get a better deal than this ? Ok, without further ado - here is the site , run there now before someone else gets them ok ? :) Have fun & enjoy your new little buttons ( which by the way are not little at all ! they all come in " png " format / extensions - and their size is : 512px -x-512 px ! yeah they are huge !! have a look at one of mine :

Yep..they're huge alright , but all you have to do is just set the size you want on your web page or blog - so if you set width to : width="100" height="100 " will give you a button size such as this :Photobucket or if you want it bigger just set the size accordingly to your preference . Ok , so here you go now , : ICONS ETC . have fun & hope you enjoyed the post . Keep smiling amidst the heat - Mootools & JQuery still love you ! & your new little buttons do too ! :)

Mia Zoe .

Links to this post

Oh Happy Day ! Hurray for Generators !

Yes ! I believe I may have stumbled unto something very major here folks - As I had mentioned in one of my earlier Posts , I have been attempting to learn or " decode " PHP . Needless to say & confess at this early point in time that I am suffering severe migraines in trying to grasp this language ( regardless of Developers insisting that it's as easy as A, B , C++ ) ; I'm what I would deem an "Old Dinosaur " when it comes to learning & mastering certain things at this late stage in my life ; however : I am trying desperately , and by the skin of my teeth to learn this language as quickly & efficiently as " Aging Dinosaur " can , so bear with me - we will get through the long haul together .

Now within my arduous endeavor at trying to learn PHP , I was struck by an idea ( yes , just like Edison ) : The World Wide Web is an unlimited source for information , services such as: Open Source tutorials and a plethora of so many other helpful things which aid a user along to their desired destination . One can find practically anything online , if they implement the correct search term .

Well out of curiosity as I was sitting here fighting code & my keyboard , I was struck by the thought of : "What if there is a generator which can convert /transform PHP into HTML ?" ..I mean really , since they are Online Generators / Converters for everything else , why not for this ? I would be soooo ecstatic if there existed such a 'device ' ( I silently thought to myself ) . Without further hesitation I Googled it : [ search term: PHP to HTML generator ] , now that was simple enough and I didnt have to attend MIT for 8 long years !

Much to my chagrin , several sites came up - some of which offered Tutorials in PHP and others which just kind of became mixed up in the search category ( like water generators and heat generators -- take into account that one word generates and produces millions of results ! and all of them related & unrelated within this context ) . However , I have no need of a heat generator and so I marched on, driven in my quest for a PHP to HTML Generator / Converter . Well, it seems that my persistence paid off !

Yes , I found an online Free PHP to HTML Converter ! But Ok, lets not get overly excited and too ahead of ourselves - because , no#1 ) : Whether you have a converter / generator such as this at your disposal , does in NO way signify that you are the PHP King of the www ok ? For in order to even use such a handy device , one would still need to understand and read PHP and overall : Know what to do with the various codes and how to code them in their final output , whether they be in PHP or HTML , thus : Dont get too excited .

However , this is a good break for those who already possess some insight into PHP , HTML & know how to code really well . If you are this person , then this handy little device will make your life that much easier and limit your code time down to half if not more .For the rest of us Novices , I'm afraid that we will have to forge ahead and maintain our learning w/ diligence & hopefully we will shall persevere ! Onward valiant coders of cyberspace !
The site seems to be very new on the block and as the Developers of the site proclaim : They do NOT guarantee the outcome of your PHP input into HTML , but ..hey , it's Open Source and its there for you to give it a shot . Besides , what have you got to lose anyway ? A semicolon ? A parenthesis from your code ? It will definitely not explode in your face , as I gave it a little spin around the block myself and everything seemed A-O.K ! So, if you have a template that you' ve always liked (or you have in your possession ) which is PHP , but when you downloaded it you were not aware of this and feel stuck with a Template that you feel you will never be able to use - it's time to pull it out of its rusty file cabinet and head on over to Corz.Org and give it a test drive yourself . As I mentioned : You have nothing to lose , and maybe something to learn . So..what are you waiting for ? Go on, knowledge is power , go get yours ! And I will catch you here next time .
Smile , Mootools & JQuery Love you - and so does PHP ! :)
*If you achieve desired results , please drop me a line just to say that it works . Thank you catch ya next time :) .

Mia Zoe .

Wednesday, July 1, 2009

Links to this post

Beautiful effect Upon Image Hover: Now you Can Create them Also !

I know that many of you visit a lot of beautifully designed web-sites and wonder : "Now how did they do that ? " . Well, to be honest : it requires a great deal of work , effort and an unlimited source of knowledge to achieve most of the effects you see on certain websites . These web Designers have spent a great deal of time sitting behind a desk , and they have also devoted a great amount of time reading codes !. No , I hate to break the news to you , but : Nothing comes easy & without a price : Time & Dedication to learning something you actually love .

Now I realize that your intention is not set on becoming another Computer Wiz Kid Genius as the likes of Bill Gates or " Mr. Apple " himself Steve Jobs [ Exec. C. E. O , Sun Systems & borderline Genius ] - therefore I will not torture you with detailed source codes and the like . I realize that most of you just want a nice looking page , with a few Tweaks ( per say ) ; and before I get to the meat & potatoes of this next little handy code here , I would like to inform any one of you passing through this page [ blog site ] , that if you require deeper & more complex codes , help with tweaking , or just a simple Template , please do yourself a big favor and go directly to the Source Code & Design Guru who offers all of his services FREE , and will respond to all and any questions you may have regarding complex codes , tweaks and anything Web Related to suit your needs . he will respond to your inquiry or problem immediately ( believe it or not ) . Visit his site & you will asses for yourself that I am not over-exaggerating . His name is Zen , he is 18 yrs Old and one of the best designers of his age group , and also the sweetest young man you will have the priviledge of meeting . His site is also on Blogger , so please once you get there , don't forget to bookmark his site for future reference & if you'd like , you can join - after all : there's no Fee and it's Free ! . Now how many things in this life are free ? hhhhmmmm..not many , since I checked lately . So, here you go - once you finish reading this , head on over to Zen and browse everything he's got to offer all you Bloggers out there in cyberspace .

Now , lets get down to the meat and potatoes of our present situation . So, you've seen some sites with some really nice effects , such as : when you hover [ pass your mouse ] over a link or an image they light up or change a different color and you want to achive the same effect but you dont know how right ? Ok, this is going to be so simple - much simpler than doing your income tax , I assure you !
Why will it be so easy ? Because : I will not make you sit behind a desk for a couple of years , nor make you read codes ! Now isnt that nice ? All you will have to do is look at the example below , hover [ pass your mouse ] over it , and once you stop marveling at it , you can just copy the code I will place here , insert your own images ( plural ) and just paste into wherever you want the image to appear [ such as an HTML Add a Gadget in your Page Elements section ] or directly into your Page Source HTML , ( if you really know what you're doing ! ). Ok, now that we have gotten the logistics out of the way let's move on .

Look at the image example below , and hover over it to see what an image Hover is :

When attempting to create an image hover , we require 2 separate images - always ! Look at the 2 separate images used here for our example :

Our First image must be a B& W image , or any other color of your choosing :

<img src=""/>

Our Secondary Image must be a color image , and that can also be any other image color you wish to effect:

<img src="" border="0">

Now by combining both of these images and giving them a command line of code such as onmouseover and onmouseout our two images take on a different light ( if you will )
Now for the instructions of how to apply which image & where , and then you can just copy the code and replace the images above with your own :

<a href="" onmouseover="nameyourimage.src=
'" onmouseout="nameyourimage.src='
><br /><img src=
"" name="nameyourimage" border="0" /></a>

Do you see the different colors & the images that apply to them ? This means that you will repeat the " Blue Image Code " twice , and the " Pink Image Code " once , then all which is left is the " Orange Image Code " if you wish to apply a link to your image . Therefore , take an image of your choice , any image . One image , the Pink Code , must be a B& W image . The secondary image in Blue , must be a color image , and this will be the image which will be displayed upon link hover . You can find images as well as an image editor to achieve the color stripping of images @ such places as , Photobucket as well as a more advanced Online Image Editor such as Blibs . Once you have prepared the image of your choice , just copy the resulting URL 's and paste into the appropriate provided colored codes here. Copy and save the above code to your Notepad in your email for future reference until you know it well & have no use of it any longer . I will not bother to give you the CSS version of this code , we shall save that for next round . Now , go get your image and the code & apply some nice effects to your images . Have fun & smile - this could have been a JQuery code - and you wouldnt want that now would you ? Smile , Mootools & JQuery do love you ..really they do ! :)