Skip to main content

Useful HTML Tricks for Bloggers - Add a Touch of Style

What do you need to write a blog ? Some good ideas and the ability to convey your message effectively to the audience. That's it.

Though knowledge of HTML or CSS is not essential to writing a blog, it is always nice to have some basic idea of these languages to make your blog posts stand-out - after all, readers have such short attention spans and we, as bloggers, desperately want them to read our content.

We will share a couple of very simple HTML styling tricks that may make your blog stories more appealing and attractive to readers:

Highlight Important Text Inside HTML Boxes

This is a technique commonly used in newspapers - enclose the text inside a box with borders and wrap the story content around that box. First a live example and then the actual solution.

-- Begin Example --

This is an important text. Please do not skip reading this.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer turpis sem, sagittis in, malesuada ut, hendrerit ac, lacus. Cras at tellus.

Ut eget ligula sit amet ante aliquet nonummy. Sed dignissim tempor nisi. Curabitur laoreet consectetuer nibh. Ut sollicitudin vestibulum mauris.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ultricies, leo ut porta rhoncus, magna eros adipiscing enim, ac suscipit mi diam vitae sem.

-- End Example --

The highlighted text is floating on the left - you can achieve the effect by enclosing any text inside the following div tag.

<div style="width:200px;height:100px;float: right;border-top: 1px solid #000; border-bottom: 2px solid #000; padding: 5px;">Sample Text Goes Here.</div>

Replace float:right with float:left to move the box on the left side of the screen.

The Right way to Quote A Person

Enclose the quoted passage inside the <blockquote> tag. You may also want to add the left and right double quotation signs (“ - &ldquo; ” - &rdquo;)

Never use Ampersands or Quotes in Titles

While there's nothing wrong with using Ampersand signs (&) or double-quotes(") in your blog titles, in some cases they may break your social bookmarking URLs like "Post to", etc. You should use HTML special characters like

&amp; for & [ampersand]
&quot; for " [double quote]
&#39; for ' [single quote]

Bullets and Lists are boring, try something different

HTML has tons of pointers and bullet styles that can be used as substitute for bullets which generally look dull. Here are some examples:

» with &raquo; | º with &ordm; | · with &middot;

Wrap Text around Images

Images are perhaps the easiest way to grab the attention of your blog readers. Take a step further and blend your pictures around text by adding the following style attribute to your img tag.

For right alignment - <img style="margin: 0 0 2px 5px; float: right;" src="file_name_here" />

For left alignment - <img style="margin: 0 5px 2px 0; float: left;" src="file_name_here" />

Side Note: While these styles can be embedded inside a CSS stylesheet which makes code maintainence much simple, the only drawback is that the formatting is not retained in RSS feed readers. That's where inline styles can help.

Points to remember

» Use strong instead of b tag for making the text bold.
» The tag <hr /> add a horizontal line
» Browsers ignore white spaces in HTML code. Use &nbsp; to hard-code spaces or enclose the text inside <pre> tag.

Popular posts from this blog

How to Download Contacts from Facebook To Outlook Address Book

Facebook users are not too pleased with the "walled garden" approach of Facebook. The reason is simple - while you can easily import your Outlook address book and GMail contacts into Facebook, the reverse path is closed. There's no "official" way to export your Facebook friends email addresses or contact phone numbers out as a CSV file so that you can sync the contacts data with Outlook, GMail or your BlackBerry. Some third-party Facebook hacks like "Facebook Sync" (for Mac) and "Facebook Downloader" (for Windows) did allow you to download your Facebook friends' names, emails, mobile phone number and profile photo to the desktop but they were quickly removed for violation of Facebook Terms of Use. How to Download Contacts from Facebook There are still some options to take Friends data outside the walls of Facebook wall. Facebook offers the Takeout option allowing you to download all Facebook data locally to the disk (include

Digital Inspiration

Digital Inspiration is a popular tech blog by  Amit Agarwal . Our popular Google Scripts include  Gmail Mail Merge  (send personalized emails with Gmail ),  Document Studio (generate PDFs from Google Forms ) and   File Upload Forms ( receive files  in Google Drive). Also see  Reverse Image Mobile Search , Online Speech Recognition and Website Screenshots , the most useful websites on the Internet.

PhishTank Detects Phishing Websites by Digg Style Voting

OpenDNS, a free service that helps anyone surf the Internet faster with a simple DNS tweak , will announce PhishTank today. PhishTank is a free public database of phishing URLs where anyone can submit their phishes via email or through the website. The submissions are verified by the other community members who then vote for the suspected site. This is such a neat idea as sites can be categorized just based on user feedback without even having to manually verify each and every submission. PhishTank employs the "feedback loop" mechanism where users will be kept updated with the status' of the phish they submit either via email alerts or a personal RSS feed . Naturally, once the PhishTank databases grows, other sites can harness the data using open APIs which will remain free. OpenDNS would also use this data to improve their existing phishing detection algorithms which are already very impressive and efficient. PhishTank | PhishTank Blog [Thanks Allison] Related: Google