Creating a Website Using Google Blogger
Total Page:16
File Type:pdf, Size:1020Kb
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: <b:include data='feedLinks' name='feedLinksBody'/> 3. Remove this line - Click Save Template 4. To remove Home, click in the top of the text box 5. Use Ctrl-F to open search box and search for home-link in your blogger template. Remove all the full lines beginning with <a class='home-link' from the template and save the changes. 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.