TechnoPengi

Html Blogger: Guide: Search It

2009-04-17T01:22:00.000-07:00

Hello everyone,

I am back from my holidays and decided to share something with you. Today's guide is about search. I know we have the nav bar up the top for that but that is not my favourite two options.
My ways puts search inside the blog.
Often blogs come with a search box built in on some templates but not really on the standard templates.
I'll start off with the easy html - free google way.
You will need
# Admin Privs
Time aprox: 5 - 3 minutes.
1. Go to Blogger in draft (the beta blogger)
I will do an article on its pros and cons later but now back to the guide.....
2. Click the layout link, it will take you to the Edit layout page, click add gadget.
3. Then click search box.
It should make a search box for you
Way two:
You will need:
# admin privs
Time 1 mins - 2 mins
copy this code into a widget

Sorry for the lack of topics I will be back to more harder things soon Any ideas?
Dmaster

Rainbow

2009-03-02T11:00:00.000-08:00

Yeehaw!

Wow! It's been a looong time since I wrote a tutorial here. It's a good thing that DMaster is here to post some tech tutorials for me! Thanks DMaster!

I bet you're here because of the heads up I posted at the CPCrazy Main Page. Don't lie, you you penguin you!!!

Hehe

Anyho, with CP putting a RAINBOW on CP for the very first time, I think teaching you how to make one would be fun!

So, today I'm gonna teach you how to make a Rainbow using Adobe Photoshop. At the end of this tutorial, you should be able to make something like this...

Nice huh? It's very easy to make too! :D

The tools needed for this tutorial are:
1. Adobe Photoshop (PS), any version. I am using version 7.1
2. Minimal or No previous knowledge in PS is required.

You can view the larger version of the images by clicking them.

LET THE FUN BEGIN!

Arrow 1. Click FILE ~ NEW
Arrow 2. You can define any size but for this tutorial, let's us 400px wide by 400px tall at 72dpi. (Later, you may experiment using a non-square layer, say, 200px wide by 300px tall and see what happens :D)

Arrow 3. Click the icon "Create New Layer"
Arrow 4. After clicking, you will see that a new layer "Layer 1" is added. Make sure that the "EYE" and "Brush" icons are on Layer 1.

Arrow 5. Click the Rectangular Marquee Tool.
Arrow 6. Make a selection by clicking on the EXTREME left and dragging it all the way to the right where Arrow 7 is at. Please make sure that there is a SPACE below the selection. There should be NO SPACE on the left and right of the selection.

Arrow 8. Click the Gradient Tool (it's inside the Paint Bucket icon)
Arrow 9. Click on the Drop-Down Menu and
Arrow 10. Choose "Transparent Rainbow" (you can experiment later with other Gradients)
Arrow 11. Now, hover on the top part of the rectangular selection and drag your mouse all the way down to Arrow 12. If you can't make a straight line going down, press the SHIFT KEY while you're dragging the mouse.

Arrow 13. Now you should have this. Please note that there should be a SPACE at the BOTTOM of the Gradient and NO SPACE at the left and right of the Gradient.
Arrow 14. Now deselect the Gradient by clicking SELECT ~ DESELECT or use shortcut keys CTRL+D

Arrow 15. Click FILTER ~ DISTORT ~ POLAR COORDINATES.
Arrow 16. Tick RETANGULAR TO POLAR. This should make a sphere out of your Gradient.

Arrow 17. There is none! Don't sleep in class!!! WAKE UP!!!! teehee :D
Arrow 18. Now, since we only need "HALF" of the sphere to make a RAINBOW, make a selection (Arrows 5-7) again. Drag your mouse all the way down to Arrow 19. No need to leave a space below the sphere. And then press "DELETE" on your keyboard

Now, you have your FIRST RAINBOW! Congratulations!

I told you it's easy :D

Now, to lock-in your mastery at creating rainbows,

here's your homework.

On your own, make something like this...

I made the Image on the Left and
Billybob made the Image on the Right

Except for the forgotten YELLOW "bow" teehee
I think I did pretty well, whachathink? :D

Here are some hints on how to go about it..

You can use ANY color you want
It does not have to be ROY G. BIV :D

Don't worry about the thin "SPACE" between BLUE and GREEN
The next step will FIX it.

See? No more thin space between BLUE and GREEN :D

You can use any image you want

You can fit your RAINBOW in the "SKI VILLAGE" pic by scaling it, rotating it, deleting the parts of the Rainbow that you don't need, and adjusting the opacity to blend with the pic.

Let me see YOUR RAINBOW by emailing it to me! :D

If you got question, write it in comment.

~Lady Maryann~

UPDATE: STUDENT WALL

This is Leclercian a.k.a Supdudes35's Rainbow!
Good work Lec!

Did you use a new layer for the gradient?

Email me you Rainbow! :D

BloghackI

2009-02-06T23:47:00.000-08:00

Hi everyone! I decided to change Html Guides to BlogGuides
I know you've been waiting for this for ages but I had to get official clearance from Maryann. I like making sure topics are ok and so at last I present to you

BlogGuide IV: Emotes

I know both LM and myself got a flood of emails much like this....

Dear TP,
how do you do emotes in blogger....

Well heres how the cool way:

You will need:

Mozilla Firefox
A few add-ons
Time
Admin priv.

Open Firefox (note this will not work with IE Safari GC or Opera)
(please note CPC is not responsible if this mucks up you)Download the Add on Greasemonkey. This is for Add on to enhance pages
Next download the Emoticons to work with Greasemonkey.
Install both greasemonkey and the emotes
Open up the Edit Html link in your blogger page

Go to the that I've highlighted see below ( if you cant see it click to enlarge)

The code is

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

Hope you enjoy your emotes
Dmaster

HTML GUIDE III: Picture Links

2009-01-24T14:41:00.000-08:00

G'day

Sorry for not posting for a while I was thinking of a few good things and testing them out. Just a quick note before we begin, please join The Orange Zone at the last part of the CPC main blog. Its LM's new section Please check it out ;-)

Right..... I got the idea for this tutorial from chuckey's Smile Penguins If you go through the old CPS there is a pic that is a link. I know a few of you know how to do this but here it is anyway

1.Find or upload an image to or from a image host (as always not photobucket sorry)

2. Get the direct URL of the image and copy it to your clipboard. Quick Tip: by direct URL I mean the Url to a page with only the image.

3. Type

Congrats you made a link image!

This was a rather simple form of it. If I went into details on more hard versions of it I would be here 'til midnight. So search the web and try experimenting.

Feel free to comment.

Have fun@ the fiesta
Adios Amigos! See you next lesson and Remember

Kids are empowered through knowledge
=-)
Dmaster

HTML GUIDE II: Animated Text

2009-01-13T08:00:00.000-08:00

This is my second Html Guide yay! Today I'm gonna explain some Animated Text Effects.

Most of the examples below work in all browsers that were released around 2000 or later.

Moving on....

The simplest type of Animated Text is call Marquee Text code and can easily be done in HTML. Marquee can move right left and up and down in a simple fashion. To create more advanced effects you need Adobe Flash or other pricey software. So I guess it's back to Marquee for now ;-)

Exercise I:

Slide Marquee
To do a slide marquee, type:

To change the direction instead of direction="left" type direction="right". This should make the text go to either side in motion.

Scroll
To do a scroll marquee, type:

To change the direction to downward, type direction="down"

One last word on marquee before I have some updates to make: I suggest you don't use them as much in post. People find them hard to keep track of in long posts. I suggest them as footers and below your headers as like A Welcome Notice.

Last but not least, an update on Favicons. I got a few emails about how it was not working for some of you. Don't freak out too much! We issued a Favicon Fun Fix. Me and LM suggest you add all the favicon codes to make sure all your readers can see your icon. I might talk to LM about designing a Technopengi one.

For next week, I'll try to make the tutorial in video as well as in text version. You can email me to my new contact page .

Dmaster/David

Favicon Fun Fix!

2009-01-06T21:45:00.000-08:00

LM: Yeehaw!

DMaster: Hello! Looks like the Favicon Html Guide did not work for some of you.

LM: Although it worked for us, it doesn't mean that it would work for everybody. That is because we all have different Blog Templates, not to mention different web browsers

DMaster: like Internet Explorer, Firefox & Opera!

LM: and different Operating Systems

DMaster: like Windows, Linux & Mac

LM: That means, some templates may require a whole new HTML code or just a different location in your template.

LM & DMaster: So now, we have researched and tested 2 Favicon Fun Fixes that will be compatible with your template, web browser and operating system. Here they are:

Step 1: Complete your Favicon Html Code as shown:

Replace the codes in red with the URL of your favicon.

(Please note that aside from JPG, you may also use images in the following format: ico, png and gif. You may also use an animated favicon in GIF format.)

Step 2: Now, let's put the FAVICON HTML CODE into your template!

There are 2 more ways to do it. Choose one that works for you!

Choice 1: Look for the Head Tags and paste your Favicon code ANYWHERE in between, like this:

Choice 2: Look for the the b:skin code and paste your Favicon HTML Code right below it, like this:

Step 3: Now save your template and check out the favicon beside your URL in the address bar!

DMaster: We hope this fixes your Favicon problem! Until next time...

LM: Ciao! ;-)

.

Favicon Fun

2009-01-06T08:00:00.000-08:00

Welcome everyone to this Html-Guide. My name is Dmaster.

Today's Technopengi is about Favicons.

So what is a Favicon?
A Favicon is the icon that appears before a URL when you enter a webpage. In blogger it is set as a the orange Blogger-Logo, you all know.

This can be changed to a personalized logo with these steps:

1. Make a logo 16 X 16 pixels or 32 X 32. ( I suggest a low detail image otherwise it will be not easy to see and not very clear.) Here are samples which you may copy/download and use as template:

16px Square

32px Square

2. Upload the image ( 16 x 16 or 32 x 32 ) to a web image hosting service NB not photobucket I encountered some problems with that.

3. Find the direct URL. (by direct URL I mean the URL that take you to only the image)

4. Copy the direct URL.

5. Open blogger. Click the layout link, the "edit HTML" tab, this takes you to the HTML source of your template.

Search for the title tag, as shown
and after that, type

paste your direct URL where it says url of your logo.jpeg
NB put quotation marks at the end and beginning of the URL
(Note: your image can also be gif, png, or ico - LM)

6. Save Template and you're done!

Congrats you made a Favicon!

Hope this wasn't too hard. Feel free to comment!

Next time if you want something simple, I have a few ideas in mind…

Dmaster/David
UPDATE: IF IT DIDN'T WORK TRY THE alternant code on Favicon Fixes

xAguair Mascot Contest

2008-09-01T23:25:00.000-07:00

Here is my entry to xAguair's Mascot Contest. I hope I win.

Go to xAguair's Site and Vote for Me ;-)

The Panda Mascot at 200px by 200px

Each of the Mascot's eye, mouth, ear, hand and foot can be rotated, resized, moved however you want. I think official mascots should be able to reflect current theme or emotion of the site/organization they are representing ;-)

Here is one sample where you can use the mascot in a scene.

Details:

1. The Blue-White Sunburst - A representation of Scotland's Blue & White Flag. That's where Aguair is ;-)

2. The Sun - Well, it's a GEAR, representing xAguair's interest in internet technology

3. The Lawn - Green Grass means Bounty: bounty in information that the site provides its readers

4. The Flowers - The flowers are called THISTLE, Scotland's National Flower. Read it in WIKI, it's got very nice story ;-)

5. the xAguair Banner - this is an example how the mascot can be made to hold ANYTHING. And I mean, ANYTHING ;-)

6. The Panda - I haven't got a name for it yet, considering I just knew of this contest only 2 hours ago ;-)

I made this 2 pics in an hour. A little longer than I expected. That is because I got hooked reading Scotland's history ;-)

Now, go to xAguair's Site and vote for me ;-)

Sunburst

2008-08-26T07:00:00.000-07:00

Read Intro to this Tutorial at my Club Penguin Crazy Main Page

Club Penguin's New Obssession

This is a

SUNBURST

and I will teach you how to make one. But instead of just 2 alternating colors, I will teach you how to make the 3-colored Sunburst below. It is soooo easy! ;-)

Materials Needed:
1. Adobe Photoshop (any version) Software
2. No previous knowledge of Adobe PS is required.

Open your Adobe Photoshop and...

LET THE FUN BEGIN! ;-)

1. Open a new file: FILE>NEW
2. Make the new file as shown below: 500px wide by 500px tall at 72DPI. OK.

3. Double click Layer "Background" and rename it to "1" to remove Lock
4. Locate the Paint Bucket-Gradient Tool Toggle and make it "Gradient" as shown
5. Let's use Blue-Yellow-Pink Gradient. You can choose any later
6. Choose "Linear" Gradient

7. Now apply the Gradient to the whole layer by drawing a straight line from CPCHAND 7 through CPCHAND 8.
8. If you have a hard time making a straight line, press the SHIFT KEY while drawing the line.

9. Now your layer should look like this:

10. Now go to: FILTER>DISTORT>WAVE

11. Now, follow the WAVE CONFIGURATION below: (you may play with the bars until you find what you want :-)

12. If you followed the values above, you should have this:

13. Now go to: FILTER>DISTORT>POLAR COORDINATES and configure like this:

14. Now, you have the 3-colored Sunburst! Yay! ;-) I told yah it's easy ;-)

We can add more pizzaz!
How about we add some lights?

And a SUN Clipart?

Or perhaps a Glass Effect?

Or a Water Ripple Effect?

Or maybe ZigZag it twice over?

Enjoy your Sunburst!
I hope you don't get burned ;-)

Blog Trick #2: Center Alignment

2008-08-03T21:00:00.000-07:00

This is the Right Yellow Sidebar in Club Penguin Crazy Main Page

Things that you put on your sidebars are called Widgets. They are small programs or scripts or codes that do specific tasks. The problem is, those widgets are often shown or posted on the LEFT! It would definitely be nicer if those widgets are posted right at the CENTER!

Here is how:

For example purposes, we will use Who's On Widget from www. amung.us. This is the code that Amungus gives you.

This code adds the widget to the LEFT of your sidebar.

To move the widget to the center, simply add the codes highlighted in red at the beginning and end of the code above:

Now, the widget will be added to the CENTER of your sidebar.

Homework: Try replacing the word "center" in the code with the following and see what happens:
1. Left
2. Right
3. Justify

Enjoy the Code! ;-)

Grab Image & Basic Photo Editing: Part 1

2008-06-08T12:17:00.000-07:00

I think blogging is much more interesting and effective if it has nice pictures to go with great posts. You are NOT going to find a Club Penguin blog WITHOUT pictures ;-) You might be surprised that quite a number of CP bloggers emailed me asking how to take pics. After this tutorial, you won't be copying pics from other sites again ;-)

METHOD #1: Using What Is Already In Your Computer

This is very easy. But you couldn't really do much ;-)

1. When the image you would like to capture is on screen, press the PRINT SCREEN KEY (CPC Hand #1) on your keyboard. You can only take ONE picture at a time.

2. Open ANY photo editing software. If you are using Windows, you will have MSPaint (aka Paint) and probably MS Picture Manager. Of these 2, I would prefer Picture Manager. **MS stands for MicroSoft duh ;-)**

3. Load up the "captured" or "grabbed" image to Paint or Picture Manager by: (a) Click Edit>Paste (Yellow Highlighted Menu Bar) OR (b) While pressing down CTRL KEY (CPC Hand #2), press the V KEY.

Now, you should be seeing the captured screen. If you want the WHOLE pic, then you can save it now. But if you just want a certain "part" of the captured screen, then we will CROP or TRIM it.

4. Basic Editing Using Paint.

(a) Selecting/Cropping the Image. Click the Rectangular Selector (CPC Hand #1) to select the part of the pic you want to save. To select it, click your mouse on CPC Hand #2, hold the button(click) then drag it towards the CPC Hand #2). You should be able to see dotted lines around your selection (inside the dotted lines).

(b) Saving the Image. Click File>Save As in the Menu Bar. You may save it as BMP (original file format. But I like JPG first or PNG second. BMP is too big for me ;-) For reference, let's name the file playercard.jpg.

(c) Resizing the Image. Depending on where you are going to paste it, you may need to resize it to fit, say, the sidebar of your blog. Let us assume that your sidebar can accept up to 210px in width. Now, open the playercard.jpg. To resize this, click Image>Attributes in the Menu Bar. Type in 210 in the width box, tick pixel and tick color. Don't worry about the height. It will adjust itself appropriately. Now, save it again.

Congratulations! You now have an image that perfectly fits your sidebar! ;-)

5. Basic Editing Using Picture Manager.
(a) Selecting & Cropping the Image. Click Picture>Crop in the Menu Bar. Drag the black bounding lines to the part of the captured image you want to save (as shown below), then click ok to crop it.

(b) Resizing the Image. Again, if you want the entire pic, then you may save it now. Otherwise, we will resize it again at 210px in width. Click Picture>Resize in the menu bar. Now tick "custom width x height." Again, you only have to type in the width coz the height will adjust itself. Now, click ok to resize it.

(c) Saving the Image. If you want to save this to its original file format BMP, then you can do File>Save As in the Menu Bar. But, if you want to save this in another file like JPG and PNG, do File>Export then choose the file format you want. Since we have already resized this, save this in original file size.

Congratulations! Now you know how to screen grab and basic editing.

Question: Supposing you are in a cp party and would like to take PICTURESSSSSS, surely you can not do "print screen>ctrl+v>save as" over and over... you will end up just taking pictures and not at all enjoying the party... :-(

For the next post, i will teach you how to take UNLIMITED number of pictures in a breeze! ;-) This is actually what I personally use.

Now, let me know in comment if this helps you. Please remember that we are doing basics for the mean time for the sake of those who are just starting up! ;-)

Blog Trick #1: Open Link in New Window

2008-06-08T12:01:00.000-07:00

Have you ever been to a site where you click on something, say a picture, that you really liked then forgetting to go back to the site that lead you to that picture in the first place? Well, that's every blogger's nightmare! aaaaarrrrgggghhhh! ;-) We want to hold each and every visitor. But the sad thing is, some viewers are fickle-minded (hehehe) and are easily led to ummm other sites :-(

Though it's not fool-proof, opening pictures and other links in another window helps keep viewers on your site and not veer away from your page too quickly.

Using the image above, here's how to manually change the code to open pics or links in new tab or window:

First, access the HTML code of the post by clicking the EDIT HTML tab:

This is the HTML Code of the Image above (automatically generated by Blogger when you attach an image):

Each link, whether a website address or a pic, will generate an href code (in highlight). Href is followed by a link. It is that link where you go to. To make that link OPEN in Another Window, just add this code at the end of an href statement:

target="_new" OR target="_blank"

So, to make the code above open in a new window, here is the new code:

That's it. Now, try clicking the images above and see what happens.

Enjoy the code! ;-)

Welcome to TechnoPengi!

2008-06-08T11:30:00.000-07:00

WELCOME TO TECHNOPENGI!

Thank You for waiting patiently for TechnoPengi!

It took me longer than expected to do what I had envisioned TechnoPengi to be. A lot is yet to be improved but since some of you have been waiting for its release (and quite impatient too! lol! and its my fault anyways ;-) apologies) , I decided to publish TechnoPengi despite its semi-unfinished state ;-)

Just a backgrounder, I have been changing the CSS for the uptempth time! And in the end, I went back to the theme I first chose: the iTheme from Wordpress (this is a blogger blog, yah know ;-)). This Wordpress theme proved to be a little difficult for me as I have been used to tweaking Blogger. Its HTML codes are different from those of CPC's. I am working on blog improvements which I wasn't able to do on the Club Penguin Crazy Pages. Since this is a tech site, I challenge myself to do things that are beyond my amateur skills and share them all to you ;-)

I wanted to publish TechnoPengi with awesome visuals. I haven't got that now, sadly, but this site will keep on changing until I achieve my dream for it. Anyways, when we really get down to it, content is still more important ;-)

I apologize for the delay of TechnoPengi. I wanted something close to perfection ;-) So please bear with me for a while yet and let me just get my groove on this. Hopefully, next TechnoPengi issues will be smoother and on time ;-)

As I don't think I would achieve Perfection anyways, here it is.... ;-)

Related Post:
Two New Blog Series Launched!

Free Downloads

2008-06-08T11:00:00.000-07:00

FREE FONTS
To Download, Click the LINK ~or~ Right-Click on the LINK and "Save Link As"

A.C.M.E. Explosive
This is the Font used by Club Penguin

A.C.M.E Secret Agent
A variation of A.C.M.E. Explosive