Showing posts with label Navigation. Show all posts
Showing posts with label Navigation. Show all posts

Fading Box With Newer/Older Posts Links and Titles for Blogger

Posted by Unknown

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.
blogger gadgets, navigation for blogger

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name='nextprev'/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='blog-pager-box'>
<h4>Other posts published:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZwu0UT13WAbgGjRwjP1m90wLD-hAgtH-kz_PpsEVaG-FZXv0lL76ouvEqnpeN1l2Fx-LyeC1nC-00GFU29tlqDqyStjRyhUH5pYUOAyt61CCtM47J0bh2clpqTC00fEfAAMsTsH0hbgs/s1600/paper.jpg)'
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type='text/css'>
<!--
#blog-pager-box {
box-shadow: 0 0 3px #AEAEAE;
z-index:9;
}

#blog-pager-box h4 {
margin:0;
padding:0;
color:#4898B9; /* Widget's title color */
font-size:16px; /* Title font size */
}

#blog-pager-newer-link {float:left;clear:both;line-height:30px;}
#blog-pager-older-link {float:left;clear:both;line-height:30px;}
.home-link {display:none;}
.blog-pager-older-link, .blog-pager-newer-link {
background-color: transparent !important;
background-image: none !important;
border:0 !important;
color: #4B4B4B !important; /* Color of the links */
float: left;
width: 500px;
clear:both;
}

a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {
text-decoration:none !important;
}
 
a.blog-pager-newer-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBn_-UHLcH287ll4a7j7yEmXrxCJXmtrCvPn3ixX6tHDekMFwYMk5MiUs1vRFOnHEyA1O075p_VfjG1kl-Xp2kdmPI9wzxejL2MofhzZvQQfEppRCtvzkuFPmKqgnr9grAN7PSYOgMPwk/s1600/back.png);
float:left;
}
a.blog-pager-older-link:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Y-jPxARI0MB3zQkupkZKOvdYc_8Eiqm0-z1rdoZUhVM-HgyASMQs9_O52LJC-eDZFaDd3GOi0QDRfknTCNCu7pVXyoT-VTeWuAMV86o58dfwlfVepsC_N5QjhW2Wb7ZxXVbumguyXOQ/s1600/forward.png);
float:left;
}
#blog-pager {
width:500px;
background-color: transparent !important;
background-image: none !important;
border:0 !important;
text-align:left;
}
 
#blog-pager div {
color:#0577AB; /* Color for the "Newer Posts" and "Older Posts" text */
font-weight:bold;
margin-bottom: -5px;
}
a#blog-pager div:hover {
text-decoration:none !important;
color:#4898B9; /* Color for the "Newer Posts" and "Older Posts" text */
}
-->
</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.


Customization:


- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and that's it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.
More aboutFading Box With Newer/Older Posts Links and Titles for Blogger

A Beautiful jQuery Drop-Down Menu For Blogger Blogspot

Posted by Unknown

Alright, this time, we are going to make a stylish and simple jQuery drop down menu. The main objective is to make it as simple as possible, with some little jQuery effect and easy to customize/ apply different style on it. To style it into your own design, you just have to modify the a tag CSS style. You can change colors or put background images, or the size and color of text.
jquery menu, menu blogger

Steps Adding the jQuery Drop-Down menu

Step 1. Go to Dashboard - Template - Edit HTML - Proceed


Step 2. Expand Widget Template (make a backup)
    jquery drop-dowm menu


    Step 3. Search for the following code:

    ]]></b:skin>

    Step 4. Add the following CSS code before/above it:

    #jsddm {
    height: 40px;
    margin: 0;
    overflow: visible;
    z-index: 2;
    padding: 15px;
    position:relative;
    }
    #jsddm li {
    float: left;
    list-style: none;
    font: 12px Tahoma, Arial;
    }
    #jsddm li a {
    display: block;
    white-space: nowrap;
    margin:1px 3px;
    border: 1px solid #AAAAAA;
    background: #cccccc;
    background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
    background: -moz-linear-gradient(top, #ebebeb, #cccccc);
    padding: 5px 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-shadow: #ffffff 0 1px 0;
    color: #363636;
    font-size: 15px;
    font-family: Helvetica, Arial, Sans-Serif;
    text-decoration: none;
    vertical-align: middle;
    }
    #jsddm li a:hover {
    background: #C8C8C8;
    }
    #jsddm li ul {
    margin: 0;
    padding: 0;
    position: absolute;
    visibility: hidden;
    border-top: 1px solid white;
    }
    #jsddm li ul li {
    float: none;
    display: inline;
    }
    #jsddm li ul li a {
    width: auto;
    background: #CAE8FA;
    }
    #jsddm li ul li a:hover {
    background: #A3CEE5;
    }

    Step 5. Now find this piece of code:

    </head>

    Step 6. Add this code immediately before/ABOVE it:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
      <script type='text/javascript'>
      //<![CDATA[
    var timeout    = 500;
      var closetimer = 0;
      var ddmenuitem = 0;
    function jsddm_open()
      {  jsddm_canceltimer();
      jsddm_close();
      ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
    function jsddm_close()
      {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
    function jsddm_timer()
      {  closetimer = window.setTimeout(jsddm_close, timeout);}
    function jsddm_canceltimer()
      {  if(closetimer)
      {  window.clearTimeout(closetimer);
      closetimer = null;}}
    $(document).ready(function()
      {  $('#jsddm > li').bind('mouseover', jsddm_open)
      $('#jsddm > li').bind('mouseout',  jsddm_timer)});
    document.onclick = jsddm_close;
      //]]>
      </script>

    Step 7. Click on Save Template button.

    Step 8. Go to Layout > click on "Add a gadget" link


    Step 9. Choose HTML/JavaScript from the pop-up window



    Step 10. Paste the following code in the empty box:

    <ul id="jsddm">
      <li><a href="#">Home</a>
      <li><a href="#">Link 1</a>
      <ul>
      <li><a href="#">Drop 1-1</a></li>
      <li><a href="#">Drop 1-2</a></li>
      <li><a href="#">Drop 1-3</a></li>
      </ul>
      </li>
     <li><a href="#">Link 2</a>
      <ul>
      <li><a href="#">Drop 2-1</a></li>
      <li><a href="#">Drop 2-2</a></li>
      </ul>
      </li>
     <li><a href="#">Link 3</a>
      <ul>
      <li><a href="#">Drop 3-1</a></li>
      <li><a href="#">Drop 3-2</a></li>
      <li><a href="#">Drop 3-3</a></li>
      <li><a href="#">Drop 3-4</a></li>
      </ul>
      </li>
     <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
      <li><a href="#">Link 6</a></li>
      </li></ul>

    Note :

    You must change links titles and replace the # symbol with the URL address of each of your links

    Step 11. Click on Save

    Important:

    - if your menu is on the sidebar, or footer, just drag it to your page header and click and click Save again.
    - if drop down links are not showing, do the following:

    Go back to Template > Edit HTML and search (CTRL + F) for this code:

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

    You should change 1 with 3 and no with yes like this:

    <b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

    Save the Template.

    Next thing to do is to go to Layout and drag your menu immediately below your header


    Then click on Save Arrangement


    Here you can see the DEMO.

    Enjoy! :)


    More aboutA Beautiful jQuery Drop-Down Menu For Blogger Blogspot

    How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

    Posted by Unknown

    If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

    If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

    How To Add Post Titles Instead of Older Post/Newer Post Link

    Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link


    Step 2. From the pop-up window, choose "HTML/JavaScript"


     Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    var olderLink = $("a.blog-pager-older-link").attr("href");
    $("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
    var olderLinkTitle = $("a.blog-pager-older-link:first").text();
    $("a.blog-pager-older-link").text(olderLinkTitle);
    });
    var newerLink = $("a.blog-pager-newer-link").attr("href");
    $("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
    var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
    $("a.blog-pager-newer-link").text(newerLinkTitle);
    });
    </script>

    Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

    Step 4. Now Save the Widget and drag it under the Blog Posts section.


    Step 5. Click on Save arrangement.


    Now view your blog and see the older/newer posts link, replaced with your post titles.

    For any questions, leave a comment below.


    More aboutHow to Replace Older Posts and Newer Posts Links with Blogger Post Titles

    Replace Older, Newer And Home Blogger links with an image or text

    Posted by Unknown

    Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
    The number of the posts on these pages will be the same as the number of the posts on your main page.


    What we can do:

    A. Change the text of Newer, Older, Home links
    B. Place a picture beside them (a small icon, arrow, or whatever...)
    C. Add an image instead of the links

    So let's start customizing them...

    1. Log in to your Blogger Dashboard, go to Template > Edit HTML

    2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:
        <b:if cond='data:newerPageUrl'>
          <span id='blog-pager-newer-link'>
          <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
          </span>
        </b:if>

        <b:if cond='data:olderPageUrl'>
          <span id='blog-pager-older-link'>
          <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
          </span>
        </b:if>

        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    Or find in this code the following fragments which corresponds to each page links
    • <data:newerPageTitle/> represents Newer Posts link
    • <data:olderPageTitle/> represents Older Posts link
    • <data:homeMsg/> represents Home link

    Now change these fragments of codes as it follows:

    A. Change the text of Newer Posts, Older Posts and Home Links


    You need to REPLACE following parts in original code with ANY TEXT you like:
    • replace <data:newerPageTitle/> with, for example NEXT POST 
    • replace <data:olderPageTitle/> with, for example PREVIOUS POST
    • replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

      B. Place a picture beside Newer Posts, Older Posts and Home links


      Add the below code just at the beginning of each of the colored fragments of codes from step 2.
      <img src="URL Address"/>

      So it should look like this:
      <img src="URL Address"/><data:newerPageTitle/>
      Note: Replace URL Address text with the url address of the image you want to appear

      C. Replace Older Posts, Newer Posts and Home links with an image/picture


      You can place any kind of picture you want All you have to do is use this code for the pic:
      <img src="URL ADDRESS"/>
      ...just replace URL ADDRESS, with the URL of your hosted picture
      ...and in code, REPLACE the original link code for text with picture code
      • replace <data:newerPageTitle/> with the pic for newer (next) posts
      • replace <data:olderPageTitle/> with the pic for older (previous) posts
      • replace <data:homeMsg/> (only the first one) with the pic for homepage
      Screenshot
      blogger tricks, older posts, newer posts

      3. That's it! Preview and Save the Template.
      More aboutReplace Older, Newer And Home Blogger links with an image or text

      Add Css/Jquery fixed horizontal menu to blogger blog

      Posted by Unknown

      This navigation bar gets semi-transparent when you scroll down the page and is slightly showing up by fading out and becoming almost transparent. When the user hovers over it, the menu becomes opaque again.

      Inside of the navigation there are some links, a search input and a top and bottom button that allows the user to navigate to the top or bottom of the page.


      Let's start adding it...

      1. Go To Blogger - Template - Edit HTML


       ....and select the "expand widget templated" box:



      2. Search (using CTRL + F) for this piece of code:

      </head> 

      3. Just above/before the </head> tag, add this code:

      <link rel="stylesheet" href="http://fe-blogger.googlecode.com/svn/trunk/html/[fe-blogger.blogspot.com]Fixed Fade Out Menu.css"/>
      <script type="text/javascript" src="http://fe-blogger.googlecode.com/svn/trunk/html/[fe-blogger.blogspot.com]jquery-1.3.2.js"></script>
       <script type="text/javascript">
                  $(function() {
                      $(window).scroll(function(){
                          var scrollTop = $(window).scrollTop();
                          if(scrollTop != 0)
                              $('#nav').stop().animate({'opacity':'0.2'},400);
                          else   
                              $('#nav').stop().animate({'opacity':'1'},400);
                      });
                     
                      $('#nav').hover(
                          function (e) {
                              var scrollTop = $(window).scrollTop();
                              if(scrollTop != 0){
                                  $('#nav').stop().animate({'opacity':'1'},400);
                              }
                          },
                          function (e) {
                              var scrollTop = $(window).scrollTop();
                              if(scrollTop != 0){
                                  $('#nav').stop().animate({'opacity':'0.2'},400);
                              }
                          }
                      );
                  });
              </script>

      4) Now search for this tag:

      <body>  

      If you can't find it, search for this one:

      <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

      5) Just below/after this code, copy and paste the following code:

      <div id="nav">
      <ul>
      <li><a class="top" href="#top"><span></span></a></li>
      <li><a class="bottom" href="#bottom"><span></span></a></li>
      <li><a href='URL address'><span>Link 1</span></a></li>
      <li><a href='URL address'><span>Link 2</span></a></li>
      <li><a href='URL address'><span>Link 3</span></a></li>
      <li><a href='URL address'><span>Link 4</span></a></li>
      <li><a href='URL address'><span>Link 5</span></a></li>
      <li><a href='URL address'><span>Link 6</span></a></li><li class="search">

      <input type="text"/><input class="searchbutton" type="submit" value=""/>
      </li>
      </ul>
      </div>
      <div id="top"></div>
      <div class="desc"></div>
      <div id="bottom"></div>
      <div class="scroll"></div>

      Note: Replace URL address with the URL of your pages and Link 1, 2, 3, 4, 5, 6 with the name of the link that will appear in the menu.

      6) Now click on the Save Template button and you're done ;)

      Credit goes to the original author. This widget was inspired by David Walsh’s top navigation bar.
      More aboutAdd Css/Jquery fixed horizontal menu to blogger blog

      How To Remove Blogger Navbar

      Posted by Unknown

      WHAT IS BLOGGER NAVBAR?
      Blogger has got a Navigation Bar that appears by default at the top of every Blogger-powered blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way. The Blogger navbar is usually hidden in most of the third party templates.

      The advantages of it are the following:

      - when you click on the B icon, it will take you to blogger.com
      - a quick link to your Dashboard and "Sign in /Sign out" dialog
      - you can easily search for other blogs
      - you can "Flag Blog" (if you consider content of a blog objectionable)
      - NextBlog - takes you to a random, recently-updated Blogger blog

      The only disadvantage is visual. If you have customized design, Navbar just doesn't fit in.

      So how we get rid of it? It is very simple. Just follow the next steps...

      Removing The Blogger Navbar:

      1. Login to your Blogger account, click on your blog name and navigate to Layout;

      2. Look for the Navbar text and click on the Edit link as shown in the picture below:

      blogger navigation bar, blogspot tricks

      3. When the pop-up window appears, scroll down and select Off, then click on Save button:

      blogger navbar, navigation bar, blogger

      You're done.
      More aboutHow To Remove Blogger Navbar