Sunday, January 23, 2011

Decalcification Spot Removal With Mi Paste

YouTube, Dailymotion, etc.

It s does not act for a new widget, but a redesign of the widget "A list of links" that we will turn into a media player that will read a list of videos.
transformation consists in adapting the beacon \u0026lt;a> (link) so it opens in an embedded window (iframe) that we have taken care to place on top of the list of links.
You do not understand? It does not matter. The manual will help you better understand. : D

Step 1: Add the widget "A list of links"


As usual, the management table, go to Presentation / Page Elements and insert the widget as shown in the example image below.

1. Add a gadget

2. Select list of links

3. Configure the widget and save.

Step 2: Find the code


Now go to the page in the HTML editor of your blog and find the lines corresponding to the widget (Expand Widget Templates)

The original code widget:
\u0026lt;b: widget id = 'LinkList1' locked = 'false' title = 'video player' type = 'LinkList' ;>
\u0026lt;b:includable id='main'>

\u0026lt;b:if cond='data:title'> \u0026lt;h2> \u0026lt;data: title /> \u0026lt;/ h2> \u0026lt;/ b: if>

<div class='widget-content'>

<ul>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

<b:include name='quickedit'/>

</div>
\u0026lt;/ b: includable>
\u0026lt;/ b: widget>

Step 3: Modify the code


Replace the original code by it.

The new widget code:
\u0026lt;b: widget id = 'LinkList1' locked = 'false' title = 'video player' type = 'LinkList'>
\u0026lt;b:includable id='main'>

\u0026lt;b:if cond='data:title'> \u0026lt; ; h2> \u0026lt;data:title/> \u0026lt;/ h2> \u0026lt;/ b: if>

<div class='widget-content'>

<iframe frameborder='0' height=' 235 ' marginheight='0' marginwidth='0' name='videoplayer' src=' URL DE LA PREMIERE VIDEO ' width=' 280 '/>

<ul style='height:100px; overflow: auto;'>

<b:loop values='data:links' var='link'>
\u0026lt;li> \u0026lt;a expr:href='data:link.target' target='videoplayer'> \u0026lt;data:link.name/> \u0026lt;/ a> \u0026lt;/ li>
\u0026lt;/ b: loop>
\u0026lt;/ ul>
\u0026lt;b:includable name='quickedit'/>
\u0026lt;/ div>
\u0026lt;/ b : includable>
\u0026lt;/ b: widget>

Explanations:
• The tag \u0026lt;iframe> is the window that displays video. • Adjust the values
height (height) and width (width) to adapt the dimensions to your blog. • Insert
also the url of a video (more precisely in step 4)
• The list of link ( \u0026lt;ul> ) will have a visible height of 100 pixels. If the list exceeds this size, it will scroll ( overflow: auto; ).

Step 4: The video links


YouTube Video
http://www.youtube.com/v/ VIDEO ID

Playlist YouTube Videos
http://www.youtube.com/p/ ID PLAYLIST

Dailymotion Video
http://www.dailymotion.com/swf/video/ VIDEO ID

side note: You will find the IDs (identifiers) in URLs of videos.

Note that this trick works with any "object" can be read in a \u0026lt;iframe> . (Player Deezer, Google Video, Facebook, Netlog, MySpace, etc.)

To conclude this presentation, you can see a preview of this widget converted:

• On our demo blog -> http://bloggercodedemo.blogspot.com/

• On Blog Log . At Home Top 50 heading .

0 comments:

Post a Comment