Menambahkan Fungsi Scroll pada Elemen Halaman

membuat fungsi scroll pada semua widget

Untuk membuat fungsi scroll pada elemen halaman /widget, setidaknya kamu harus mengerti wujud kerangka widget standar blogspot secara umum terlebih dahulu. Bentuk widget blogspot secara umum dapat digambarkan seperti ini: 

<b:widget id='HTML1' locked='false' title='Pengikut' type='HTML'> 
     <b:includable id='main'> 
          <b:if cond='data:title != &quot;&quot;'> 
               <h2 class='title'><data:title/></h2> 
          </b:if> 
          <div class='widget-content'> 
               ... 
               ... 
               ... 
          </div> 
          <b:include name='quickedit'/> 
     </b:includable> 
</b:widget>

Berikut ini adalah keterangannya secara singkat:

  • id='HTML1' menunjukkan bahwa widget tersebut memiliki ID "HTML1". Kamu sangat membutuhkan ID ini untuk menentukan elemen mana yang akan diberi fungsi scroll.
  • Kode <h2 class='title'><data:title/></h2> mewakili judul widget, ciri ini sangat mudah dilihat mengingat peraturan resmi sebuah elemen judul harus selalu diapit oleh tag heading (dalam hal ini adalah <h2>)
  • <div class='widget-content'> ... </div> adalah elemen yang mewakili isi widget. Nah, elemen inilah yang nantinya akan kita jadikan sebagai objek sasaran.
  • <b:include name='quickedit'/> mewakili ikon wrench yang biasa kamu gunakan sebagai jalan pintas untuk mengedit elemen halaman dari halaman blog secara langsung.


Cara menerapkan fungsi scroll pada elemen halaman sebenarnya sangatlah sederhana. Kita hanya menggunakan deklarasi overflow:auto; dan menentukan tinggi maksimal sebuah konten widget secara bebas. Dalam CSS dapat dituliskan seperti ini: 

#ID-WIDGET .widget-content {
  max-height:200px;
  overflow:auto;
}

Kamu tidak perlu mengecek Expand Template Widget untuk melakukan kegiatan dahsyat ini, karena di sini kamu telah menggunakan metode penerapan CSS secara tidak langsung yang notabene lebih aman. Letakkan kode CSS tersebut tepat di atas kode ]]></b:skin> atau </style>.
Ganti ID-WIDGET dengan ID widget yang kamu kehendaki untuk diberi fungsi scroll.

Sebagai contoh, kamu ingin menerapkan fungsi scroll ini pada elemen halaman Label seperti tampak pada gambar di atas, maka kamu harus mengganti kode ID-WIDGET dengan Label1 misalnya (tergantung dari ID widget masing-masing).
ID widget di depan kode .widget-content berfungsi untuk membatasi elemen mana yang akan terkena deklarasi overflow:auto;. Jika kamu ingin menerapkan fungsi scroll pada lebih dari satu elemen halaman dapat kamu tuliskan seperti ini: 

#Label1 .widget-content,
#BlogArchive1 .widget-content,
#Followers1 .widget-content {
  max-height:200px;
  overflow:auto;
}

Tentukan tinggi maksimal konten widget dengan mengubah value dari properti max-height.
Klik Simpan Template.

Komentar

Posting Komentar

Postingan populer dari blog ini

Demo for Blogger Customized Native Functional Threaded Commenting System

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum . Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica , quam nunc putamus parum claram, ant...
Baca selengkapnya

StackOverflow Like Pagination

Gambar
Some while ago, I built a pagination system in PHP to display a long list of pagination links. The pagination system showed at most 5 links at a time and additional links were represented by ellipsis (...). However, I was not able to deal with certain edge cases, so I drew some inspiration from the pagination system used on StackOverflow to tackle them. This is what the end result looked like: The first and last page links are always visible The previous and next page links (numeric ones) are always visible At most n page links excluding first and last page links are visible; rest are represented by ellipsis The pagination for first and last n - 1 pages is handled a bit differently Complete PHP source code below. DEMO DISINI Pagination Function <?php /** * Displays pagination links based on given parameters * * @param int $currentPage - current page * @param int $itemCount - number of items to paginate, used to calculate total number of pages * @param int $items...
Baca selengkapnya

AdSense Responsive Ads - Why Not?

Gambar
Google telah secara konstan menambahkan fitur-fitur baru ke AdSense, menawarkan penerbit lebih banyak kontrol atas bagaimana iklan ditampilkan di situs web mereka. Berikut adalah beberapa fitur yang terkait dengan penerapan kode iklan yang diluncurkan selama 12 bulan terakhir: Introduction of Asynchronous Ads — July 2013 Introduction of Responsive Ads — July 2013 Introduction of Custom-Sized Ads — December 2013 At this moment, publishers can choose from standard, responsive and custom-sized ad units when creating one. If you have not chosen the ad code implementation method or you are looking forward to change it, I suggest going for responsive ads. The Problem With Standard and Custom-Sized Ads Both standard and custom-sized ads are fixed size which means they do not adapt to fluid or responsive website layout. Web designers understand that fixed size ads influence the layout of a website; and likewise, the website layout dictates the ad sizes to display. For...
Baca selengkapnya