How to Make Random Headers

Ok, before we have learn the most easy way How to Make a blog, then i will share an advance tutorial How to change your header randomly. Well, first look at my another blog here, take a look on my header image then refresh or open a post.

How, did you get it ? If you understand how it works, then let's begin.

There are some info that you should know :

1. Not all blog template has header image (for example this blog).

2. Sometimes different template has different way to change your headers.

Pay attention on those things, but if you know the basic tag for html and css, that's easy to do.

How to Make Randomly Headers

1. Backup your blogger template, click on Template > Backup/Restore (top right) > Download full template. (safe way for unexpected things)

2. Open template html editor, click on Template > Edit HTML.

3. Identify your header tag. Just like what i said before, different template has different way. To do this, open your blog then use Inspect Element (right click anyewhere > Inspect Element, or press "F12" *chrome), you will see something like this.

4. Click on magnifying glass (bottom left), then click on your header image. That my friend's blog (march 17th, 2015), pay attention at <div id="header">.

id="header" mean your header identifier, to change your header image and style you need open html editor and find .header (dot header) or #header

5. Back to your HTML editor, find string above, then delete it.

6. Next step, copy code below and paste under </b:skin> or <body blablabla>.

<script type='text/javascript'>
var iheader = [];
iheader[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDNGW5r2PLVIJzao58Yo1KHZCjgELTo02ltE6nqEzZipVsp57-ESNmcbbHImc7kBAMnJ193jC6Ua22zBpNrpAhB0anZKiWsXmwYXHlPsqsHCwRB3aE7ChBp2BRU0gqplaVIWFveq-9jZ6/s1600/header.jpg";
iheader[1]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK-ItRWhk2DsrvJis839VsZB9FVKiLkEdZJ4Zo9lKZgaamrbqBixhemlT8TcElEDiTL_3zgGcscuOBidHtEIj8yT7owBzIXK00Gxh3-xrWSt8i45Z1Yo5NnXClrHD9GY_z8ZNlTmTIvQm7/s1600/header-rikka.jpg";
iheader[2]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdP5JZVwbY4N9IHkvLJ_IHKw_KAf7Ndut66xWyTmohli9tuka0F9aMHkIhJVw8I3RHYv2WYcX-z1GKXGT1-MRyidsBPWpSjIvqU91v-_5fGOjnq7VHRuLMJDH7ZA4O0Eu_gcePLYBcKUFZ/s1600/header-tm.jpg";
iheader[3]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgljlBnHtIw6smewCAFl0uLoKpufaMI9RcbTcuuWTT8h7vdwgq0n3osP6KEFGHSFZ4H-aUyV4OVlkGkcENV2WrYbCf8cUKKglVF719Q0FBeH2C-2QbmukRv6ygawypsnXZT7k9kBNsKLLrA/s1600/header-yayoi.jpg";
var tdwgheader=Math.floor(Math.random() * 4);
document.write("<style>");
document.write("#header {");
document.write('background:#ddd url("'+iheader[tdwgheader]+'") no-repeat top center;');
document.write("width:980px;");
document.write("position: relative;");
document.write("margin: auto;");
document.write("height: 380px;");
document.write("line-height: 40px;");
document.write("overflow: hidden;");
document.write("box-shadow: -10px 0px 0px rgba(221, 221, 221, 0.4), 10px 0px 0px rgba(221, 221, 221, 0.4);");
document.write(" }");
document.write("</style>");
</script>

Ok, i'll explain basic thing from those script.
Blue Text: your header image url. There i've 4 header image.
Purple Text: number of your header image. (related with blue text)

Orange Text: your header size, width and height.
If you know more about css, you can modify other element by your self.

Other example, if i have a blog with header image size 800px width and 200px height, and i want to use 3 header image then this is the script that you need to change.

<script type='text/javascript'>
var iheader = [];
iheader[0]="http://imageurl1.jpg";
iheader[1]="http://imageurl1.jpg";
iheader[2]="http://imageurl1.jpg";
var tdwgheader=Math.floor(Math.random() * 3);
document.write("<style>");
document.write("#header {");
document.write('background:#ddd url("'+iheader[tdwgheader]+'") no-repeat top center;');
document.write("width:800px;");
document.write("position: relative;");
document.write("margin: auto;");
document.write("height: 200px;");
document.write("line-height: 40px;");
document.write("overflow: hidden;");
document.write("box-shadow: -10px 0px 0px rgba(221, 221, 221, 0.4), 10px 0px 0px rgba(221, 221, 221, 0.4);");
document.write(" }");
document.write("</style>");
</script>

7. Now click on Save template, then go to your blog and try to refresh overtime, if you see your header change that mean you're successful.

If you need help just leave a comment, i'll help you, see ya.

How to Make Random Headers

How to Make Randomly Headers

1 Response to " How to Make Random Headers "