Turn Your Blog into a Book with Blog2Print

Blogger blogroll widget with screenshot thumbnails

Blogroll widget is a Blogger widget that offers a list of links of your blogs or any blogs you like 

Blogger have a blogroll widget that can be added from widgets section but this widget doesn`t look very nice so if you don`t like silly looking Blogger blogroll widget .

This blogroll widget is a better way to display a list of your favorite links  by showing a screenshot thumbnails of them which would be more attractive than the original bloggroll.

How to add blogroll widget with screenshot thumbnails to your blog ?


 go to Dashboard ►Templates ► Edit HTML

- Tick on expand widgets

 find the following code (press ctrl + F ) by searching for Blog1 or type='Blog'

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

 Add the following code above the found code

<b:widget id='LinkList987' mobile='yes' locked='false' title='Blogroll links list' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<div id='linklistthumb'>
<ul>
  <b:loop values='data:links' var='link'>
    <li>
      <a expr:href='data:link.target' target='_blank'>
        <img expr:src='&quot;http://www.bitpixels.com/getthumbnail?code=96168&amp;amp;size=100&amp;amp;url=&quot; + data:link.target'/>
      <div><data:link.name/></div>
      </a>
    </li>
  </b:loop>
</ul>
</div>
    <b:include name='quickedit'/>
  &lt;/div>
</b:includable>
</b:widget>

Now you need to put the blogroll widget styling in the css section

Go to Templates ►Customize ► advanced ► Add CSS then add the styling code of blogger Blogroll

#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: 5px;
  margin-top: 0px;
  margin-left: 0px;
  padding: 0px;
}
#linklistthumb ul li a:link,
#linklistthumb ul li a:visited {
  background: #f1f1f1;
  float: left;
  padding: 5px;
  font-size: 10px;
  text-align: center;
  display: block;
  overflow: hidden;
}
#linklistthumb ul li a:hover {
  background: #f9f9f9;
  color: #3F200C;
  text-decoration: none;
}
#linklistthumb ul li a img {
  border: 0px;
  float: none;
  display: block;
}

How to customize blogroll widget with screenshot thumbnails  ?


- you can change blogroll thumbnail sizes by changing the number in red available sizes are 100, 120, and 200 

 now go to ► layouts then edit the blogroll element as usual  add as many links as you like

New Blogger blogroll widget with screenshot thumbnails !

4/ 5 stars - "New Blogger blogroll widget with screenshot thumbnails !"

blogger hacks blogger widgets