Category: Icons

Posted on

Add Yahoo emotions (Smileys) to your Blog

Hello all 🙂 .. Welcome to this blog >:D< ..Its now possible to add yahoo smilies like =)) , :-? , :O3 , and many more to your blog by using the without using the <img> tags. You can type in : ) to get the :) ... in short you can use the same keys as you would use in the yahoo messenger to get the appropriate smileys <:-P.Thanks To Aditya of Last Word..it was he who first developed this with basic set of smileys..However i have modified the script so as to accomodate all major yahoo SmileysThere are about 85 such smilyes #:-S (including the hidden smileys). you can use the same keys as listed in Yahoo Emotions and Yahoo Hidden Emotions.

For your refrence i have a TEST POST FOR Yahoo smileys thorough scripts… If you see the “View Source ” you will not be seeing any <img> tags. B-) .. instead you will only the yahoo smiley-keys… which are replaced wiht the Smiley pictures when viewed in the browser. \:D/This way you need not memmorise any new keys to get the smileys on your blog.

If you wish to use this in your blog, follow the instructions
If you wish to use any of yahoo the smileys here in your blog.. follow the instructions carefully

  1. SAVE AND BACKUP YOUR TEMPLATE

  2. Add<script type=’text/javascript’ src=’http://deepa7476.googlepages.com/DeepaSmiley.js’></script> above the </head> tag

  3. Save and start posting

  4. A Word of Caution
    • I have seperated the characers with a space in the middle. . you can write them as continious cahracters to get the smiley

    • If you are seeing borders around these emotions that appear in your posts then change this
      .post img {
      padding: 4px;
       border: 0x solid #cccccc;
      }

I have Slogged pretty long to get this script working..so if you are using this script kindly link back to this post as an appreciatoion for the effort taken.This gesture of your appriciation will motivate me to take up new challenges.

From Deepa’s Template Tips

Posted on

Using Icons – Images for Bulleted lists in posts & sidebar

When we make a list, we want them to appear a little diffrenly than our regular post content.This is our way of emphasising certain things. For long I have been using the the following tags for list
Appearence of Lists in Posts

Ordered lists
Unordered Lists
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item3</li>
</ol>		 <ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
  1. List Item 1
  2. List Item 2
  3. List Item 3
  • List Item 1
  • List Item 2
  • List Item 3

Arrow Shaped bullets for Unorderd Lists
Earlier I used to get a “dot” in place of the arrows that you now see in the unordered list.I was getting bored by that look. So i did this in my template

  1. SAVE AND BACKUP the template

  2. Locate the .post{}

  3. Add
    .post ul
    {list-style-image: url(http://h1.ripway.com/Deepa/bullet.ico );}

  4. Save and View

Bullet numbers in a diffrent color in Ordered Lists

  1. SAVE AND BACKUP the template

  2. Locate the .post{}

  3. Add
    .post ol.coloredNumbers
    { color:maroon;
    }

    .post ol.coloredNumbers li span
    {
    font-weight: regular;
    color:#375267;
    }

  4. Add following to your post template
    Use this for ordered lists only
    <ol class=”coloredNumbers”>
    <li><span>First </span></li>
    <li><span>Second </span></li>
    </ol>

  5. So that anytime you use ordered list..place the list items between the following tags
    <ol class=”coloredNumbers”>
    <li><span>     —List Item -1— </span></li>
    <li><span> —List Item -2— </span></li>
    <li><span> —List Item -3— </span></li>
    </ol>

Appearence of list in sidebars
The lists in my sidebar have diamond shaped icons as bullets

  1. Locate
    .sidebar li {
    margin-left: -10px;
    padding: 0 0 .03em 0px;
    text-indent: -15px;
    line-height: 15px;
    }

  2. Add
    list-style-image: url(http://h1.ripway.com/Deepa/bullet2.ico );

  3. Here you can substitute the URL with the icon-image that you want to use with the bullets…Till then feel free toshare my link to the bullet icon.

  4. When ever you want a bulleted list in the sidebar..use only
    <ol>
    <li>     —List Item -1— </li>
    <li> —List Item -2— </li>
    <li> —List Item -3— </li>
    <ol/>

I undersntad that this is too much to grasp in one reading..So just take your time…trythis in a test blog. I am sure that withlittle time and perseverance you too can give your posts a cool look with customised bullets.Do drop a word if you are facing any difficulty.I shall be Glad to help

From Deepa’s Template Tips

Posted on

Creating & Uploading icons to be used in blogger

Blogger allows to add pictures to our posts. But for more graphic savy enthusiasts uploading .jpg,.gif etc will not guarantee satisfaction. Blogger does not allow to upload icons. This quest landed me here.Thanks to Improbulus. A careful reading through the post enlightened me about the procedure for creating & uploading icons.

1. CREATING ICONS

2. UPLOADING ICONS

3. USING ICONS IN BLOGGER



CREATING ICONS

Option 1:-

Icons can be created in the systematic manner using Online fav-icon creator or any Icon creator.

Option 2:-

  1. You have a picture that you would like to use as icon, preferably 16×16 px (depending on how large you want your icon to be).

  2. Make sure that the picture is saved in your hard disk

  3. Conversion of pics to icons can be done here.

  4. upload your picture from the HardDisk.

  5. Generate FavIcon.

  6. As soon as the icon is generated – Download FavIcon.
    It is usually downloaded as .zip file and the icons are always named as favicon.icon.

  7. Extract favicon.ico from the zip file and rename it as per your convenience.

Now your icon is ready to be used

Option 3:-

  1. You have a picture that you would like to use as icon, preferably 16×16 px (depending on how large you want your icon to be)

  2. Download Irfan view from here and install. I personally prefer irfanview

  3. Open the picture you wish to use as icon in IrfanView
  4. FILE — SAVE As —save as .ico file

Now your icon is ready to be used

UPLOADING ICONS

Many webhosting services donot allow hosting of .ico files. After neckbreaking googling I narrowed down on Ripway and Imgzhost These are free file hosting & sharing service

  1. Register with Ripway ORImgzhost.
  2. Go to MY FILES
  3. UPLOAD FILES.
  4. You shall the list of file(s) that you have uploaded.

USING ICONS IN BLOGGER

  1. Signin to Ripway.
  2. MY FILES will list all your files.
  3. Besides each file you will see a COPY link. This link will give you the path to acess the .ico files.
  4. Use that link in the &LTimg src=”–YOUR ICON FILE PATH–“/> tag
  5. If you see that your icon is showing border while on display in the browser just use this instead
    &LTimg style=”border:none;” src=”-YOUR ICON FILE PATH-“/>

voila..you are using icons in your blogger posts. Hope this was helpful. Donot forget to backlink this post in your blog. A little appreciation goes a long way

From Deepa’s Template Tips

Privacy Policy - Terms and Conditions