Adding social book marking button

all of us know that the fastest way to increase your traffic and develop your blogger seo is adding social bookmarking button , now we’ll add new social bookmark button to your blogspot blog.
the bookmark button made by addthis.com. and it allow your visitors to book mark your blog in alot of social bookmarking sites like :

Ask, Google Bookmarks, Propeller (Netscape), Backflip, Kaboodle, Reddit, Blinklist, Link-a-Gogo, Segnalo, Blogmarks, LinkedIn, Simpy, Delicious, Live, Slashdot, Digg, Magnolia, Spurl, Diigo, Mister, Wong, StumbleUpon, Facebook, Mixx, Tailrank, Fark, Multiply, Technorati, Faves (Bluedot), myAOL, Twitter, Favorites, MySpace, Yahoo Bookmarks, FeedMeLinks, Netvouz, Yahoo, MyWeb, Furl, Newsvine, Yardbarker
and more……

just follow our instructions and Images.

1: go to addthis.com Click here (It will open in a new window )

2: you’ll see some options.

please choose the following.

- Which kind of button? sharing / bookmarking button.
- Which look? choose the best style for you.
- Where? Where do you want to put the button? on a blog.
- Blogging Platform: Blogger

3:Then click ” get your free button >> ”

please see the next image.

When you click ” get your free button >> ” it’ll take you to another page.

you’ll see 2 more options.
1- Member Login.
2- Create a Free Account.

if you don’t have an account. please register a new one.
it won’t take more than 30 seconds.

see the next image.

4: click ” create account ” button.

we are about to be done.

you’ll go to the next page. and there is another 2 more options.

add the regular button to my blog
OR
add the dropdown button to my blog

click on your favorite choice.

and it’ll redirect you automatically to your blogger account to add the widget to your blog.

Congrats. now you are done.

and here is a demo blog,Click here (It will open in a new window )

if you faced any problem. please leave your comment here.

Add Star ratings for blogger blogs.

we all need to know what our visitors are thinking
about our Blogspot posts?
ok. here is great easy and nice way

to add rating stars to your blog posts and get visitors instant feedback.

you’ll need to go to the link that we’ll provide you after reading this post.

you’ll find that outbrain.com rating widget available in 5 popular blog systems. click on blogger icon.

then you can see 2 steps.

STEP 1: Register (optional)
STEP 2: Install widget

as you see you are not forced to Register to be able to use this widget.

after clicking on Get Widget Now! button. you’ll be redirected to blogger.com to login you blog and add this widget.

you can find this widget here. Outbrain rating star widget

Please visit this blog to see live demo rating widget. :
Demo

or copy and past the next url into your web browsers address bar:

http://www.outbrain.com/get/ratings

thanks for outbrain.com to offer such nice widget like this.

Light Box ( Fancy box ) Widget For Blogger Images And Links

We all add images and photos in our blogs. And as we all say A picture is worth a thousand words.

Caution : This hack not working perfectly with blogger. so please wait until we find the best solution for this hack.

I Published Fixed Tutorial Here

blogspot by default enables us to add and display images in our posts, But what if we want to make our blogs photos looks more professional and stylish ?
The answer is to use this new amazing widget.
Please see this demo and click on the images to see how it is working.
It’s very easy to integrate this hack to your blog in only 1 step.

Adding The Widget To Your Blog In One Step

Caution : Please backup your template (Download Full Template) Before making any changes.

Go to you blogger account, and then navigate to Layout >> Edit Html
And Find the next Code.

</head>

And exactly before it add the following code.

<link  href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css'  media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js'  type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js'  type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>

Now Please Click Save Template .
And the widget will work now automatically with all your blog images.
Once you or your blog visitors click on any image on your blog the image will be displayed in a nice and elegant frame.

Customizations And Options

If you want to go for better customization with this blogger hack then you can display you images in groups Display next And previous Buttons, or you can make your links opens in a new frame without leaving your blog.

Display images in groups

After adding an image to your blog post and before publishing it. change the editing more from Compose to Edit Html And now find the image code, it must be like the following code.

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

now we have to add rel Tag which put all images with the same rel tage in one group.
For example. if you have 6 images in your post, and added the tag rel=”groub1″ for 3 of your images, and the tag rel=”groub2″ for the another 3 of images. once you click on an image, it’ll be displayed in a frame with next and previous buttons, this buttons will take you to the other 2 images with the same rel tag.
Where to add the rel tag ?
This is the image code before adding the rel tag

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

And the next one is after adding the tag.

<a rel="group1" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

Adding Titles For Your Images

To add a title we have to add a tag for the image code. so we’ll have to locate the image code, see the previous step to know how to locate it
And now add the following tag. title=”Image Title”
And the code should be like this

<a rel="group1" title="Image Title" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

Apply It For Your Links

While typing a post you may add a link, and if you switched the typing more from Composeto Edit Html you’ll see the links look like this

<a href="http://www.allblogtools.com/">Blogger Templates </a> 

and we should add the following tags to it.
title=”Link Title ” class=”iframe”
so it will be

<a href="http://www.allblogtools.com/" title="Link Title " class="iframe">Blogger Templates</a>

thats it.

Demo

Click here to see demo. thanks for bloggergallery.com

4 Sharing And Book Marking Widgets For Blogger.

1. AddtoAny

AddtoAny.com

• More than 120 bookmarking sites
• User Can search for a specific service
• Allow users to send your page for a friend via email.
• Allow users to bookmark your blog posts into their browser
• Customizable easily.

2. AddThis

Addthis.com

• Smartest sharing tool ever.
• Largest collection of services, and growing. 170+ services
• Automatically translated in over 50 languages.
• Customize the colors and menu
• Track how your users are sharing with analytics.

3. ShareThis

ShareThis.com

• Only 45 services
• Customize Able
• English language only.
• You can register and import your friends mail addresses to send them news easily.

4. Share The Love

AllBlogTools.com

• 18 services
• JQuery Expanding system

Page Views / Post Views Counter Widget For Blogger.

As a blogger for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
So today i’ll show you how to do it in blogger,
It’s very easy to do and there are 2 styles for this widget.

How To Add this widget For blogger.

This is very easy to do it two steps, step 1, choose your widget style,
and step 2, pate it’s code in your blogger template code.

Step 1. Choose the style And get your code.

• Style 1. ( With Icon ) code,

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://forums.bit-tech.net/images-light/misc/stats.gif' width='16'/> <a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

• Style 2. ( No Icon ) code,

<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='http://www.allblogtools.com'><b><font size='2'><script src='http://nirav07.ulmb.com/counter.php' type='text/javascript'/> Views</font></b></a></div></b:if>

Please copy your widget code and follow instructions in step 2.

Step 2. Add the widget for your blogger blog.

Now go to your blogger account then navigate to, Layout >> Edit html, And before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your widget code You can get the widget code from previous step

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the widget code Before it.

, after doing this, please click Save Template and you are done.

Tạo Slide Show cho hình ảnh với các ảnh thumb cuộn ngang bên dưới

Hôm nay mình xin chia sẻ cùng các bạn thủ thuật tạo Slideshow cho hình ảnh, thủ thuật này mình có thêm hiệu ứng Sroll với 2 mũi tên điều khiển qua lại các ảnh thumb bên dưới các hình ảnh lớn được trình diễn. Bài viết này mình tham khảo code slideshow của nitinh.com, tuy nhiên với slideshow đó thì không có hiệu ứng scroll cho các ảnh thumb. Đây là cái gây khó khăn và phiền phức khi bạn muốn trình diễn với số ảnh nhiều hơn. Nếu không để chế độ Scroll thì ảnh thumb của bạn sẽ dài lê thê. Vì vậy mình kết hợp với JQuery CarouselLite để cho tiện ích trở nên hoàn thiện hơn.

Hình ảnh minh họa

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

.jCarouselLite {float: left;
position: relative;
left: -5000px;
}
.carousel{margin-left:15px;}
.carousel a.prev{
float: left;
width: 18px;
height: 80px;
margin-right:4px;
background: url(https://lh4.googleusercontent.com/-HIBCv5Jv5Qk/Tkd46mA67MI/AAAAAAAAAjw/opmR5hyGa0I/left_gray.png) left 40px no-repeat;
}
.carousel a.next {
float: left;
margin-left:-3px;
width: 18px;
height: 80px;
background: url(https://lh3.googleusercontent.com/-JElA1yXJXVg/Tkd47wJMlqI/AAAAAAAAAkQ/-odO2r0zho4/right_gray.png) right 40px no-repeat;
}

#bigPic{
width:912px;
height:291px;
padding:1px;
border:1px solid #CCC;
background-color:#FFF;
margin-bottom:10px;
}
#bigPic img{
position:absolute;
display:none;
}
ul#thumbs li{
margin:0px;
padding:0;
list-style:none;
}

ul#thumbs li{
float:left;
margin-right:7px;
margin-bottom:5px;
border:1px solid #CCC;
padding:3px;
cursor:pointer;
}
ul#thumbs img{
float:left;
width:80px;
height:80px;
line-height:80px;
overflow:hidden;
position:relative;
z-index:1;
}

5. Chèn tiếp code bên dưới vào trước thẻ </body>

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.v1.4.1.js"></script>
<script src="http://traidatmui-tips.googlecode.com/files/JQuery.eva1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.easing.1.1.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/JQ.jCarouselLite.js"></script>
<script type="text/javascript">
$(function() {
$(".jCarouselLite").jCarouselLite({
btnNext: ".next",
btnPrev: ".prev",
speed: 500,
auto:false, // Nếu bạn muốn ảnh tự động cuộn ngang thì thay false thành true
visible:9, // Số ảnh thumb hiển thị
scroll:5, // Số ảnh thumb một lần scroll
easing: "easeinout"
}); });

var currentImage;
var currentIndex = -1;
var interval;
/* <![CDATA[ */ function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3000);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}

function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}

var myTimer;

$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});

/* ]]> */
</script>

6. Save template lại và trở về phần tử trang (Page Elements)
7. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div id="bigPic">
<img src="https://lh4.googleusercontent.com/-dwmwhehAUus/TmiK_o5JrUI/AAAAAAAAA0w/5t63K4Wfv3Q/s912/1.jpg" alt="" />
<img src="https://lh4.googleusercontent.com/-6G-Uy5zwOkA/TmiK_KUXnwI/AAAAAAAAA0w/jrewNz2w18I/s912/2.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/-QIc5AWfFPXw/TmiLAeQ9JiI/AAAAAAAAA0w/-W_i8gN9a3Y/s912/3.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/--f0b6s_10GA/TmiLA0KHkwI/AAAAAAAAA0w/CARgfzLwv1g/s912/4.jpg" alt="" />
<img src="https://lh3.googleusercontent.com/-lsE0o-UnRyk/TmiLB2VzNAI/AAAAAAAAA0w/GgHcVhyS1Yw/s912/5.jpg" alt="" />
<img src="https://lh6.googleusercontent.com/-VxkFF-kfBjo/TmiLC-6WrXI/AAAAAAAAA0w/lkENC-50Ibk/s912/6.jpg" alt="" />
<img src="https://lh5.googleusercontent.com/-iZvMTMEbW7E/TmiLDeiXLVI/AAAAAAAAA0w/cvuB0AMWuJo/s912/7.jpg" alt="" />
<img src="https://lh4.googleusercontent.com/-m8HPWXlAjvQ/TmiLDxdM9RI/AAAAAAAAA0w/-3RpxC5DwrE/s912/8.jpg" alt="" />
<img src="https://lh6.googleusercontent.com/-yVAWgB-YBXA/TmiLE4ZmWXI/AAAAAAAAA0w/vxYpgZBfH84/s912/9.jpg" alt="" />
<img src="https://lh5.googleusercontent.com/-4SrBnHMQEHs/TmiLFVjLjSI/AAAAAAAAA0w/ZB20w8TMSkI/s912/10.jpg" alt="" />
</div>

<div class="carousel">
<a href="#" class="prev"></a>
<div class="jCarouselLite">
<ul id="thumbs">
<li class='active' rel='1'><img src="https://lh4.googleusercontent.com/-YnQYffIicLI/TmiK_cZiFCI/AAAAAAAAA0w/p8m-Q1xEnFs/1_thumb.jpg" alt="" /></li>
<li rel='2'><img src="https://lh3.googleusercontent.com/-t5VT9yFpBWM/TmiLA-VXkEI/AAAAAAAAA0w/2bNFaiZsxAs/3_thumb.jpg" alt="" /></li>
<li rel='3'><img src="https://lh5.googleusercontent.com/-DeiS8s4fL6Q/TmiLBHugMSI/AAAAAAAAA0w/zUBeZAEZtxg/4_thumb.jpg" alt="" /></li>
<li rel='4'><img src="https://lh3.googleusercontent.com/-9VoOlMJ62QQ/TmiLBCIuKyI/AAAAAAAAA0w/n10BL_FWDPI/5_thumb.jpg" alt="" /></li>
<li rel='5'><img src="https://lh3.googleusercontent.com/-Q3B9WuIUkEQ/TmiLCtqU6xI/AAAAAAAAA0w/gpi9YnHLTyU/6_thumb.jpg" alt="" /></li>
<li rel='6'><img src="https://lh3.googleusercontent.com/-6xG5Bwiw9Mg/TmiLDT9NfMI/AAAAAAAAA0w/lsLrZh-XjLs/7_thumb.jpg" alt="" /></li>
<li rel='7'><img src="https://lh6.googleusercontent.com/-k5AWRRawSsw/TmiLEG0Z4kI/AAAAAAAAA0w/wdi084w_vtc/8_thumb.jpg" alt="" /></li>
<li rel='8'><img src="https://lh4.googleusercontent.com/-fX8xfvkVe8k/TmiLFIqXf5I/AAAAAAAAA0w/iHI8fxafWBA/9_thumb.jpg" alt="" /></li>
<li rel='9'><img src="https://lh6.googleusercontent.com/-mhr_1-yOxAs/TmiLFj_HdSI/AAAAAAAAA0w/2YdGR8gG8yw/10_thumb.jpg" alt="" /></li>
<li rel='10'><img src="https://lh6.googleusercontent.com/-vMhGOLkEyiU/TmiK_2dSVVI/AAAAAAAAA0w/_xx716b7dR0/2_thumb.jpg" alt="" /></li>

</ul>
</div>
<a href="#" class="next"></a>
</div><div style="clear:both;"/>

Các ảnh bên dưới phần bigPic bạn thay thành các link ảnh lớn tương ứng với các ảnh thumbnail trong phần thumbs. Như vậy là xong.

8. Cuối cùng save tiện ích lại

Chúc bạn thành công

Mã màu HTML (HTML color code)

snow FFFAFA	GhostWhite F8F8FF	WhiteSmoke F5F5F5	Gainsboro DCDCDC	FloralWhite FFFAF0
OldLace FDF5E6	Linen FAF0E6	AntiqueWhite FAEBD7	PapayaWhip FFEFD5	BlanchedAlmond FFEBCD
Bisque FFFAF0	PeachPuff FFDAB9	NavajoWhite FFDEAD	Moccasin FFE4B5	Cornsilk FFF8DC
Ivory FFFFF0	LemonChiffon FFFACD	Seashell FFF5EE	Honeydew F0FFF0	MintCream F5FFFA
Azure F0FFFF	AliceBlue F0F8FF	lavender E6E6FA	LavenderBlush FFF0F5	MistyRose FFE4E1
White FFFFFF	Black 000000	DarkSlateGray 2F4F4F	DimGrey 696969	SlateGrey 708090
LightSlateGray 778899	Grey BEBEBE	LightGray D3D3D3	MidnightBlue 191970	NavyBlue 000080
CornflowerBlue 6495ED	DarkSlateBlue 483D8B	SlateBlue 6A5ACD	MediumSlateBlue 7B68EE	LightSlateBlue 8470FF
MediumBlue 0000CD	RoyalBlue 4169E1	Blue 0000FF	DodgerBlue 1E90FF	DeepSkyBlue 00BFFF
SkyBlue 87CEEB	LightSkyBlue 87CEFA	SteelBlue 4682B4	LightSteelBlue B0C4DE	LightBlue ADD8E6
PowderBlue B0E0E6	PaleTurquoise AFEEEE	DarkTurquoise 00CED1	MediumTurquoise 48D1CC	Turquoise 40E0D0
Cyan 00FFFF	LightCyan E0FFFF	CadetBlue 5F9EA0	MediumAquamarine 66CDAA	Aquamarine 7FFFD4
DarkGreen 006400	DarkOliveGreen 556B2F	DarkSeaGreen 8FBC8F	SeaGreen 2E8B57	MediumSeaGreen 3CB371
LightSeaGreen 20B2AA	PaleGreen 98FB98	SpringGreen 00FF7F	LawnGreen 7CFC00	Green 00FF00
Chartreuse 7FFF00	MedSpringGreen 00FA9A	GreenYellow ADFF2F	LimeGreen 32CD32	YellowGreen 9ACD32
ForestGreen 228B22	OliveDrab 6B8E23	DarkKhaki BDB76B	PaleGoldenrod EEE8AA	LtGoldenrodYello FAFAD2
LightYellow FFFFE0	Yellow FFFF00	Gold FFD700	LightGoldenrod EEDD82	goldenrod DAA520
DarkGoldenrod B8860B	RosyBrown BC8F8F	IndianRed CD5C5C	SaddleBrown 8B4513	Sienna A0522D
Peru CD853F	Burlywood DEB887	Beige F5F5DC	Wheat F5DEB3	SandyBrown F4A460
Tan D2B48C	Chocolate D2691E	Firebrick B22222	Brown A52A2A	DarkSalmon E9967A
Salmon FA8072	LightSalmon FFA07A	Orange FFA500	DarkOrange FF8C00	Coral FF7F50
LightCoral F08080	Tomato FF6347	OrangeRed FF4500	Red FF0000	HotPink FF69B4
DeepPink FF1493	Pink FFC0CB	LightPink FFB6C1	PaleVioletRed DB7093	Maroon B03060
MediumVioletRed C71585	VioletRed D02090	Magenta FF00FF	Violet EE82EE	Plum DDA0DD
Orchid DA70D6	MediumOrchid BA55D3	DarkOrchid 9932CC	DarkViolet 9400D3	BlueViolet 8A2BE2
Purple A020F0	MediumPurple 9370DB	Thistle D8BFD8	Green 008000	Gray 808080

Snow1 FFFAFA	Snow2 EEE9E9	Snow3 CDC9C9	Snow4 8B8989
Seashell1 FFF5EE	Seashell2 EEE5DE	Seashell3 CDC5BF	Seashell4 8B8682
AntiqueWhite1 FFEFDB	AntiqueWhite2 EEDFCC	AntiqueWhite3 CDC0B0	AntiqueWhite4 8B8378
Bisque1 FFE4C4	Bisque2 EED5B7	Bisque3 CDB79E	Bisque4 8B7D6B
PeachPuff1 FFDAB9	PeachPuff2 EECBAD	PeachPuff3 CDAF95	PeachPuff4 8B7765
NavajoWhite1 FFDEAD	NavajoWhite2 EECFA1	NavajoWhite3 CDB38B	NavajoWhite4 8B795E
LemonChiffon1 FFFACD	LemonChiffon2 EEE9BF	LemonChiffon3 CDC9A5	LemonChiffon4 8B8970
Cornsilk1 FFF8DC	Cornsilk2 EEE8CD	Cornsilk3 CDC8B1	Cornsilk4 8B8878
Ivory1 FFFFF0	Ivory2 EEEEE0	Ivory3 CDCDC1	Ivory4 8B8B83
Honeydew1 F0FFF0	Honeydew2 E0EEE0	Honeydew3 C1CDC1	Honeydew4 838B83
LavenderBlush1 FFF0F5	LavenderBlush2 EEE0E5	LavenderBlush3 CDC1C5	LavenderBlush4 8B8386
MistyRose1 FFE4E1	MistyRose2 EED5D2	MistyRose3 CDB7B5	MistyRose4 8B7D7B
Azure1 F0FFFF	Azure2 E0EEEE	Azure3 C1CDCD	Azure4 838B8B
SlateBlue1 836FFF	SlateBlue2 7A67EE	SlateBlue3 6959CD	SlateBlue4 473C8B
RoyalBlue1 4876FF	RoyalBlue2 436EEE	RoyalBlue3 3A5FCD	RoyalBlue4 27408B
Blue1 0000FF	Blue2 0000EE	Blue3 0000CD	Blue4 00008B
DodgerBlue1 1E90FF	DodgerBlue2 1C86EE	DodgerBlue3 1874CD	DodgerBlue4 104E8B
SteelBlue1 63B8FF	SteelBlue2 5CACEE	SteelBlue3 4F94CD	SteelBlue4 36648B
DeepSkyBlue1 00BFFF	DeepSkyBlue2 00B2EE	DeepSkyBlue3 009ACD	DeepSkyBlue4 00688B
SkyBlue1 87CEFF	SkyBlue2 7EC0EE	SkyBlue3 6CA6CD	SkyBlue4 4A708B
LightSkyBlue1 B0E2FF	LightSkyBlue2 A4D3EE	LightSkyBlue3 8DB6CD	LightSkyBlue4 607B8B
SlateGray1 C6E2FF	SlateGray2 B9D3EE	SlateGray3 9FB6CD	SlateGray4 6C7B8B
LightSteelBlue1 CAE1FF	LightSteelBlue2 BCD2EE	LightSteelBlue3 A2B5CD	LightSteelBlue4 6E7B8B
LightBlue1 BFEFFF	LightBlue2 B2DFEE	LightBlue3 9AC0CD	LightBlue4 68838B
LightCyan1 E0FFFF	LightCyan2 D1EEEE	LightCyan3 B4CDCD	LightCyan4 7A8B8B
PaleTurquoise1 BBFFFF	PaleTurquoise2 AEEEEE	PaleTurquoise3 96CDCD	PaleTurquoise4 668B8B
CadetBlue1 98F5FF	CadetBlue2 8EE5EE	CadetBlue3 7AC5CD	CadetBlue4 53868B
Turquoise1 00F5FF	Turquoise2 00E5EE	Turquoise3 00C5CD	Turquoise4 00868B
Cyan1 00FFFF	Cyan2 00EEEE	Cyan3 00CDCD	Cyan4 008B8B
DarkSlateGray1 97FFFF	DarkSlateGray2 8DEEEE	DarkSlateGray3 79CDCD	DarkSlateGray4 528B8B
Aquamarine1 7FFFD4	Aquamarine2 76EEC6	Aquamarine3 66CDAA	Aquamarine4 458B74
DarkSeaGreen1 C1FFC1	DarkSeaGreen2 B4EEB4	DarkSeaGreen3 9BCD9B	DarkSeaGreen4 698B69
SeaGreen1 54FF9F	SeaGreen2 4EEE94	SeaGreen3 43CD80	SeaGreen4 2E8B57
PaleGreen1 9AFF9A	PaleGreen2 90EE90	PaleGreen3 7CCD7C	PaleGreen4 548B54
SpringGreen1 00FF7F	SpringGreen2 00EE76	SpringGreen3 00CD66	SpringGreen4 008B45
Green1 00FF00	Green2 00EE00	Green3 00CD00	Green4 008B00
Chartreuse1 7FFF00	Chartreuse2 76EE00	Chartreuse3 66CD00	Chartreuse4 458B00
OliveDrab1 C0FF3E	OliveDrab2 B3EE3A	OliveDrab3 9ACD32	OliveDrab4 698B22
DarkOliveGreen1 CAFF70	DarkOliveGreen2 BCEE68	DarkOliveGreen3 A2CD5A	DarkOliveGreen4 6E8B3D
Khaki1 FFF68F	Khaki2 EEE685	Khaki3 CDC673	Khaki4 8B864E
LightGoldenrod1 FFEC8B	LightGoldenrod2 EEDC82	LightGoldenrod3 CDBE70	LightGoldenrod4 8B814C
LightYellow1 FFFFE0	LightYellow2 EEEED1	LightYellow3 CDCDB4	LightYellow4 8B8B7A
Yellow1 FFFF00	Yellow2 EEEE00	Yellow3 CDCD00	Yellow4 8B8B00
Gold1 FFD700	Gold2 EEC900	Gold3 CDAD00	Gold4 8B7500
Goldenrod1 FFC125	Goldenrod2 EEB422	Goldenrod3 CD9B1D	Goldenrod4 8B6914
DarkGoldenrod1 FFB90F	DarkGoldenrod2 EEAD0E	DarkGoldenrod3 CD950C	DarkGoldenrod4 8B658B
RosyBrown1 FFC1C1	RosyBrown2 EEB4B4	RosyBrown3 CD9B9B	RosyBrown4 8B6969
IndianRed1 FF6A6A	IndianRed2 EE6363	IndianRed3 CD5555	IndianRed4 8B3A3A
Sienna1 FF8247	Sienna2 EE7942	Sienna3 CD6839	Sienna4 8B4726
Burlywood1 FFD39B	Burlywood2 EEC591	Burlywood3 CDAA7D	Burlywood4 8B7355
Wheat1 FFE7BA	Wheat2 EED8AE	Wheat3 CDBA96	Wheat4 8B7E66
Tan1 FFA54F	Tan2 EE9A49	Tan3 CD853F	Tan4 8B5A2B
Chocolate1 FF7F24	Chocolate2 EE7621	Chocolate3 CD661D	Chocolate4 8B4513
Firebrick1 FF3030	Firebrick2 EE2C2C	Firebrick3 CD2626	Firebrick4 8B1A1A
Brown1 FF4040	Brown2 EE3B3B	Brown3 CD3333	Brown4 8B2323
Salmon1 FF8C69	Salmon2 EE8262	Salmon3 CD7054	Salmon4 8B4C39
LightSalmon1 FFA07A	LightSalmon2 EE9572	LightSalmon3 CD8162	LightSalmon4 8B5742
Orange1 FFA500	Orange2 EE9A00	Orange3 CD8500	Orange4 8B5A00
DarkOrange1 FF7F00	DarkOrange2 EE7600	DarkOrange3 CD6600	DarkOrange4 8B4500
Coral1 FF7256	Coral2 EE6A50	Coral3 CD5B45	Coral4 8B3E2F
Tomato1 FF6347	Tomato2 EE5C42	Tomato3 CD4F39	Tomato4 8B3626
OrangeRed1 FF4500	OrangeRed2 EE4000	OrangeRed3 CD3700	OrangeRed4 8B2500
Red1 FF0000	Red2 EE0000	Red3 CD0000	Red4 8B0000
DeepPink1 FF1493	DeepPink2 EE1289	DeepPink3 CD1076	DeepPink4 8B0A50
HotPink1 FF6EB4	HotPink2 EE6AA7	HotPink3 CD6090	HotPink4 8B3A62
Pink1 FFB5C5	Pink2 EEA9B8	Pink3 CD919E	Pink4 8B636C
LightPink1 FFAEB9	LightPink2 EEA2AD	LightPink3 CD8C95	LightPink4 8B5F65
PaleVioletRed1 FF82AB	PaleVioletRed2 EE799F	PaleVioletRed3 CD6889	PaleVioletRed4 8B475D
Maroon1 FF34B3	Maroon2 EE30A7	Maroon3 CD2990	Maroon4 8B1C62
VioletRed1 FF3E96	VioletRed2 EE3A8C	VioletRed3 CD3278	VioletRed4 8B2252
Magenta1 FF00FF	Magenta2 EE00EE	Magenta3 CD00CD	Magenta4 8B008B
Orchid1 FF83FA	Orchid2 EE7AE9	Orchid3 CD69C9	Orchid4 8B4789
Plum1 FFBBFF	Plum2 EEAEEE	Plum3 CD96CD	Plum4 8B668B
MediumOrchid1 E066FF	MediumOrchid2 D15FEE	MediumOrchid3 B452CD	MediumOrchid4 7A378B
DarkOrchid1 BF3EFF	DarkOrchid2 B23AEE	DarkOrchid3 9A32CD	DarkOrchid4 68228B
Purple1 9B30FF	Purple2 912CEE	Purple3 7D26CD	Purple4 551A8B
MediumPurple1 AB82FF	MediumPurple2 9F79EE	MediumPurple3 8968CD	MediumPurple4 5D478B
Thistle1 FFE1FF	Thistle2 EED2EE	Thistle3 CDB5CD	Thistle4 8B7B8B
grey11 1C1C1C	grey21 363636	grey31 4F4F4F	grey41 696969