Cara Membuat Fungsi Scroll pada Arsip Blog

Hai sobat blogger. Lama tidak bertemu lewat postingan membuat saya sangat kepingin sekali memberikan tips lagi kepada teman-teman di sini. Namun sebelumnya saya meninggalkan blog ini karena ada kesibukan lain di SINI.

Dengan ini saya akan kembali memberikan tips dan trik kepada sobat blogger. Kali ini saya ingin memberikan tips untuk membuat fungsi scroll pada Arsip blog. Seblumnya anda sudah tau kan yang namany arsip blog?. Jika belom, anda dapat melihatnya pada blog anda. Biasanya namanya iatu Archive atau Arsip Blog. Nah jika sobat blogger sudah kenal dan mempunyai Arsip Blog pada blog anda, silahkan setting dia (Arsip Blog) menjadi lebih menarik, yitu dengan membuat dalam bentuk fungsi scroll. 

Caranya bagaiman?, ikuti langkah berikut ini.

1. Login ke blogger dengan Akun anda

2. Pilih Rancangan

3. Kemudian, pilih Edit HTML

4. Silahkan cari kode seperti ini <div id='ArchiveList'> atau Archive

5.  Setelah ketemu, silahkan perhatikan barisan kode di sekitarnya

6.  akan terlihat kode seperti kode di bawah ini.

<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'/>

• Jika kode seperti di atas ada dalam kode script blog anda, tambahkan kode yang berwarna Merah dan lakukan pengeditan.

• Dan jika kode tersebut tidak ada dalam kode script blog anda, silahkan coba2 letakkan kode diatas di bawah kode yang anda cari tadi, kemudian lakukan PRATINJAU. Jangan langsung diSave.

7. Jika semua langkah di atas telah benar. Silahkan Simpan Template

Cara Membuat Kotak dalam Fungsi Scroll

Fungsi scroll adalah sebuah tolls untuk memperpendek sebuah kotak atau halaman. Dimana tolls ini dapat kita geser ke bawah atau ke atas. Untuk lebih jelasnya anda dapat lihat padaa layar monitor anda di sebelah kana paling pinggir. Atau lihat ganbar seperti di bawaini.

Lihat tanda panah yang berwarna merah di atas. Itu adalah merupakan fungsi scroll. Sejkarang teman-teman sudah tau kan seperti apa fungsi sroll itu?.
Untuk lebih jelas lagi silahkan kunjungi tulisan saya di SINI.
sekarang langsung saja kita ke pokok permasalahannya.

1. Login ke blogger dengan Akun anda
2. Pilihj Rancangan
3. Pilih Tambah Gadget
4. Silahkan pilih HTML/Javasript
5. Letakkan kode berikut ini di kotak scriptnya

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

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

Silahkan anda ganti tulisan yang berwarna merah dengan tulisan atau link yang akan anda letakkan di dalam kotak tersebut.
<br/> adalah kode HTML dari Enter, kode ini akan membuat link atau tulisan anda berurutan ke bawah.
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
6. Kemudian Save.

Cara Membuat Fungsi Scroll pada Archive Blog

Pada Umumnya sebuah blog/situs akan terlalu boros, jika postingannya banyak. Yang menyebabkan itu adalah Archive Blog kita, dimana saking banyaknya postingan kita maka archive blog kita akan memanjang ke bawah, kecuali kalau anda memakane tipe DropDown pada Archive Blog anda.
HAri ini saya mempunyai tips untuk menghemat tempat untuk Archive Blog anda, yaitu dengan membuat fungsi scroll pada bagian Archive Blog. Oke, jika sobat blogger berminat silahkan ikuti langkah-langkahnya.



Cara Membuat Fungsi Scroll pada Archive Blog

• Dari halaman dasbor, klik Tata Letak - Edit HTML.
• Beri tanda centrang pada Expand Template Widget.
• Kemudian cari kode type='BlogArchive' (gunakan Control F atau F3).
• Perhatikan kode yang ada di bawahnya, seperti ini: 

• <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
• Tambahkan perintah style='overflow:auto; height:200px' pada kode yang berwarna biru, sehingga menjadi seperti ini:
  
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content' style='overflow:auto; height:200px'>
  <div id='ArchiveList'>
• Atur ukuran tinggi (height)-nya sesuai kebutuhan.
• Simpan hasil editing ini

Ok, segitu aja sob. Semoga tidak bosen dengan bahasan yang itu-itu melulu, hehehe...
Selamat mencoba

Membuat Fungsi Scroll pada Area Komentar

Hai sobat blogger yang setia...berikut ini adalah artikel untuk kita yang menginginkan tampil dengan blog lebih hemat tempat. Artinya tidak terlalu panjang blog kita memakan tempat. Saat tulisan kita menarik, dan banyak komentar yang masuk, maka yang terjadi adalah kita harus memutar gerigi mouse sampai ke bawah sekali.

Tentunya kita menginginkan blog kita tampil dengan simple, tidak terlalu panjang atau lebar. Salah satu cara yang dapat kita lakukan adalah dengan membuat scroll pada area komentar blog kita. Dengan demikian blog kita akan lebih hemat tempat. Seseorang yang ingin berkomentar di postingan kita yang sudah banyak komentarnya tidak harus mengeser sampai ke bawah.


Cara Membuat Scroll di Area Komentar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode berikut ini <dl id='comments-block'>
6.  Setelah ketemu, taruh kode berikut ini di atasnya.

<div style='overflow:auto; width:ancho; height:400px;'>

7. Cari kode berikut ini </dl> dan taruh kode </div> di bawahnya. Untuk lebih lengkapnya seperti di bawah ini

<div style='overflow:auto; width:ancho; height:300px;'>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

</div>

8. Kode yang berwarna merah adalah kode yang kita tambahkan
9. Simpan Template jika sudah selesai

Cara Memasang "Fungsi Scroll" pada POstingan Blog

Berikut Tips untuk membuat fungsi Sroll pada potingan. Dimana tulisan kita dapat kita geser pada blog kita tadi.
Untuk menampilkannya mari kita Latih

Contoh Bentuk FS.Scroll:

Pada halaman postingan anda (Entri Baru) silahkan anda Taro kode dibawah ini:

<div style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-border-radius-bottomleft: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; background: blue url(####) no-repeat scroll 0 0 ; background-position: center ;border: 3px solid black; height: 200px; margin: 10px 0px; overflow: auto; padding: 10px; text-align: left; width:300px;">

TULISAN ANDA DI SINI

</div>

Atau Anda juga Bisa menggunakan kode berikut ini:

<div style="-moz-border-radius: 5px 5px 5px 5px; background-color: #ddf2fc; border: 1px solid rgb(204, 204, 204); height: 150px; margin: 7px 0px; overflow: auto; padding: 10px; text-align: left; width: auto;">

TULISAN ANDA DI SINI

</div>

Silahkan Anda Edit bentuk dari fungsi Scrollnya.
Keterangan:

1. Untuk tulisan ####, silahkan anda ganti dengan bacground yang anda punya.
2. Tulisan center adalah posisi gambar background anda. 
3. Untuk tulisan yang berwarna hijau adalah ukuran dari kotak fungsi scroll nya.
4. Left merupakan perataan tulsan anda

Selain pada postingan, anda juga dapat menggunakan fungsi scroll ini pada sidebar blog anda.