Web Development Blog Shannenpio

Pembaharuan 29 Maret 2013: Menambahkan opsi thumbSize , noThumb , sortAlphabetically , showNew dan newText Berikut ini adalah sebuah widget daftar isi blog berbentuk tabulasi. Terdiri dari dua sisi berupa daftar kategori dan daftar posting. Setiap nama kategori akan menjadi tab, sedangkan daftar posting akan menjadi konten tab yang akan muncul setiap kali tab diklik: Lihat Demo Unduh CSS Unduh JavaScript Integrasi Widget ke Blogger Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong : Menambahkan halaman statis baru Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML : Pilih mode HTML Salin kode di bawah ini kemudian letakkan di dalam formulirnya: <link rel="stylesheet" href="http://reader-download.googlecode.com/svn/trunk/tabbed-toc-skin.css" type="text/css" media="screen" /> <div id="tabbed-toc"><span class="loading">Memuat...&l

A surprise question: what is the height of a div that contains just a 40 pixel tall image? <div><img src="100x40.png" width="100" height="40"></div> No. It is a little more than 40 pixels: By default, the bottom of an image aligns with the baseline . Between the baseline and the bottom of line box there is space that contains (i) descenders (ii) half-leading. Have a look at this picture, which explains how the image aligns with the line box: Notice that the bottom of line box extends two pixels below the baseline to accommodate the descenders (the gap will vary depending on font, font size and line height). And no, removing the text and white-space from the box will not eliminate the gap. Solution To eliminate this space, set align="absbottom" or style="vertical-align: bottom;" on the image. This will align the bottom of the image with the bottom of the line box and minimize its height as much as possible.