Internal HTML Links
One of our lovely Wicked Plum beta users recently asked how we created the “jump”-style navigation we use on the Shop Policies page at Sweet Tarragon. It’s a simple bit of HTML – nothing fancy, but nice to have in your bag o’tricks nonetheless.
Start by adding your content – both the content you want to be the links, and the content you want to link to. For a demo, we’re going to hit the “random article” button on Wikipedia…which gives me Santa Maria Formosa. After you enter the content, and if you’re working in WordPress or a Wicked Plum shop, you’ll need to click the “HTML” tab in the top right corner of the screen.
You should see something like this:
View Code
<p><strong>Santa Maria Formosa</strong><br />
From Wikipedia, the free encyclopedia</p>
<p>Skip to: Description | Exterior Design and Artworks | See Also | Sources</p>
<p><strong>Description</strong><br />
Santa Maria Formosa is a church in Venice, northern Italy. It was erected in 1492 under the design by Renaissance architect Mauro Codussi. It lies on the site of a former church dating from the 7th century, which, according to tradition, was one of the eight founded by San Magno, bishop of Oderzo. The name "formosa" relates to an alleged appearance of the Holy Virgin disguised as a voluptuous woman [1].</p>
<p><strong>Exterior Design and Artworks</strong><br />
The plan is on the Latin cross, with a nave and two aisles. The two façades were commissioned in 1542, the Renaissance-style one facing the channel, and 1604, the Baroque one facing the nearby square. The artworks in the interior include the St. Barbara polyptych by Palma the Elder, one of his most celebrated works. The Conception Chapel houses a triptych of Madonna of Misericordia by Bartolomeo Vivarini (1473), while in the Oratory is the Madonna with Child and St. Dominic by Giambattista Tiepolo (18th century). There is also a Last Supper by Leandro Bassano. The dome of the church was destroyed in an earthquake in 1688, but was rebuilt.</p>
<p><strong>See Also</strong><br />
<a href="http://en.wikipedia.org/wiki/Palazzo_Grimani_di_Santa_Maria_Formosa">Palazzo Grimani di Santa Maria Formosa</a></p>
<p><strong>Sources</strong><br />
<a href="http://www.chorusvenezia.org/english/museo/index.htm">Chorusvenezia</a>, [<a href="http://traveldk.com/venice/castello-1/dk/campo-santa-maria-formosa">1</a>]</p>Once you’re working in HTML, the first thing you’ll want to do is add your bookmarks. Find the location of the first thing you want to link to. In our case, it’s “Description”. Surround that text with the special link code BookmarkText Here, where “X” is the name of your link. It sounds a little confusing – heck, I know how to do it and that sounds confusing, so here’s a demonstration. We’re creating a link to the “Description” section, so I’m going to add the name “descr” as my link code:
View Code
<p><strong><a name="descr">Description</a></strong><br />
Santa Maria Formosa is a church in Venice, northern Italy...</p>Of course creating that little bookmark doesn’t do much good unless something links to it, so now you need to link to your bookmark by surrounding your link text with Link Text Here, where X=the name of the bookmark you created. The bookmark/link names can be anything you’d like them to be, as long as they match. (Bookmark “joe” and link “joe” will work, but bookmark “joe” and link “jo” won’t.) So to link to the bookmark we just created, I’ll edit the “Skip to:” section at the top of my page thusly:
View Code
<p>Skip to: <a href="descr">Description</a> | Exterior Design and Artworks | See Also | Sources</p>For good measure, we’ll create the second bookmark, “Exterior Design and Artworks”, and call it “ext”:
View Code
<p><strong><a name="ext">Exterior Design and Artworks</a></strong><br />
The plan is on the Latin cross, with a nave and two aisles. The two façades were...</p>And then link to it:
View Code
<p>Skip to: <a href="descr">Description</a> | <a href="ext">Exterior Design and Artworks</a> | See Also | Sources</p>That’s all there is to it!
Now if you really want to get fancy, you can even link to bookmarks on other pages, by including the complete URL of the page before the bookmark in your link. For example, doing this:
View Code
<a href="http://sweettarragon.com/about/shop-policies#satisfaction">Sweet Tarragon Satisfaction Guarantee</a>will link you directly to the Sweet Tarragon Satisfaction Guarantee!
dani made this mess on May 7th, 2010