Memasang marquee pada sidebar

Wednesday, March 17, 2010

Kalau sebelum ini saya tunjuk cara nak pasang scrolbar pada sidebar/pada widget,kali ini saya nak tunjuk 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'>
    
    <b:if cond='data:title != ""'>
      <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 + "_container"'>
        <ul expr:id='data:widget.instanceId + "_blogs"'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == "true"'>
                  <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 == "true"'>
                    <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 == "true"'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != ""'>
                        <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 == "true"'>
                    <b:if cond='data:showItemTitle == "true"'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
                    <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 > data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + "_show-all"' 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..Saya akan mambantu sedaya upaya dan secepat yang mungkin..

Untuk melihat demo marquee pada sidebar anda boleh klik DEMO dan lihat pada Celebs Blog

Selamat mencuba dan selamat beramal…