Customizing your edublog with widgets and themes

Intermediate ICT Skills: Communicate & Collaborate Creating a blog part 4 Customising your blog Themes, Headers, Widgets

Intermediate ICT Skills: Communicate & Collaborate Creating a blog: Making it look good! Outcomes By the end of this e-torial, you will be able to:  Change the look and feel of your blog using themes  Create and upload a blog banner  Inserting widgets Tools This e-torial make use of the following programmes or tools:  Browser: Internet Explorer, Firefox…  A blogging platform: Edublogs

Intermediate ICT Skills: Communicate & Collaborate Index  Before you start  Signing into your dashboard  Choosing and activating a new theme  Modifying your theme header  Uploading a new theme header  “Widgetising” your sidebar  Inserting interactive widgets  Customising widgets  Inserting a RSS feed widget  Activating your Plug-in widget pack  Adding the ClustrMap widget  Adding the Delicious widget  Adding the Twitter widget  Adding the Flickr widget  Embedding external widgets  Self assessment rubric

Intermediate ICT Skills: Communicate & Collaborate Before you create your blog…. Action plan If you have not done so before, first work through the previous blogging e-torials: •What is your blog going to be about? •School? Personal? Organisational?  Why and What of blogging Purpose •Who is your audience? Learners? Parents  The anatomy of a blog  Setting up your blog in •What posts have to be included? Edublogs •Ideas Folder •Look for opportunities. Ideas So this means that you….  Already have an Edublog •Where are you going to create it? •Choose a theme  Have created pages for your •Insert feeds, widgets, interactivity Create blog  Have done the odd blogpost.. •Update regularly •Look after comments Maintain So are you ready to customize your blog to support the focus of what your blog is all about?

Intermediate ICT Skills: Communicate & Collaborate Sign into your new blog dashboard There are 3 ways to sign  Go to www.edublogs.org into your blog: Go to your blog and log in with your http://myusername. username and edublogs.org and sign in password using the Meta data widget  If you are already signed into your blog, you can just click on the, Edit this link on any of your blog posts. You will be logged into your dashboard, where everything happens!

Intermediate ICT Skills: Communicate & Collaborate Choosing a new theme Blog Themes provides blogs There are over 90 with a distinctive “look and themes. How do I feel”. A theme also determines: choose?  How many columns & sidebars (1 or 2)  If you can insert widgets Pick a theme that  If you can upload your own allows: 2 columns, 1 sidebar header banner  Custom headers right, No custom header  Widgets How many columns will I need?  If you are going to have a lot of widgets, and want lots of categories, pages links and interactive elements, choose 3 columns  If you want a more clear sophisticated look, choose 2 columns It your choose 3 columns, you will have to stick to 3 column themes in future……

Intermediate ICT Skills: Communicate & Collaborate Activating a new theme Can I change my theme often?  Click on Design   Themes  Pick a theme!  Click on the theme picture or link  Visit your site to see if you like the theme, otherwise repeat the procedure till you are happy with your new theme! A theme gives your blog a brand, so do not change it too often!

Intermediate ICT Skills: Communicate & Collaborate Modifying your theme header  Click on Design   Custom Image Header  You can hide the text  You can change the colour of the current header text  Save changes If you feel like a total header change, you will have to upload a new banner picture…

Intermediate ICT Skills: Communicate & Collaborate Uploading a new theme header  Click on Design   Custom Image Header  Make sure that the picture you are going to use has the right dimensions, if not, it will be cropped!  Browse to where you have saved the image  Upload Click here to open video in Youtube.com, pause to practise! It is a good idea to first create your picture and save it in the right dimensions!

Intermediate ICT Skills: Communicate & Collaborate Uploading a new theme header You will see your picture with the part that will be used lit up! You can move it to where your header text will be the most visible Crop your header Try to pick an image that has an area where you can see the blog title easily

Intermediate ICT Skills: Communicate & Collaborate Customizing your sidebar The sidebar of your blog allows you to “mash” and embed lots of interactive widgets and feeds from all over the internet! A widget is piece of code that makes it possible to view web elements in different places across the internet.

Intermediate ICT Skills: Communicate & Collaborate The sidebar Essentials widgets Some essential widgets to choose from  Recent Posts  Tell visitors what you have blogged about recently  Blogroll (links)  A link list to your favourite blog writers blogs  Categories  Divides your posts into more manageable “folders”  Search window Visitors can search for anything  Meta data (have to have this in your blogposts! one!)  Post archives - Links to past  Allows you to log into your posts blog dashboard  Subscription option –Get a  Link to your blog feeds RSS following Don’t overcrowd you sidebars!

Intermediate ICT Skills: Communicate & Collaborate Inserting interactive widgets How do I add widgets? Sign into your dashboard!  Click on Design   Widgets  Click on Add next to provided widget that you want to insert  Drag the widget into the correct position on the right hand side  Remember to save your changes Click here to open video in Youtube.com pause to practise!

Intermediate ICT Skills: Communicate & Collaborate Customising widgets Some widgets allow you to edit the way they display and what they display Sign into your dashboard!  Click on Design   Widgets  Click on Edit link on the widget button on the right  Complete the edit form  Remember to save your changes Various widget buttons will give you different options. Eg in the Category widget you can give it a different name, and choose if you want it as a drop down menu or link list. You can also choose to see how many posts per category item

Intermediate ICT Skills: Communicate & Collaborate Inserting a RSS feed widget First get the RSS feed by going to the site/blog that you want to “feed” from!!  Look for and click on the feed icon  Copy the Url address (HighlightCtrl+C on your keyboard)  Sign into your dashboard and go to widgets  Add the RSS widget  Paste the Url (right-click paste) Click here to open video in player A RSS feed is a frequently updated stream of news or updates to a site/blog that can be embedded into any website or blog using a widget or read using a feed reader. It can keep a site looking “fresh” with automatically updated content of your choice!

Intermediate ICT Skills: Communicate & Collaborate Activating your Plug-in widget pack Edublogs comes with a Plugin- widget pack that makes it easy to embed external sites’ widgets into your blog:  Sign into your dashboard  On the top click on Plugins  Activate You have to register with the external sites before you add the widgets to your blog eg Delicious, Clustrmaps, Twitter and Flickr.

Intermediate ICT Skills: Communicate & Collaborate Adding the ClustrMap widget To add ClustrMaps to your blog: ClustrMaps give  Dashboard DesignWidgets you a global  Click on Edit link on the widget picture of who is button on the right visiting your site!  The form should have been filled in for you already!  Remember to save your changes ClustrMaps is a “must-have” widget for class and student blogs because it reminds students that they are part of a global voice and demonstrates how interconnected we all are. (Sue Waters)

Intermediate ICT Skills: Communicate & Collaborate Adding the Delicious widget Delicious is a social bookmarking To add Delicious to your blog:  Work though the Delicious tutorial platform and the last few resources that you bookmarked will and sign up for a Delicious account  Dashboard  Design  Widgets automatically display on your blog if  Add the Delicious widget you add this widget!  Click on Edit link on the widget button on the right  Fill in your Delicious username mydelicioususername  Complete the no of links to want to show  If you want to restrict it to only one tag, fill in that tag Your Delicious widget can keep your blog visitors up to date with new resources!

Intermediate ICT Skills: Communicate & Collaborate Adding the Twitter widget Twitter is a micro-blogging system where you give a status update and create a personal learning network! To add Twitter to your blog:  Work though the Twitter tutorial and sign up for a Twitter account  Dashboard  Design  Widgets  Add the Twitter widget twitterusername  Click on Edit link on the widget button on the right  Fill in your Twitter username  Complete the no of tweets to want to show  Save Changes Your Twitter widget can keep your blog visitors up to date with what you are doing and add more people to your network

Intermediate ICT Skills: Communicate & Collaborate Adding the Flickr widget Flickr is a photo sharing site, where To add a Flickr photo you can store your pictures. A widget stream to your blog:  Register for a Flickr automatically pulls in photos from your uploaded photo collection. account (Yahoo account)  Go to your photo-stream page. (Your landing page)  Scroll down to bottom and copy your feed url (Right-click on RSS Latest Copy)  Go to your blog dashboard  Design  Widgets  Add the Flickr widget  Click on Edit and complete  Paste (Right-click Paste) your RSS url –Save

Intermediate ICT Skills: Communicate & Collaborate External widgets There are a myriad of interesting widgets available for use from the internet, which you can embed in your blog! It consist of a piece of code which you can paste into a text box or html page….and Voila!!! A few widget collections (or you can create your own) can be found at:  Widgetbox.com  Springwidgets  Widgipedia.com  See delicious tag for widgets Keep your eyes open for widgets on your favourite sites!

Intermediate ICT Skills: Communicate & Collaborate Inserting external widgets Say… I want to insert a quotes widget….  Go to Widgetbox.com  Search for a topic of your choice Pick a widget and click on it….   Customize it  Click on the embed icon  Click on the embed code and Copy  Go to your blog dashboard Design  Widgets Add Text widget Edit Paste Save Click here to open video in player  View your blog! Keep your eyes open for widgets on your favourite sites!

Intermediate ICT Skills: Communicate & Collaborate Self assessment Rubric Assess your level of skill: 1 MMMmmm still need more thought/practice; 2 Getting there! 3 Cool- No problems!

Intermediate ICT Skills: Communicate & Collaborate About this Presentation information This e-torial was developed by maggiev for the Department of Education for use by subject advisors, teachers and learners It forms part of a online learning pathway and is a self study tutorial  Part 1: Blog: What? Why?  Creating a blog  Part 2:The anatomy of a blog  Part 3: Registering for your blog and creating posts and pages  Part 4: Customizing your blog  Part 5: Maintaining your blog All e-torials can be found on the For more blogging resources, see: Thutong portal: http://groups.diigo.com/groups/blogging www.thutong.org.za 101

http://miketemple123.edublogs.org	1315
http://mrmaloney.edublogs.org	65
http://armandonuestroblog.blogspot.com.ar	36
http://amsroom8.edublogs.org	19
http://www.slideshare.net	19
http://armandonuestroblog.blogspot.com	4
http://translate.googleusercontent.com	3
http://webcache.googleusercontent.com	2
http://mrmaloney.posterous.com	1
http://paper.li	1
http://stevedembo3.edublogs.org	1
http://attheiceconference.edublogs.org	1
http://feeds.feedburner.com	1

Customizing your edublog with widgets and themes

by Maggie Verster on Feb 09, 2009

Accessibility

Categories

Upload Details

Usage Rights

13 Embeds 1,468

Statistics

Customizing your edublog with widgets and themes Presentation Transcript