Construction News Widget
The FREE construction news widget, allows you to show the most up to date construction news, on your own website. Using the short piece of HTML code below, this is an easy cut and paste website update.
How does the widget work?
Once the widget code is installed on your website, it will now automatically refresh with new construction news as its published on 萝莉原创 website. 萝莉原创 is free to access, with no subscription or registration pay wall.
What's it in for me?
The new modern design supported with custom colours, could really add to both the look and feel of your website. The fresh new content delivered daily will offer visitors to your website something new to engage with, some may even visit more often.
Basic Installation
Basic installation is very straight forward - just copy and paste the below HTML code into your website and the widget will load! If you have any problems, let us know via the contact us form. We will do our best to support you with any challenges you might face.
Customisation Examples
You can customise the dimensions of the construction news widget, using the method below. By default the dimensions are set to 200 x 400 pixels.
170x600 (no photos)
<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="170" data-height="600" data-photos="false"></div>
<script src="/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->200x600
<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="200" data-height="600"></div>
<script src="/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->300x600
<!-- tci-news-widget -->
<div class="tci-news-widget" data-width="300" data-height="600"></div>
<script src="/widgets/embed-news.js"></script>
<!-- /tci-news-widget -->How to customise your new construction news widget
The recommended way would be to use HTML5 'data attributes' on your HTML tag, like in the examples above (they look like this data-example="value"). You can also configure single instances of the widget on your page using a Javascript variable, which will be an object with the keys / values below.
| Data Attribute | Variable Key | Type | Example | Default |
|---|---|---|---|---|
| data-width | width | Integer | 300 for 300px width, 100% for full width | 200 |
| data-height | height | Integer | 500 for 500px height | 400 |
| data-background-colour | backgroundColour | String | #cacaca for grey background | #003964 |
| data-header-colour | headerColour | String | #000000 for black header font colour | #E58705 |
| data-photos | photos | Bool | false to hide photos | true |
| data-descriptions | descriptions | Bool | false to hide description | true |
| data-max-size | maxSize | Bool | String | false for automatic or 'xs', 'sm', 'md', 'lg' to limit the number of columns | false |
Here is an example showing all options using data attributes:
<div class="tci-news-widget" data-width="300" data-height="500" data-background-colour="#cacaca" data-header-colour="#000000" data-photos="true" data-descriptions="false"></div>The preferred way to configure your widget is to use data attributes as shown in the above examples, but an example of the Javascript configuration (which was used in the first version of the news widget) would be:
var tciNewsWidgetOptions = {
width: 300,
height: 500,
backgroundColour: '#cacaca',
headerColour: '#000000',
photos: false,
description: false
}
Live Demo: