Ngiring

Minggu, 22 Juli 2012

Membuat scroll untuk list blog temn atau daftar blog yang kita ikutin


saya mau mencoba berbagi cara membuat scroll untuk list blog temn atau daftar blog yang kita ikutin
ok langsung saja pertama yg jelas siapkan gadget daftar blog nya
  1. Login ke blogger dengan ID sobat tentunya.
  2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.


tingal tambahkan kalu dah selesai save
langsung ketahat selanjutnya
  1. contoh nama daftar blog nya “ List Blog Saya”.
  2. Sekarang tuju ke Edit HTML.
  3. Klik Expand Template Widgets.
  4. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “List Blog Saya”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.


 














sekarang kita ke penambahan scripnya

  1. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat. 
<b:widget id='BlogList2' locked='false' title='List Blog Sahabat' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='title'><data:title/></h2>
    </b:if>

    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>
        <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.blogUrl' target='_blank'>
                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </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' 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>
 </div>
 
 Jangan lupa Simpan Template.
Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah
<div class='widget-content'>
bukan seperti yang ada di blog saya yaitu :
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 
yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.
NB:cara ini juga bisa kita paki untuk wigdet yang lainya , cara di atas sudah saya caba dan berhasil seperti yang terpasang di widget saya