Skip to main content

Breadcrumb For Blogger

Hi... Friends. Sorry for not posting for a long time because i am busy in website template makeover. After all i will going to tell what thing i have introduced in my website template and how you can use it in you templates for blogger.
In this post i am going to tell how to introduce Breadcrumb in Blogger. Breadcrumb trail will help readers keep track of their location and they can browse easily between different parts of website.

In Dtcrunch template, there's a section for reader postion 

Here is steps to make a breadcrumb for blogger template 

1. Log in your blogger Account 

2. Click Layout -> Edit HTML -> Download Full Template for Backup

3. Check the Expand Widget Template 

4. Find the code ]]></b:skin>

5. Copy and paste the code below exactly above the code

             .breadcrumbs{
             padding:5px 5px 5px 0;
             margin:0;font-size:95%;
             line-height:1.4em;
             border-bottom:4px double #cadaef;
            }

6. Find the following code in your template :
            <div class='post uncustomized-post-template'>

7. Copy and paste the code below exactly below the code <div class='post uncustomized-post-template'>

     <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <b:else/>
         <b:if cond='data:blog.pageType == &quot;item&quot;'>
           <div class='breadcrumbs'>
                       Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187;
                      <b:if cond='data:post.labels'><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>
                        </b:if> &#187; <data:post.title/>
                    </div>
          </b:if>
        </b:if>

8. Click Save Template button

9. Wait for a while until your template saved, Now open you blog, click the title of an article see the results
enjoy!!

Popular posts from this blog

Add Smilies/ Emoticons in Google Talk (Gtalk)

I Really love to use Smilies while chatting. Well, unfortunately GTalk doesn’t have smilies included by default . So Here You will find Out How To do it ... Well, it’s really simple. The main concept of getting smilies is through converting the text smilies of GTalk into smilies. As the new Version of GTalk includes support for themes we can add a theme with custom smilies in order to get rid of those text smilies. In short, it’s nothing but just adding a custom theme. Follow Simple Steps : 1) Download any one of the below smiley theme which you like. Download Classic Emoticons theme Download Bubble Emoticons theme 2) Now extract the zip to a specific folder. 3) Go to the following location: C:/Documents and Settings/(your user name)/Local Settings/Application Data/Google/Google Talk/themes/user/chat 4) Replace (your user name) with your Windows account user name without brackets The folder chat isn’t there by default so you have to create a folder with the name “chat” inside t...

Create a PDF Viewer ShortCode

Do you need to show PDF files on your WordPress Blog. If yes here is a small code for this. This will gives a feature to open the PDF files using Google Docs . The first step is to paste the following code into your functions.php file: function pdflink($attr, $content) { return '<a class="pdf" href="http://docs.google.com/viewer?url='  . $attr['href'] . '">'.$content.'</a>'; } add_shortcode('pdf', 'pdflink'); Once you saved the file, you'll be able to use the shortcode on your posts and page. Here is the syntax : [pdf href="http://yoursite.com/linktoyour/file.pdf"]View PDF[/pdf]   If you enjoyed this post, Please Consider Sharing it! You may also like to read: How to turn off Find My iPhone How to fix 'iPhone is disabled Connect to iTunes' error messages How to mirror/screencast iPhone to a smart TV how to Delete All Photos from iPhone How to make Chrome default browser How ...

Google Translate, Now With Voice Input

Google Chrome 11 added support for HTML speech input API. " With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer's microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you." Google Translate is the first Google service that uses this feature. If you use Google Chrome 11 Beta , Google Chrome 12 Dev / Canary or a recent Chromium build and visit Google Translate (Click Here) , you can click the voice input icon. Right now, this feature only works for English, so you need to select "English" from the list of input languages.