Sie sind auf Seite 1von 31

Updated Version July 2011 New Interface

To access this packet along with blog tutorials, please visit the Indian Prairie School District Professional Development Blog

http://ipsdblogclass.blogspot.com/
Feel free to email me with any questions at: lisa_sadler@ipsd.org

Important Note
You must open a through . account prior to creating a blog

After opening an account with , you will be askedyoure your phone number you will receive a text with a code to verify that you actually requested an account. After verifying your account, you may begin to create your blog. (If you do not have texting during regular business hours you will receive a voicemail with your code.) To open an account : https://www.blogger.com/start and click

When creating the blog begin by filling out the following information: 1. 2. 3. 4. 5. 6. 7. 8. 9. Email address (the email you used for the Google account. Retype email address Enter a password Retype password Display name Choose if youd like featured announcements emailed to you Birthday Type word verification Accept terms and click

Name your blog. Be creative and name your blog. The name will appear on your published blog, dashboard, and in your profile. Pick the URL youd like for your blog. For example you can use something like: http://ourbookreviews.blogspot.com or http://mrssmithbrookdale.blogspot.com Click on CHECK AVAILABILITY to see if this URL is available if it is available click . If it is not available, please choose a different phrase.

BLOGGER REDESIGNS DASHBOARD


On July 7, 2011 Blogger implemented a new interface for all Blogger in Draft users.

NEW DASHBOARD DESIGN EXAMPLE

THIS IS THE OLDER DESIGN. (Currently, if you are not using Blogger in Draft this will be your interface)

To access the new features, after signing in - you must have a check mark in the box next to Make Blogger in Draft my default.

If you are NOT in blogger in draft already you can access the option from the OLD interface. The option is located at the bottom of the webpage on the dashboard.

After clicking on the Blogger in Draft option under Tools and Resources you will then receive the new interface where you will need to place a check mark in the box as stated above.

The old interface was referred to as a DASHBOARD the new interface is the OVERVIEW

NEW POST OVERVIEW

VIEW BLOG

CLICK ON OVERVIEW . YOU WILL THEN SEE A LIST OF CATEGORIES ON THE LEFT SIDE OF THE SCREEN THIS IS WHERE YOU CONTROL ALL ASPECTS OF YOUR BLOG INCLUDING ALL SETTINGS, LAYOUT, TEMPLATES AND ADVANCE DESIGN OPTIONS.

The overview page defaults to statistics of your blog you can see how much activity your blog is generating from this screen.

Settings
In order to set up your blog we will work up from the bottom up on the task list.
After selecting SETTINGS you will see the following subtitles.

You may need to change your address due to grade level or name change To allow another person to be an author click add author Default is YES

Default is anybody

From this option you can change your blog title/description/web address/etc by simply choosing EDIT. You can choose WHO can access your blog and if you would like search engines to include you blog. Always remember to click .

How many posts should appear on your main page. This is a personal preference. Post template feature would be a phase that you would like to appear on every post Click add and add your information.

IMPORTANT INFORMATION
It is in your best interest to HIDE comments. This will avoid any possibility of an inappropriate comment being accessible through your blog. If you would like comments to be displayed you are encouraged to MODERATE your comments prior to having them post to your blog. If you choose this option, you will be prompted to provided an email address in which the comment will be sent for your approval once authorized the comment will appear. Remember to click Located in the upper right hand corner

For those who are interested in posting to their blog from a mobile device please visit the Mobile and Email sub title to set up access. Time Zone: defaults to Pacific time. Click the drop down menu and chose GMT 06:00 Central Time. Date Header Format/Time Stamp and Comment Timestamp are all a personal preference. Use the drop down box to chose which format you like. Remember to click Located in the upper right hand corner The Other feature defaults to all safe settings and does not need to be changed.

Template
There are several templates to choose from. If you want the freedom of customizing colors, headers, fonts, etc. choose the first SIMPLE template. If you choose a template from picture window, watermark, etc. you will not be able to change colors, backgrounds, and more.

A screen will appear previewing what your blog will look like click CUSTOMIZE to make changes or Apply to Blog to use template as is.

10

The Blogger Template Designer will appear after selecting Customize.

There are 5 areas on the left that you can design/alter. Templates/Background/Column Widths/Layout/Advance. TEMPLATES: You can alter your template by uploading different images for your header or backgrounds. BACKGROUND: Because you are in Blogger in Draft, there are many different backgrounds you can choose from. You may also use an image you have saved on your computer. If the image is small it can be tiled to cover the entire background. By clicking the down arrow under background image a pop up box will appear with different categories and options for your background.

11

You will also see the option of uploading an image. After choosing your background click . THEN CLICK . No changes will take effect unless you click APPLY to blog. You may view your blog to see how the background looks by clicking on VIEW BLOG.

If you choose to upload an image you will be given the options of the alignment or tiling option. By clicking on the down arrows you will be able to change the default. In most cases you will need to select TILE so the image will cover the entire background.

12

LAYOUT: The layout of your blog is a personal preference. There is a 2 column or a 3 column options. There is the main body of the blog and then sidebars. A 2 column would have a main body and 1 sidebar the 3 column has 2 sidebars.

Choose which body style you prefer Choose which footer layout you prefer ADJUST WIDTHS And finally you may adjust the width of your columns (You will see a preview at the bottom of the designer so you can slide the width selector to your preference)

After finding your preferred settings, click

13

ADVANCED SETTINGS: The advanced settings may vary on the template you chose. Depending on what can be altered with that particular template. You can change the font and color of text, backgrounds and sidebar features on this screen:

After choosing your preferences click

You are now ready to view your blog to see how your options appear. If you find your options arent to your liking, you would return to the design template to make changes.

14

Layout

The layout of your blog is where you can add, edit, remove and rearrange your gadgets. By clicking and holding down your left click, you can drag your gadgets to any desired spot of your blog. It is important to click SAVE ARRANGEMENT after making changes. You can choose to PREVIEW prior to permanently changing your blog.

15

Blogger currently offers 24 different types of gadget options. When clicking on Add Gadget a pop-up box will appear:

There are many different options such as adding text, a picture, search box, lists, etc. HTML/JavaScript is used for embedding features into your blog such as a YouTube video, a slide show, a clock, weather chart, music player and other fun features.
NOTE: The gadgets that are utilized the most for classroom blogs are: PICTURE, HTML/JAVASCRIPT, TEXT, LIST, LINK LIST AND LABELS. (NOTE: The slideshow gadget currently can
only be used with pictures stored in Picasa, flickr, and photobucket, using the HTML/JAVASCRIPT option allows embedding from other sites.)

16

TEXT Choose this option to add text to your sidebars, header, or footer. After placing a title and typing your content choose
If you choose to move your text to another area of your blog DRAG that gadget box to the area you would like it to appear-you will see an empty white box appear while hovering drop your gadget into that box. The text color will default to what you choose in your design template.

PICTURE Choose this option to add a picture to your sidebars, header, or footer. You may title and caption your picture. Upload an image from your computer or the web. If you
tick the box next to shrink to fit- the picture will automatically be sized to fit the width of the column.

Click

If you choose to move your picture to another area of your blog DRAG that gadget box to the area you would like it to appear -you will see an empty white box appear while hovering drop your gadget into that box. NOTE: the picture will not change sizes unless you remove image and upload again-The shrink to fit pixels will change with the width of the new column size.

17

LIST
Choose this option to add a list of items to your sidebars such as Important Dates or a Calendar of Events. Title the list and choose which items should appear on your blog. After typing in the item click Click the down arrow on sorting to choose sorting option. You can also move items on the list by clicking the small arrows next to the items. You may edit or delete the rows from this window. Click when finished.
(If you use this for a calendar, delete items that have already occurred and the current items will stay intact. (If you choose to move your list to another area of your blog DRAG that gadget box to the area you would like it to appear -you will see an empty white box appear while hovering drop your gadget into that box.)

LINK LIST THIS IS A GREAT FEATURE TO USE WITH GOOGLE DOCS!! Creating a link list allows the viewer the ability to click on a link and be redirected to that website right from your blog. Copy and paste the URL then add site name. Click . Just like the list feature you can choose to sort, title and edit. You can link your Google Docs to your blog! Click when finished.

18

Place embedded code here.

HTML/JAVASCRIPT Choose this option to add an embedding code to your blog. There are many items you can embed into your blog; such as videos, music, slideshows, clocks, weather, etc Title the gadget and copy and paste the embedding code into the body of the box. Click
(If you choose to move your list to another area of your blog DRAG that gadget box to the area you would like it to appear -you will see an empty white box appear while hovering drop your gadget into that box.)

To embed a video from YouTube, Vimeo or other video sharing sites. Click get embedding code and a HTML code will appear. Copy and Paste this code into the HTML/JAVASCRIPT gadget and the video will appear on your blog. (If you choose to move your video to another area of your blog DRAG that gadget box to the area you would like it to appear -you will see an empty white box appear while hovering drop your gadget into that box.)

19

To embed a slideshow from slide.com or other slide hosting sites. First create a slideshow then Click get embedding code and a HTML code will appear. Copy and Paste this code into the HTML/JAVASCRIPT gadget and the video will appear on your blog. (If you choose to move your video to another area of your blog DRAG that gadget box to the area you would like it to appear -you will see an empty white box appear while hovering drop your gadget into that box.) NOTE: All the HTML/JavaScript gadgets will allow students to click and be redirected to the hosting website Now that you have the ability to add a text gadget, you are encouraged to add the following disclaimer:
THIS PAGE LI N KS T O E XTER N AL WEB SI TES T HA T ARE NO T UNDER THE C O NTRO L OF DI ST RICT 204.

ABOUT ME The about me gadget is a great place to put your contact information. (Phone number, email address, attendance line). If you have loaded a photo to your profile it will appear on the sidebar of your blog under the ABOUT ME section.

BLOG HEADER

20

You have the ability to personalize your blog header. Either by inserting a graphic you have found online or by creating a graphic through photoshop or a paint program. To do so click EDIT in the HEADER box.

Upload image by clicking . Be sure to tick the SHRINK TO FIT option to insure proper fit. (You will need a high resolution file due to the width of the header.) Chose the placement option (Most likely you would choose instead of title and description to avoid words appearing over your graphic.) After your image is uploaded click and then view your blog to see if you are satisfied with the results.

NOTE: When you are signed into Blogger and view your own blog, you will see a wrench/screwdriver tool by each gadget. You can click on this tool to access that gadgets pop-up box instead of having to return to the dashboard or design tab.

21

WEBSITES OFFERING GADGETS FOR YOUR BLOG


NOTE: Not all websites are accessible from the district computers. These features may need to be uploaded and viewed from your home computer. http://www.slide.com/ Picture slideshows Take pictures of your students or their work. Similar to youtube video sharing Video sharing video your students reviewing a book or performing a skit. web counters shows how many people have viewed your blog. Place a clock on your blog. Shows how much longer to an event. Create a playlist for music to automatically play on your blog. Embed MSOffice, PDFs, and other documents into your blog. (Permission slips, spelling words, worksheets) Flash toys and widgets such as countdown clocks, fortune cookie Explains how to make a scrolling text marquee (Have students names scrolling welcoming them to your blog) Shows book covers of your favorite books Rotating globe shows your location Area weather forecast Embed powerpoints into your blog Conduct a survey or poll Numerous gadgets to choose from

http://vimeo.com/ http://www.youtube.com/

http://www.free-counters.co.uk/ http://www.clocklink.com/index.php http://www.tickerfactory.com/ezticker/ticker_desi gner.php?type=4 http://www.mixpod.com/ http://www.scribd.com/

http://jellypages.com/flash-toys/ http://www.hypergurl.com/marquee.html

http://www.librarything.com/ http://www.revolvermaps.com/ http://www.weatherforyou.com/snapshots/ http://www.slideshare.net/ http://polldaddy.com/login/?msg=logged-out http://www.google.com/ig/directory?synd=open

22

Removing Navigation Bar and Disclaimer


Unfortunately, the feature that appears on the top of the blog is the navigation bar. By clicking on NEXT BLOG tab, a student will be directed to a random blog. To be certain that students do not end up accessing an unsuitable blog, the navigation bar will need to be removed.

In order to remove this bar you will need to go to the TEMPLATE tab and click on EDIT TEMPLATE located under all the template options. Please Note: If you are not careful editing the HTML template you will lose your template and have to start all over so it is imperative to be extra cautious when performing this edit: Your template edit will appear as follows:

Directly under

23

Directly under the Blogger Template style line you will type the EXACT (including exact number of spaces) code circled below
Blogger Template Style Name: Simple Designer: Josh Pterson URL: www. Noaesthetic.com ----------------------------------------------- */ #navbar-iframe { display: none !important; }

THIS IS THE CODE THAT WILL REMOVE THE NAVAGATION BAR IT NEEDS TO BE ENTERED EXACTLY IN THIS FORMAT (THERE ARE THREE SPACES BEFORE THE WORD DISPLAY.)

Remember to click no longer visible.

. Preview blog to insure navigation bar is

IT IS IMPORTANT TO REMEMBER THAT EVERY TIME YOU CHANGE YOUR TEMPLATE YOU WILL NEED TO PLACE THIS HTML CODE INTO THE HTML. There are many different features/gadgets you can choose to add to your blog. Such as favorite books, reading list, blogs you are following. All these features are linked to other peoples blogs who enjoy the same interested. If you add any of these features, you are putting the students at risk of being sent to an indecent blog. As stated earlier, it is suggested that you add the following disclaimer to the bottom of your blog once you are familiar with how to add a TEXT GADGET:
THIS PAGE LI N KS T O E XTER N AL WEB SI TES T HA T ARE NO T UNDER THE C O NTRO L OF DI ST RICT 204.

To add this disclaimer, you will go into the LAYOUT tab. Chose add a gadget from the bottom footer. Choose TEXT gadget And title the gadget DISCLAIMER. In the content box type the statement and click SAVE. Because you have placed this disclaimer in the footer of the blog, it will appear on ALL pages of the blog.

24

Your Profile
By clicking on the down arrow next to your email address you will be able to change/update your profile.

Click on Blogger Profile and choose the blue EDIT PROFILE tab.

You can upload a picture of yourself that will appear in the ABOUT ME section of your blog. Fill in the information you would like to share: Filling in information regarding your favorite books, music, etc may link your blog to another person who has your similar interests. To insure that a student doesnt navigate to a random blog, you may wish to leave those categories blank.

After updating your information click

25

Earning
At this time, this feature is not available. (It is a way of earning money for placing advertisements for products and services on your blog).

Stats
You can see who has been visiting your blog by clicking on the stats OVERVIEW. You can see how many times your posts/pages have been view by choosing POSTS. The tab labeled TRAFFIC SOURCES shows which sites were linked to your blog. AUDIENCE shows what type of browser and operating system was used to view your blog along with what counties your audience was from.

26

Comments

Any comments that are published, waiting moderation or are believed to be spam will be listed here.

Pages (Tabs)
The Pages option is where you can edit, revert to draft/delete or make new pages (tabs) for your blog. You can also choose where to position the tabs.

Top tabs: The tabs/pages will appear just below your header Side Links: The pages/tabs will be listed in your side bar and can be moved to any location on the side bar. Dont show: The tabs/pages will not show on your home page. To add content to your pages/tabs Just click EDIT and add content the same way you add a post.

27

Posts
To access the new post page from the overview click NEW POST To view posts that you have already published/drafted click on POSTS

To edit an older post, just place your cursor on the post title and edit/view/delete will appear. After revising, simply click PUBLISH to complete the post.

28

Creating A Post

NOTE: You can cut and paste text into this posting area. If you or a student has a typed document you can easily copy and paste the information into the blog without retyping the information. (Weekly spelling words/book reports)

Click this box to insert a picture/graphic

Posting is similar to typing in MS Word. Title your post and then click on box below to begin composing your post. The toolbar allows you to edit your font, place links, and insert pictures or videos directly into the body of your blog. You will also see the word LABELS on the right side under settings. This will help categorize your posts. For example, if you are posting about book reports you would place the words Book Report as a LABEL and if a viewer wishes to search for things pertaining to Book Reports on your blog- the search would only show the posts that were labeled book reports. This way the viewer doesnt need to go through all the posts to find what they were searching for. You can put multiple labels on a post. After typing in Label click DONE. Once you are finished composing your post you will choose PREVIEW, SAVE or PUBLISH POST.
Preview: To see what your post will look like when you publish it, you can choose preview and you will be shown how your post will appear. Save Now: will save what you typed; but will not be shown on the blog until published. You would use this feature if you were not done typing and had to stop, you wanted to review it prior to posting, or you wanted to add more information later. Publish Post: will post the typed information for everyone to view. (You can edit your post after it is published).

29

EXTRAS
How to Center Images and Text in Blogger Here is a quick and easy way to center images and text in your blogger blog. It is a simple piece of html code. In your post or widget box, click the Edit Html tab. There, find your content you wish to center and add the center html code before and after the image or text. Make sure the last 'center' has a '/' before it. <center>text or image here</center> How to make text scroll A great feature to use to have your students names scroll on your blog! The following is the html code that will allow text to scroll from bottom to top. In your html/java script gadget box, place this code: AFTER COPYING AND PASTING THE FOLLOWING IN TO THE HTML/JAVASCRIPT GADGET - REPLACE THE WORD STUDENT WITH AN ACTUAL NAME. CLICK SAVE AND YOUR STUDENTS NAMES WILL SCROLL ON YOUR BLOG! <marquee scrolldelay="10" direction="up" width="200" style="fontfamily: Verdana; font-size: 14pt" scrollamount="1" height="50"> <strong>WELCOME TO YOUR CLASS</strong><br /> <br /STUDENT /> STUDENT<br /> STUDENT<br /> STUDENT<br />STUDENT<br /> STUDENT<br /> <br />STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> <br />STUDENT<br /> STUDENT<br />STUDENT<br />STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br /> STUDENT<br />STUDENT <br />STUDENT <br STUDENT /><br /> </marquee>

30

Topic About Me Profile Adjust Width Advanced Settings (Designing) Backgrounds Blogger in Draft Comments Dashboard Disclaimer Earnings Making Money Gadget HTML/Java Script Gadget - Image Gadget Link List Gadget List Gadget Text Gadget Websites Gadgets General Information Google Account Header - Customizing Index Layout Layouts Naming Blog (URL address) Navigation Bar Removal Overview Pages /Tabs Inserting and editing Posting Creating, Editing, Viewing Profile Settings Basic Settings Posts and Comments Statistics of your blog Templates Tips

Page No. 20 13 14 11,12 6 27 5,7 20, 24 26 19,20 17 18 18 17 22 16 2 21 31 15 13 4 23,24 5,7 27 28,29 25 8 9 26 10,11 30

31

Das könnte Ihnen auch gefallen