Coding the "Read Online" page

A. Goals

1. Code the "Read Online" Page

2. Create links to the PL Voice PDF's

3. Use CSS to style the links for a compact, orderly display.



B. Code links for a year's PDFs


<div class="readonline">
<h4>2019</h4>

<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-01.pdf" rel="noopener noreferrer">Jan</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-02.pdf" rel="noopener noreferrer">Feb</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-03.pdf" rel="noopener noreferrer">Mar</a>

<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-04.pdf" rel="noopener noreferrer">Apr</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-05.pdf" rel="noopener noreferrer">May</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-06.pdf" rel="noopener noreferrer">Jun</a>

<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-07.pdf" rel="noopener noreferrer">Jul</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-08.pdf" rel="noopener noreferrer">Aug</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-09.pdf" rel="noopener noreferrer">Sep</a>

<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-10.pdf" rel="noopener noreferrer">Oct</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-11.pdf" rel="noopener noreferrer">Nov</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2019-12.pdf" rel="noopener noreferrer">Dec</a>
</div>



C. Add a <br> for an extra line space every third year.


<div class="readonline">
<br>
<h4>2018</h4>

<a target="_blank" href="http://plvoice.net/issues/PLVoice_2018-01.pdf" rel="noopener noreferrer">Jan</a>
<a target="_blank" href="http://plvoice.net/issues/PLVoice_2018-02.pdf" rel="noopener noreferrer">Feb</a>



D. Paste into "Custom HTML"

1. Navigate to // Pages / Read Online / Edit

2. Open a "Custom HTML" block

3. Paste or type your code.

4. "Update" to save your work.



E. Code some "Additional CSS"

1. Navigate to // Appearance / Customize / Additional CSS

2. Paste or type the following CSS code:

3. Then "Publish" to save your work.


div.readonline{
	padding-top:1em;
	clear:left;
}

div.readonline h4{
	margin-top:8px;
	margin-bottom:0px;
}

div.readonline a{
	display:block;
	width:35px;
	float:left;
	margin-right:15px;
}