Hi there,
I don't exactly know what the right term is, but basically, I want to put "jumps" in my post. Let me describe what I want to do:
I use blogger. On the front page, I have 4-5 posts, but some are too long (and take up most of the page). In the case of these long posts, I don't want the entire post to appear on the front page. I would like to have a "More after the jump" link in between my post, that opens the post in a new page, and continues with the rest of post. That way, on the front page, you could see half the post and you could click the "More" link to see the rest of the post (hopefully repetition got my point across).
Does anyone know how to do this using html?
Thanks, I appreciate it.That is called a "page anchor". It is similar to a hyperlink. Basically, where you 'start' from, you add "<a href=http://www.webdeveloper.com/forum/archive/index.php/"#name">Jump to</a>" whereby "#name" will be the'target' (the rest of your text, further down the page).
For the 'target', you add "<a name="name"></a>" whereby "name" is the word or words used in the "#name".
Study this example:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
*{border:0; padding:0; margin:0;}/* Set everything to "zero" */
body {min-height:100%; height:100%;
font-size: 85%;}
img {margin:6px;}
p {line-height:1.2em; margin: 18px 10px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
#faqnav {margin:25px;}
#faqnav ul {list-style-type:none; width:195px; height:auto; padding-top:10px;text-align:left;}
#faqnav ul li {margin-bottom:17px; text-decoration:none;}
#faqnav ul li a {color:red;text-decoration:none; font-weight:bold; padding-left:15px;}
#faqnav ul li a:hover {color:silver; border-bottom:2px solid silver; font-weight:bold; letter-spacing:0.1em;}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico"><!-- path to your favicon -->
</head>
<body>
<div style="width:500px; height:auto; border:3px double silver; padding:15px 10px; margin:5px auto;" >
<h1>Now Blog This!, etc.</h1>
<p>Text, etc. My place to rant, etc.</p>
</div>
<div style="width:500px; height:auto; border:3px double silver; padding:15px 10px; margin:25px auto;" >
<h2>First Blog:</h2>
<p style="color:red;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui...<a href=http://www.webdeveloper.com/forum/archive/index.php/"#lorem">Click to read the rest</a>
</div>
<div style="width:500px; height:600px; margin:10px auto; background-color:#fff9ce;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:150px; height:250px; border:1px solid black; float:left;" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:150px; height:250px; border:1px solid black; float:right;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<a name="lorem"></a>
<div style="width:500px; height;auto; margin:25px auto; padding:15px 10px; border:3px double silver;">
<h1>First Blog...(continued) </h1>
<p style="color:red;">...Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</body>
</html>
I don't exactly know what the right term is, but basically, I want to put "jumps" in my post. Let me describe what I want to do:
I use blogger. On the front page, I have 4-5 posts, but some are too long (and take up most of the page). In the case of these long posts, I don't want the entire post to appear on the front page. I would like to have a "More after the jump" link in between my post, that opens the post in a new page, and continues with the rest of post. That way, on the front page, you could see half the post and you could click the "More" link to see the rest of the post (hopefully repetition got my point across).
Does anyone know how to do this using html?
Thanks, I appreciate it.That is called a "page anchor". It is similar to a hyperlink. Basically, where you 'start' from, you add "<a href=http://www.webdeveloper.com/forum/archive/index.php/"#name">Jump to</a>" whereby "#name" will be the'target' (the rest of your text, further down the page).
For the 'target', you add "<a name="name"></a>" whereby "name" is the word or words used in the "#name".
Study this example:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
*{border:0; padding:0; margin:0;}/* Set everything to "zero" */
body {min-height:100%; height:100%;
font-size: 85%;}
img {margin:6px;}
p {line-height:1.2em; margin: 18px 10px;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
font-style:normal; font-variant:normal; font-weight:normal; margin:11px 0 0 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
#faqnav {margin:25px;}
#faqnav ul {list-style-type:none; width:195px; height:auto; padding-top:10px;text-align:left;}
#faqnav ul li {margin-bottom:17px; text-decoration:none;}
#faqnav ul li a {color:red;text-decoration:none; font-weight:bold; padding-left:15px;}
#faqnav ul li a:hover {color:silver; border-bottom:2px solid silver; font-weight:bold; letter-spacing:0.1em;}
</style>
<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href=http://www.webdeveloper.com/forum/archive/index.php/"favicon.ico"><!-- path to your favicon -->
</head>
<body>
<div style="width:500px; height:auto; border:3px double silver; padding:15px 10px; margin:5px auto;" >
<h1>Now Blog This!, etc.</h1>
<p>Text, etc. My place to rant, etc.</p>
</div>
<div style="width:500px; height:auto; border:3px double silver; padding:15px 10px; margin:25px auto;" >
<h2>First Blog:</h2>
<p style="color:red;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui...<a href=http://www.webdeveloper.com/forum/archive/index.php/"#lorem">Click to read the rest</a>
</div>
<div style="width:500px; height:600px; margin:10px auto; background-color:#fff9ce;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:150px; height:250px; border:1px solid black; float:left;" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"#" style="width:150px; height:250px; border:1px solid black; float:right;" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</div>
<a name="lorem"></a>
<div style="width:500px; height;auto; margin:25px auto; padding:15px 10px; border:3px double silver;">
<h1>First Blog...(continued) </h1>
<p style="color:red;">...Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>
</body>
</html>