Cara Membuat Scroll Pada Widget Dan Di dalam Posting
Pada kesempatan kali ini saya akan memberikan rahasia untuk membuat scroll pada widget dan di dalam posting agar meminimalkan ruang di blog anda. Untuk contoh scroll pada widget dapat anda lihat pada sidebar di blog ini dengan judul "Visitor My Blog". Contoh scroll pada posting dapat dilihat seperti dibawah ini:
Cara Membuat Scroll Pada Widget Dan Di dalam Posting, Cara Membuat Scroll Pada Widget Dan Di dalam Posting, Cara Membuat Scroll Pada Widget Dan Di dalam Posting, Cara Membuat Scroll Pada Widget Dan Di dalam PostingBagi anda yang ingin membuat scroll pada widget dan di dalam posting, ikutilah langkah-langkah dibawah ini:
CARA PERTAMACara pertama dapat digunakan untuk widget seperti profil, entri populer, label, daftar link, daftar pengikut, HTML/JavaScript. Sebagai contoh pada blog ini, anda dapat melihat berbagai macam widget pada sidebar seperti About Me, Popular Posts, Category, Link, Health Link, Visitor My Blog, dan lain-lain. Ikuti
1. Log in ke blogger
2. Masuk ke Rancangan
3. Klik Edit HTML
4. Untuk menjaga-jaga agar tidak tejadi kesalahan, centang Expand Template Widget.
5. Cari judul widget anda yang ingin dibuatkan scroll (untuk lebih mempersingkat waktu gunakan Ctrl+F dan ketik judul widget yang ingin di scroll).
Misalkan widget label: tekan Ctrl+F, tulis Category kemudian enter. Temukan hasil yang mirip seperti ini:
<b:widget id=’Label1’ locked=’false’ title=’Category’ type=’Label’/>
Contoh lain, misalkan widget Blog Archive temukan hasil yang mirip seperti ini:
<b:widget id=’BlogArchive1’ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
Jika widget anda berbentuk JavaScript, misalkan Visitor My Blog. Temukan hasil yang mirip seperti ini:
<b:widget id='HTML10' locked='false' title='Visitors My Blog' type='HTML'/>
NB: Setelah menemukan kode berwarna kuning seperti diatas (Label1, BlogArchive1 atau HTML10), ingat atau untuk menjaga-jaga agar tidak lupa copy-paste di suatu tempat kode yang berwarna kuning itu, karena ini merupakan kunci dari pembuatan scroll widget anda.
6. Cari lagi kode ]]></b:skin> (gunakan CTRL+F)
7. Copy-paste kode CSS berikut ini diatas ]]></b:skin>
#BlogArchive .widget-content{
height:200px;
width:auto;
overflow:auto;
}
height:200px;
width:auto;
overflow:auto;
}
NB: Kode yang berwarna pink (BlogArchive) dapat diganti sesuai kode widget anda (kode berwana kuning yang sudah anda ingat atau copy-paste). Kode height:200px merupakan tinggi dari scroll, anda dapat merubah angkanya sesuai keinginan.
8. Save hasil kerja anda, kemudian lihatlah hasil pada blog anda.
CARA KEDUAKhusus untuk membuat scroll pada widget JavaScript pada sidebar dan di dalam posting dapat menggunakan cara kedua ini, ikuti langkah-langkah berikut:
1. Log in ke blogger
1. Log in ke blogger
2. Masuk ke Rancangan
3. Pada Elemen Laman, Cari HTML/JavaScrip widget yang ingin anda buatkan scroll, kemudian klik edit.
4. Letakkan kode di bawah ini tepat sebelum script, HTML, URL, text widget yang ingin dibuatkan scroll
<div style="overflow: auto;background color:#ffffff; margin: 0px auto; padding: 5px; height: 200px;width: 94%;text-align: left;"> letakkan kode widget yang ingin dibuat scroll di sini (HTML, URL, TEXT, SCRIPT DSB )</div>
NB: kode yang berwara merah (#ffffff) merupakan background, dapat diganti dengan warna yang diinginkan (warna berbentuk kode), height merupakan tingginya scroll tersebut dan width merupakan lebar scroll tersebut (angka 200 pada height dan 94 pada width dapat diganti sesuai keinginan).
5. Save hasil kerja anda dan lihat hasil pada sidebar atau posting anda.
CARA KETIGACara ini dikhususkan untuk membuat scroll pada posting. Ikuti langkah-langkah berikut:
1. Log in ke blogger
2. Masuk ke Rancangan
3. Pilih Edit HTML
4. Untuk menjaga-jaga agar tidak tejadi kesalahan, centang Expand Template Widget.
5. Cari kode ]]></b:skin> (gunakan CTRL+F)
6. Copy-paste kode di bawah ini tepat di atas ]]></b:skin>
1. Log in ke blogger
2. Masuk ke Rancangan
3. Pilih Edit HTML
4. Untuk menjaga-jaga agar tidak tejadi kesalahan, centang Expand Template Widget.
5. Cari kode ]]></b:skin> (gunakan CTRL+F)
6. Copy-paste kode di bawah ini tepat di atas ]]></b:skin>
.scrollbox {
height:150px;
width:450px;
overflow:auto;
}
height:150px;
width:450px;
overflow:auto;
}
NB: height adalah ketinggian scroll dan width adalah lebar scroll, angka pada height dan width yang berwarna putih (150 dan 450) dapat diganti sesuai keinginan anda.
7. Pada saat anda ingin membuat scroll pada posting , letakkan isi postingan yang akan di beri scroll di antara code
<div class="scrollbox"> dan </div>
Contohnya adalah sebagai berikut :
Contohnya adalah sebagai berikut :
<div class="scrollbox">
isi posting yang ingin diberi scroll, isi posting yang ingin diberi scroll,
isi posting yang ingin diberi scroll, isi posting yang ingin diberi scroll,
isi posting yang ingin diberi scroll, isi posting yang ingin diberi scroll.
</div>
8. Save hasil kerja anda dan lihat hasil pada blog anda.
Jika dengan ketiga cara diatas memberikan hasil scroll pada widget blog anda dan pada postingan anda, maka rahasia untuk membuat scroll sudah anda bongkar.
Jika dengan ketiga cara diatas memberikan hasil scroll pada widget blog anda dan pada postingan anda, maka rahasia untuk membuat scroll sudah anda bongkar.
Selamat mencoba dan semoga berhasil.
Jangan lupa beri komentar dan isi buku tamu...
Disini anda juga dapat melihat-lihat berbagai macam produk seperti cabinet, celengan, mirror, dan lain-lain.. Silahkan lihat di Product Catalog,, Selamat melihat-lihat, jika anda berminat silahkan memesan dan menanyakan tentang produk melalui email langsung dan buku tamu blog ini.. Terima Kasih..
|
|
