Tutorial ini menunjukkan Anda bagaimana untuk membuat widget atau kotak dengan scrollbar. Ketika isi widget melebihi ketinggian tertentu tertentu atau lebar, akan ada scrollbar vertikal atau horisontal untuk memungkinkan pengguna untuk membaca isi yang melimpah atau melebihi area kotak. Elemen ini bergulir sangat berguna untuk Daftar Link kami atau widget Label yang mungkin sangat panjang. Ini mengurangi tinggi total widget dan belum memungkinkan pembaca pilihan untuk menggulir dan melihat seluruh konten. Kita akan membahas bagaimana menyesuaikan desain template untuk menyertakan scrollbars dan berbagai modifikasi yang dapat dibuat untuk stylesheet.
The "overflow" gaya properti
Mari kita menjelaskan apa kode adalah tentang. Kami menggunakan "overflow" properti untuk menciptakan scrollbars dalam CSS atau stylesheet. Ada beberapa nilai yang dapat ditugaskan untuk itu, meskipun tidak semua berguna untuk tujuan kita.
1. overflow: visible
Ini adalah nilai default. Isi ekstra baik diberikan luar kotak atau panjang kotak diperluas untuk menyertakan konten tambahan. Jangan repot-repot untuk menggunakan ini dalam blog Blogger karena Anda akan melihat isi dari widget yang tumpang tindih seperti ini: -
Ini adalah nilai default. Isi ekstra baik diberikan luar kotak atau panjang kotak diperluas untuk menyertakan konten tambahan. Jangan repot-repot untuk menggunakan ini dalam blog Blogger karena Anda akan melihat isi dari widget yang tumpang tindih seperti ini: -
2. overflow: hidden
Ini akan memotong konten tambahan yang melimpah dan tidak akan ada scrollbar ke kotak.
Ini akan memotong konten tambahan yang melimpah dan tidak akan ada scrollbar ke kotak.
3. overflow:scroll
Konten tersebut dipotong tetapi akan ada scrollbar pada kedua sisi.
4. overflow: auto
Kami ingin atribut ini. Pada dasarnya, ia memberitahu browser untuk menampilkan scrollbar yaitu hanya bila diperlukan, bila konten yang melimpah pengaturan lebar dan tinggi
Scrollbar di Semua Widgets
Sekarang kita tahu apa kode tidak, kita dapat menerapkannya pada template kita. Jika kita memiliki banyak widget di sidebar kita, kita dapat menentukan ketinggian tetap untuk semua widget. Hati-hati direncanakan, tata letak kita bisa terlihat sangat rapi karena semua widget akan memiliki ketinggian yang sama.
Masuk dan pergi ke Template -> Edit HTML. Masukkan potongan kode ini. Untuk kemudahan referensi, kami telah menambahkan di bawah / * Sidebar Content * /: -
Sekarang kita tahu apa kode tidak, kita dapat menerapkannya pada template kita. Jika kita memiliki banyak widget di sidebar kita, kita dapat menentukan ketinggian tetap untuk semua widget. Hati-hati direncanakan, tata letak kita bisa terlihat sangat rapi karena semua widget akan memiliki ketinggian yang sama.
Masuk dan pergi ke Template -> Edit HTML. Masukkan potongan kode ini. Untuk kemudahan referensi, kami telah menambahkan di bawah / * Sidebar Content * /: -
/* Sidebar Content */ .sidebar .widget{ height:200px; overflow:auto; } |
---|
Dalam contoh kita, kita menerapkan tinggi 200px ke widget. Ini bisa diubah ke nilai lain. Lihatlah kedua sidebars. Perhatikan kerapian dan simetri. Hati-hati meskipun jika Anda memiliki AdSense Iklan di sidebars. Ini bertentangan KL AdSense untuk memotong Iklan dan meletakkan scrollbar dengan Unit Iklan.
scrollbar di Widget One Sidebar
Mari kita asumsikan untuk diskusi kami bahwa Anda telah memodifikasi template Anda untuk menyertakan sebuah sidebar tambahan menggunakan panduan Kolom Template Tiga kami. Kita mungkin memiliki semua iklan AdSense di satu sidebar dan kita ingin menambahkan scrollbar ke dalam widget dari sidebar lainnya. Gaya yang dapat dimasukkan ke dalam template akan ini: -
/* Sidebar Content */ #newsidebar .widget{ height:200px; overflow:auto; } |
---|
Or this:-
/* Sidebar Content */ #sidebar .widget{ height:200px; overflow:auto; } |
---|
tergantung pada sidebar widget Anda berada di. Preview template dan jika apa yang Anda inginkan, simpan Template dan menyegarkan Blog Anda.
Scrollbar dalam Satu Widget hanya
Kita bisa menambahkan scrollbar hanya untuk satu atau beberapa widget. Untuk melakukan itu, pertama kita harus mengetahui ID dari widget. Ketika kita berada pada Template -> Edit HTML, gulir ke bagian bawah kode template. Anda akan melihat sesuatu seperti ini: -
Scrollbar dalam Satu Widget hanya
Kita bisa menambahkan scrollbar hanya untuk satu atau beberapa widget. Untuk melakukan itu, pertama kita harus mengetahui ID dari widget. Ketika kita berada pada Template -> Edit HTML, gulir ke bagian bawah kode template. Anda akan melihat sesuatu seperti ini: -
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='LinkList1' locked='false' title='General' type='LinkList'/> <b:widget id='HTML1' locked='false' title='' type='HTML'/> <b:widget id='Label1' locked='false' title='Label' type='Label'/> </b:section> </div> |
---|
Dalam contoh ini, kami telah menambahkan sebuah Elemen Halaman Link Daftar ke Sidebar kami dan ID untuk widget ini adalah "Linklist1". Jika kita memiliki daftar link lebih, ID akan "Linklist2", "Linklist3" dan seterusnya. Juga, kita telah memasukkan sebuah Elemen Halaman HTML / JavaScript dan ID adalah "HTML1". Widget ketiga kami menambahkan adalah daftar Label dan ID adalah "Label1". Lihatlah template Anda dan mengidentifikasi widget. Mencatat ID widget.
Dengan ID, sekarang kita dapat menambahkan properti overflow ke dalam stylesheet di bawah Konten Sidebar / * * /: -
/* Sidebar Content */ #Label1{ height:200px; overflow:auto; } |
---|
Ini akan menambahkan scroll bar-ke widget Label hanya tanpa mempengaruhi widget lainnya. Masukkan ID yang relevan dari widget Anda ke bagian ditampilkan dalam warna merah.
Scrollbar di Semua Widgets kecuali Satu
Sebuah variasi lebih lanjut adalah dengan menambahkan scrollbars ke semua Widget kecuali satu atau dua. Seperti disebutkan sebelumnya, widget AdSense tidak harus memiliki scrollbar dan mungkin niat Anda untuk memiliki scrollbar di seluruh widget.
Ikuti panduan di atas untuk memasukkan scrollbar ke semua widget. Setelah itu untuk orang yang Anda tidak ingin scrollbar muncul, tentukan nilai lebih besar untuk ketinggian: -
/* Sidebar Content */ #AdSense1{ height:600px; } |
---|
Sebagai contoh, jika unit AdSense adalah lebar 160x600 Banner Vertikal, menempatkan ketinggian widget sebagai 600px. Sejak isi cocok baik ke ukuran ini, scrollbars tidak akan muncul. Mengubah ID widget yang sesuai untuk menunjuk ke widget yang ingin Anda kecualikan dan menyesuaikan nilai tinggi.
Scrollbar untuk Link dan Label
Kita perlu scrollbar biasanya untuk daftar Label dan blogroll dibuat menggunakan daftar link karena biasanya panjang. Anda mungkin telah memperhatikan bahwa menggunakan kode di atas, widget seluruh disertakan dalam kitab. Misalkan kita ingin judul tetap statis dan memiliki scrollbar hanya untuk link atau label, kita dapat menyisipkan kode sebagai berikut (ingat untuk memasukkan ID yang relevan ke dalam bagian ditampilkan dalam warna merah): -
/* Sidebar Content */ #LinkList1 ul{ height:200px; overflow:auto; } |
---|
Scrollbar untuk Posting Blog
Jika Anda ingin scrollbar untuk setiap posting blog Anda, gulir ke mana Anda melihat kode ini dan menambahkan bagian (ditampilkan dalam warna merah): -
.post { height:200px; overflow:auto; } |
---|
Scrollbar teks dalam Posting Blog
Mungkin Anda mungkin tidak ingin memiliki scrollbar untuk semua Blog Posts, tapi hanya untuk sepotong teks dalam Blog Post. Anda dapat mengikuti langkah-langkah dalam panduan ini untuk memasukkan scrollbar untuk teks dalam pos.
Scrollbar untuk Teks Panjang
Jika Anda memiliki bagian panjang teks seperti yang ditemukan dalam Persyaratan biasa Layanan, Pengguna Perjanjian, Peraturan, Kebijakan Privasi, dll, scrollbars akan sangat berguna dalam meminimalkan area teks dan belum memungkinkan pembaca untuk melihat isi penuh.
Dalam Template -> Edit HTML, / * Sidebar Content * /, mendefinisikan kelas sebagai berikut: -
.scrollingtext { height:200px; width:200px; border:0; overflow:auto; } |
---|
Apa yang kami lakukan adalah untuk menentukan bahwa teks yang terdapat di dalam sebuah kotak dengan scrollbar otomatis ditambahkan jika teks yang melimpah daerah x 200px 200px. Nilai dari perbatasan, tinggi dan lebar dapat diubah sesuai dengan kebutuhan anda.
Kami sekarang dapat mengetik teks. Teks ini dapat muncul dalam sebuah Blog Post, atau sebagai elemen dalam Template. Jika dalam sebuah Blog Post, setelah Anda mengetikan TEKS di Post Editor, beralih ke "Edit HTML" modus dan masukkan tag ini (ditunjukkan dengan warna biru): -
<div class="scrollingtext">TEXT</div> |
---|
TEKS dapat dimasukkan langsung ke dalam template melalui Template -> Elemen Halaman -> Teks. Demikian pula, jika Anda telah mengetik dalam modus editor kaya, Anda dapat mengklik "Edit HTML" link di sudut kanan atas dan masukkan tag di atas.
Setelah mempublikasikan posting atau menyimpan elemen halaman, Anda akan dapat melihat TEXT di dalam kotak dan scrollbar otomatis dimasukkan.
1 komentar:
Download Zapya for PC to share files and folders easily from PC to Mobile
Posting Komentar