Back

Blog Title Search, Category Menu and Blog Tag Cloud

Description

This code example shows you how to create the blog title search, blog category menu, and blog tag cloud shown in the right hand column of the image below (inside the red rectangle).

This code goes along with the Blog Listing, Blog Detail, and Blog RSS codeshare code examples.

Code

## Start of Code
<div class="BlogSearch">
  <form method="get">
    <input id="searchBox" type="text" name="blogSearch" placeholder="Search" #if($blogSearch!= '') value="$!{blogSearch}"#end />
    <input type="submit" value="Find" />
    <input type="hidden" name="search" value="true" />
  </form>
</div>
<!-- end .BlogSearch -->
  
<script type="text/javascript">
  function focusOnSearchBox() {
    document.getElementById('searchBox').focus();
  }
  window.onLoad = focusOnSearchBox();
</script>



<style>
  #if($UtilMethods.isSet($catVar))
    li.$catVar a{font-weight:bold;color:#d54c20;}
  #else
    li.all a{font-weight:bold;color:#d54c20;}
  #end
</style>

<h3>Topics</h3>
<nav class="p5">
  <ul class="side-menu">
      <li class="all"><a href="/blogs/index.dot">Most Recent</a></li>
    #foreach($con in $categories.getChildrenCategoriesByKey("topic"))
      <li class="$con.categoryVelocityVarName"><a href="/blogs/index.dot?cat=$con.categoryVelocityVarName">$con.categoryName</a></li>
    #end
  </ul>
</nav>

<h3 class="border-bottom">Tags</h3>
<nav class="tag-cloud p3">
  #set($tagCloudNoStyles = "true")
  #tagCloud("Blog" '/blogs/index.dot' 20)
  <div class="clear"></div>
</nav>���

Topics

Have you created code you'd like to share with the dotCMS community?

Share your code Become a Contributor