Model III CSS Box text

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>

.sample-grid {
  width:auto;
  overflow:hidden;
  margin:0 auto;
}

.sample-grid .custom-grid-3 {
  width:31%;
  margin:0 0 1.5em 3.5%;
  float:left;
  display:inline;
  overflow:hidden;
  word-wrap:break-word;
  min-height:1px;
}

<script type="text/javascript">
$(document).ready(function () {
     $('div.jimgMenu ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"},
{duration: 450, easing: "easeOutQuad", complete: "callback"});
          }
               $(this).removeClass("active").stop(':animated')
.animate({width: "78px"},{duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(document).ready(function () {
     $('div.jimgMenu ul li a').hover(function() {
          if ($(this).is(':animated')) {
               $(this).addClass("active").stop().animate({width: "310px"},
{duration: 450, easing: "easeOutQuad", complete: "callback"});
          }
               $(this).removeClass("active").stop(':animated')
.animate({width: "78px"},{duration: 450, easing: "easeInOutQuad", complete: "callback"});
          }
     });
});
</script>

<![CDATA[/*-----------------------------------------------
Blogger Template Style
Name: Dynamic Views
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff"
         variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#ffffff"/>

   <Group description="Page">
     <Variable name="page.text.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif"/>
     <Variable name="page.text.color" description="Text Color" type="color"
         default="#333333" variants="#333333" value="#333333"/>
     <Variable name="body.background.color" description="Background Color" type="color"
         default="#EEEEEE"
         variants="#dfdfea,#d9f4f4,#e4f2eb,#e9ead9,#f4eed9,#fdead9,#f8e3e0,#fdebed,#ebe5e3" value="#EEEEEE"/>
   </Group>

<p><data:blogCommentMessage/></p>
      <data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>
</b:includable>