Create A Link To A specific Point within a post in blogger

Create A Link To A specific Point within a post in blogger. You might have seen this widget on Help or FAQ pages, a list of the most common questions and when you click on the question it jump to the answer. This effect is created by two ways by using simple links or by using jquery. jquery creates nice smooth scrolling effect so in this post i have created it only by using jquery

Link To A specific Point Demo

Live Demo

How To Create a URL to point to a paragraph within a post in Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the Code shown below just before/above it

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://latesthack.googlecode.com/svn/branches/linktopoint/localscroll.js" type="text/javascript"></script>
<script src="http://latesthack.googlecode.com/svn/branches/linktopoint/scrollto.js" type="text/javascript"></script>

<!--[if IE]>
<script src="http://latesthack.googlecode.com/svn/branches/linktopoint/html5.js"></script>
<![endif]-->

<script type="text/javascript">
$(document).ready(function() {
  $('#nav').localScroll({duration:800});
});
</script>

Now how to create a link to specific point

• The actual links users click to jump to desired sections are regular hyperlinks like this with the name of the section :

<a href="#headline1">1</a>
 <a href="#headline2">2</a>
 <a href="#headline3">3</a>
 <a href="#headline4">4</a>a

• Now comes to body part Add the code to each title as shown below

<div class="section">
<a name="headline4">Headline One</a>
</div>

<div class="section">
<a name="headline4">Headline Two</a>
</div>
<a name="headline4">Headline Three</a></div>

<div class="section">
<a name="headline4">Headline Four</a>
</div>

Like it? Share it.