VIEW ALL GALLERY LIGHTS

Monday, October 25, 2010

Breadcrumb for Simplex Enews template

The latest version of Simplex Enews -click here


A breadcrumb trail will help readers keep track of their location , and they can browse easily between different parts of website .
In SimplexEnews template ,there's a section for breaking news ,but if you don't like breaking news ,or think it's not suitable in your site ,you can replace it with a breadcrumb trail .
SimplexEnews breadcrumb


Here is steps to make a breadcrumb for SimplexEnews template

1,Open template in a word editor .

2,Find this code :
#breadcrumb a,#breadcrumb span { padding:0 3px 0 10px; background:url(http://img827.imageshack.us/img827/1085/iconarrowright.png) no-repeat 0 3px; }
and delete it .

3,Find this code
<strong style="float:left;">Breaking News:</strong>
             <script>
                     document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label9+&quot;?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts4\&quot;&gt;&lt;\/script&gt;&quot;);
             </script>           
             <script type="text/javascript">
     
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 1000,
                        timeout: 3000,
                        type: 'random',
                        containerheight: '1em'
                    });
            </script> 

 
and replace it with

<strong style="float:left;">
You are here : <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<span id="break"></span>
</strong> 
 
4,Find this code :
<b:includable id='main' var='top'>
and insert this line right after the code above:
<b:include data='top' name='status-message'/>

5,Find this line :
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
and insert this code right after the line above
<div id="breakcrumb" style="display:none">
                                     <data:post.title/>
                                 </div>

6,Find this line
<b:if cond='data:blog.pageType == &quot;item&quot;'>
and insert this code rightafter the line above
<div id="breakcrumb" style="display:none">
                                         <b:loop values='data:post.labels' var='label'>
                                             <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
                                         </b:loop> &#187; 
                                         <data:post.title/>
                                     </div>

7,Find this code
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                        <div class='status-msg-wrap'>
                                         <div class='status-msg-body'>
                                             <data:navMessage/>
                                         </div>
                                         <div class='status-msg-border'>
                                             <div class='status-msg-bg'>
                                                   <div class='status-msg-hidden'><data:navMessage/></div>
                                             </div>
                                         </div>
                                        </div>
                                     <div style='clear: both;'/>
                                 </b:if>
                             </b:includable>
and replace it with
<b:includable id='status-message'>
                                 <b:if cond='data:navMessage'>
                                     <div id="breakcrumb" style="display:none">
                                         <data:navMessage/>
                                     </div>                                       
                                 </b:if>
                             </b:includable>

8,The last step : insert the following code right before </body>
<script>
     var brc = document.getElementById('breakcrumb');
     var brcc = brc.innerHTML;   
     var brcc1;
     var bold = brc.getElementsByTagName('b');
     if (bold.length&gt;=1)
      {brcc1 = bold[0].firstChild.data}
      else {
      brcc1 = brcc;}
     var show = document.getElementById('break');
     show.innerHTML =brcc1;     
     
</script>

Save template and you are done . I hope a breadcrumb in this template will helpful to you .

No comments:

Post a Comment