1 of 24

You are invited to add a slide and contribute regardless of whether you can participate in the live Meet!

2 of 24

Ahakoa e taea ana, ehara i te mea e tika ana!

Just because you can, doesn't mean you should!

3 of 24

Blog Template and Header

Header - first name and school

Smart Footprint

Blog description is current

Smart Footprint

Blog profile is current

Smart Footprint

4 of 24

Blogger profile display name:

The Blogger profile display name is the name used to sign blog posts and comments.

Learner’s Blogger profile display name should be their first name only

If the display name is incorrect or not set up when logging into Blogger for the first time support the learner to visit the Edit profile page in Blogger on their device and update their display name. Don’t forget to scroll to the bottom of the page and click save.

5 of 24

Create a Header to replace your Blog Title

Template: Size is 1200 x 300 px. You are welcome to make a copy and repurpose.

Check the width of your blog: Theme - Customise - Adjust Widths

If your header needs to be centred when uploaded see next slide.

6 of 24

Centre a Blog Title or Header

If you create and upload your your own Title Header this is how you centre the header in blogger.

1. Log in to your Blogger account.

2. Select Theme from the menu on the left.

3. Click Customise button.

4. Click Advanced.

5. Scroll downward and select Add CSS.

6. Enter this code in the text box.

#header-inner img {margin: 0 auto !important;}

#header-inner {text-align: Center ;}

7. Click Apply to Blog button to save the changes.

7 of 24

Add a hyperlink to a blog comment

Including a hyperlink to another blog or online reference can be helpful when you leave a comment. Rather than copying and pasting the URL which can often be ambiguous and is not clickable turn your URL into a hyperlink that displays as meaningful text.

<a href="https://support.google.com/docs/answer/97447">Insert text</a>

Tip: If the blogger has shared something that makes a connection for you and you have shared something similar on your blog post include a hyperlink to your blog post.

Click the title of your blog post to display the direct link to the post. Copy and paste into the html above for your blog comment

8 of 24

Side by side images

<br>

<tr><td>photoa

</td><td>photo b

</td></tr></tbody></table>

<br>

Following html adds an invisible table in your blog post to position two images side by side

9 of 24

Create and Embed an Interactive Poster

Google Draw is a great go to App to create a poster or graphic to either embed or download as a PNG for a blog post.

An option for creating an interactive poster for a blog post is to use a Google Slide.

Example

Using a Google Slide, embedded in a blog post, enables hyperlinks to remain active.

This option includes removing the Google Slide navigation bar.

Customise Slide Size to poster size: File - Page setup
When ready to share

Slide permissions anyone with the link can view
Copy the URL of the slide and paste in the slide notes
Replace /edit#slide=id.p with the following

/preview?rm=minimal

Insert this URL in the html code
Go to blogger - new post - select html and paste
Centre your poster and preview before publishing to check size. Edit the width or height if needed.
View this example on a blog

10 of 24

Embed a Slide Deck

minus the black bars on the side

Empower your learners to edit html when they share on their blogs!

Consider the width of your blog template.

View html in blogger and look for width and height (see notes)

11 of 24

When you have to change the same information on student blogs, the quickest way is to do them altogether.
Open all the student blogs on the Design - settings page.
Save the blogs on Toby Mini.
Then you can open them all at once, to where you want to be.

What a time saver!

12 of 24

Ako | Our Learning Gadget

Adding or updating a gadget on both learner blogs and class blogs to the current class site.

13 of 24

Live Traffic Feed on learner blogs not working

<a href="http://livetrafficfeed.com" data-num="10" data-width="210" data-responsive="0" data-time="America%2FNew_York" data-root="0" data-cheader="2853a8" data-theader="ffffff" data-border="2853a8" data-background="ffffff" data-normal="000000" data-link="135d9e" target="_blank" id="LTF_live_website_visitor">Stat Counter</a><script type="text/javascript" src="//cdn.livetrafficfeed.com/static/v4/live.js"></script><noscript><a href="http://livetrafficfeed.com">Stat Counter</a></noscript>

This has stopped working on blogs pre 2020.

Copy the code below. From the blog, open the gadget using the spanner icon.

Click in the content field. Ctrl A to select all the existing html and ctrl V to replace with the new html

14 of 24

Cheryl Torrie - Cheryl’s Professional Blog

Add images from Google Photos to your blog using HTML button - sample post

Choose multiple images in Google Photos and add in one go...

Click to select multiple images

15 of 24

Cheryl Torrie - Cheryl’s Professional Blog

Blogging with style: collage so we don’t need to scrooooooooolllllll to see all the photos

Make photo collages in Google Slides or Drawings - sample Cybersmart lesson with templates and video instructions

16 of 24

Visible archive of class sites over the years...

Design

Layout

Pages Gadget

Tip by Hannah West

17 of 24

Dave Winter

Embed - 3d objects

18 of 24

Dorothy Burt

These gals are super geeky and they can do anything you want with Blogger!

19 of 24

Dorothy Burt

20 of 24

Blogger Background

We have a standard blog template which includes a body layout with three columns and specific gadgets to support our cybersmart learning. However one option for personalising your blog is to create your own background with student art - example. Take photos of the art and organise using a Google Drawing. Download a PNG and upload as a background for your blog. See screencast above. Learners use images they have created and upload their background to Google Drive as only teachers can edit backgrounds as administrators. Recommend setting expectations of your learners before they can personalise their blog background e.g. Evidence of Cybersmart Learning and Blogging.

21 of 24

Dave W - Making an image map header - Example

http://sharingthehook.blogspot.com/

1 The index comes from linking directly to a label eg

http://sharingthehook.blogspot.com/search/label/Visible%20Teaching

2 Make an image map Need to have a direct image address on web

https://www.html-map.com/

3 add a gadget HTML/java script that sits above main in the layout organisation

22 of 24

Clear Formatting on Blogger

From your Blogger Dashboard, locate the post you wish to edit and click Edit to enter the post editor.
In Compose mode, use your cursor to highlight the content of your post.
To clear formatting, click on the Remove formatting button.
All formatting will be removed.
You may need to remove extra spacing between paragraphs
Click the Update button to save your new changes.

When copying and pasting from a Google Doc to blogger use Ctrl -Shift - V

If text in a blog post is running into the sidebar of a published post formatting can be cleared by editing a blog post and clearing blog formatting.

Remove formatting button

23 of 24

Why copy and paste from a Google Doc to Blogger?

Crafting or composing a text in a Google Doc creates a copy for both the learner and teacher.

This copy is a record of what has been written and provides access to the Version History of the document.

Viewing a document’s history provides valuable information about how the learner has edited their writing and supports reflecting on and recrafting of text.

Scaffolds can be included in a doc for learners e.g. voice typing, writing prompts

Commenting in Docs can also be harnessed for feedback and feedforward to support the learner as they write.

If there are any internet issues when publishing in blogger a copy is saved in Google Drive.

None of the above are available if learners type directly into blogger.

24 of 24

Blogger App