To show a dropdown of all tags on Blog Overview Page, like this.
You can use this code to Code Injection > Footer
You can also use this free blog tool so you can customize blog easier without using code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
/* Tags Dropdown Filter by @tuanphan 05-07-2025 */
jQuery(document).ready(function(){var allTags=new Set();var processedCount=0;var containers=jQuery(".blog-basic-grid--container");var totalContainers=containers.length;containers.each(function(){var a=jQuery(this),b=a.find(".blog-title a").attr("href");b&&jQuery.ajax({url:b+"?format=json",dataType:"json",success:function(c){if(c.item&&c.item.tags){c.item.tags.forEach(function(tag){allTags.add(tag)})}processedCount++;if(processedCount===totalContainers){createDropdown()}},error:function(){processedCount++;if(processedCount===totalContainers){createDropdown()}}})});function createDropdown(){if(allTags.size>0){var dropdownHtml='<div class="tags-filter-wrapper" style="margin-bottom:30px;"><select class="tags-dropdown" style="padding:10px 15px;font-size:16px;border:1px solid #ccc;border-radius:5px;background:#fff;cursor:pointer;"><option value="">Filter by Tag</option>';Array.from(allTags).sort().forEach(function(tag){dropdownHtml+='<option value="'+tag+'">'+tag+'</option>'});dropdownHtml+='</select></div>';jQuery(".blog-basic-grid").prepend(dropdownHtml);jQuery(".tags-dropdown").on("change",function(){var selectedTag=jQuery(this).val();if(selectedTag){window.location.href="/blog04-1?tag="+encodeURIComponent(selectedTag)}})}}});
</script>
