Tut Seven

Tutorial Seven: Posting You Tube Videos and Flickr Badges to Blogs: Explaining the process

Task One: Explain the step by step process required to embed You Tube videos into your Blog . Consider using screen captures to provide a visual representation of these steps. Choose a Video that you enjoy watching On the left copy the embedded box Go back into your blog Click new posting Copy the embedded link into the box Click save and then view blog

Task Two: Explain the step by step process required to embed a Flickr Badge into your Blog . Consider using screen captures to provide a visual representation of these steps. Sign in to Flickr with your Yahoo address In the your main page click tools under the heading help Down the left hand side click build a badge Step 1: What sort of badge would you like to use? There are two types of badge to choose from: HTML or Flash. You will be able to select to display things from your own collection, one of your groups, or everyone's uploads. You can also filter any of these options by a tag, if you wish. (The examples below are set to show content from the "Squared Circles" group pool.)) An HTML badge A Flash badge www.flickr.com More photos in squared circle www.flickr.com what is this? This is a Flickr badge showing public content from the squared circle group pool. Make your own badge here. Or, go back to your photostream Create your own Flickr badge 1. You chose a Flash badge (Change) 2. Choose what you'd like to display. 3. Choose colors for your badge. 4. Get the code to copy and paste into your website. Step 2: Choose content Choose the things you'd like to display on your badge from your photostream, or everyone's uploads. Yours All of your public photos and video Your public stuff tagged with: Only your public content will be included in your badge. Everyone's Everyone's public uploads All public photos or video tagged with: Only public content will be included in your badge. Or, go back and choose another type of badge Create your own Flickr badge 1. You chose a Flash badge (Change) 2. You chose to display public photos and/or videos from all Flickr members. (Change) 3. Choose colors for your badge. 4. Get the code to copy and paste into your website. Step 3: Colors Background <<< Border Links Text No background No border ( Restore factory defaults ) Click below to set the background color. (Note: This is only an example. The full preview is on the next page.) Preview www.flickr.com What is this? This is a Flickr badge showing recent public items from Flickr. Make your own badge here. Or, go back and change your selection... Create your own Flickr badge 1. You chose a Flash badge (Change) 2. You chose to display public photos and/or videos from all Flickr members. (Change) 3. Your colors Links Text (Change) 4. Get the code to copy and paste into your website. Your badge! www.flickr.com What is this? This is a Flickr badge showing recent public items from Flickr. Make your own badge here. This is the code you need: All you need to do is copy and paste this chunk of code into your website where you'd like your badge to appear. <!-- Start of Flickr Badge --> <style type="text/css"> .zg_div {margin:0px 5px 5px 0px; width:117px;} .zg_div_inner {border: solid 1px #000000; background-color:#ffffff; color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;} .zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;} </style> <script type="text/javascript"> zg_insert_badge = function() { var zg_bg_color = 'ffffff'; var zgi_url = 'http://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&'; document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="'+zgi_url+'" title="Flickr Badge"><\/iframe>'); if (document.getElementById) document.write('<div id="zg_whatlink"><a href="http://www.flickr.com/badge.gne" style="color:#3993ff;" onclick="zg_toggleWhat(); return false;">What is this?<\/a><\/div>'); } zg_toggleWhat = function() { document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block'; return false; } </script> <div class="zg_div"><div class="zg_div_inner"><a href="http://www.flickr.com">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><br /> <script type="text/javascript">zg_insert_badge();</script> <div id="zg_whatdiv">This is a Flickr badge showing recent <a href="http://www.flickr.com/photos/">public items from Flickr</a>. Make your own badge <a href="http://www.flickr.com/badge.gne">here</a>.</div> <script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script> </div> </div> <!-- End of Flickr Badge --> Copy this top box Click customise Make a new element in your blog Make a HTML/JAVA script Copy box into the area provided Save and view blog