Blog Title Search, Category Menu and Blog Tag Cloud


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.


Blog Title Search, Category Menu and Blog Tag Cloud


<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" />
<!-- end .BlogSearch -->
<script type="text/javascript">
  function focusOnSearchBox() {
  window.onLoad = focusOnSearchBox();

    li.$catVar a{font-weight:bold;color:#d54c20;}
    li.all a{font-weight:bold;color:#d54c20;}

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

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