Creating a Website Using Google Blogger
1. Getting Ready to Use Blogger a. Create a Google email address and account by clicking on https://www.google.com/ then Sign In, then Create Account b. Fill in a few items in your Google + profile c. Study the section at the end of this document that defines a few terms we will use 2. Getting Ready to Create a Website a. Think about what you want your website to do b. What will be the titles of the pages you will have? c. What will go on the pages? 1. Create a folder for images that you will use – add some images (use Google Photos?) 2. Create a folder for text or articles you will use – add an article (use Google Drive?) d. Think about what your web address (URL) will be – like example.blogspot.com 3. Creating a Website a. Sign in to Google b. Enter Blogger (type Blogger in the address bar of your browser or click on the Google Apps icon in the upper right of a Google search page) – sign in c. Click on New Blog 1. Enter a Title for your blog – this text will be at the top of your web pages 2. Choose a blog address, or URL. This will be used by readers to view your blog. 3. Choose Picture Window template for now (see below for more on templates) 4. Click Create blog a. Choose Google + profile b. Click No Thanks to finding a domain name – we'll use the free one on blogspot c. Click Create Blog! d. The Blogger Dashboard will list your blogs - to manage a blog, click the blog’s title 5. Your new site is now established 6. Settings a. Basic 1. Edit the Description text box if you wish – this will be a 2nd line under the title 2. Do not buy a domain at this time 3. Set HTTPS to yes – adds security to your site b. Posts, comments and sharing 1. Set posts per page to 1, if main page is static Home page; else more than 1 2. Save settings c. Language, formatting 1. Set transliteration to Disabled 2. Set timezone to Mountain Time – Arizona 3. Save settings 4. Blogger Templates - Change the design of your blog – for laptop, tablet or desktop computer a. Select the blog to update b. In the left menu (the Dashboard), click Template c. Under “Live on blog," click Customize d. At the top, use the carousel to choose a template. Below the carousel, use the preview to see how your blog will appear e. Use the left menu to customize your background, adjust widths, layout, and other settings f. On the top right, click Apply to Blog to make your changes live g. To clear your changes, click Live on Blog
By Donald Ijams – October 18, 2016 - Page 1 5. Blogger Templates - Change the design of your blog – for mobile devices (smartphones) a. Select the blog to update. b. In the left menu, click Template. c. Under “Mobile,” click Customize mobile template options. d. Select the mobile template for your blog. You can also click Preview to see the template live on your blog. e. Click Save. 6. Change your Blog Layout a. Select the blog to update. b. In the left menu, select Layout 1. The layout of your blog is made up of gadgets. For example: header, blog archive, blog posts, and so on. The available boxes are controlled by your template. c. To change the layout of your blog, drag a gadget into its new location d. To change the settings of each gadget, on the lower right, click Edit, then Save e. On the top right, click Save arrangement 7. Home Page a. You will use one or more Posts as content for your Home page b. Select the blog to update c. In the upper left of your Dashboard, click on the pencil icon, to Create a New Post d. Add your title, text and pictures e. In the Post Settings menu at the right of the post page, choose Options and click on “Reader comments: Don't allow, hide existing” f. Click on Publish or Update to save changes. View your blog. 8. Add or Edit a Page a. Select the blog to update b. In the left menu, select Pages c. Click New Page 1. Add a page title and other information 2. Make updates to your page, as needed d. To edit a page 1. Under the page you want to edit, click Edit 2. Make updates to your page: 3. Click Save, Preview, or Publish a. Add text 1. Choose the blog to update 2. Edit a page or post 3. Type in the text you wish, or 4. Paste in the text from your clipboard 5. To publish your changes, click Update b. Add an image 1. Edit a page or post to add images 2. On the page or post Editor, put the cursor at location where the image is to go and click Insert image 3. Choose location/folder of image to be uploaded 4. Choose one or more images to upload 5. Click Add selected 6. When the image is on your page or post, click it to change the size, caption, or alignment on the page
By Donald Ijams – October 18, 2016 - Page 2 c. Add a link 1. Find the URL of the website that you wish to link to 2. Copy the full URL (example: http://neighsupport.net/) to your clipboard 3. In the edit screen for your post or page, highlight the text where the link will go 4. Click on the Link icon on the edit bar 5. Paste in the URL you have on your clipboard 6. Click on Open this link in a new window if you wish 7. Click OK d. Add a link to a file on Google Drive for your Blogger website 1. After logging into your Google account, open a new tab in your browser and click on the Google Apps icon in the upper right. 2. Click on the Google Drive icon, to open the screen showing what is contained on the disk space that Google makes available to your account. 3. You may make new folders on Drive as you wish and put files on the Drive by copy and paste from your computer or by dragging files from your local storage onto the Drive screen. This is where you can store pdf or other files for access by linking to your website. 4. You can control whether any given file is sharable with others as you choose. For the link to work, the file needs to have the "Anyone with link can view" turned on. To change the share status, select the file of interest and right click for Share or click on the Share icon above the file list. 5. To obtain a URL for any file on your Drive, click on the file and right click for Share or click on the Share icon above the file list. Copy the URL provided to your clipboard (this may happen automatically). 6. Back in Blogger, highlight the text for the link to your file on Drive and paste the URL from your clipboard into the place provided in the Link window. Click OK. View your blog and test out the link. e. Click Save, Preview, or Publish 9. To Adjust the Menu a. Select the blog to update. b. In the left menu, select Layout c. Find or add the Pages gadget d. Click on edit to make changes to the Menu content – add new pages as needed e. At the bottom, click Save f. To move the Menu, drag the Pages gadget to Cross-Column or Sidebar g. Click Save Arrangement 10. Optional a. To remove Subscribe to: Posts(Atom) or Home from bottom of web page b. In the left menu, click Template c. Under “Live on blog," click Edit HTML (edit changes will disappear if you change templates) 1. Click in the top of the text box 2. Use Ctrl-F to open search box and search for this line: By Donald Ijams – October 18, 2016 - Page 3 6. Sometimes the Ctrl-F search box does not work. A way around this is to carefully put all of the text in the Edit HTML window onto your clipboard and paste it into a text editor like Notepad and make your changes there. Then copy the revised total text block back into the Blogger Edit HTML window replacing what was there, and save template. d. To Remove Posted By, Date and other items at bottom of posts and pages 1. Click on Layout on left of Dashboard 2. Go down to Main where blog posts are shown and click on Edit 3. Uncheck whichever items you would like to remove 4. At the bottom, click on Save Terms Related to Using Blogger for Website Development 1. Blog – short for Weblog – a series of notes, comments, pictures or links in a section of a web page that are usually presented in reverse date order – most recent first. In our case, blog is synonymous with website. 2. Post – an entry into a blog 3. Template – a guide for placement of various sections for a web page – like a series of boxes into which different types of content can be placed 4. Gadget, Widget – a small function that is useful on a web page, put into one of the template boxes 5. HTML – Hyper Text Markup Language – a system for instructing a web browser on how to display content on a web page – typically opening and closing pairs (“tags”) that bracket text. Examples: a) - start a paragraph, before the text begins b)
- br for break - go to the next line, usually placed at the end of a line of text d)
- hr for horrizontal rule – add a line across the screen, to set off one section from another e) - a pair of tags used to set off one section of HTML from another f) - to bold some text g) - a pair of tags used to set up a link – example: Peter Howell Neighborhood h) More about HTML: http://www.w3schools.com/html/html_intro.asp 6. URL – Uniform Resource Locator – a web address – example: https://support.google.com/blogger/?hl=en#topic=3339243 7. CSS – Cascading Style Sheet – a system for controlling many aspects of how a web page appears – More: http://www.w3schools.com/css/css_intro.asp 8. DNS – Domain Name System - translates more readily memorized domain names to the numerical IP (internet protocol) addresses needed for the purpose of locating and identifying computer services 9. ISP - Internet Service Provider, is a business or organization that provides services for accessing and using the Internet including Internet access, Internet transit, domain name registration and web hosting. Users connect to the ISP through cable or telephone hard wire.
By Donald Ijams – October 18, 2016 - Page 4 Tips for Using Blogger as a Website
1. https://support.google.com/blogger/answer/1623800?hl=en
2. http://www.carrieloves.com/2014/03/how-to-make-your-blogger-blog-not-look-like-a-um- blogger-blog/
3. http://blogger-hints-and-tips.blogspot.com/2012/11/use-blogger-to-make-a-website.html
4. http://bloggerdiy.com/remove-home-link-blogger/
Practice Websites Using Blogger https://soazvalues.blogspot.com/ https://rosehilltucson.blogspot.com/ https://justicewatchtucson.blogspot.com/ https://dorothyoncamden.blogspot.com/
Real Websites Using Blogger https://peterhowellna.blogspot.com/ http://poets-square-neighborhood.blogspot.com/
By Donald Ijams – October 18, 2016 - Page 5