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 .
• On our demo blog -> http://bloggercodedemo.blogspot.com/
• On Blog Log . At Home Top 50 heading .
0 comments:
Post a Comment