Blog Text Widget

Text is arguably the most important part of a blog. The RGL Blog Text widget has an optional heading and text and can be styled with a border and/or a box shadow. It can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are options for styling span tags, marks and blockquotes.
Since text links are outdated - and pretty much useless for mobile devices - there is the option to add up to three CTA style links which can open an internal or external page and in a new window if required.

HTML5 Mark

Note the use of highlighted text. Rather than use a span like EverWeb does for syntax highlighting, the mark should be used. This element is new in HTML5 and defines marked or highlighted text so that the search engines know that words inside these elements are important to the relevance of the text. It appears as a nasty yellow background by default but can be styles using CSS.
Now that search engines deprecate or ignore the Keyword Meta Tag, using the mark element is an excellent way to draw attention to keywords for both the visitors and the search engine crawlers.
Marked text is enclosed in mark tags like this …
<mark>Marked Text</mark>/span>

Block Quotes

Blog posts very often use quoted text from other sources. Using quotes will give the visitors a clue but what about the search engines?
The <blockquote> tag in HTML5 specifies text that is quoted from an external source.

" An amateur web designer will give you what you want - a professional will give you what you actually need. "

The browsers display it as a block element with a fairly large value for margin. The widget removes this and adds controls for left/right margin for inset and padding if a contrasting backgound color and font color are used.
Blockquote Insertion
Inserting a <blockquote> is not quite as simple as a <span or <mark>
The text in this widget is inserted in a paragraph <p>text</p>
When inserting a block level item like a blockquote, the paragraph has to be closed with a </p>, the blockquote inserted and then another paragraph opened with a <p> to continue like this …
</p><blockquote>Quoted Text</blockquote><p>

Blockquote Widget

If the above method of inserting blockquotes is too much to handle - or a designer look is required - the RGL Blog Blockquote widget should fit the bill.
Three Google hosted fonts - all with websafe fallbacks - can be selected for the quotes, the text and the "signature".
Each has controls for setting the font size and color. The quotes have a spacing and vertical position control.
The "signature" has controls for font style and letter spacing and can be aligned left, center or right.
The container has controls for maximum width, padding, border width, color and radius and box shadow radius and color.
The wrapper has controls for background color and its opacity and horizontal and vertical spacing.
The item shown below uses the Google hosted font "Coustard" for the quotes and "Quigley" for the "signature".
The text uses "Stint Ultra Expanded" like the rest of the items on the page.