Category: Picture

Posted on

Add Animated pictures

These are few Sample animated gif files that I have added for you to see..

I presume that many of you would have tried to add a single animated gof file to the blog using the blogger-picture element.. and would have faced one of the following.

  • The Blogger does not allow you to add the animated gif and you get an error mesage
  • Technically u clicked on one animated-gif file to upload and once the upload is done you see a series of similar looking pics…leaving you wondering where all those other copies came from

So before learing how to do this.. we need to understand the logic in an aminated gif file

Animated gifs actually contain a series of images (or frames) that are displayed one after the other and give an illussion of movement.


Since Blogger seems not to like animated-gif pictures we need to upload our files to someother file-hosting service.I have used Ripway

  1. Register & Login to Ripway.com
  2. Upload the Animated gif file from your hard disk to ripway
  3. Once your file is uploaded properly you shouldc be able to see

    4. It will resemble something like shown below

    Right-Clik the open link marked by oval-shape-with-arrows-pointing and Choose properties

  4. This will give the direct link to your animated file
  5. You may save this link in a notepad so that you can use this in your post along with
    <img style=”border:none;” src=”-YOUR AnimatedGif FILE PATH-“/>
  6. Add to post and publish
  7. You now have a great looking Animated gif file in your blog

.You may choose any files Sharing service you prefer.Do feel free to give me the names of such file-sharing services so that I may add them here for refrece to other fellow bloggers.
Hope you were able to acomplish the task of adding animated gif files to your blog.Kindly leave your opinion at the comments section ..and dont forget to help another friend by backlink to this post..

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

Profile picture in "Posted by" section

At the end of every post we see the “Posted by.. <authorname>” ..followed by the number of comments, timestamp etc..etc…Some would perefer having their profile pictures instead of the boring “Posted by <authorname>” text.Do follow the instructions closely.

  1. SAVE AND BACK UP YOUR TEMPLATE

  2. IF YOU ALREADY HAVE THE PICTURE IN YOUR PROFILE..go to step 4

  3. UPLOADING PICTURE TO YOUR PROFILE
    • Have a new test post and insert your picture using the ADD-IMAGE
    • Take care that your picture has the right kind of dimentions that you would like to display at the end of each post.I dont think you would prefer, if your picture takes up half as much space as the post itself.
    • Publish the post
    • Copy the URL of the picture from the EDIT-HTML part of the post
    • go to DASHBOARD—EDIT PROFILE–Give the URL in the Photo-URL
    • Save Profile and assure yourself of the picture displayed
    • Once you are satisfied with the picture in the profile.. you can delete the post that you have just now created..this will not affect the picture in the profile

  4. Go to Dashboard..Edit profile
    • Copy the photo URL into a notepad

    • Select LAYOUT of the blog(to which you wish to add the picture at the end of the posts)

    • TEMPLATE–EDIT HTML

    • Expand Widget Templates

    • locate
      <span class=’post-author’>
      <b:if cond=’data:top.showAuthor’>
      <data:top.authorLabel/>
      <data:post.author/>
      </b:if>
      </span>

    • Insert <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/> below the <data:top.authorLabel/>

    • Now your final code should look like this
      <span class=’post-author’>
      <b:if cond=’data:top.showAuthor’>
      <data:top.authorLabel/>
      <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/>
      <data:post.author/>
      </b:if>
      </span>
    • SAVE and view your blog

  5. If you donot want the “POSTED BY…YOUR-NAME” to be displayed then
    • TEMPLATE—PAGE ELEMENTS
    • EDIT–Blog posts (element)
    • Choose accordingly
    • SAVE and view

  6. FOR PIC AT THE TOP OF THE POST..(like in newspapers)
    • look for
      <data:post.timestamp/>
    • Insert the<img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/> below
    • The Final code should look like this
      <data:post.timestamp/>
      <img src=”URL YOU HAVE COPIED FROM THE PROFILE PAGE as stated above” style=”border:none”/>This Will put the picture beside the date header of your posts.You would have noticed this on this blog itself
    • Some slight modifications might be needed for certain indiviaulistic templates…Just drop in a word..i shall help you fix it

Hope you were able to successfully add this feature to your blog using the instructions stated above.So drop in your opinion (good & bad) at the comments.Your comments motivate me to perform better…b/w dont forget to mention this link in your credits section..

From Deepa’s Template Tips

Posted on

To have Background picture for your header

Many custom templates offered by blogger beta either does not have a Background picture.. or the picture presented by default may not suit our taste. You too can have a custom looking header to your blog.Just follow the instructions closely

  1. SAVE YOUR TEMPLATE
  2. in TEMPLTE -EDIT HTML LOOK FOR
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }
  3. Add the background-image: url(THE URL OF YOUR PICTURE); to your header-wrapper
  4. So that your final code should look something like this
    #header-wrapper
    {
    width:700px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    background-image: url(THE URL OF YOUR PICTURE);
    }
    • If the picture of your choice is in the web.. then give the webURL
    • IF the Picture is in your hard disc then
      1. Then have a new post and insert that picture
      2. Go to edit html page…. You will see the html code for that picture
      3. Copy paste that code into a notepad
      4. Publish this new post (don’t worry u can delele later)

    • Use the URL u got from the previous step to get that picture on the header
    • IF you are satisfied with the new look of the header then you can delete the post having the picture. Don’t worry.. this will not affect the header…as the picture is stored in blogger
  5. SAVE and view your blog

You make me happy by comming and reading this post.You can make me feel little more happier by dropping in your comments.Good luck to have your customised header picture

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