Fungsi Scroll Pada Kategori / Label


Coba lihat ada sedikit perubahan wajah dari blog ini, semalam sedikit utak-atik template. Mumpung masih segar n ada waktu 30 menit nih tak arsipkan dulu yah supaya gak lupa.  Apa sih ??. Gini lho semalam saya coba Membuat Fungsi Scroll Pada Label atau Kategori dan Archives Blog, Sekarang ada scrollnya kan  jadi gak terlalu memanjang. Ngirit tempat deh ceritanya, terus juga ada nomor urutnya, kemarin gak ada hanya buton aja…. bikinnya simple tuh, mau tahu ? .. ini bukan nawarin tahu Sumedang lho.. tapi tahu Scroll.. hihi.
Yang saya lakukan pada template ini  untuk membuat Fungsi Scroll Pada Label atau Kategori , langkahnya seperti ini :
  1. Masuk dulu ke Acount Blogger atau Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Centang dulu tuh Expand Widget Templates
  4. Cari kode yang seperti ini  (kalau widget labelnya belum ada ya bikin dulu ) :
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<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:300px;'>
   <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>(<data:label.count/>)</span>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div> </div> </div>
  1. Untuk memudahkan mencarinya , pakai saja Ctrl +F , terus ketik kata apa yang dicari dikotak yang disediakan, lalu klik next. 
  2. saya cari kata Labels, karena di blognya namanya Labels, kalau nama widgetnya Kategori, ya cari Kategori. Ternyata kata labels itu banyak,  terus saja klik next sampai ketemu kode2 lain yg menyertainya. ketemu juga tuh.
  3. Kembali ke kode diatas, kalau sudah ketemu tinggal tambahkan saja kode yang warna merah itu untuk fungsi scrollnya.
  4. Angka 300px adalah tinggi kotak scroll itu, ini bisa disesuaikan.
  5. Mungkin saja diblog sobat kodenya beda,,  seperti diblog saya yang lain kodenya bukan  <div class='widget-content'> tapi :

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
gak apa asal penempatannya tepat, it’s ok.
  1. Untuk merubah buton menjadi  nomor urut , saya ganti tulisan warna biru itu <ul> menjadi <ol> dan </ul> menjadi </ol>
  2. Kalau sudah save template .
  3. Selesai.
Masih berkaitan, sebelumnya ada juga ttg membuat Fungsi Scroll Pada Komentar dan Fungsi Scroll pada Related Post  , kalau seneng kepada scroll menyecroll atau gulung menggulung..  halah.. bahasa apa ini , tapi silahkan aja di klik.


Selamat membuat Fungsi Scroll Pada Label atau Kategori , sedangkan untuk fungsi scroll pada Archives Blog.. tunggu posting selanjutnya .  Semoga bermanfaat.
»»  READMORE...

Membuat kotak blog roll


Anda pasti tau dengan Link,itu sebuah kata kunci yang menghubungkan Blog kita dengan Blog yang lain,tapi apa jadi nya ya kalau link itu udah berjumlah jutaan, mampusdeh , tentu link tersebut lebih mendominasi blog kita,jadi nya pengunjung blog hanya melihat kumpulan link-link tersebut yang mungkin panjangnya kayak gedung pencakat langit,hal ini dapat menyebabkan blog kita melorot, trus gimana dong trik untuk mengakalinya,
Tenang saja kali ini aku akan ngejelasin trik untuk menangkalnya

Untuk trik kali ini ada empat macam kotak blogroll yang akan kita buat,jadi terserah kamu mau pilih kotak Bloroll yang mana:
1. Kotak Blogroll Model Textarea

Contohnya saja seperti kotak blogroll seperti punyaku itu, itu yang terdapa ribuan link didalamnya
Nah begini cara membuatnya :
Pertama Log in ke accunt blogger mu lalu Pasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 300px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link4 <br />
#link
</div>

keterangan:
- Kode widht: 300px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu dapat merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Trus ganti tulisan "#link1,#link2, #link3, #link4 dst" dengan daftar link-link kamu, - Jika kamu pingin daftar link-linknya berjajar, maka kamu hilangkan saja kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar. Link-link atau isi didalam kotak ini akan bergerak/berjalan, secara vertikal ataupun secara horizontal.
Jika kamu ingin membuatnya begini caranya membuatnya:
Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="300" scrollamount= "2"

onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link4 <br />
#dst
</marquee>

Keterangan :
- Kode "up" menunjukan arah pergerakan, kamu bisa menggantinya dengan yang lain seperti down, left, right - Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "300" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll mu.

3. Kotak Blogroll Model Abjact

Akusih ngak tau Model kotak Blogroll nya(aku kasih aja Model Abjact,maaf ya) soal nya Link-link yang terdapat di kotak di ini disusun berurutan abjat(A-Z).tentu ini akan mempermudah pencarian terhadap suatu link,kamu ngak sabar ya ingin membuatnya Oke deh gini cara membuatnya

Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<center>
<table border="3" cellpadding="5" width="300" height="200"/>
<tr>
<td>
<div style="overflow: auto; height: 200px; width: 300px;">

<div align="center"><a href="http://www.blogkomputers.blogspot.com/" title="Kursus-Komputers">[ Administrator ]</a><br/><div/>


<div
align="left"><span style="font-weight: bold; color: red; font-size: 110%;">A</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<a href="Link4" title="">link#4</a><br/>
<a href="Etcâ¦" title="">link#5</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">B</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">C</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">D</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">E</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">F</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">G</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">H</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">I</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">J</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">K</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">L</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">M</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">N</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">O</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">P</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">Q</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">R</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">S</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">T</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 125%;">U</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">V</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">W</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">X</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">Y</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">Z</span><br/>
<a href="Link1" title="">link#1</a><br/>
<a href="Link2" title="">link#2</a><br/>
<a href="Link3" title="">link#3</a><br/>
<br/>


<span style="font-weight: bold; color: red; font-size: 110%;">Non Alphabet</span><br/>
<a href="" title="title">link#1</a><br/>
<a href="" title="title">link#2</a><br/>
<a href="" title="title">link#3</a><br/>
<br/>

</div></div></div></div></td>
</tr>
</table>
<center/>

Keterangan:
- Tulisan berwarna merah merupakan informasi mengenai blog mu right - Tulisan Weight dan height merupakan tinggi kotak bloggoll mu
- Tulisan Link1,Link2,Link3 merupakan URL yang akan dituju
- Tulisan Link#1,Link#2,Link#3 merupakan tampilan pada kotak blogroll


4. Kotak Blogroll Model Dropdown

Anda semua pasti telah tau dengan dropdown,tapi kalau belum tau,mari kita belajar lagi, ada salah satu fasilitas blogger yang menggunakan menu dropdown(Archive),yaitu menu yang berjajar dari atas ke bawah,cara ini tentu lebih menguntungkan,karna seberapa banyakpun link dapat ditampung dalam menu dropdown ini,dan tidak memakan tempat yang besar pada blog anda

Udah, kita tidak usah basa-basi lagi, sekarang bagaimana membuat menu dropdown yang didalamnya terdapat link-link,untuk membuatnya silahkan aja copy code dibawah ini

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Link Friends -</option>

<option value="http://blogkomputers.blogspot.com">Blog komputers</option>

<option value="http://arif-m.blogspot.com ">Arif</option>

<option value="http://blogscommunity.blogspot.com">Handaka</option>

<option value="http://andi-arifin.blogspot.com ">andi-arifin</option>

<option value="http://minangkabaublogger.blogspot.com ">Romi</option>

<option value="http://riska-robianto.blogspot.com ">BBB</option>

<option value="http://kolom-tutorial.blogspot.com ">kang rohman</option>

<option value="http://trik-tips.blogspot.com ">trik blog</option>

<option value="http://seputarinfokomputer.blogspot.com "> blog bang uul</option>

</select></form>


OK SELAMAT MENCOBA......
»»  READMORE...

Scroll Blog Archive


Beberapa hari yang lalu ada teman Uda yang menanyakan cara membuat Fungsi Scroll pada menu/arsip blog, Uda pun sudah menjawabnya silahkan lihat blog teman Uda yang menanyakan Hal tersebut disini. Tapi Uda pikir-pikir tidak ada salahnya untuk posting masalah ini ke blog, jadi bagi yang belum tau caranya bisa jadi tau deh. Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Pertama Kita harus membuat dulu Arsip Blog

• Masuk ke blogger
• Klik Tata Letak
• Klik Elemen Halaman
• Tambahkan sebuah elemen halaman=> Tambah elemen Arsip Blog
• Tapi Anda harus pilih gaya Hierarki


Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

• Setelah itu, klik Edit Html
• Beri tanda centang pada tulisan Expand Widget Template
• Lalu Anda cari kode seperti ini
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
Anda akan menemukan kode lengkapnya seperti 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 warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut
Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan kawan ganti agar sesuai dengan blog kawan
Lalu jangan lupa untuk menyimpannya=> Klik Simpan
»»  READMORE...

Blog Archive

Komentar

Popular Posts

Gunakan Sebaik - Baiknya