Fire Red Cheat Gpsphone

Widget List of links with Auto Image

Most proposed by Blogger widgets are modified from the html editor of your dashboard.
Today, we will transform the widget Links this widget Links Thumbnail (small picture).
careful however, this trick does not work with internal links to sites or blogs. So use links home. (Examples: rtlinfo.be, dhnet.be, blogconnexion.blogspot.com, etc.)

Step 1: Add the widget list of links "

In 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 gadget by adding a few links

4. Register and you will get a list of "classic". He just have to modify the code.

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 = 'Links with Thumbnails' type =' LinkList & # 39;>

<b:includable id='main'>



<b:if cond='data:title'><h2><data:title/></h2></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>
\u0026lt;/ b: loop>
\u0026lt;/ ul>
\u0026lt;b:includable name='quickedit'/>
\u0026lt;/ 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 = 'Links with Thumbnails' type = 'LinkList'>
\u0026lt;b:includable id='main'>
\u0026lt;b:if cond='data:title'> \u0026lt;h2> \u0026lt;data:title/> \u0026lt;/ h2> \u0026lt;/ b: if> \u0026lt;div
class='widget-content'>
\u0026lt;div id = & # 39; linklistthumb '>
\u0026lt;ul>
\u0026lt;b:loop values='data:links' var='link'>
\u0026lt;li>
\u0026lt;a expr:href='data:link.target' target='_blank'>
\u0026lt;img expr: src = '& quot; http://www.bitpixels.com/getthumbnail?code=44187&, size = 200 url = " & + data: link.target '/>
\u0026lt; div> \u0026lt;data:link.name/> \u0026lt;/ div>
\u0026lt;/ a>
\u0026lt;/ li>
\u0026lt;/ b: loop>
\u0026lt;/ ul>
\u0026lt;/ div>
\u0026lt;b:includable name='quickedit'/>
\u0026lt;/ div>
\u0026lt;/ b: includable>
\u0026lt;/ b: widget>

Explanations:
The new code is framed by a \u0026lt;div> tag with id "linklistthumb" in order to adjust formatting. The tag

\u0026lt;a> contains the element Taget = '_blank' to open link in a new window.

The thumbnail is represented by \u0026lt;img> . The inside of this tag which calls the service provided http://www.bitpixels.com/ thumbnails.

The image width is set at 200 pixels (in bold). Three values are accepted: 100, 120, 200.

Formatting The formatting depends on your model. It is possible to adjust the values and layout of each element (link name and picture) with a few lines of CSS that you will add (and adapter) from the builder of models (tab "advanced / add CSS" ) or directly into the code of your blog in the section reserved for this purpose.

The CSS code: #

linklistthumb {width: 100%; overflow: hidden; display: block;} #
linklistthumb ul {list-style: none; margin: 0px; padding: 0px;} #
linklistthumb ul li {list-style: none; float: left; color: # 333; margin: 0px; margin-bottom: 5px; padding: 0px;} #
linklistthumb ul li a: link, # linklistthumb ul li a: visited, # linklistthumb ul li p {background: # F1F1F1; width: 124px; height: 120px; float: left; padding: 5px; font-size: 10px; text-align: center; margin-right: 5px; display: block; overflow: hidden;} #
linklistthumb ul li a: hover {background: # f9f9f9; color: # 3F200C; text-decoration: none;} #
linklistthumb ul li img, # linklistthumb p ul li img {width: 124px; height: 93px; border: 0px; float: none; display: block;}

What gives:

And finally, finally, you can see a preview of this widget transformed: On our

Blog demo: http://bloggercodedemo.blogspot.com/ .

Or, at the home our section.