2012-09-16 FREE DOWNLOAD MOVIES TERBARU CARA BERITA GOOGLE INDOWEBSTER MoviesteR.info|FREE DOWNLOAD MOVIES FILM DAN KORAN BERITA CERITA

Scroll box adalah kotak yang berisi tulisan, gambar, link atau lainnya yang menggunkan fungsi scroll. Selain gambar dan tulisan dan link sobat juga dapat mengisi scroll box tersebut dengan kode script/html.
Kali ini saya akan berbagi cara memasang widget scroll box diblog untuk blogroll, Arsip blog, Label Blog dan Recent Comment. Ayo kita mulai.

Membuat/memasang widget scroll box untuk blogroll

Memasang scroll box sangat bermanfaat sekali untuk mempercantik blog agar lebih terlihat rapih dan juga bisa membatu membuat Linklist / blogroll agar panjang blogroll tersebut tidak membuat loading blog menjadi lambat. Caranya seperti berikut.

Step 1 : Masuk dashboard blogger.
Step 2 : Pilih Tata Letak >> Add Widget.
Step 3 : Copy kode dibawah dan Paste pada kolom widget tadi.

<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">
Isi Scroll Box
</div>

Step 4 : Ganti Isi Scroll Box dengan link blogroll yang ingin sobat masukan.

Contoh :

<div style="overflow:auto;width:300px;height:100px;padding:10px;border:1px solid #eee">

<a href="http://www.moviester.info/">Blogroll 1</a>

<br/>

<a href="http://www.moviester.info/">Blogroll 2</a>

<br/>

<a href="http://www.moviester.info/" >Blogroll 3</a>

<br/>

<a href="http://www.moviester.info/">Blogroll 4</a>

<br/></div>

Hasil :

Blogroll 1
Blogroll 2
Blogroll 3
Blogroll 4
Blogroll 5
Blogroll 6
Blogroll 7
Blogroll 8
Blogroll 9
Blogroll 10

Catatan :

*Ganti angka yang berwarna hijau sesuai selera sobat, dan lihat perbedaannya.

*Ganti tulisan yang berwarna biru dengan dashed atau doted, dan lihat perbedaannya.

*Ganti #eee dengan kode lain.

*Ganti link warna merah dengan list blogroll sobat.

Selesai.

Cara Membuat Scroll Box Widget Label

Step 1 : Login ke Blogger.

Step 2 : Halaman Dasbor (Dasboard).

Step 3 : Template (Design).

Step 4 : Klik Edit HTML

Step 5 : Backup Template dengan cara:

Step 6 : Klik Download Template Lengkap (Download Full Template).

Step 7 : Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.

Step 8 : Klik Expand Widget Template.

Step 9 : Cari kode dibawah:

<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Step 10 : Ganti kode di atas dengan kode baru di bawah ini.

<div expr:class='"widget-content " + data:display + "-label-widget-content"' style='height:100px;overflow:auto;'>

Step 11 : Klik Simpan Template *(Save Template).

Step 12 : Selesai.

Cara Membuat Widget Scroll Box Recent Comment

Step 1 : Login ke Blogger.

Step 2 : Halaman Dasbor (Dasboard).

Step 3 : Klik Template (Design).

Step 4 : Klik Edit HTML

Step 5 : Backup Template dengan cara:

Step 6 : Klik Download Template Lengkap (Download Full Template).

Step 7 : Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke kondisi sebelum modifikasi lakukan klik Browse kemudian Upload.

Step 8 : Klik Expand Widget Template.

Step 9 : Cari kode dibawah ini :

<b:widget id='Gadget1' locked='false' title='Recent Comments' atau title='Recent Comments'.

Gunakan Ctrl + F untuk lebih mempercepat pencarian kode.

Step 10 : Di sekitar kode <b:widget id='Gadget1' locked='false' title='Recent Comments'.... akan dijumpai kode lain yang seperti di bawah ini:

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'><data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Step 11 : Ganti kode diatas dengan kode berikut :

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'>
<div style='max-height:200px;overflow:auto;'><data:gadgetSnippet/></div>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Catatan : Untuk mengatur tinggi scroll box rubah nilai max-height:200px;.
Semakin besar akan semakin tinggi dan sebaliknya semakin kecil akan semakin pendek.
Dengan penambahan elemen DIV baru tersebut anda punya kesempatan untuk membuat beberapa modifikasi baru melalui kode CSS hanya dengan "menempelkan sebuah class atau id.

Step 11 : Simpan Template. Selesai

Step 12 : Lihat hasilnya

Cara membuat widget Scroll box untuk Arsip Blog

Step 1 : Login ke Blogger ( www.blogger.com )

Step 2 : Klik Rancangan/Template

Step 3 : Klik Edit HTML

Step 4 : Beri tanda centang pada tulisan " Expand Template Widget "

Step 5 : Cari kode HTML seperti ini <div id='ArchiveList'> supaya lebih mudah dalam pencariannya,tekan secara bersamaan di Keyboard Komputer sobat ctrl+f dan masukkan kodenya.

Step 6 : Copy kode html ini <div style='overflow:auto; width:ancho; height:100px;'> dan paste-kan tepat diatas/sebelum kode <div id='ArchiveList'>

Step 7 : Silahkan tambahkan kode </div> diatas kode <b:include name='quickedit'/>

Dan jika seluruh kodenya sudah diterapkan/dipasang maka akan tampak seperti di bawah ini :

<div style='overflow:auto; width:ancho; height:100px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>