Membuat Tampilan Scrolling Box mirip Youtube – HTML


youtube scrollbox Seringkali kita kunjungi youtube bukan? Pasti, saya yakin ! Dan pasti anda terkagum-kagum dengan tampilan website mereka yang tertata dengan rapi. Apalagi saya, begitu melihat layoutnya yang profesional, apalagi ketika tertuju pada scrolling box yang ada pada website mereka. Scrolling box yang terletak di sidebar yang berisi “related videos”.

Coba perhatikan pada gambar yang ada pada awal paragraf.Sebenarnya dulu saya menduga-duga bahwa youtube menggunakan kode html iframe (bahasa kode html) atau paling tidak menggunakan textarea (bahasa kode html juga).

Tetapi selidik punya selidik, dan ketika kita buka View Source dari browser kita, ternyata youtube tidak menggunakan tipe tersebut, karena tipe tidak SEO friendly. Saya yang seorang html-ers awam begitu penasaran, dan ternyata saya menemukan jawabannya tadi malam. Jadi saya ingin mensharingkan apa yang telah saya dapatkan kepada para pembaca blog ini. Ternyata ada beberapa baris saja yang paling penting dan ternyata baris-baris kode html tersebut sangatlah sederhana adanya. Kekuatannya terletak pada STYLESHEET dengan STYLE (overflow:scroll;). Agar lebih paham, saya berikan contoh sepotong kodenya:

<div style=”overflow:scroll;width:280;height:300″>

Ya, hanya itu saja, ternyata manipulasi terletak pada tag DIV yang tidak disangka-sangka mempunyai properti OVERFLOW:SCROLL. Untuk lebih jelasnya dan tidak asal ngomong, saya berikan anda contoh hasil jadinya, dan anda bisa download, kemudian coba anda teliti kode-kodenya, saya sertakan kodenya supaya lebih menarik yaitu dikombinasikan dengan tag TABLE dan tag IMG serta beberapa gambar-gambar wanita macan (manis dan ca’em)…

Silahkan download disini untuk kodenya !
Ini hasilnya:

Photobucket

tags:

membuat tampilan web supaya menarik dengan html
Permalink:

Tautan
 3  4  5  6  7  8  10  11  12  13  14  15  16  17  18  20  21  22  23  24  26  32  36  37  38  39  42  43  44  46  48  

17 Responses to “Membuat Tampilan Scrolling Box mirip Youtube – HTML”

  1. 1
    paank Fachrezi Says:

    no comment ^_^.
    aq gak punya account di WP.
    Salam aja buat Oom rudy

  2. 2
    anggita Says:

    om kok setelah saya kopi ga bisa/ ga ada scrolnya yah

    gimana neh om,, saya di oggix.org blognya

    mohon bantuannya ke email saya

    ini email saya
    anggita.b.c@gmail.com

  3. 3
    omen Says:

    thank’s om, saya akan coba kodenya…

  4. 4
    aGHi_sPyWaRe Says:

    thx om ..
    dah saya variasikan ..
    coba om maen dunk ke
    http://www.aghi182.wordpress.com
    ditunggu om

  5. 5
    kimyong Says:

    thanks ya.. udah dimasukin linkback sumber

  6. 6
    ardian Says:

    salam kenal…
    makasih atas infonya…
    kali2 kunjungi myblog donk..
    thanks

  7. 7
    fauzi Says:

    terimakasihh

  8. 8
    lo5t Says:

    thank brother …. oh yah nih belum aku coba sich tapi akumau tanya dulu … apa nanti linknya sama dengan di youtube ..maksud aku kalau di clik ntar bisa langsung di puter di media yang di sedikan …. terimaksih … oh yah mampir ke blog aku yah and tolong di beri masukan http://e-learning-lo5t.blogspot.com

  9. 9
    kimyong Says:

    ga gitu sih, yang ini scroll box nya doang yang mirip dengan scrollbox di youtube, tapi di dalam isinya hanya gambar dan foto …

  10. 10
    kesit Says:

    wah ini dapat ilmu bermanfaat, sungguh mulia hati anda bro..mau bersharing ria apalagi bagi kaum awam ini akan sangat penting dan berguna 110% bagi kemajuan dunia maya.jabat erat dan maju terus bro..

  11. 11
    idz_tom Says:

    mas mau tanya ni n tolong di jawab ya…
    gimana caranya masang fungsi scroll di postingan tapi isi dari scroll itu adalah website. jadi bukan gambar ato artikel tapi website. makasih sebelumnya

  12. 12
    kimyong Says:

    kalau itu pakai tag textarea di HTML.. atau coba baca di sini bro:

    http://www.freecodesource.com/index.php?page=myspacecodes/textareadiv

    http://www.htmlcodetutorial.com/forms/_TEXTAREA.html

  13. 13
    vinspired Says:

    bos, klo bikin border seperti gambar di atas bagaimana ya?? jadi t’kesan lebih rapi gitu loh..

  14. 14
    kimyong Says:

    coba deh telusuri dari:

    http://www.speedytown.com/kimyong/youtubescrool.txt

  15. 15
    Masjid Kita Says:

    mas broken link..?!?! kalau yg di atas itu gak bisa, yg normal aja ada mas? Mas… saya mau blogroll ini memakai scroll agar jika kita sudah menambah banyak link (katakanlah hingga 2017 link teman) kan tidak mungkin jika tampilannya memanjang ke bawah… tentunya jadi agak kurang sedap pemandangannya :) kan mas???

    Gmn cara menambahkan scrollnya mas? mohon bimbingannya dan tolong kabarin ke tempat wsaya mas jika sudah reply… terimakasih.. :)

  16. 16
    kimyong Says:

    @masjidkita

    coba syntax ini deh:

    <div style="overflow:scroll;width:280;height:300">
    <?php wp_list_bookmarks('title_before=<h1>&title_after=</h1>&category_before=&category_after='); ?>
    </div>
    
  17. 17
    kimyong Says:

    heightnya diperkecil juga boleh

Leave a Reply