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.

Image

Blog Title Search, Category Menu and Blog Tag Cloud

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>​