Fauzi Blog

Bloglist Widget Blogspot adalah widget blogroll dapat digunakan untuk link exchange antar sesama blogger. Bloglist Widget Blogspot ini dapat dibuat menjadi lebih efisien dan powerfull bagi link exchange dengan sedikit modifikasi.

Image Source: crafterminds.com

Cara Membuat Halaman Bloglist Statis dapat menjadi alternatif untuk memaksimalkan fungsi blogroll dan agar Blog List menjadi lebih menarik, dapat dilakukan beberapa perubahan pada scriptnya.

Caranya, replace bloglist widget script dengan kode berikut:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h4 class='title'><data:title/></h4>
    </b:if>

    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == &quot;true&quot;'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
              <div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <img border='0' expr:alt='data:item.itemTitle' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:title='data:item.itemTitle' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                    <b:else/>
                        <div class='item-thumbnail'>
                            <a expr:href='data:item.itemUrl' target='_blank'>
                                <img border='0' expr:alt='data:item.itemTitle' expr:height='data:thumbnailSize' expr:title='data:item.itemTitle' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_dv3d_msb7T0ZgAL24_0e0AFzoaXIJOKrTPNxdadrQZP_9OGim0CNRbgHK9PRPhxI__bu-rXS79oM_ikabKWOxpXnccMVuNcccAzddYSbL20YW0a11xTXOUA1YAnLLcXdE4Rnd8tdvN1k/'/>
                            </a>
                        </div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' expr:title='data:item.itemTitle' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>

        <b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>

Dan beri style pada css, letakkan kode css ini diatas ]]></b:skin>

.blog-list-container .blog-content{float:left;margin:0 0 5px;text-indent:0;width:100%}
.blog-list-container .item-content{font-size:90%;height:95px;line-height:1.3em;overflow:hidden}
.blog-list-container .item-thumbnail{float:left;margin:2px 5px 5px}