CREATING A PERSONAL COIN LIST – PART 3

Page

There are two steps to creating your Coin List index.html file. The first step is opening any simple text editor, such as Notepad. This is where we will put all of the code to pull in the widgets for the individual coins we want to include in our list. Once you have your text editor open, copy and paste the code below into it.

Note #1: You will need to click on the graphic below to open the actual text in a new window. WordPress does not display web-based code correctly for you to copy.

Note #2: You may notice in the latest version of my code is a line that looks like <meta http-equiv=refresh content=300“>. This code says refresh the page every 300 seconds (5 minutes). You can change this refresh time to suit your preference, but Coin Market Cap only refreshes every five minutes at the moment.

CoinListdoc01

Click Image To Open Code Source

If this is the only code you put in your index.html file, your Coin List page would look like this…

CoinList03

I highlighted the middle part of the code text in red because I want to specifically explain how you will use it to customize your page. The top four lines starting with <head> will always be there, and the bottom </table> line will always be there, but the red lines will change based on what you want to see on your page.

The first thing to notice is there are three specific <td> lines in red. These lines, along with the <script type> & <div class> lines, specify the code to pull in three widgets for three different currencies (bitcoin, nexus & bitbay) from CoinMarketCap. If you want four coins across your page instead of three, just copy the <td><script type> & <div class> lines and paste them above the </tr> line. I used three across simply because this was easier to see on my phone than four across. Two across might work best for you.

To add the next row of widgets, I need to first copy all of the lines in red, and paste them above the </table> line. Let’s say I also want to add a 4th currency to each line. After I copy/paste and add a 4th currency, my code will look like this…

CoinListdoc02

Click Image To Open Code Source

The red and blue code above is identical. Obviously, this is not going to work for you. You don’t want to see duplicate data. You want each box to contain data for one individual coin. This is where step 2 comes in.

If you leave it like it is above, four of your boxes will contain data for BitBay, two for Bitcoin and two for Nexus. Sometimes it is as easy as changing the data-currency. For example, replacing “bitbay” with “pivx” will work, because on Coin Market Cap “pivx” does in fact mean “pivx.” However, this is not always the case. For example, Safex on Coin Market Cap is “safe-exchange-coin.” You also may want to alter other information, such as changing the Fiat Currency from USD. To get exactly the data you are looking for in each widget you need to head over to the Coin Market Cap Widget page. Here you can plug in the information you want to see pulled in for each currency, and it will generate the code for you. Let’s create a widget for Swarm City in AUD. Be sure to select BTC as secondary if you want to see the BTC price.

CoinList04

All I need to do now is to copy the code Coin Market Cap generated and replace one of the BitBay lines starting with the <script Type> and including the <div class> portion. Once I do this, the code for the 4th widget along the top line will look like…

CoinListdoc03

Click Image To Open Code Source

And my Coin List page (after I update it) will now show Swarm City in AUD on the first line all the way to the right…

CoinList05Now, it is up to you to simply populate all of the information for the currencies you want to see in your text editor. If you want 100 coins listed, that is no problem. It just takes you creating 100 lines with the correct widget information from Coin Market Cap. Continue adding lines until you have everything you want to see listed. You can always update the list after it is published to the web, so start with a few of your favorites, and add more later. I promise it becomes quicker and easier after you do a few.

Now we are ready to put our new page up on GitHub.

 

button_back-to-previous-step     button_on-to-next-step