26 Okt 2011

Cara membuat blog scroll pada blog

Halo semua sobat blooger..........
saya akan menjelaskan Cara membuat blog scroll pada blog,
Karena Blog scroll mungkin adalah tampilan yang pas untuk meringkas tampilan blog agar tak terlihat berantakan....
Kita mulai saja ikuti langkah-langkahnya....

  • Login dulu ke Blooger
  • Lalu masuk ke Tata Letak
  • Klik Edit Html
  • Kalo sudah beri tanda centang pada tulisan Expand Widget Template
  • Lalu anda cari code ini :  
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>       
(bila susah mencari, tekan saja F3,masukan kode yang saya sebutkan).....
  • Lalu anda akan menjumpai kode seperti di bawah ini :                                                              <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
    <div style='overflow:auto; width:ancho; height:100px;'>
    <div id='ArchiveList'>
    <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
    <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
    <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
    <b:include data='data' name='menu'/>
    </b:if>
    </div>
    </div></div>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    <b:includable id='flat' var='data'>
    <ul>
    <b:loop values='data:data' var='i'>
    <li class='archivedate'>
    <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
    </li>
    </b:loop>
    </ul>
    </b:includable>
    <b:includable id='menu' var='data'>
    <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
    <option value=''><data:title/></option>
    <b:loop values='data:data' var='i'>
    <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
    </b:loop>
    </select>
    </b:includable>
    <b:includable id='interval' var='intervalData'>
    <b:loop values='data:intervalData' var='i'>
    <ul>
    <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
    <b:include data='i' name='toggle'/>
    <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
    <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
    <b:if cond='data:i.data'>
    <b:include data='i.data' name='interval'/>
    </b:if>
    <b:if cond='data:i.posts'>
    <b:include data='i.posts' name='posts'/>
    </b:if>
    </li>
    </ul>
    </b:loop>
    </b:includable>
    <b:includable id='toggle' var='interval'>
    <b:if cond='data:interval.toggleId'>
    <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
    <span class='zippy toggle-open'>&#9660; </span>
    </a>
    <b:else/>
    <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
    <span class='zippy'>
    <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
    &#9668;
    <b:else/>
    &#9658;
    </b:if>
    </span>
    </a>
    </b:if>
    </b:if>
    </b:includable>
    <b:includable id='posts' var='posts'>
    <ul class='posts'>
    <b:loop values='data:posts' var='i'>
    <li><a expr:href='data:i.url'><data:i.title/></a></li>
    </b:loop>
    </ul>
    </b:includable>
    </b:widget>
(kode yang berwarna MERAH dan KUNING adalah kode yang harus anda tambahkan,dan warna KUNING tebal untuk mengatur tingginya)

                                                       ***Selamat Mencoba**

Artikel Terkait:

Tidak ada komentar:

Posting Komentar