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'>
    <!-- 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..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…

Blog Widget by LinkWithin

1 comments:

shafiq08 said...

thanks for the info.. =)


http://belogbagus.blogspot.com/

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))
Leave Your Comment

 

Ratuhati Kami

  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith
  • Harith

IslaMy

© Copyright 2010-2011 KITA SEMUA SAMA All Rights Reserved.
| Published by LoveJurnal | Powered by Blogger.com.