• Become a Shouter : Join here
    • X

    Design Tutorials

    How to Auto Add Icons To Links Based On File Type Using CSS

    September 9, 2011
    default-thumb

    Interesting title… Isn’t it? Well, in this article, I’ll guide you through a tutorial wherein you’ll add few blocks of code/CSS that shall automatically add icons next to your links based on the type of file that is linked to (For example – .pdf, .txt, etc…). The catch here is that, we’ll be using pure CSS to achieve this – no javascript, no jquery. Still confused about the article? Then, have a look at the ...

    Continue Reading →

    How to add Sticky Bar similar to Shoutmeloud on BlogSpot & WordPress?

    August 31, 2011
    default-thumb

    I’ve been receiving quite a lot of emails wherein people asked for the codes that is used to run the sticky bar on Shoutmeloud. If you are wondering what a sticky bar is, then scroll to the top of this page and look out for a red bar with blinking text. That’s called a sticky bar which is used to display useful information to the user – widely used to display the most popular article ...

    Continue Reading →

    How to Style BlockQuote With CSS for BlogSpot and WordPress

    August 23, 2011
    default-thumb

    As the title of the article suggests, we’ll be using :before and :after attributes in defining our CSS. However, the actual credit goes to the “content” property which helps us to achieve cool effects via CSS. So, in this article, I’ll illustrate the basic usage of content property to add stylish block quotes using CSS. In other words, you’ll be able to add a block quote that appears to have an image but does not. ...

    Continue Reading →

    How to Add Reflection Effect On Images Using CSS

    August 16, 2011
    default-thumb

    I’ve been working on design articles for the past few days and I would like to share one with you in this article which is based on Photoshop but the twist is that we’ll not use PhotoShop to achieve this effect, rather use simple and pure CSS to achieve it – Reflection Effect On Images. Before we dive into the actual tutorial, let me show you the final product – refer to the image below. ...

    Continue Reading →

    How to Create An Adaptable View On Your Blog?

    August 9, 2011
    default-thumb

    Basically, adaptable view is an user interface pattern that lets the user decide the visual appearance of your blog. In other words, users can dynamically change the layout of your theme. Interesting… Isn’t it? Well, there could be  no better example than delicious bookmarks to explain what I mean. So, for those who actually wonder what I’m blabbering, take a look at the following link – Recent Bookmarks. Now, look for the display options that ...

    Continue Reading →

    Simple Accordion Effect Using Jquery: How to

    August 4, 2011
    default-thumb

    There are quite a lot of tutorials on the web about the accordion effect. But, none appears to be clear. Being a webmaster & web designer myself, I find it difficult to understand the tutorials out there. So, I thought I should explain this stuff in the most simplest way possible and that’s what we have got in this article too. To those who do not know what an accordion effect  is, just take a ...

    Continue Reading →

    How To Make Entire Block Clickable Using jQuery?

    August 3, 2011
    default-thumb

    I’m sure many web masters out there link various websites on their blog. Some tweak the links with a background color while few keep it simple! What if we make an entire block click-able rather than just the anchor tag present in the block. To better understand about the same, take a look at the “Random Posts” section on the footer of SML. You’ll notice that only the links are click-able but not the entire ...

    Continue Reading →
    `