Thursday, September 01, 2016

Have Students Create Custom Headers

Have students design a custom header for a classroom blog. Choices and opportunities for personalization provides ownership for the blog. Both Teachers and students become excited as they journey together building a classroom blog.

The classroom will decide upon a theme based on a monthly or quarterly basis. They will brainstorm topics which support the theme. Once there is a list students will split up into small groups focused upon one topic. They will use Google Drawings to create the Header Design. This will provide them with the opportunity to combine both digital and paper designs. Remember photos can be taken and inserted into a Google Drawing where the student can type the blogs name.

Using Google Drawing to Create Blog Header

  1. Open a Google Drawing
  2. Click File Select Page Setup
  3. Use the arrows and select custom
  4. Enter a width of 1250 pixels and height of 350 pixels
  5. Click the  Okay  button



  1. Insert a textbox
  2. Type a Header Name
  3. Insert, images, shapes, change color & etc....


       1. Click File
       2. Followed by Selecting Download
       3. Click PNG

Insert the Header Image In the Blog

  1. Open Blogger Dashboard
  2. Click the Blogs Title
  3. Under the  New Post  Button Select Layout
  4. Scroll to Header Section and Click Edit in the lower right corner
  5. In the Pop-up Window Choose Image from computer
  6. Decide how you want to place it
    • Behind title and description
    • Instead of title and description
    • Have description placed after the image
    • Shrink to fit
  7. Click the  Save  Button
  8. Followed by Clicking  Save Arrangements  (upper right corner)

Use Blogger's CSS Editor to Resize the Header

Copy and Paste this snippet into the CSS Header to correctly size the image 

width: 100%;
height: auto;

Please continue by following these directions:

  1. Open Blogger Dashboard
  2. Click the Blogs Title
  3. Under New Posts Select Template
  4. Click  Customize  Button
  5. Select Advanced (bottom of list)
  6. Click Add CSS (bottom of 2nd list)
  7. Copy and Paste this Code in window
    • #Header1_headerimg{
      width: 100%;
      height: auto;
  8. Click  Apply to Blog  (Upper right corner)