Blogger Updates

Saturday, April 16, 2011

How to add Skype Emoticons in Blogger?

Skype is a free service that enables us to make calls and send instant messaging over the internet .

Personally i uses skype a lot and loves to use smiles ,nothing would be better than if we could add skype emoticons to blogger. You may have seen tutorial to add yahoo emoticons to blogger ,this tutorial works on the same method.

Firstly we will include emoticons and symbols to our template so that our visitors know how to use this emoticons.
  1. Login to dashboard and Navigate to the Layout > Edit HTML tab.
  2. "Expand Widget Template".
  3. Locate this line of code.
    1
    <p> <data:blogCommentMessage/> </ p>
  4. Just below paste this code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <div style=' width: 370px; TEXT-ALIGN: left; border: solid 2px #0084ce; background: #FEF9EA; padding: 10px; color:#0084ce; font-weight:bold;'>
     
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
     
    &#160;
    </div> </ Div>
  5. Save changes and we can see these emoticons above the comment form.emoticonsThis emoticons are not yet working ,to make them working we have to include script in the template code.
  6. Locate the in our template (the code near the end of it) and just above it, paste the script:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <script type='text/javascript'>
     
    //<![CDATA[ //<![ CDATA [
    a = document.getElementById('comments'); a = document.getElementById ('comments');
    if(a) { if (a) (
    b = a.getElementsByTagName("DD"); b = a.getElementsByTagName ("DD");
    for(i=0; i < b.length; i  ) { for (i = 0; i <b.length; i    ) (
    if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') { if (b.item (i). getAttribute ('class') == 'Author-comment-body', 'comment-body') (
     
    b.item(i).innerHTML = _str; b.item (i). innerHTML = _str;
    } )
    } )
    } )
    //]]> //]]>
    </script> </ Script>


Final thought : Customization of box(around smiles).
We can easily change the background color , text alignment , padding by changing properties of the div element.
1
<div style=' width: 370px; TEXT-ALIGN: left; border: solid 2px #0084ce; backgro



No comments:

Post a Comment

Blogger Updates

Blogger Tips

Premium Templates

narrowsidebarads

Copyright © 2011. BLOGGING CASTLE- All Rights Reserved | Blog Posts by ANURAG | Edited by ASHISH. Powered by AndroidGyan.Com