Widget dengan kotak scroll berdasarkan label

Cara membuat widget kotak scroll berdasarkan label pada blogspot merupakan tutorial blogger yang akan kita bahas kali ini. Membuat scrolling adalah tutorial yang sangat sederhana tetapi manfaatnya sangat luarbiasa karena dapat meningkatkan efisiensi blog dan mempermudah bagi pengunjung untuk melihat-lihat isi blog kita. Jika masih ada yang belum tahu bentuk scroll box ini silahkan perhatikan gambar dibawah ini

 

Selain itu fungsi memasang kotak scroll pada blogspot adalah membuat tampilan blog lebih rapi jika kita memiliki widget yang terlalu lebar dan panjang, otomatis blog kelihatan cantik dan pengunjung pun betah berlama-lama dan tidak malas membaca artikel yang kita tulis.

Panduan cara membuat widget kotak scroll berdasarkan label pada blogspot
caranya:

• masuk ke dashboard lalu pilih > layout/tata letak
• tambah gadget lalu pilih > HTML/JAVAscript
• pastekan kode script dibawah ini kedalam widget tadi
• lalu save  > refresh halaman blog sobat dan lihat hasilnya

<div style='overflow:auto; width:ancho;height:250px;'>
<style> img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:left;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style><script src="http://id-pemula-javascript.googlecode.com/files/recent-post-label-thumbnail.js"></script><script>
 var numposts = 100;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 40;
</script><script src="http://lulustes.blogspot.com/feeds/posts/default/-/Psikotest?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></div>

Catatan:
Perhatikan tulisan yang berwarna merah:
1. height:250px adalah tinggi widget
2. var numposts = 100 adalah jumlah posting dalam satu widget
3. var numchars = 40 adalah jumlah karakter/huruf per judul artikel
4. http://lulustes.blogspot.com ganti dengan alamat blog sobat
5. Psikotest label artikel yang ingin sobat tampilkan.

Sekian posting saya yang berjudul cara membuat widget kotak scroll berdasarkan label pada blogspot, jika ada yang ingin ditanyakan silahkan berkomentar di bawah.

Read More...

marquee / Tulisan Berjalan Blogspot

Bagaimana cara membuat teks atau tulisan berjalan di blog (marquee)? kenapa teks atau tulisan berjalan di blog biasa juga disebut dengan marquee teks. Alasannya karena teks berjalan atau tulisan bergerak tersebut menggunakan tag <marquee>. kode marquee tidak hanya bisa diaplikasikan pada teks saja, tapi bisa juga diaplikasikan pada file lain seperti video, gambar, animasi dan lain-lain.

Nah untuk membuat teks atau tulisan berjalan (bisa juga gambar yang berjalan), caranya sungguh sangat mudah yaitu dengan menggunakan kode seperti dibawah ini:

<marquee>TEKS/TULISAN/GAMBAR YANG BERGERAK</marquee>

Kode yang ada diatas akan menampilkan teks berjalan seperti di bawah ini:

TEKS/TULISAN/GAMBAR YANG BERGERAK

Jadi pada kondisi default, teks akan bergerak dari arah kanan ke kiri.

tapi jika anda merasa kurang puas dengan efek default dari kode marquee, maka anda bisa menambahkan kode-kode di bawah ini untuk memperindah tampilan teks berjalan pada blog.

1. kode scrolldelay
kode scrolldelay berfungsi untuk mengatur kecepatan teks berjalan. contoh penerapan kode scrolldelay pada teks/tulisan berjalan adalah sebagai berikut ini

<marquee scrolldelay="500">TEKS/TULISAN/GAMBAR YANG BERGERAK</marquee> 

hasilnya akan seperti di bawah ini:

TEKS/TULISAN/GAMBAR YANG BERGERAK

catatan: semakin besar angka pada scrolldelay maka akan semakin lambat kecepatan teks/tulisan berjalan pada blog, begitupun seballiknya semakin kecil angkanya maka kecepatannya akan semakin cepat..

2. kode loop
kode loop berfungsi untuk menampilkan teks berjalan sesuai keinginan anda.contoh penerapannya:

<marquee loop="5">MARQUEE BERULANG 5 KALI DAN AKAN MENGHILANG</marquee>

jadi dengan menambahkan loop="5" maka teks berjalan akan menghilang setelah 5 kali. hasilnya seperti di bawah ini

MARQUEE BERULANG 5 KALI DAN AKAN MENGHILANG

3. kode width
selanjutnya anda juga dapat menambahkan kode width pada teks berjalan, satuannya bisa berupa % ataupun px
contohnya:
<marquee width="300px">MARQUEE DENGAN LEBAR 300PX</marquee>

maka hasilnya seperti di bawah ini

MARQUEE DENGAN LEBAR 300PX

4. kode bgcolor
kode bgcolor berfungsi untuk mengubah background dari teks berjalan yang anda pasang. contohnya:

<marquee bgcolor="green">TEKS BERJALAN BACKGROUND HIJAU</marquee>

maka hasilnya akan terlihat seperti dibawah ini

TEKS BERJALAN BACKGROUND HIJAU

5. kode scrollamount
kode scrollamount mempunyai fungsi yang hampir sama dengan kode scrolldelay diatas. hanya saja hasil yang didapatkan dengan menggunakan kode  scrollamount akan terlihatlebih halus.

contoh:
<marquee scrollamount="5">MARQUEE DENGAN KECEPATAN 5</marquee>

Makan hasilnya akan terlihat seperti di bawah ini

MARQUEE DENGAN KECEPATAN 5

catatan: penggunaannya berbeda dengan kode scrolldelay, jadi pada scrollamount semakin besar angkanya maka kecepatannya akan semakin besar pula.

berikut perbandingan antara kode scrolldelay dan kode scrollamount dengan angka yang sama yaitu 50

<marquee scrolldelay="50">MARQUEE SCROLLDELAY DENGAN KECEPATAN 10</marquee>
 <marquee scrollamount="50">MARQUEE SCROLLAMOUNT DENGAN KECEPATAN 10</marquee>

hasilnya

MARQUEE SCROLLDELAY DENGAN KECEPATAN 10

MARQUEE SCROLLAMOUNT DENGAN KECEPATAN 10

6.kode direction
kode direction berfungsi untuk mengatur arah dari teks berjalan karena pada kondisi default teks berjalan akan bergerak dari kiri ke kanan. jadi ada 4 variabel yang bisa anda tambahkan yaitu left right up dan down.
contohnya:

 <marquee direction="right">MARQUEE BERGERAK KE KANAN</marquee>

hasilnya seperti di bawah ini

MARQUEE BERGERAK KE KANAN

7. kode behavior
untuk kode behavior ada 3 variabel yang bisa anda tambahka, yaitu scroll, slide dan alternate.
untuk perbedaannya silahkan lihat contoh di bawah ini

scroll
<marquee behavior="scroll">MARQUEE EFEK SCROLL</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

slide
<marquee behavior="slide">MARQUEE EFEK SLIDE</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

alternate
<marquee behavior="alternate">MARQUEE EFEK ALTERNATE</marquee>
hasilnya
MARQUEE EFEK ALTERNATE

selain itu efek marquee juga bisa di aplkasikan pada gambar. contohnya seperti dibawah ini;
kodenya seperti ini : <marquee><img src="url gambar" /></marquee> 

hasilnya:




semoga bermanfaat

{yusrandante.blog}

Read More...