Cara menampilkan sumber artikel dengan dropdown diblogger

Blog Helmykediri - Meskipun terlihat sederhana, namun saya melihatnya cukup menarik dan beberapa ada yang menanyakan bagaimana cara menampilkan sumber artikel dengan dropdown di postingan blogger 🙋

Sebenarnya, W3S sudah banyak memberikan pelajaran tentang html dari A – Z yang beberapa bisa anda manfaatkan untuk mengubah tampilan dan memperindah blog 

Biar bagaimanapun setiap artikel blog ditulis berdasarkan sumber-sumber terpercaya sehingga anda mungkin ingin menampilkannya sebagai bentuk penghargaan.  Tampilan keterangan sumber artikel biasanya terletak di paragraf akhir setiap postingan

Kita bisa memanfaatkan fungsi tag <details> dan <summary>. Gabungan 2 tag html ini menampilkan list sumber artikel dengan icon panah kebawah yang akan terbuka ketika di klik. 

Ini dapat meringkas isi artikel sekaligus merapikannya. Di blogger, ketika mengedit artikel, buka tab html, sedangkan di wordpress, buka tab teks.

Salin Kodenya lalu simpan dan posting :

<details><summary>

Referensi:

</summary>

wwww.helmynia.com

</details>

Hasilnya: 

Aktris Skin Diamond

Skin Diamond adalah seorang mantan aktris penyanyi, dan model asal Amerika Serikat. Dia mulai karirnya di industri film pada tahun 2009 dan terkenal karena penampilannya yang eksentrik dan tato-tato di seluruh tubuhnya. Dia juga telah muncul dalam beberapa film mainstream dan televisi, termasuk film "The Girl with the Dragon Tattoo" dan serial TV "Sons of Anarchy". Selain itu, Skin Diamond juga seorang penyanyi dan telah merilis beberapa lagu dan video musik. Namun, ia telah mengumumkan pada tahun 2016 bahwa ia telah pensiun dari industri film.

Menggunakan list point untuk membuat daftar sumber artikel

Salin Kodenya lalu simpan dan posting :

<details><summary>

Referensi artikel:

</summary>

<ul><li>www.helmynia.com</li>

<li>www.tutorialpedia.net</li>

<li>www.ilmusemu.com</li></ul>

</details>

 Hasilnya:

Buka referensi:

• www.helmynia.com


• www.tutorialpedia.net


• www.ilmusemu.com

Anda juga dapat mengganti listnya menjadi angka dengan tag <ol><li>…</li></ol>

Masukan sumber aslinya di dalam tag tersebut, dan untuk mengaktifkan linknya, tambahkan kode 

<a href="https://helmynia.com">Link sumber disini</a>

Contoh:

<details><summary>Buka sumber</summary>

<ol>

<li><a href="https://helmynia.com">Blog Orang IT</a></li>

<li>Daftar sumber link 2</li>

<li>Daftar sumber link 3</li>

</ol>

</details>

Hasilnya:

Buka sumber

1. Blog Orang IT


2. Daftar sumber link 2


3. Daftar sumber link 3

Selain itu, anda juga bisa menambahkan kode adsense di dalamnya. Mungkin ada sedikit resiko karena kita dengan sengaja menyembunyikannya meskipun tidak mem-popupkannya 😂