Bloglist Widget Blogspot

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/AVvXsEhfC8VNfCBAlKK91hkeUPVR2X455ni9gbhGdWzZzzT3jovlGDrsyMDmWF-LdCNRFDBKkD5_Xvmrz0lMMTBmXLibqgLnvy9h2Q91-QjNJ5i5zq7x3-hjElZ2JucmdFHmgzzjPPcdPX6cPew4/'/>
                            </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}

Star Rating Widget Blogger

Star Rating Widget Blogger secara default dapat diterapkan menggunakan start rating default for blogspot melalui http://draft.blogger.com. Untuk memasang star rating widget ini dapat pula memanfaatkan widget yang disediakan oleh http://www.graddit.com dengan pilihan tampilan yang lebih bervariasi dan menarik.

Source: http://www.freetattoopicture.com

Default Star Rating Widget Blogger

Cara memasang rating bintang blogspot, sedikit lebih rumit :)

Langkah 1
Edit User Setting

Langkah 2
Activate Blogger Draft

Langkah 3
Edit Layout - Edit Posting Blog - Activate Default Star Rating For Blogger

Langkah 4
Jika Star Rating tidak terlihat, maka Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <span class='star-ratings'>
        <b:if cond='data:top.showStars'>
            <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>
      </b:if>

Animated Star Rating Widget Blogger

Cara memasang rating bintang untuk blogspot dengan menggunakan widget dari 3th party, tidak sulit :)

Langkah 1
Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
<div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if></b:if> 

Untuk Animated Star Rating Widget For Blogger ini, terdapat berbagai pilihan style, silahkan kunjungi:

Source: http://www.graddit.com/ratings-widget

Tutorial: http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html

Link Exchange Dengan Thumbnail - Thumbshot Blogger

Link Exchange Dengan Thumbnail - Thumbshot Website Untuk Blogger.

Berbagaimacam cara untuk menampilkan link exchange, namun jarang sekali yang disertakan dengan thumbshot/ thumbnail/ gambar mini dari link yang tertera :)

Dengan adanya thumbshot pada halaman blogroll blogger, tentunya akan terlihat sedikit berbeda pada tampilan dan terlihat menarik.  

Thums Up Icon By http://www.psdgraphics.com

Link Website Dan Blog Dengan Gambar Mini Screenshot Website

Cara membuat thumbshot atau thumbnail website pada blogspot, sangat mudah sekali;

Letakkan diatas </head> kode:

<script type="text/javascript" src="http://www.picoshot.com/pagepix.js"></script>

Kemudian, pada setiap bagian pada link-exchange, bubuhkan kode:

<script type="text/javascript">stw_pagepix('[url]', 'en');</script>

Dan hasilnya akan menjadi seperti ini:


Thumbshot ini disediakan gratis dan dengan fitur unlimite website thumbnails oleh:



Free Website Thumbnails provided by Picoshot