Category: Basic

Posted on

Show your Pdf documents from inside your webpage

Those who are involved with lot of document exchange will probably agree with me that Pdf’s are great way to distribute your original document. With Pdfonline.com, the conversion of documents from the various formats {MS Word (DOC | RTF)–MS PowerPoint (PPT)—MS Publisher (PUB)–MS Excel (XLS)–HTML (MHT)–Text (TXT)–JPG , GIF,TIFF, BMP,PNG, EMF,WMF } to pdf is just a click away.

However, it has been in the wish list of many bloggers and e-publications , over some procedure to display the contents of the pdf documents by embedding them directly in a web page. Until now, the pdfs would be uploaded to some common file sharing network , and the link to the pdf would be specified in the web page. The person whoever wishes to read, has to download the pdf to his system.

Not anymore… now you can show the contents of the pdf right inside your blog / webpage. Surprised.. below you will see a pdf document that I have created as a test document and its content displayed for all of you to see ( without downloading). Use the slider near the ZOOM tool to get a closer look and the HAND tool to drag the page



This is now possible with the help of services from http://www.scribd.com.Not only with pdfs, Scribd allows us to upload and publish documents in other formats also (check out their FAQ)

You can also customize the document for private – public viewing, Allow – disallow printing, Allow-disallow comments, and even more.. Just explore and you get to know better. I personally find this extremly useful for pdf’s ( for other formats depending on the file size, the conversion might take a little longer).. so.. Liked this… Its simple and easy.. just follow the instructions closely

  1. Register with http://www.scribd.com

  2. Look for a link that says UPLOAD

  3. You may upload a document from your Hard Drive (or) specify the URL of the document

  4. Once upload is completed, it will start converting , so that your document is embedded in a flash player ( which is used in the webpage)

  5. Depending on the number of previous documents in queue, this might take some time

  6. Once the conversion is completed, you just have to click on the file to see it on Scribd

  7. On the LeftHand side of the document page ( in scribd), you will see various options to share the file

  8. There is also an Embed Option ( You may not see this immediately after the file upload.. I had to wait for abt 12 hrs to see the embed code… so just upload the files one day ahead of schedule, to be on the safer side)

  9. You may copy paste the Embed code to your blog to show the pdf

  10. The Advanced option allows you to change the height and width of the display area.. so that you may modify it suit the appearance of your blog / website

  11. Thats it… you have the embed code.. now all you need to do is Copy paste the code at the appropriate position in your blog for your friends to see

So you see… displaying the contents of a Pdf file in a webpage is not impossible after all… it just took us a little longer to know about Scribd. I prefer to use this exclusively for Pdfs .. perhaps, you may find other attributes of Scribd more interesting. Dont hesitate to share your thoughts with the rest of us. If you find this post has been helpful in some manner, do drop in a word at the comments page
Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Personalising Blogs with Fonts of your choice

The first thing that comes to a blogger’s mind when he is setting up the visual space of this blog is to give his own personal style to the look of the blog.This is much before he even thinks about posting.

Fair amount of personalisation can be done without getting involved in too many technical stuff … simply put – by changing the font style , color , font size etc etc

A more generalised way to do this will be to locate this your TEMPLATE – FONTS AND COLORS

  1. Scroll down the list
  2. Slect the item whose font (type & color) you wish to modify..
  3. Slect the fontype listed and the color prefered
  4. Save and repeat the process for another one from the list

If the list of fonts provided by the bloger does not satisfy you,, and you desperately wish that blogger has provided more choice in font names.. then acomplising this is not great feat

However, To do this you need to identify certains areas in your template taht represent the following
DONOT FORGET TO SAVE A BACKUP COPY OF YOUR TEMPLATE

  1. Blog title
  2. Blog description
  3. Post Title
  4. Post body
  5. Post footer
  6. Comment author
  7. Comment body
  8. Comment Footer
 To these sections in your Templates (Style sheets) you may add any / all of the following
( FONT NAME ) font-family:Monotype Corsiva;
( FONT SIZE ) font-size:20px;
(FONT COLOR ) color:green;

If you are not sure of what font names to give.. Open a word document – change the font of the texts – this will help you visualise and experiment with different font styles. Then you may copy paste the font name . Save and see the result

If you feel that this post has helped you in anyway.. do leave a note
Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Organise your comments with numbers

What is the happiest thing that can happen to an average blogger?..8-> yes.. you guessed it right.. to get some comments for the post Imagine how thrilled you were when you got the first comment for your first post..Then came a time you started receving comments (users with names and also anonymous users) and you were trying to reply to the a certain comment and got misunderstood by a different commentor… left you wondery why 😕

How about numbering the comments so that you can say exactly to which (rather whose) comment you are refering to..Still confused with waht I am saying.. I suggest that you click on any of the posts so that the post opens in a diffrent window along with the comments displayed..See any diffrence..The comments are all numbered

Want to know how i did this..Read along

  1. :-B SAVE AND BACKUP YOUR TEMPLATE :-B
  2. LOCATE THE FOLLOWING LINES IN THE TEMPLATE
    STEP-1
    <dl id=’comments-block’>
    <b:loop values=’data:post.comments’ var=’comment’>
    <dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>

  3. You need to add the tags shown in RED so that the final code looks like this
    <dl id=’comments-block’>
    <ol>
    <b:loop values=’data:post.comments’ var=’comment’>
    <li>
    <dt class=’comment-author’ expr:id='”comment-” + data:comment.id’>
  4. LOCATE THE FOLLOWING LINES IN THE TEMPLATE
    STEP: 2
    <span class=’comment-timestamp’>
    <a expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    </span>
    </dd>
    </b:loop>
  5. You need to add the tags shown in RED so that the final code looks like this
    <span class=’comment-timestamp’>
    <a expr:href='”#comment-” + data:comment.id’ title=’comment permalink’>
    <data:comment.timestamp/>
    <b:include data=’comment’ name=’commentDeleteIcon’/>
    </span>
    </dd>
    </li>
    </b:loop>
    </ol>

So waht are you waiting for.. Start organising..dont forget to backlink to this post

From Deepa’s Template Tips

Posted on

Mystery of the dropping sidebar :-SS

Its common to hear from your blogging friends to say “Hey your sidebar slipped to the bottom.. fixing it will make your blog look great”.. However when you see the blog in the browser everything appears just fine..This will drive you nuts ~x( trying to figure out wahat could be happening.There are two possiblities
POSSIBILITY – 1:-
The problem could be in the visitors screen width and resolution.Not all will be viewing at the same screen widht and resolution.For Eg: A sees with a monitor with 21 inch and B with say 17 inches… so When A sees the blog all the colums are in place (Good.. ok) but when B sees its.. its only natural that the screen cannot accomodate the contents so it drops few items to the bottom.

POSSIBLITY : – 2.
May be you have posted a link that is sooo looong that in an attempt to dispaly in a single line, the rest of the elements are dropped to the bottom.When the link in the main post is loooong, the sidebar is dropped and when vice versa

Take a close look at your template (provided you are able to identify which section represents which colum)This is with refrence to my template

#main-wrapper /*—————Center colum——————-*/
{
color: #666666;
padding: 0px 0px 0px 0px;
border-right: 1px solid maroon;
border-left: 1px solid maroon;
margin-left: 0px;
margin-bottom: 0px;
width: 59%;/* Earlier this used to be 430px*/
float: left;
word-wrap: break-word;/* fix for long text breaking sidebar float in IE */
}

#sidebar-wrapper /*————Right side colum—————–*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-top:0px
margin-right: 0px;
text-transform: capitalize;
width: 20%;/* Earlier this used to 160px*/
float: right;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

#newsidebar-wrapper /*—————-Left side colum————-*/
{
font-family: Georgia;
text-decoration: none;
font-weight: regular;
font-size:11px;
margin-right: 0px;
width: 20%;/* Earlier this used to 160px*/
float: left;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}

If you are trying to convert the width of the colums from pixels to percentage, i suggest that you have a test-blog with exactly the same template and modify the width , once you are satisfied with the look of the colums, then change the appropriate values.If you are not sure, which block represents which colum,:-? its always wise to color-code them for easy recognition.

Color-coding means you give diffrent backgound color for each cloum so that it get easy on you to identify the cencerned block of code in thetemplate.just add
background-color: pink; for one
background-color: green; for one
background-color: yellow; for one

Now when u see in the browser, you know what is happening to exactly which colum.Remeber do this only in the test blog.>:/

From Deepa’s Template Tips

Posted on

To have a Common text before all Posts

Many would like to have a short description about their blog placed right above the posts, so that the readers neednot be redirected to a new page.Here i have placed the “Location identifier Text” and the “Translation options” above all of my posts.

Whatever you choose to display is totally your choice.I have placed a cocktail of text-JScript-Images.So..
How to do this

  1. SAVE AND BACKUP YOUR TEMPLATE
  2. Go to TEMPLATE–EDIT HTML

  3. Locate the <b:section class=’main’ id=’main’ showaddelement=’no’ >

  4. Change it to showaddelement=’yes’

  5. So that the final code looks like <b:section class=’main’ id=’main’ showaddelement=’yes’ >
  6. Locate the <b:widget id=’Blog1′ locked=’false’ title=’Blog Posts’ type=’Blog’> in your Template HTML
  7. Make sure that locked =’false’ and SAVE
  8. Now come back to the TEMPLATE-ADD PAGE ELEMENTS and Place any new element over the BLOGPOSTS.
  9. You can also place some common widget below the posts also..just drag them below the blog-post-element
  10. SAVE and view your blog

These procedures have worked wellenough for me.Hope this works for you too. If you like this hack and have been successful in implimenting do leave a comment here.

From Deepa’s Template Tips

Privacy Policy - Terms and Conditions