It is working!
Press "F5" on your keyboard and a different banner should appear.
After two days of trying (yep very sad, but do I care!), I have finally modified my blogger template to do random roation on the banner graphics. If you don't get what I mean, press "F5" on your keyboard and a different banner should appear, if it happen to be the same banner then press again till you see a new one. It is a standard plug-in for Wordpress but we didn't have it in Blogger.... until now. Well I think this could be the first in the world of Blogger Beta, if not it is definitely my first hack anyway. Thanks Ramani from Hackosphere who gave me a few tips. Read on to see the scripts I have used.
I am not sure if it will works for all blogger templates, so I will just show you what I have done and you may have to modified it for your template. First of all I assume you have created a few graphical banners and have uploaded them onto a graphic hosting website.
For the 'Rounder' template I have used there is a piece of script in the CCS Style Section that read like this:
#header {
background:#476 url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
margin:0 0 0;
padding:0 0 8px;
color:#fff;
}
Basically my script works by overwriting the 'background' definition at the <body> part of the template. I wrote the following right after the <body> tag:
<script type="text/javascript">
var banner= new Array()
banner[0]="http://static.flickr.com/84/269053449_acad87a793_o.jpg"
banner[1]="http://static.flickr.com/95/269053438_4ef5a3983e_o.jpg"
banner[2]="http://static.flickr.com/96/269053404_44a3b0eda8_o.jpg"
banner[3]="http://static.flickr.com/108/269053262_608edbdda4_o.jpg"
banner[4]="http://static.flickr.com/98/269053232_6f7c6f994a_o.jpg"
var random=Math.round(4*Math.random());
document.write("<style>");
document.write("#header {");
document.write(' background:url("' + banner[random] + '") no-repeat left TOP;');
document.write(" }");
document.write("</style>");
</script>
My scripts above used Java Script to define an array of 5 url locations of the banners' graphic. Then the next line generate a random discret number between 0-4. The next part will generate some html codes to overwrite the "background" definition of the the "Header" style by selection a random banner everytime.
You will need to change the following:
1) The URL Locations of your graphics.
2) If you have 5 banners, you type "4" in the random number generating equation Math.round(4*Math.random()); If you have 3 banners type "2" and so forth.
Good luck, let me know if it works.
Sunday, October 15, 2006
Random Rotating Banner Hack
Subscribe to:
Post Comments (Atom)
74 comments:
awesome job on hacking the code
cheers, couldn't believe I am now a code hacker!
awesome, you finally are one of us.
as for the banner, i guess you used the layer function in photoshop. you can do tons of cool techniques there using the filters. if you want to play with the colors, try ctrl u, its a easy way to play with the color. experiment is the key.
Gabs, I buzzed about your hack in my latest post.
Ahdont, let me know what you think of my banner designs though, since you are the king of graphic. Martina said the logo destroyed the serenity of the photos. I think it is rather fun to add a wing to the fisherman and give you a fire ball in the Lombok photo. With Martina's photo in Nepal, I was trying to make the logo act like it is catching the wind.
ramani, thank for publicising my website, I couldn't belive there aren't more blogger out there wanting to have this function. A question, would my banner load more quickly if I host them on Blogger instead of Flickr?
just so you know, alex is a graphic designer for real. wil tell you what i think of the banner when i get out of bed.
I've done this on my classic template, kind of.
Replaced the background image with an url to a php-script which ramdomly selects an image and shows it.
Atm I have the script to rotate my profile photo. Works for that too!
(Now that I tried it again, it seems to work also with the Blogger Beta. Just needs some new images to match my current template.)
Alex, shed me some light too with your graphic design experience!
eku, okay I better not claim my work to be the first in blogger than. good to know php works on the template too, but I have yet to learn the language
ok brother as you requested I have made some comments on your banners in your Flickr account
Thanks Alex, good points, now I know what works.
Hi Gabriel,
Sorry to hijack your blog - incredible stuff, never expected you to lie low in HK, did I?
Anyway please write me at oleolemanutd_at_hotmaildotcom, and please delete this entry and apologies again for hijacking.
Ex-Imperial classmate Aaron Goh
Wow! Very cool. I had a little trouble with the sizing and placement of my new banners, but once I had the margins set properly, I popped in your code and it works like charm. See the results at http://www.atrainhockey.com.
Thanks for sharing!
I really dig this random banner hack. I've always wanted to try it since seeing a rotating image header on Zeldman. Thanks alot Gabs Lau!
Excellent code. 1 Question.
I have 20 blogs that I want to apply this to, now I know I can cut and paste into all 20, that is fine, however, whenever I make an update I will need to apply the same change 20 times.
Is there anyway this can be made as an external .js file so that I just update the .JS file once so that the code is applied across all 20 blogs?
LOVE IT. It adds such a lovely professional touch!
Woot..
I made it work on Blogger beta Minima template.
Kate and Manas, show me your blog
well done, for your info I also have rotating banner on my blogger blog
I get the code from here:
http://www.htmlbasix.com/banner.shtml
it's kind of javascript code generator, quite easy to use and work well with blogger beta. but haven't tried for the header, I only place it above the posting
Do you think it would be possible to do the same thing with videos (like from Youtube)? Any ideas are appreciated. Thanks.
Great hack! Been looking all around for this. Thanks and keep up the great work. :D
Hi, great script!. I wonder if you know how could I implement this Script Flash JPG rotator. It's a great one but I don´t know how to installit in my blog.
Thanks in advance!
Great work with the code :) I spent 3 hrs trying to work it out before searching for an answer :p
Your hack won't work exactly the same way for the Minima Black template, but it had more than enough information in it to point me in the right direction!
Rest assured, your 2 days did not go to waste ;) AND you're right, I'm not sure why more people don't want this hack!
I was looking for just a code the past couple of days. Ramani recommended your blog. My only problem is the blog description wants to place over top of the banner and the banners that I have are different sizes but they end up coming out the same size and cut off. They are also placed in the top left corner and not centered. Any suggestions?
if you want to move the blog title around you need to play around with the "padding" and "margin" of the banner on the ccs section. The blogger template dictates the area of your banner that can be shown, again play with the "padding" to change the size of that area, but you have to resize your banners to be almost identical
hi there - it does work but its fiddly to get the setting right with padding. I keep getting the title and description over the banner and its heavily cropped - which could be nice except i already have the headers made with the title on. So I will persevere. I might try that js that rangga spoke about because really I want random pictures above the "made invisible to the naked eye" title (in order to help SEs) and small description below. Anyway nice work and kwl blog.
Iknownotwhattodo: I had the same issue. What I did was look for the definition that had:
font: $pagetitlefont;
and below that put:
font-size: 0%
That seemed to do the trick :)
Congrats! Great banners.
I still need help. Could you email me! I can't seem to change the header size to suit what I want. Anyone else reading this and can please help me it would be appreciated.
closetkeis@gmail.com
Just wanted you to know how much I appreciate you sharing your awesome code. I'm very pleased with the result!
Thanks a bunch :)
Hi there!
You might want to check out my Random Quote in Sub Header, which was posted back in 2005 and describes how to show random descriptions in your header. This also works for Blogger Beta.
http://shamel.blogspot.com/2005/04/blogspot-hack-random-quotes-in-sub.html
yeah! it worked!!!
thanks for posting this. it's exactly what i was looking for.
Dear Gabriel,
Thank you very much for this excellent and fun hack. I am trying it out on my blog now. You have designed you header images better than I have. Mine are a bit small (in length). This is fine for the header images that are just text on a transparent background but for those that have a solid colour background (creating a box effect) it looks a little weird.
I thought I would post the modifications I had to make to get this great hack of yours to work well with my particular template - (A Ramani (Hackosphere) hacked 3 col Minima which I converted to fluid) for the interest of others:
In the CSS 'header' section I needed to define 'height' :
#header {
height: 150px;
margin:5px;
background: #fff no-repeat center;
}
As I said, my template is fluid. Even though I was able to make this modification myself (with thanks to Annie of Blog-U) I still don't know a lot about this sort of thing. For instance I thought I might need to define the header height in percentages - but it didn't work. I checked how the new header looks in IE and at various screen resolutions and it is fine so I guess that, even with a fluid template, defining 'header height' in pixels is ok. Curiously no 'width' definition is necessary.
Also in my CSS header section I added the line "display none" to prevent my text blog title (Beta Blogger default) from showing up.(Thanks to J. Noronha of Blogger Hacks Inventory). Not sure if this is absolutely necessary with your hack Gab but I did it anyway:
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
display:none;
}
Then I simply changed one of the lines in your code to center my header images (and discovered that spelling is important - i.e. it's center NOT centre!)
no-repeat center TOP;');
Thank you Gab! My blog is under construction but I will be adding a link back to you.
SJ xx
http://skankyjane.blogspot.com
thank you so much! I spent 2 days as well trying to figure it out and then i stumbled upon your blog! Thanks man ! Now my header is random!!
Thank you so much for this hack!!!! I am so pleased to finally have the one feature my blog that I couldn't get. You have made me complete... :-)
Gabs,
I too use the rounders template, and I guess we both used the same rounders template, only with different colors. I tried this hack on my blog and it really works well but I had a question:
I still like the rounded corners on the top and bottom to show. If you look at my blog:
http://nostalgiamanila.blogspot.com/
You'll see that the TOP rounded corners still show, but the bottom ones don't.
When I edited my css, only a small part of my header showed. To solve this, I actually had to add a bunch of BR (line break tags) onto the header html. I went to my Page Elements edit page (where you can drag and drop widgets), clicked on the Header Page Element, and added a bunch of BR (line break tags) so that my header and image would show.
After a few line breaks it did show, but I lost the rounded corners at the bottom! :( Is there a way you could please show me how to how those rounded corners at the bottom?
Would really appreciate your help. You may reach me at: nostalgiamanilamail@yahoo.com
Many thanks! This is a great site and a great hack!
Hello again Gabs,
I used this modification to define the height of the header:
#header {
height: 150px;
margin:5px;
background: #fff no-repeat center;
}
Again, only the top rounded edges show, and the bottom ones are missing. :( I don't know what else to do. Help!
Thanks again.
hi..
i m just getting my head round all this, as i m kinda a dummy here.
first of all, how can i get the pic to fit the width of the blog, cos at the mo, it only show in the middle of the blog. is there anyway round this?
am using classic template, copy and paste can't seem to do the trick?
any helps on how to do on classic template?
http://castamara.blogspot.com/
Hiya Gabriel,
I just wanted to stop by and say thank you very much for this hack, its fairly simple and yet it does so much for a site.
My blog is always a work-in-progress these days it seems but you can check it out if you'd like:
http://edwinrosell.blogspot.com/
Thanks again!
-edwin
P.S. let's hear it for the year of the rat!
I'm using it as well. Great job. Thanks.
Hi Gabriel,
Thanks for your code...
actually in your post, u mentionned about a Wordpress plugin - could you tell me which one ? I would like to put it on my wordpress blog...
Thanks for everything,
Best,
John
yeet another thanks. for those with size problems. put the height in the header description section
Brilliant hack. Worked first time. Kudos to you.
Thank you.
Just what I needed! So brilliant, thank you. :)
if you want to remove the header title, you can do this:
Go to Template -> Edit HTML. Scroll to where you see this code where your blog title is shown:
widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'
Change the locked='true' to locked='false'. Save and click the “Page Elements” tab. When you “Edit” your Header, you will now see a “Remove Page Element” option. Remove it if you want, and refresh the your home page. You should no longer see your title displayed.
hello i'm andi from indonesia.nice trick.but how about size of banner can i use perfect to close all dimension. Look for my random banner when i use it ?? i look in disorder.thanks
yea... great work! thx.
http://jizni-korea.blogspot.com/
Hey man, thanks a lot for sharing this code. I've put it into my blog (though you won't see images rotating at the moment because I only have one in there) and will make sure to link to you.
I was wondering though, I can't seem to put links in the rotating banners. I guess this is because they're in the background? Do you happen to know of a way to do this? I just want the banners to link to my homepage.
oops, forgot to leave my blog: www.resignedgamer.com
thanks for your help!
hi! it's July 2007, I just found your hack, and what else can I say except THANK YOU! I love it! :-) And you can smile knowing that about 9 months later, this is still being looked for and used - and probably for a long time to come IMHO
Cheers,
*lynne*
azlynne1972.blogspot.com
Lovely hack! I'm not ready to use it, but I am interested to know how you got that awesome little quote box in your post!
Hi,
I've been looking for a way to have random images appear within a post.
IE each time the page is refreshed, or someone visits, I'd like them to see a different image (really just looking to have this on my home page). Any ideas how to do this?
Cheers
Serapheena
my blogger template is Mr. Moto Rising (Ellington style) and I cant seem to get this wonderful hack to work. any suggestions?
waaa, thanks for your hack.
Here mine
http://blog.yht4ever.googlepages.com/random_change_image.js
If i saw this hack before, maybe i haven't done my own :)
My idea is use one function to get the path of the image and then use them in template.
--YHT
I've written a similar script that supports iframe and script based ads, like Google and Amazon!
The full article is here:
http://blog.dantup.me.uk/2007/08/random-banner-ads-on-blogger.html
I was able to put this directly into my CSS on blogger. I'm also using z-indexs for multiple layers.
sorry I must be missing something,...I don't see it rotating... I get the random part....
seem silly to refresh the page to see it rotate....
curious
I just used your hack with my newly modified 3-column Minima template and I got it working on my first try. Thanks so much! It's awesome. Check it out: grizzarkhov.blogspot.com
:D ko mmg hebat la, wa respek sama lu. huhu, lov u blog
I used your random image hack and it worked, but now the image is not completely being displayed. How do I make the "box" for the header image big enough?
hi, i'm having trouble getting your BRILLIANT HACK (thank you) to work, using the neo template by ramani. any suggestions? i'm following directions precisely, but when i preview the page it comes up entirely blank--doesnt even load. any help would be appreciated, i'd love to include this function.
thanks, billi
www.romeowood.blogspot.com
I love you, great script!
Hi I've tried your code, and it worked fine, which means I can see my banner rotated. But the existing picture cannot be erased. I'm using snapshot template and it has its own header. Any idea how to remove it?
Thanks alot!
i have seen your web page its interesting and informative.
I really like the content you provide in the web page.
But you can do more with your web page spice up your page, don't stop providing the simple page you can provide more features like forums, polls, CMS,contact forms and many more features.
Convert your blog "yourname.blogspot.com" to www.yourname.com completely free.
free Blog services provide only simple blogs but we can provide free website for you where you can provide multiple services or features rather than only simple blog.
Become proud owner of the own site and have your presence in the cyber space.
we provide you free website+ free web hosting + list of your choice of scripts like(blog scripts,CMS scripts, forums scripts and may scripts) all the above services are absolutely free.
The list of services we provide are
1. Complete free services no hidden cost
2. Free websites like www.YourName.com
3. Multiple free websites also provided
4. Free webspace of1000 Mb / 1 Gb
5. Unlimited email ids for your website like (info@yoursite.com, contact@yoursite.com)
6. PHP 4.x
7. MYSQL (Unlimited databases)
8. Unlimited Bandwidth
9. Hundreds of Free scripts to install in your website (like Blog scripts, Forum scripts and many CMS scripts)
10. We install extra scripts on request
11. Hundreds of free templates to select
12. Technical support by email
Please visit our website for more details www.HyperWebEnable.com and www.HyperWebEnable.com/freewebsite.php
Please contact us for more information.
Sincerely,
HyperWebEnable team
info@HyperWebEnable.com
Been using your little "hack" for quite some time now. One thing I can't seem to find anywhere or figure out on my own:
How do I link the images back to my blog like it does in the default templates? I've noticed your banners don't link back, so may be there is no way of doing that?
he there.. me new to this blog world.. please lemme know how exactly i can use the code and where??
Shree
www.ibiboo.blogspot.com
Wow! 70 comments. I'll be lucky if someone sees this. My question lies around having 5 different random banners. I want to have banners take turns at being on top... If I use this code 5 times I have a feeling I'll end up with some pages showing a pair of the same ads or 3 of a kind... etc.
I guess one solution would be to make a bunch of LONG images (5 banners high) with each ad appearing in a different spot, and have that entire image swap out randomly. Not my favorite idea though.
Any other suggestions?
So cool in hacking dude
http://petitmal86.blogspot.com/
http://gino-memoirofaschizo.blogspot.com/
this is awesome thanks!
Thank you Gabriel! I mention you in my post today. It work like a charm, I just made one little tweek or I guess I cheated it was cutting off my banner so you only saw half of it so I uploaded a invisible PNG image to open up the space requirements and it worked! Thank you again!! :D
Post a Comment