Blogger Tricks: Site Designing

You Can Customized your blogger label so attractive by the using of CSS3 Widget. This widget is styled using CSS gradient color as background and box-shadow properties. If you have some knowledge about CSS3 then you will be able to Customized more attractive and impressive look as your style way.

How to Add Labels Gadget In Blog:

Go to your blogger dashboard
Click on Design > Page elements > Add a Gadget (Old blogger interface)
Click on Layout > Add a Gadget (New blogger interface)
Choose Labels for the options provided in the pop-up window and set it as shown below.

Best Stylish Design for Label and Categories Widget

How To Add Brick Style Labels Cloud In Blogger Using CSS:

Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)

Backup Your Template Before Making Any Changes

Click (Ctrl + F) Search Give Below Code

Now choose any style that suit you from below options Copy The Code shown below and paste Before ]]></b:skin> Above it.

.label-size a {

display: inline-block;

text-decoration: none;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);

padding: 4px 7px;

font-family: 'Helvetica Neue', helvetica, sans-serif;

font-size: 12px;

line-height: 14px;

height: 14px;

vertical-align: middle;

margin-bottom: 6px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

}

.label-size a {

color: #996633;

border: 1px solid #DDA13C;

background: rgb(238,177,75);

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));

background: -webkit-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: -o-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: -ms-linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: linear-gradient(top, rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );

}

.label-size a:before {

content: '\2022';

color: #FFFFFF;

margin-right: 4px;

font-size: 15px;

line-height: 13px;

height: 13px;

vertical-align: text-top;

text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);

}

.label-size a:hover {

text-decoration: none;

background: rgb(240,183,86);

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top, rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));

background: -webkit-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: -o-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: -ms-linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: linear-gradient(top, rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );

}

Now save your template you were done!

If you like my post please share it! Thanks..

A good website often means that your business or organization is a credible one. Be it an NGO or an established corporate house, every institute /organization strives for a strong online presence. This is purely on the fact that today a major chunk of people resort to the online medium for their search needs. Hence a visually appealing website that is user-friendly and properly optimized is no more an option but a necessity.

A good website serves multiple needs of an organization. Whether the company wishes to generate leads/ sales or create a wider reach, a well designed website possesses the capability to fulfill all these requirements.

Read This: Free Fast Approval Directory Submission Site List 2013

1. Nature Of The Business

It should be understood that each business has its own separate needs which are essential to pay attention to while designing the website. Designing the website in accordance to the products/services is very important.

2. Avoid Using Too Many Flash Elements

At times the use of a myriad of flash elements negatively affects the loading time of the website. Also, avoid using unnecessary Java Script.

Read This: Find The Date Of Gmail Creation Account Easily

3. Color

The use of colors is very important. They help in communicating the message that the company wishes to portray. For example a website dealing with children outfits can always opt for pink, orange and other fun colors

Read This: How to Add Facebook Slide Likebox

4. Content

Always update content – videos, images etc.
Keep content that’s interactive
Facility of comment posting and feedback forms needs to be there to build up the chain of communication.

5. Using Narrow Column

Readability of your website decreases if more than 12-13 words fit in 1 line. It’s advisable to use multiple columns.

6. Consistency

It is important to maintain consistency in the whole website format by using same color combination and same font size across all the pages.

7. Website Security

Duplication of the content, graphics and PayPal links should be avoided by making the website properly encrypted. The presence of website certificate helps as it verifies the authenticity of website to the concerned firm.

8. Easy Navigation

A website which is easily navigational is helpful in making the visitors stay on the website and make them scan through the information. The presence of archives is important as it aids them in getting a glimpse of the other web pages. Use breadcrumbs for quick access.

9. Browser Compatibility

Ensure that the website is opening properly in all the browsers other than just Internet Explorer or Google Chrome so that it does not limit the accessibility of the website.

10. Background

Make sure that your visitors can read the text on the background. So, don’t opt for bold colors like black or orange in the background. It’s advisable that you keep the background of your website white so that readers can read the text without any difficulties. Also keep in mind that your links are visible before and after being visited.

Last but not the least make sure that your website is mobile-friendly.

If You Like My Post Please Share It. !

Sunday, October 20, 2013

Best Stylish Design for Label and Categories Widget