Garis Pembatas Antar Item pada BlogList

Sebenarnya pada tutorial Widget dengan Scrollbar pun sudah membuktikan bahwa widget bawaan blogspot bisa kita modifikasi. Nah sekarang saya ingin membuat garis pembatas atau pemisah antara satu item dengan item lainnya.

Berikut saya kasih contoh cara bikin Garis Pembatas Antar Item pada BlogList dengan title widget 10 Blog Kujang.

1. Login ke dasbor 
2. Pilih Template ==> Edit HTML => Lanjutkan  dan beri tanda centang Expand Template Widget
3. Cari dengan kata kunci title widget, 10 Blog Kujang.
4. Bila sudah ketemu copy satu block dari tag <b:widget  ,,,> sampai dengan  </b:widget>
   
   

   1:  <b:widget id='BlogList1' locked='false' title='10 Blog Kujang' type='BlogList'>  
   2:   <b:includable id='main'>  
   3:    <b:if cond='data:title != ""'>  
   4:     <h2 class='title'>  
   5:      <data:title />  
   6:     </h2>  
   7:    </b:if>  
   8:    <div class='widget-content'  
   9:    style='overflow:auto; height:300px'>  
   10:     <div class='blog-list-container'  
   11:     expr:id='data:widget.instanceId + "_container"'>  
   12:      <ul expr:id='data:widget.instanceId + "_blogs"'>  
   13:       <b:loop values='data:items' var='item'>  
   14:        <li expr:style='data:item.displayStyle;'>  
   15:         <div class='blog-icon'>  
   16:          <b:if cond='data:showIcon == "true"'>  
   17:           <input expr:value='data:item.blogIconUrl'  
   18:           type='hidden' />  
   19:          </b:if>  
   20:         </div>  
   21:         <div class='blog-content'>  
   22:          <div class='blog-title'>  
   23:           <a expr:href='data:item.blogUrl' target='_blank'>  
   24:            <data:item.blogTitle />  
   25:           </a>  
   26:          </div>  
   27:          <div class='item-content'>  
   28:           <b:if cond='data:showItemThumbnail == "true"'>  
   29:            <b:if cond='data:item.itemThumbnail'>  
   30:             <div class='item-thumbnail'>  
   31:              <a expr:href='data:item.blogUrl'  
   32:              target='_blank'>  
   33:               <img alt='' border='0'  
   34:               expr:height='data:item.itemThumbnail.height'  
   35:               expr:src='data:item.itemThumbnail.url'  
   36:               expr:width='data:item.itemThumbnail.width' />  
   37:              </a>  
   38:             </div>  
   39:            </b:if>  
   40:           </b:if>  
   41:           <b:if cond='data:showItemTitle == "true"'>  
   42:            <span class='item-title'>  
   43:             <b:if cond='data:item.itemUrl != ""'>  
   44:              <a expr:href='data:item.itemUrl'  
   45:              target='_blank'>  
   46:               <data:item.itemTitle />  
   47:              </a>  
   48:              <b:else />  
   49:              <data:item.itemTitle />  
   50:             </b:if>  
   51:            </span>  
   52:           </b:if>  
   53:           <b:if cond='data:showItemSnippet == "true"'>  
   54:            <b:if cond='data:showItemTitle == "true"'>  
   55:            -</b:if>  
   56:            <span class='item-snippet'>  
   57:             <data:item.itemSnippet />  
   58:            </span>  
   59:           </b:if>  
   60:           <b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>  
   61:            <div class='item-time'>  
   62:             <data:item.timePeriodSinceLastUpdate />  
   63:            </div>  
   64:           </b:if>  
   65:          </div>  
   66:         </div>  
   67:         <div style='clear: both' />  
   68:        </li>  
   69:       </b:loop>  
   70:      </ul>  
   71:      <b:if cond='data:numItemsToShow != 0'>  
   72:       <b:if cond='data:totalItems &gt; data:numItemsToShow'>  
   73:        <div class='show-option'>  
   74:         <span expr:id='data:widget.instanceId + "_show-n"'  
   75:         style='display: none;'>  
   76:          <a href='javascript:void(0)'  
   77:          onclick='return false;'>  
   78:           <data:showNText />  
   79:          </a>  
   80:         </span>  
   81:         <span expr:id='data:widget.instanceId + "_show-all"'  
   82:         style='margin-left: 5px;'>  
   83:          <a href='javascript:void(0)'  
   84:          onclick='return false;'>  
   85:           <data:showAllText />  
   86:          </a>  
   87:         </span>  
   88:        </div>  
   89:       </b:if>  
   90:      </b:if>  
   91:     </div>  
   92:    </div>  
   93:   </b:includable>  
   94:  </b:widget>  

   
   
5. Paste pade notepad atau text editor lainnya, tujuannya untuk mempermudah pengeditan.
6. Sekarang kita kerja di notepad, cari tag line <div style='clear: both'/> lihat dech pada contoh code di atas pada baris ke 67.
7. Ganti tag line tersebut dengan code berikut
   
   
   
   <div style='clear: both;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI6yvjNn09L5e22fWSrW2iBIDyeEhJs_TTKCuMXkcr7oPAAodltvyQ-cXNj7TkhkK_ywfmd-aZj8lHHdhwEdk6XpL0qJahQjeBEUafk355c1lQi9dyDLdjw5zTlDTXGCV7rxc-bnivTkxh/s1600/post4.jpg) repeat-x; border:0; margin:0 0 0; padding:5px;' />
   
   
8. Copy dari notepad dan overwrite di template anda.
9. Simpan template dan lihat hasilnya ,,,,

Selamat mencoba ,,,,

Read more: http://www.sakahayang.com/2012/04/garis-pembatas-antar-item-pada-bloglist.html#ixzz2iDemssnB