Buat sidebar widget bergerak-gerak

Kali ai nak tunjuk cara nak pasang cara untuk memasang marque pada side bar widget korang..Untuk para blogger yang suka mencantikkan blog,boleh lah mencuba tips ini.

Step 1:

Login pada akaun blogger korang

Step 2:

Klik pada dashboard –> Layout –> Edit Html

Step 3:

Backup template korang terlebih dahulu dengan  klik pada “Download Full  Template”

Step 4:

Klik pada kotak expand

Step 5:

Katakan korang nak pasang marquee pada bloglist anda

Search @ ctrl+F “Bloglist”

Step 6:

<marquee align='not' behavior='scroll' direction='up' height='150' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='5' width='200'>

Copy code ini dan paste betul-betul diatas

<div class='widget-content'>

Step7:

Copy </marquee> dan paste

diantara </div> dan </b:if>

Code template korang akan kelihatan seperti dibawah:

<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <div id='blog-list-title'>
        <h2 class='title'><data:title/></h2>
      </div>
    </b:if>
    <marquee align='not' behavior='scroll' direction='up' height='300' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='1' scrolldelay='10' width='200'>     <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.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></marquee>
  </b:if>
  </b:includable>
</b:widget>

Step 8:

Save Template

Okay,itu saja..mudah kan…semoga korang berjaya dan kalau ada masalah untuk tips ini ,jangan malu-malu untuk tinggalkan komen di bawah..Ai akan mambantu sedaya yang boleh..

Korang boleh tengok demo kat dalam blog ai kat bawah sekali area Celebs Blog