Online Services for Color Finding Refference

Finding Color Goto Online Services Tools

 

Online services that help in choosing colors/combinations/palettes.

  1. 4096 Color Wheel : Hover over the wheel to view colors.
  2. Accessibility Color Wheel : color choices with special emphasis on accessibility rules.
  3. Chromatic Wheel : 2/3/4/6 color harmony color picker
  4. ColorBlender.com : your free online tool for color matching and palette design
  5. Color Blender : Choose two colors; the palette will show the colors you input as well as the requested number of midpoint colors.
  6. ColorBrewer : online tool designed to help people select good color schemes for maps and other graphics.
  7. Color Calculator : The Sessions Color Calculator is an interactive color wheel that helps designers select HTML, RGB, or CMYK colors and identifies color harmonies and schemes.
  8. Colour Contrast Analyser : foreground and background colour combinations should provide sufficient contrast when viewed by someone having colour deficits.
  9. ColorCombos.com : customize/play with 4 colors
  10. Colour Exploration tools : preview, navigate, mix, make swatches, blen
  11. ColorLab : at Visibone
  12. color palette creator v1.6 : create 10 shades of the base color, located top-left, at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black
  13. Color Palette Generator : Generate a color palette based on an image.
  14. Color Palette Generator : Enter the URL of an image to get a color palette that matches the image.
  15. Color Scheme 1 : Generator of color schemes and palettes to create good-looking and well balanced and harmonic web pages.
  16. Color Scheme Generator 2 : Generator of color schemes and palettes to create good-looking and well balanced and harmonic web pages.
  17. Color Schemer : Online color scheme generator
  18. Color Schemer at Infohound : click on a color and get RGB/Hex value.
  19. Color synthAxis : flash based color combo picker
  20. Color Tool at The Man in Blue : Choose colors; paint the demo site; get CSS / color codes.
  21. colr.org : Get colors/combinations from Flickr photos / random / scheme / tags.
  22. EasyRGB : Color matching / color harmonies / search a tint / color calculator; etc
  23. Eye Dropper Color Mixer : fetch a choosen pixel’s hex color value.
  24. Gradient Image Maker : painlessly generate a gradient image of 3 types; get color/html codes
  25. HTML Color Code Combination Chooser : This HTML color code tool is based on classic color theory pioneered by Johannes Itten in the mid 1900s.
  26. I Like Your Colors! by RedAlt : Type the URI of a page below and submit it to see what colors it uses.
  27. Triplecode Munsell Palette : The Munsell system is based on how people perceive colors.
  28. Unsafe Colormatch : displays what text on color is unsafe combination
  29. Web Color Visualizer : Click on a swatch to set the background; roll over the swatches to change the color of the elements.

READ MORE - Online Services for Color Finding Refference

SEO Traffic Generation Tips

SEO Traffic Generation Tips

SEO, or search engine optimization is the be-all-end-all of traffic generation. The two go hand in hand. This is because, in order to gain traffic to your site your articles, your advertisements and your website

must all be search engine optimized. So, when it comes to SEO, make sure you target everything and anything around this incredibly important concept.

Essentially, there are three basic elements to SEO- keywording, linking and content. Consider keywording, linking and content the three musketeers to successful SEO. To get you started, we’ve offered the top ten tips to SEO. Keep these in mind for all your copy and content to ensure the maximum traffic generation results.

  1. Choose good keywording phrases- instead of shaping words around articles, shape articles around words. Target your content around keywords or ideas. In order to find an angle for your article, consider using Google Adwords to see which keywords are most likely searched. Then, write an article around these key phrases and terms. This may seem like an odd concept, but as soon as your brain gets used to it, the writing will flow naturally.
  2. Use keywords throughout your website, marketing and advertisement- use keywords in your title, your subheadings and in your links. If you can, even use your keyword in your URL.
  3. Link away- it is okay to link to other sites. In fact, it’s a good idea, especially if these sites are highly respected and informative. Sites with .edu and .gov are often the best because they represent a highly regarded source.
  4. Link to your heart’s content- Links do not have to just be certain words. You can also make title links and anything else you want links. People are automatically drawn to links, so switch it up andmake your content stand out.
  5. Use your anchor text in links- Make sure your link text features your keyword phrase. Links stand out on websites and most people will click through, especially if your keyword phrase is directed towards their interest.
  6. Always add new content- are you constantly updating and adding new content to your website? Well you need to be to ensure SEO success! This cannot be stressed enough. Content is what will makeor break your site so make sure your content is entertaining, up to date and informative. For more content tips, check out the Article Marketing section.
  7. Be Bold- make use of Bold HTML tags and other HTML tags to make your website stand out. Bold is beautiful.
  8. Use Alt Imaging- a picture is worth a thousand words, especially on the net. Putting alt attributes on your images can allow you to place relevant text around your image, better for search engine indexing. Keep in mind that images are searched just as much as content is.
  9. Include a site map- a site map is a great way to navigate through your site and can also be submitted to Google with XML site map. Site maps help search engine robots find every page on your website in just two clicks. What this means is better search engine results for all your web pages. Make sure you link all pages properly for the best SEO results.
  10. Follow the rules- SEO has a set of particular rules. You need to understand the legality of SEO so you don’t get banned from search engines. So how do you do this? You research. You study. You learn. Take some time and go through the basics of SEO on the main search engines. Understanding the do’s and don’ts of SEO is critical when it comes to generating traffic. After all, you SEO strategy can either make, or break your website. 
READ MORE - SEO Traffic Generation Tips

Vertical Navigation Menu

25 Navigation Menus Collection!After the release of 30+ Horizontal Navigation Menus, we head forward to a beautiful collection of some of the best looking vertical navigation menus that will put soul to anyone’s weblog or website! I have modified the codes made by Christopher and Highdots and have made them compatible with Blogger. I hope this collection will be of interest to most of you simply because these navigation menu tabs can easily be installed, customized and multiplied! I hope it will be of great help to new designers :>


How To Add A Vertical Navigation CSS Menu To Blogger?

Well the process is as simply as it can be. Simply follow these steps carefully,

  1. Go To Blogger > Layout Edit HTML
  2. Back-up your template

All Navigation Menus below uses two pieces of codes. One is The CSS code which is responsible for the look and feel of the menus and the second is the HTML code which is responsible for positioning the menus. So lets know where to add each code!

    3.   Paste the CSS code for your selected Menu just above ]]></b:skin>

    4.   For the HTML code there can be two positions either your right sidebar or left sidebar. Depends how many columns you have.

  • If you have a right sidebar then paste the HTML code just below <div id='sidebar-wrapper'>  or this <div id='sidebar-wrapper-right'>
  • If you have a left sidebar then paste the HTML code just below <div id='sidebar-wrapper-left'>

Note:- Since most templates use different coding therefore if you could not find the above codes then don’t worry simply share your blog URL in the comment box and I will view your template coding and will tell you instantly which code to search for!

    5.    Finally save your template and see a beautiful Navigation Menu hanging on your sidebar :D

Editing The Links In The Navigation Menu

To change the Tab Menu Links and Titles, simply edit this bolded part of the HTML code,

<li><a href="#1" >Link 1</a></li> 
<li><a href="#2" >Link 2</a></li> 
<li><a href="#3" >Link 3</a></li> 
<li><a href="#4" >Link 4</a></li> 
<li><a href="#5" >Link5</a></li>

 

Replace #1, #2, #3 etc with your Page Links/URL and replace Link1, Link2, Link3 etc with your Page Titles. If you wish to add or delete a tab then simply add or delete this line from theHTML code,

 

<li><a href="#" >Link</a></li>

 

Live Demo

 

For Live Demo of Other Navigation Menus Simply use our HTML Editor and Copy and Paste the CSS and HTML code at right areas and then start playing with the code :>>

 

See Demos With MBT HTML Editor!

 

Navigation Menu #1

Navigation Menu 1 

CSS CODE: 

#menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyXDkT6YDlq_DByPylQ81ZsJj-1u-afOPZE9eiBNnZbkwoiEQBLEitVmO_KG4HPoPgKgbaeZQnXHpSwJ_za6-QtHXneCL2CxtLaWIOGo9xR4_D6cDHBJh46aukwHbY3FHQaSyH14OoQA/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUyXDkT6YDlq_DByPylQ81ZsJj-1u-afOPZE9eiBNnZbkwoiEQBLEitVmO_KG4HPoPgKgbaeZQnXHpSwJ_za6-QtHXneCL2CxtLaWIOGo9xR4_D6cDHBJh46aukwHbY3FHQaSyH14OoQA/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; }

HTML CODE: 

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #2

Navigation Menu 2

CSS Code: 

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFcQAf_of9sYPHqIdp75KUqP0qmrm5nTRj5k5K5m7ZCdIMxjKzv3GK6eDYKf7P_EI5coadjcXgNg_J3vzUxf7dEj2x-bvHWtnqDf8djxOe3IQ7XVV_QMUij4i7EIMPiSqNdzKkwXSSUGU/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFcQAf_of9sYPHqIdp75KUqP0qmrm5nTRj5k5K5m7ZCdIMxjKzv3GK6eDYKf7P_EI5coadjcXgNg_J3vzUxf7dEj2x-bvHWtnqDf8djxOe3IQ7XVV_QMUij4i7EIMPiSqNdzKkwXSSUGU/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

HTML Code: 

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Navigation Menu #3

Navigation Menu 3

CSS Code: 

HTML Code: 

 

Navigation Menu #4

Navigation Menu 4

CSS Code: 

HTML Code: 



Navigation Menu #5

Navigation Menu 5

CSS Code: 

HTML Code: 



Navigation Menu #6

Navigation Menu 6

CSS Code: 

HTML Code: 



Navigation Menu #7

Navigation Menu 7

CSS Code: 

HTML Code: 



Navigation Menu #8

Navigation Menu 8

CSS Code: 

HTML Code: 



Navigation Menu #9

Navigation Menu 9

CSS Code: 

HTML Code: 



Navigation Menu #10

Navigation Menu 10

CSS Code: 

HTML Code: 



Navigation Menu #11

Navigation Menu 11

CSS Code: 

HTML Code: 



Navigation Menu #12

Navigation-Menu-With-No-image-used

CSS Code: 

HTML Code: 



Navigation Menu #13

CSS Menu Tabs 13

CSS Code: 

HTML Code: 



Navigation Menu #14

CSS Menu Tabs 14

CSS Code: 

HTML Code: 



Navigation Menu #15

CSS Menu Tabs 15

CSS Code: 

HTML Code: 



Navigation Menu #16

CSS Menu Tabs 16

CSS Code: 

HTML Code: 



Navigation Menu #17

CSS Menu Tabs 17

CSS Code: 

HTML Code: 



Navigation Menu #18

 

CSS Menu Tabs 18

CSS Code: 

HTML Code: 



Navigation Menu #19

CSS Menu Tabs 19

CSS Code: 

HTML Code: 



Navigation Menu #20

CSS Menu Tabs 20

CSS Code: 

HTML Code: 



Navigation Menu #21

CSS Menu Tabs 21

CSS Code: 

HTML Code: 



Navigation Menu #22

CSS Menu Tabs 22

CSS Code: 

HTML Code: 

 

 

Navigation Menu #23

CSS Menu Tabs 24

CSS Code: 

HTML Code: 



Navigation Menu #24

 CSS Menu Tabs 25

CSS Code: 

HTML Code: 



Navigation Menu #25

CSS Menu Tabs 26

CSS Code: 

HTML Code: 

 

 

READ MORE - Vertical Navigation Menu

Blinking Readmore

Animated Read More Buttons

Animation is always eye-catching and seeks readers attention. In order to give a more lively look to blogger hosted blogs I am proud to present another set of beautiful animated Read More Buttons with metallic frame surrounding each one of them and a blinking tiny arrow to give the motion look.

This is how one such button looks in motion,

 

black

green blue-dark

 

 

 

 

 

MBT Read More Blogger Buttons - Metallic Frame

Downloads:


READ MORE - Blinking Readmore

Basic Readmore Post

From this post 

Totally Exceptional!!A good blogger can be identified by the way he manages his blog and organizes his posts. The homepage is the most important part of every blog. The homepage must contain up to 5-6 posts in order to seize the attraction of reader as much as possible. Keeping a reader busy for a longer time is what I call a blogging success. Showing 5-6 posts is load-time and user friendly only if you show a summary of each post. On my homepage you must have seen a Read More Link, clicking which expands the entire post. Look at a screen shot Below,

read-more1


 

The steps that must be followed for planting this TNT are,

  • Go to layout > Edit HTML

layout-edit-html

 

Now The Most Important Step –> Back Up Your Template

By backing up your template I mean that you must save a copy of your current template in your computer hard drive. If in case something goes wrong, you can restore your template and have everything working as normal as before.

To backup your template click on the link saying Download Full Template , as shown below

backup-template

If suppose something goes wrong , you will simply click the Browse button, locate your saved template and then simply click the Upload button to restore your template back to normal.

  • Click on "Expand Widget Templates" at the top right hand corner of your Edit HTMLpage

expand-widgets 

  • Now find this code ]]></b:skin> 

Tip: Pressing Ctrl + F  and then paste this code into the search box, as shown below,

Search-code

The search box is an easy way of finding codes in your template.

  • Just after ]]></b:skin> copy paste the code below,

Tip: Highlight the code below and then press Ctrl + c to copy the entire code and then press Ctrl + v to paste the code

<style> 
<b:if cond='data:blog.pageType == "item"'> 
span.fullpost {display:inline;} 
<b:else/> 
span.fullpost {display:none;} 
</b:if> 
</style>

 

 

  • Now find this code  <data:post.body/>

And just after <data:post.body/> add the code below,

<!--READ-MORE-STARTS-->

<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url'>

<div style="text-align: right;">Read More ->></div></a> 
</b:if>

<!--READ-MORE-STOPS-->

 

You can replace the text in red with anything you like, e.g: Continue ReadingKeep Reading

If you want to shift the "Read More->>" text to the extreme-left side, use this code:

<!--READ-MORE-STARTS-->

<b:if cond='data:blog.pageType != "item"'> 
<a expr:href='data:post.url'>

<div style="text-align: left;">Read More ->></div></a> 
</b:if>

<!--READ-MORE-STOPS-->

 

  • Save your template and you are Done!

 

Read Further to know How to Apply this TNT in your Posts

Now whenever you want to write a post in windows Live Writer, follow the procedure below,

  • Once you had finished writing your post, as shown below,

Readmore1

  • Just after completing your post click on the source button at the bottom of yourwindows live writer page,

readmore2

You will see something like this,

 source code for your post

  • Now use the code below to hide the portion of your post that you don’t want to be shown on your homepage

<span class="fullpost">

</span>

Now suppose if you want to show the post only till the lines

I have explained everything in these images so read carefully!

So you will add the codes as shown below,

the highlighted source code refers to the hidden text

You can see in the image above that I have added <span class="fullpost"> just above the part of the post I wanted to hide. The text that I want to hide is the one below,

“Please use windows live writer only for writing quality posts. This TNT of Read More link works best with windows Live writer. Blogger Editor is simply annoying and this trick simply just don’t work efficiently with it. If you still want to use blogger editor rather than windows live writer than frustration is what you will encounter! “

I added </span> to the part where the entire post completes or source code ends

 

In short add <span class="fullpost"> just before the text to be hidden and add </span> just after it

That’s All!

 

 

You can use some of the Images below instead of that Read More –>> text

 read-more with a black outline simple readmore text image read-more with a blue drop shadow read more text with black drop shadowread-more black and orange

To add an image instead of text simply replace Read More ->> in the code above with this,

<img src=”URL Of Your Image”/>

Replace URL Of Your Image with your image link.

READ MORE - Basic Readmore Post