Search This Blog

Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, May 30, 2013

How to find a YouTube video on blogger.com

When you want to add a video to your blog post on http://www.blogger.com/ the search mechanism may not be able to find it on YouTube. For example try to search for string Cisco 1 - VXLAN and the Nexus 1000v with Han Yang.

Problem

How to add video from YouTube to your blog.

Solution
  • Add a random video from YouTube and copy the HTML code (example bellow)

    • <div class="separator" style="clear: both; text-align: center;"> <object width="320" height="266" class="BLOGGER-youtube-video" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data-thumbnail-src="http://img.youtube.com/vi/lU1GXLSVQOk/0.jpg"><param name="movie" value="http://youtube.googleapis.com/v/lU1GXLSVQOk&source=uds" /><param name="bgcolor" value="#FFFFFF" /><param name="allowFullScreen" value="true" /><embed width="320" height="266" src="http://youtube.googleapis.com/v/lU1GXLSVQOk&source=uds" type="application/x-shockwave-flash" allowfullscreen="true"></embed></object></div>

  • Find your video id on YouTube 


  • Replace in the HTML code the 3 places with old id lU1GXLSVQOk with the new ID l4JCBq1aXKE

Monday, March 7, 2011

How to highlight source text on your blog

There are many time situation when you would like to publish a piece of code that should have a special formatting for the viewer.

This blog describe one of the possible solution base on the javascript library: SyntaxHighlighter

To integrate it with your blog follow the description there:

Adding a Syntax Highlighter to your Blogger blog

The list of brushes (javascript scripts) that you have to copy to your blog design template depends on your needs. If you want to use these 2 like 'plain' and 'bash' brushes you have to extend the list.

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>

<script language='javascript'>

The list of all brushes can be found at Bundled Brushes.

To convert the 'raw html' into the 'escaped' html code you can use this convert tool .

A basic example use in your blog post can look like this:

<pre class="brush:text; highlight: [1];">
<h2>This is an example.</h2>
</pre>