Tambahkan scrollbars di Widget Blog

Minggu, 11 Maret 2012

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: -


Add Scrollbars to Blog Widgets

2. overflow: hidden

Ini akan memotong konten tambahan yang melimpah dan tidak akan ada scrollbar ke kotak. 

Add Scrollbars to Blog Widgets

3. overflow:scroll

Konten tersebut dipotong tetapi akan ada scrollbar pada kedua sisi.


Add Scrollbars to Blog Widgets

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


Add Scrollbars to Blog Widgets

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 * /: -


/* Sidebar Content */
.sidebar .widget{
height:200px;
overflow:auto;
}


Add Scrollbars to Blog Widgets

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: -


<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;
}


Add Scrollbars to Blog Widgets

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;
}


Add Scrollbars to Blog Widgets

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.


Add Scrollbars to Blog Widgets

1 komentar:

Getit mengatakan...

Download Zapya for PC to share files and folders easily from PC to Mobile

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Affiliate Network Reviews