Embeddable “CSS Color Chart” – 216 Hexadecimal Values



Embeddable css color chartBelow is an embeddable Web Colour Chart most probably known as hexadecimal colour chart. The chart below consists of a total 216 hexadecimal colours which are well interpreted by all browsers and are compatible in every sense. The Colour chart below uses a combination of well scripted HTML and CSS to produce a mouse over effect when you hover your cursor over the table cells. You can use this chart for both free and commercial purpose. You can use these colour codes/hexadecimal values for editing your Blogspot, Wordpress or web templates. They are web safe colours so they look the same in any browser.  You can embed this Colour Chart or table in your websites or weblogs. You only need to subscribe to this blog by filling up the simple Subscription form on the sidebar. Once you have subscribed kindly inform me by using the comment box below and include in it the email address with which you subscribed. To avoid spam robots, write your email address as follow,

  • If you use hotmail write like this –> xyz hot mail
  • If you use gmail write like this –> xyz g mail
where xyz is your email ID. If you use any other emailing service then simply follow the above pattern.
The moment I receive your comment, I will send you the embeddable code to this chart.

CSS Web Colour Chart

 
#FFFFFF#FFFFCC#FFFF99#FFFF66#FFFF33#FFFF00
#FFCCFF#FFCCCC#FFCC99#FFCC66#FFCC33#FFCC00
#FF99FF#FF99CC#FF9999#FF9966#FF9933#FF9900
#FF66FF#FF66CC#FF6699#FF6666#FF6633#FF6600
#FF33FF#FF33CC#FF3399#FF3366#FF3333#FF3300
#FF00FF#FF00CC#FF0099#FF0066#FF0033#FF0000

#CCFFFF#CCFFCC#CCFF99#CCFF66#CCFF33#CCFF00
#CCCCFF#CCCCCC#CCCC99#CCCC66#CCCC33#CCCC00
#CC99FF#CC99CC#CC9999#CC9966#CC9933#CC9900
#CC66FF#CC66CC#CC6699#CC6666#CC6633#CC6600
#CC33FF#CC33CC#CC3399#CC3366#CC3333#CC3300
#CC00FF#CC00CC#CC0099#CC0066#CC0033#CC0000
 
#99FFFF#99FFCC#99FF99#99FF66#99FF33#99FF00
#99CCFF#99CCCC#99CC99#99CC66#99CC33#99CC00
#9999FF#9999CC#999999#999966#999933#999900
#9966FF#9966CC#996699#996666#999933#999900
#9933FF#9933CC#993399#993366#993333#993300
#9900FF#9900CC#990099#990066#990033#990000

#66FFFF#66FFCC#66FF99#66FF66#66FF33#66FF00
#66CCFF#66CCCC#66CC99#66CC66#66CC33#66CC00
#6699FF#6699CC#669999#669966#669933#669900
#6666FF#6666CC#666699#666666#666633#666600
#6633FF#6633CC#663399#663366#663333#663300
#6600FF#6600CC#660099#660066#660033#660000

#33FFFF#33FFCC#33FF99#33FF66#33FF33#33FF00
#33CCFF#33CCCC#33CC99#33CC66#33CC33#33CC00
#3399FF#3399CC#339999#339966#339933#339900
#3366FF#3366CC#336699#336666#336633#336600
#3333FF#3333CC#333399#333366#333333#333300
#3300FF#3300CC#330099#330066#330033#330000

#00FFFF#00FFCC#00FF99#00FF66#00FF33#00FF00
#00CCFF#00CCCC#00CC99#00CC66#00CC33#00CC00
#0099FF#0099CC#009999#009966#009933#009900
#0066FF#0066CC#006699#006666#006633#006600
#0033FF#0033CC#003399#003366#003333#003300
#0000FF#0000CC#000099#000066#000033#000000


Web developers and bloggers are requested to attach a link-back to this blog if they wish to share this chart with their readers.
I would love to know how you liked it. Any comment is appreciated.

Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!



IMAGE-POP-UP-OPACITY-EFFECTAdding different effects to your blog template surely makes it outstanding. By default MBT Church Theme has two Image effects features, which are the pop-up andfading image effects.

First lets learn how to add the Pop-up image effect to our images. I hope you are using MBT Church Theme, if not then download and upload it now!





Image Pop-up effect

To expand an image to its original size, you will need to follow the steps below, 
  • Go to your blogger Editor and upload an image.
  • After you have uploaded an image, simply click the preview button near the top-right-corner as shown in the image below,
click-the-preview-link-in-blogger-editor
  • Right click on the image that you just uploaded and then click on Copy Image Location to get the Image URL. Make sure you are using Mozilla Firefox Browser,
copy-image-location-to-save-Image-URL



You can use the same method always to get Image URLs for your uploaded images. Get rid of Photobucket!
  • After you get the image URL simply use the popping code shared below,

<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>

  • Copy-paste this image code in your blogger editor and make the following changes,
------> Replace Add Image URL Here  with the image location that you just copied.
------> You can also change the size of the display image. The Display image is the smaller image which on mouse hover expands to the original size. Change 100px to any size you want.
------> Replace Image Description here with a little description about the image. This text will appear below the expanded/popped up image. If you don’t want to add any description simply delete the bolded green text.
That’s All! Apply the popping code to see things popping up :>

On Mouse Hover Image Opacity Effect

Now Lets add the fading effect to your images. This one is pretty easy!
  • Follow the same steps for getting the image URL as guided above.
  • Once you have copied the Image Location, use the following code to add fading effect to your image,
<a  class="Fadein" href="Add Image URL Here"/><img src="Add Image URL Herewidth="" height="" border="0px" /></a>
  • Simply replace the bolded red text with the Image location that you copied.
  • By default the original image size will appear because I have mentioned no image dimensions. If you want to give a particular size to the image then give the proper dimensions to width="" and height=""   e.g:- width="500px" height="600px"
That’s All! I hope everything was clear.
You can follow the same procedure for adding these two effects to images in your sidebar. You just need the Image URL and that’s it! bye

Stylized Page Navigation Widget For Blogger|Blogspot blogs – MBT Church Theme Style!



Page-Navigation-Widget-for-BloggerAs mentioned in the download page of MBT Church Themethat it has a Page Navigation Widget that is an alternative to Recent Posts, Home and Older Posts links at the bottom of blogger hosted blogs. In order to add the stylized version of Page Navigation Widget created by Mohammad Rias to your MBT Church Theme, follow the steps below,

Page Navigation Widget For Blogger Hosted Blogs

  1. Log into your blogger account and go to Layout > Page Elements
  2. Then Click on Add a Gadget
  3. Amongst the Blogger Featured Widgets Choose HTML/JavaScript Widgethtml-javascript blogger widget
  4. Inside the HTML/JavaScript Widget  paste the code below,
    <style type="text/CSS">
    .showpageArea a {
    text-decoration:underline;
    }
    .showpageNum a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    margin:0 3px;
    padding:3px;
    }
    .showpageNum a:hover {
    border: 1px solid #7AA1C3;
    background-color:#F6F6F6;
    }
    .showpagePoint {
    color:#333;
    text-decoration:none;
    border: 1px solid #7AA1C3;
    background: #F6F6F6;
    margin:0 3px;
    padding:3px;
    }
    .showpageOf {
    text-decoration:none;
    padding:3px;
    margin: 0 3px 0 0;
    }
    .showpage a {
    text-decoration:none;
    border: 1px solid #7AA1C3;
    padding:3px;
    }
    .showpage a:hover {
    text-decoration:none;
    }
    .showpageNum a:link,.showpage a:link {
    text-decoration:none;
    color:#7AA1C3;
    }
    </style>
    <script type="text/JavaScript">
    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
    var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
    var isPage = thisUrl.indexOf("/search?updated")!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
    thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= '';
    var upPageHtml ='';
    var downPageHtml ='';
    var pageCount = 2;
    var displayPageNum = 5;
    var upPageWord = 'Previous';
    var downPageWord = 'Next';
    var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
    for(var i=0, post; post = json.feed.entry[i]; i++) {
    var timestamp = post.published.$t.substr(0,10);
    var title = post.title.$t;
    if(isLablePage){
    if(title!=''){
    if(post.category){
    for(var c=0, post_category; post_category = post.category[c]; c++) {
    if(encodeURIComponent(post_category.term)==thisLable){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    postNum++;
    htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    }
    }//end if(post.category){
    itemCount++;
    }
    }else{
    if(title!=''){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    if(title!='') postNum++;
    htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
    }
    }
    itemCount++;
    }
    }
    for(var p =0;p< htmlMap.length;p++){
    if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    if(fFlag ==0 && p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +'</a></span>';
    }else{
    upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
    }
    }else{
    upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
    }
    fFlag++;
    }
    if(p==(thisNum-1)){
    html += '<span class="showpagePoint">'+thisNum+'</span>';
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+'1</a></span>';
    }else{
    html += '<span class="showpageNum"><a href="/">1</a></span>';
    }
    }else{
    html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
    }
    }
    if(eFlag ==0 && p == thisNum){
    downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
    eFlag++;
    }
    }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
    }//end for(var p =0;p< htmlMap.length;p++){
    if(thisNum>1){
    if(!isLablePage){
    html = ''+upPageHtml+' '+html +' ';
    }else{
    html = ''+upPageHtml+' '+html +' ';
    }
    }
    html = '<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
    if(thisNum<(postNum-1)){
    html += downPageHtml;
    }
    if(postNum==1) postNum++;
    html += '</div>';
    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName("pageArea");
    var blogPager = document.getElementById("blog-pager");
    if(postNum <= 2){
    html ='';
    }
    for(var p =0;p< pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }
    if(pageArea&&pageArea.length>0){
    html ='';
    }
    if(blogPager){
    blogPager.innerHTML = html;
    }
    }
    }
    </script>
    <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ; type="text/javascript"></script>
  5. If you are using a domain other than .blogspot.com or .com, then kindly change  the bolded red text .com with your domain extension. For Example if your domain ends with .info or .biz than replace .com with .info or .biz . But if you are a BlogSpot user than leave the code unchanged.
  6. Once you have pasted the code inside the widget, simply drag your HTML/Javascript widget to the area just below your posts and drop it there, as shown in the picture below,
Page-Navigation-Widget-For- blogspot blogs


That’s All!
Hope you enjoyed it. Let me know if anything is unclear.

Direct Linking To Picasa Images. Who Says You Can’t Store-Save-Upload Animated Images in Blogger



Animated GIF Image saved in blogger blogspot blogThe reason why you can’t show animated images in your blogger posts once you upload them to your account is really simple to answer. By default blogger displays all images uploaded directly from blogger editor as static images and show only one instance of the in-motion image. But there is a way round by which we can really embed animated GIF images in our blogger posts by using the same Picasa Web Album account used by Blogger to store our images. Want to know how? Kindly Follow the steps below,

  1. Log Into Your Picasa Web Album Account By Visiting picasa.google.com
  2. Create A New Public Album
  3. Upload Your Animated Image
  4. Obtain The Direct Link To your Uploaded Image
  5. Finally Upload The Image in Your Blogger Editor and Edit it!

1.   Log Into Your Picasa Web Album Account By Visiting picasa.google.com

Click the upload button at the top right corner, as shown below,
Upload-button-in-Picasa

2.   Create A New Public Album

Once you click the upload button a small window will pop-up.
Click create a new album link 
 Create-a-new-album

Set your title and choose the Public Share Option as shown in the image below,
Give-your-Picasa-Album-a-ti  Then click the Continue button to get to step# 3 as discussed below,

3.   Upload Your Animated Image


Now browse to locate your image saved in your hard driveBowse-the-file-from-your-ha
And then click Start Upload, which will take you to step # 4

4.   Obtain The Direct Link To your Uploaded Image

After the image is uploaded , a small thumbnail of the image will appear. Click this thumbnail image to get to the original size
 click-the-uploaded-image

You will now have to click the link at the right-hand-side entitled “Link to this Photo” as shown below,
Copy-the-direct-link-of-you
Now the important part,
  • Check the image only (no link) box
  • Set image size to original
  • Copy the code under Embed image and that’s the Direct link to your Image!

5.   Finally Upload The Image in Your Blogger Editor and Edit it!








Now go to your blogger Editor and click the image icon to upload an image as you  usually do.
Here you will have two options, either to upload an image from your hard drive Or add an image from the web. If you choose the first option your image will appear static and no animation will occur but since we want the image to appear animated therefore choose the second option and paste the Direct link to your Image just next to URL
Look at the image below for better understanding,
Add-Image-URL-that-you-copi
Alas! you successfully added an animated image to your blogger editor without using Image services like Photobucket etc.
Now you can play with your image by resizing it and aligning it as you normally do.
Edit-Your-Uploaded-Image

That’s All!

The Best Shortcut:

If you are using Windows Live Writer than you will simply need to upload the image to your Live Writer from your Hard Drive and that’s it! Once the post is published the image will appear animated by default. I do the same to upload MBT Animated Icons.

powered by Blogger | WordPress by Newwpthemes | Converted by BloggerTheme