Untuk menciptakan fungsi scroll pada elemen halaman /widget, setidaknya kau harus mengerti wujud kerangka widget standar blogspot secara umum terlebih dahulu. Bentuk widget blogspot secara umum sanggup digambarkan menyerupai ini:
<b:widget id='HTML1' locked='false' title='Pengikut' type='HTML'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> ... ... ... </div> <b:include name='quickedit'/> </b:includable> </b:widget>Berikut ini ialah keterangannya secara singkat:
id='HTML1'menunjukkan bahwa widget tersebut mempunyai ID "HTML1". Kamu sangat membutuhkan ID ini untuk memilih elemen mana yang akan diberi fungsi scroll.- Kode
<h2 class='title'><data:title/></h2>mewakili judul widget, ciri ini sangat gampang dilihat mengingat peraturan resmi sebuah elemen judul harus selalu diapit oleh tag heading (dalam hal ini ialah<h2>) <div class='widget-content'> ... </div>ialah 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 kau gunakan sebagai jalan pintas untuk mengedit elemen halaman dari halaman blog secara langsung.
Cara menerapkan fungsi scroll pada elemen halaman sebetulnya sangatlah sederhana. Kita hanya memakai deklarasi
overflow:auto; dan memilih tinggi maksimal sebuah konten widget secara bebas. Dalam CSS sanggup dituliskan menyerupai ini: #ID-WIDGET .widget-content { max-height:200px; overflow:auto; }Kamu tidak perlu mengecek Expand Template Widget untuk melaksanakan acara dahsyat ini, sebab di sini kau telah memakai metode penerapan CSS secara tidak langsung yang notabene lebih aman. Letakkan arahan CSS tersebut sempurna di atas arahan
]]></b:skin> atau </style>. Ganti
ID-WIDGET dengan ID widget yang kau kehendaki untuk diberi fungsi scroll. Sebagai contoh, kau ingin menerapkan fungsi scroll ini pada elemen halaman Label menyerupai tampak pada gambar di atas, maka kau harus mengganti arahan
ID-WIDGET dengan Label1 contohnya (tergantung dari ID widget masing-masing). ID widget di depan arahan
.widget-content berfungsi untuk membatasi elemen mana yang akan terkena deklarasi overflow:auto;. Jika kau ingin menerapkan fungsi scroll pada lebih dari satu elemen halaman sanggup kau tuliskan menyerupai 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. Sumber https://www.dte.web.id/