Html Blogger: Guide: Search It
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
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
HTML GUIDE III: Picture Links
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
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
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....
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
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!
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!
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! ;-)
.
DMaster: We hope this fixes your Favicon problem! Until next time...
LM: Ciao! ;-)
.
Favicon Fun
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
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 Square2. 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
Posts
