Embeddable Widgets

Use the embeddable widgets below to help us spread the word about CHNC and free access to Colorado historic news.

To create a light widget, using default values and styles, searching all titles, use this snippet.

<div id="chnc_search"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

To change the widget’s appearance and search specific titles, you can include attributes in the <div id=”chnc_search”> element. For example:

To create a dark widget, use this snippet:

<div id="chnc_search" data-color="dark"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

If you want to restrict the search to specific titles, add the three-letter codes for the titles as a comma-separated list in a ‘data-search’ attribute. For example, this widget searches the titles Aspen Daily Chronicle, Aspen Daily Leader, Aspen Daily Times, Aspen Democrat, Aspen Democrat-Times:

<div id="chnc_search" data-search="ADC,ADL,ADT,TAD,ADS"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

A title’s three-letter code can be found in a title page url for example: https://www.coloradohistoricnewspapers.org/?a=cl&cl=CL1&sp=BMR&e=——-en-20–1–img-txIN%7ctxCO%7ctxTA——–0–. BMR is the three-letter code for Big Mama Rag.

The widget’s default heading is “Search Colorado Historic Newspapers” in a <h3> element. To change the text to create a custom heading, use a ‘data-heading’ element.

<div id="chnc_search" data-heading="This is a custom heading"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

To omit a heading use the below. Note that is has to say “none”; if it’s just “” then the default heading is used.

<div id="chnc_search" data-heading="none"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

Finally, you might want your own site’s styles to govern the appearance of the widget, or just to style the widget yourself.
To use only the widget’s basic layout styles, use a data-addstyles="basic" attribute:

<div id="chnc_search" data-addstyles="basic"></div>

Or, to not apply any of the widget’s styles, and just create your own styles:

<div id="chnc_search" data-addstyles="no"></div>

Also note that all of these attributes can be combined. So, if you wanted a dark widget that searched only specific titles, had a custom heading, and used only the basic styles, you could use:

<div id="chnc_search" data-color="dark" data-search="ADT,ADC,ADL" data-addstyles="basic" data-heading="Search Historic Local Newspapers"></div><script src="https://www.coloradohistoricnewspapers.org/forum/embeds/search-widget.js" type="text/javascript"></script>

Skip to toolbar