HTML Hierarki atau Summary di Post Blog

Kode HTML Summary Ringkasan | Kode HTML Hierarki | Mempercantik postingan merupakan salah satu syarat agar pengunjung semakin nyaman dan betah di blog. Salah satunya dengan mengedit kode HTML. Bagaimana cara membuat kode HTML hierarki di post blog?

Sebenarnya jika dibilang hierarki agak kurang nyaman di dengar. Paling enak kita sebut cara buat atau kode HTML untuk post ringkasan di Blogger. Berbicara mengenai summary berarti kita ingin membuat ringkasan artikel.

Kadang kita lihat sebuah artikel yang kelihatan sedikit tetapi setelah diklik ternyata yang nampak adalah ringkasannya saja dan setelah diklik barulah terlihat isi dari ringkasan tersebut. Di blog, bila kita buat widget label maka terdapat pilihan hierarki, flat, atau dropdown. Seperti itulah kira-kira.

Tujuan adanya summary tentu untuk mempercantik artikel dan membuatnya sistematis. Layaknya ringkasan pada umumnya, artikel yang banyak bisa diringkas sehingga pembaca mudah dan tidak merasa capek membacanya.


Masih bingung dengan penjelasan di atas? Ya memang agak sulit kalau didefinisikan. Kalau masih bingung juga, Anda dapat lihat gambarnya seperti di bawah ini.

Contoh Summary

Seperti yang Anda lihat pada gambar di atas, di samping tulisan "Cerita Madya" terdapat panah ke bawah. Panah itu berfungsi sebagai summary nya. Jika panah nya ke bawah berarti ringkasan dan isinya dimunculkan.

Tetapi jika ditekan panahnya, akan menjadi panah ke kanan dan menjadi ringkasan saja. Sedangkan isi ringkasan nya akan tersembunyi alias tidak dimunculkan. Jika dengan gambar masih bingung, maka silahkan lihat contoh real nya di bawah ini (jangan lupa klik panahnya) :

KISAH SANG PENAKLUK

Kelahiran

Dilahirkan di kota kecil yang terletak di pinggir kota. Si kecil itu pun tumbuh besar di lingkungan yang jauh dari kecanggihan kota
Meski begitu, tak menyurutkan sang orang tua untuk mengasuh dan memberikan yang terbaik bagi anaknya

Semangat

Hidup sederhana ditambah mudah bergaul dengan siapa saja membuat matanya terbuka akan ketidakadilan di sekelilingnya
Pelan tapi pasti, si pemuda tumbuh bersemangat

Puncak

Gelombang demi gelombang musuh menerpanya namun ia tak hilang arah
Kecerdasan dan jiwa sosialnya yang tinggi membuatnya mudah untuk mengajak orang-orang sekitarnya

Itulah contoh summary teks. Bagaimana? Menarik, bukan?! Lalu bagaimana kode HTMLnya? Kode HTML summary teks membutuhkan kode paragraph yaitu <p>, details yaitu <details>, dan summary yaitu <summary>.

Lebih jelasnya, silahkan salin kode di bawah ini. Perhatikan bahwa kode <summary> untuk kata ringkasannya, sedangkan kode <p> untuk isi dari ringkasan tersebut

<details> <summary>ringkasan</summary> <p> Isi pertama</p> <p> Isi kedua</p> </details>

Anda dapat menambah isi ringkasan menjadi 2 sampai berapa pun asalkan ditambahkan kode <p> untuk awalnya dan ditutup dengan </p> di akhirnya. Lebih jelasnya lihat kode di atas .