Widgets

How to Put Links within a Specific Page

Linkage on the Internet is a standard part of designing a website because it is included as a basic skill in any course on creating a website. When someone clicks on a link on your site, the browser normally takes that person to the top of the new document. That is the normal and expected behaviour.

I was amazed `on how those professional bloggers made a post and within that certain post they add link and when I clicked the link, it didn't go to the other post or page but just go to a certain specific height within that post.  Wow it's amazing. I called this personally as "self linkages". We will not add javascript on your template but just a simple HTML code to your Blogger Post editor where you want to apply this effect.The principle behind this  tutorial:
  • Create a link pointing to the anchor. This is the word where you add the link wherein if you click this link you will be directed to a certain height (target) within your page.  
  • Create the anchor itself.This is the target height of your page.

Putting Links (Self-Anchoring) Within a Specific Page 

Step 1. Open a post (much better if it is lenghty) and get the post link or you can create new post, publish it and of course, get the link.
Step 2. From your post, select a word where you put the link ( in step 1). Do this as you normally put link(s) in your posts.
The normal link would look like the one below,
http://mybloggersnipers.blogspot.com/2013/08/how-to-make-blockqoute-styles-in-blogger.html

 But in order to put link to your anchor you need to add some word on it at the last portion. See example below,
http://mybloggersnipers.blogspot.com/2013/08/how-to-make-blockqoute-styles-in-blogger.html#gradient

The link above is now your link pointing to your anchor.

After creating the link pointing to your anchor, it is now time to create  the anchor itself or the target height within your page.
Step 3.  Copy the code below as your guide,
<a href="
http://mybloggersnipers.blogspot.com/2014/09/add-your-profile-pic-or-avatar-next-to.html" name="gradient"></a>

  • Replace the orange bold texts with your own link.
  • Replace also the red bold text with tag that is found in your link pointing to your anchor ( in step 2). These tags must match with each other.
After customizing the above codes,  select a certain  specific height location of your post and paste it (it must be in HTML mode).
Step 4. Update your post and you're done.

Also Check These Posts:
  • How To Add Go Up And Go Down Buttons Using The JQuery Slide Effect
  • Putting A Show - Hide Effect Or Content Spoiler In Blogger
Hope this will help you friends. If you have some questions, feel free to leave a comment below or contact me. I will do my best to explain it further.




Take care and Enjoy!


No comments:

Post a Comment

Recent Posts

Related Posts Plugin for WordPress, Blogger...

Definition List