Tuesday 19 March 2013

Use of CSS for customizing Bullet List Style

Demo
As you know that I always tried to publish interesting and new tricks. Each and every person who runs his / her own blog or website wants to make the blog/website more and more beautiful. In this article you will be able to learn and understand how to customize the bullet lists using CSS. Therefore, today I published a new trick to make use of CSS for customizing bullet list style. The people who are running their own blog or website then there is an article for them published by Shiraz Shakeel. You all know that CSS is the best way to customize your blog/website. This trick is with a special, unique and attracting and also a hover effect. To apply this trick you must follow the following CSS trick.



  • Open Your Template
  • Search For ]]>
  • Add below code just above ]]>
.post ul {
    list-style: none;
}
.post ul li {
    line-height: 1.4em;
    background: transparent  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcfZsa1lBxm09FS0o2XfE4FYH6FL1KEAZnqnDnpOJPlaK290qAJOnh5eZWWC5Wp_X8ObfBsi5jP3GLS0Z6rNOaf8EQcqZiAn94c6yJ2E6xcA5tAQ9Xw5aBGCdK1A8uktBq675lnNdBSU/s1600/blue-bullet-icon.png) no-repeat scroll 0 5px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf2qYLZ9U1F3XXxiYYP-Z2FqqwzWGRce0tzJI-9n2enMbZLBAc1ry73_AQVSq2yDIPPcZKpN5y5r8j3BGEIr3ExuRwx9lr97CFkp5kPylJHyPTZeiSbE2G-LrHahNHepIZS6yA75ZKMiQ/s1600/green-bullet-icon.png) no-repeat scroll 0px 5px;
}

For Customizations

  • You can replace the given url of the image in the code and add your own.

Thursday 14 March 2013

Color Code Generator And Wheel


Color Code Generator

Instructions:-


  1. First drag the bar on the "Hue" selector to the area of your desired colour palate. 
  2. Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.
  3. The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000
  4. That’s it!





Color Wheel For Choosing Matching Palate Colors

This is a pretty useful tool to achieve matching or cohesive colours for navigation menu, background, hyperlinks, header etc. Instructions:
  1. Simply paste the six digit colour code in the form below without the hash (#) sign and then hit Update
  2. The matching colour codes will appear inside the four boxes at the right side.
  3. You can then copy the hex values and start using them!

CSS Color 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


Wednesday 13 March 2013

Count Characters

Character Counter By Shiraz Shakeel
Number of Characters:

Copyright © 2012. All Rights Reserved by Shiraz Shakeel @ Shiraz Shakeel

Remove Border And Shadows From Your Blogger Images

Remove Border And Shadows From Your Blogger Images

  • Go to Blogger Dashboard > Design > Edit HTML
  • Add below code just above 


.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}


  • Now save your template and refresh your blog.Now your blog should appear without any borders and shadows.
Enjoy !

How To Remove Underlines From Links IN Blogger

How To Remove Underlines From Links IN Blogger

To apply this hack you just to edit a little part of CSS code let's see how?

  • First Go to your Blogger Dashboard > Design > Edit HTML.
  • Now find for below code in your template.

a {color: #0000FF;text-decoration: underline;}

Note - You will find this code little code different as coding of each template is differ.If you could not find this code then do not panic and simply post your Blog URL in the comments.

Now change underline with none
Now save your template and you are done...