Category: Add-on

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

Blog Posts can be saved as PDF's to be printed later

This might not come as a new information to many of you, yet I am making this post as per the request made by Bruce – from Brazil. You may have noticed a small link at the bottom of the post Clicking on this link (at the post-page) will save the post as a pdf file, which you may either save to your system and /or take prints later.

This is the PDF creation widget from http://savepageaspdf.pdfonline.com/index.asp. This is free and is very easy to incorporate in you blog.

GENERATING JAVASCRIPT CODE

  1. Signup with http://savepageaspdf.pdfonline.com
  2. You will be directed towards PDF conversion-setup page
  3. Before actually configuring the pdf widget, do paste one of your post-urls in the Textbox and click the CONVERT TO PDF button…. take a look at the resulting pdf page..for contents, margin , paper orientation (portrait or landscape etc)
  4. IF you are not satisfied by the default values… modify the margin accordingly and obtain pdf that suits your need.
  5. Now that you have tired and tested the margins and orientation. You may proceed with customizing this widget for your blog by clicking the GENERATE JAVASCRIPT button
  6. Now the code for pdf creation is ready and is displayed in the bottom textbox

Adding the script to the POST-PAGE ONLY
This will display the at the post page only…will not be displayed in the blog indexpage (unless you specify in the sidebar). Locate the code in blue and insert the code as inditated in red in Template – edit template – expand widgets template
<b:if cond=’data:blog.pageType == “item”‘>
<h2 class=’date-header’><data: post.timestamp/></h2>
ADD THE JAVASCRIPT CODE
<b:include data=’post’ name=’post’/>

Adding code below each post to be displayed in blog index page
Remember :-… what you see is what you get in the PDF file.IF the index-page of your blog displays post summaries (like here) then .. saving as PDF will only save the displayed information that you see in the index-page of the blog
The entire post shall be saved as pdf only of the permalink of the post (post-url) is displayed in the browser
<p class=’post-footer-line post-footer-line-1′>
<span class=’post-author’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/><data: post.author/>
</b:if>
</span>
<span class=’post-timestamp’>
<b:if cond=’data:top.showTimestamp’>
<data:top.timestampLabel/>
<b:if cond=’data: post.url’>
<a class=’timestamp-link’ expr:href=’data: post.url’ title=’permanent link’><data: post.timestamp/></a>
</b:if>
</b:if>
</span>
ADD THE JAVASCRIPT CODE
<span class=’post-comment-link’>
<b:if cond=’data:blog.pageType != “item”‘>

Hope this helps.Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Post comments directly from Post Page

UPDATE:- I have Posted the instructions on How to Add comments from post page.. after repeated requests from readers regarding the error while trying to open the Jackbook-Instructions page

It has been a long time wish for many blogspot users to have the comments form appear in the post-page itself.. so that the reader need not click on “Post a comment” link at the end of each page.. Now the wait is over.. We are now able to post comments from the post page itself by applying the hack devised at Jackbook.com

Still having your own doubts as how this might work.. just click on any post title to open the page at its Post-URL… you will see the comment form below the post content.. Move your mouse over the comment-form and voila.. the existing comments show up along with the form for you to post your comment

The instructions are pretty simple to follow.. so just go ahead and do it now.

From Deepa’s Template Tips

Posted on

Paint.net – Free Image editing tool for those who cannot afford Photoshop

Photoshop is THE TOOL for image editing… and there can be no second opinion about it..( Ask some die-hard Photoshop fan.. we can come up with umpteen reasons.)..However.. not all can afford to get a copy of Photoshop and the trial versions don’t last more than 30 days & they don’t include all the features that are otherwise available in the complete versionFor those who cannot afford Photoshop… help is near.

With the .Net technology gaining pace.. can MSPaint be far behind. We have a newer version of Paint called the Paint.net. This is a freeebee so anyone can download it for free (just a click away..and only 1.4MB).. and you get the full version ( so no alert messages telling that the trial period is going to expire soon.). What makes this a great alternative tool for image editing is… its interface is very user friendly…It has all the tools and MSPaint and most of the tools of Photoshop.Moreover they have a Forum to help newbies and a Wonderful Blog telling about the recent updates-features-and many more

About Paint.NET
Paint.NET is free image and photo editing software for computers that run Windows. It features an intuitive and innovative user interface with support for layers, unlimited undo, special effects, and a wide variety of useful and powerful tools. An active and growing online community provides friendly help, tutorials, and plugins

  1. Every change you make can be performed in layers.. so that .. incase you are not happy with the change… you can delete the layer .. while retaining other changes made

  2. You can add new layers to brighten your otherwise dark picture ( incase you forgot to turn the flash on)

  3. You can correct the Red-eye.. ( so nomore last minute fiddling to enable red eye in camera)

  4. You can add your own signature Text .. like © Deepa…adding your own copyright..(coool isnt it??)

  5. Supports all major picture formats ( except for Animated Gif files)

And many many more option… Explore and you will not be dissappointed… The posiblities are immense.. after this.. its your imaginatrion and Paint.net.. They also have a Forum to address user Queries.. So any query.. however trivial.. there is always someone to guide you.

Here I will just give a small intro on how to add your copywright mark to the pic

Copyright is something like “© Deepa” which I put in the pictures that I upload to the net.. which means that this pic is entirely mine .To do this is Photoshop.. we need to use the “custom shape tool”… however in Paint.net.. this is the procedure to add © to the pics

Remember always create a copy of the original picture to work on.. Try not to make any changes .. however slight to the the original.. You may end up loosing a perfectly good picture.. incase the alterations does not come out right

  1. Open the picture to which you want to add your ©  mark

  2. © is a special character.. so you will have to open the "Character Map"

  3. START-RUN -Charmap.exe  .. or Start-Programs-Accesories-SystemTools-Character Map

  4. Locate the ©  as shown here

  5. Either double click the ©  symbol.. or clcik the select button ( or make a not of the "KEYSTROKE combination as shown in the pic"

  6. cick the Copy button

  7. Open the Paint.net window( where you have the pic already opened) and select the Text Tool

  1. Click at the position where you want the copyright stamp to appear.. ( Its wise to have this stamp at any of the corneres.. so that people can admire the picture withought gettng distracted by the stamp)… Dont worry if the position didnot match exactly with what you had in mind…. There is something called as "moving the text"

  2. Once the Cursor blinks.. just paste using Ctrl+V ( or Edit Paste.. or use the KEYSTROKE COMBINATION ).. you will see the ©  appear.. following which you can type your name / time stamp of the photo.. etc etc

  1. You many also choose the font size / style and color

  2. Inorder to move the "TEXT" that you have just now added… just click and drag the Square like thinggy to the postion that you might feel appropriate

  3. Save the Picture as Jpeg once you are satisfied with the changes…

Do drop in with a word if this post has been useful to you.. also..please express your appreciation by linking back to this post.. after allYour appreciation is my motivation

From Deepa’s Template Tips

Posted on

Show thumbnail Image preview of your Photoblog posts…using Blidgets

Photoblogs are a popular way of expression amongst bloggers. There are numerous photo hosting sites such as photoblog.com , Animus3.com , Flickr.com,slide.com.. etc etc.. the list is endless. But there are some Bloggers out here.. who have already established themselves among their blogzone. They would rather host their Photoblog in the same platform ( blogspot / wordpress ..etc etc)..due to established readership. Moving to a mew platform like flicker,photoblog et etc would mean.. they will have to network from square one.

Its a good idea to display your photoblog pics ( as an thumbnail image preview.) in your main blog.. so that the readers will know about your new Photoblog and can also see a preview of the images whenever you make an update.

You may see one such preview in my Left-side-bar. This Showing-Image-Preview for Photoblog was developed using the Blidget option of Widgetbox.com. Just follow the instructions if you wish to have such a widget for your photoblog too.

PHASE 1:- MAKE YOUR OWN BLIDGET

  1. Register yourself with Widgetbox.com

  2. Choose “Make a Blidget” ( meaning… convert your blog into a widget)

  3. Give the URL of your photoblog — continue

  4. Choose the “Layout” as Narrow (for sidebars) or Wide (to show below the header.. or above all posts)

  5. Choose the “Display” as Headlines only & ShowFirst image in each post ( oh Yeah… afterall this is a Photblog)

  6. Its Ideal to choose “Header Style” as Title only (for photoblogs)

  7. Just allow Listing in the Gallery and give a Description of your blog .. dont forget to add tags.. its really useful

  8. Then Publish the blidget at Widgetbox.com

PHASE 2:- ADDING THE BLIDGET TO YOUR BLOG

  1. They give  you a variety of options as to where you want to use the blidget you have just created.Just move the mouse over the image and see which one is for what

    2. TypePad   Blogger   MySpace   Facebook   Netvibes   Pageflakes   Google   Blogger PostFreewebs   Piczo   Widget Code

  2. You may direclty add your blidget using these options,,..
  3. Or you may use the "getcode option" to get the Javascript code and then add it manually to your blog through template – page elements – new elements
  4. Voila.. Now every one who comes to your active blog can see that You have a Photoblog and Such awesome pictures are sure to inspire them to visit your Photoblog to leave a comment

What do you say… Liked it.. C’mon.. go ahead and configure your blidget

AN APPEAL TO MY READERS

Widgetbox allows the display of english characters only.The boxes you see in my photoblog widget are Tamil (Unicode) characters. I have tried makig blidgets with blogs in other languages as well.. all come out as boxes. I have also written at the widgetbox forums ..Forum for using widgets and Forum for New features.. to allow the display Unicode characters also.

I hereby appeal to all my readers to kindly support this feature in blidget so that many Regional language Bloggers can also make use of this wonderful feature.Kindly register yourlseves with the WidgetboxForum and Give your support by replying to any one of the thread (To display Unicode Characters) Thread at Forum for Using Widgets or Thread at Forum for New Features.

This will hardly take a minute or two. Please voice your opinion on this at the forum. Your reply might get us one step closer towards the process of implimenting this feature

Thank you

Your appreciation is my motivationKindly link back to this post..of you are impressed by the information provided

From Deepa’s Template Tips

Posted on

Give 5-star rating for individual posts in your Blog

Best way to sustain readership is to make it as interactive as possible. But at the same time we need to remind ourselves that the readers jude you posts in matter of minutes.. They scan your posts (before actually reading them) and then decide to read further. So if you can allow users to interact with your posts without any annoying popup and signup forms,.. then the 5 star rating system is something you need to incorporate

You may notice Some stars displayed at my posts.These are the Rating-stars. You may click on the stars to rate your opinion on the concerned post – Poor
– Fair
– Average
– Good
– Best

This script has been developed and deployed by the team at http://js-kit.com.Do drop by there..I am sure other scripts developed by them will impress you equally well.However..Instructions to use the 5 star rating system in blogger is as follows

  1. SAVE AND BACK UP YOUR TEMPLATE
  2. In TEMPLATE-EDITHTML – check the “Expand widget templates”
  3. Locate the <div class=’post-header-line-1’/> and insert the following right after it (and before <div class=’post-body’>)

    4. <div style=’float:left; margin-right:10px;’>
    <div class=’js-kit-rating’ expr:path=’data:post.url’ expr:title=’data:post.title’>
    </div>
    </div>

  4. So your final code should look something like this

    5. <div class=’post-header-line-1’/>
    <div style=’float:left; margin-right:10px;’>
    <div class=’js-kit-rating’ expr:path=’data:post.url’ expr:title=’data:post.title’>
    </div>
    </div>
    <div class=’post-body’>

  5. Locate the </body> in the template and add the following before it

    6. <script src=”http://js-kit.com/ratings.js “>
    </script>
    </body>

Your appreciation is my motivationKindly linkback to this post as you recomend this 5 star rating feature to your fiends

From Deepa’s Template Tips

Posted on

Lightbox code to zoom ( enlarge) pictures without moving away from your blog

After receiving a request from Priya, who is very much interested in photography and wanted to have her photoblog in blogspot. But the only thing that was refraining her to do so was.. the behavior of blogger to show the enlarged version of the picture in a new window. Like many other’s she too felt that this would inadvertently take here viewers away from her page.

In this quest with priya.. i landed at an excellent lightbox code at Huddletogather by Lokesh. This entire script( s) is Lokesh’s work and I am putting this here to let my readers know as to how wonderful this feature is.. A must have for any photoblog.. Even otherwise..its a great way to zoom the pictures in your blog..See it in action here. Read more for instructions on how do this

  1. SAVE AND BACK UP YOUR TEMPLATE
  2. Add the following lines just above the </head> tag in your template
    <script type=”text/javascript” src=”http://deepa7476.googlepages.com/prototype.js”> </script>
    <script type=”text/javascript” src=”http://deepa7476.googlepages.com/scriptaculous.js?load=effects”> </script>
    <script type=”text/javascript” src=”http://deepa7476.googlepages.com/lightbox.js”> </script>
    <link rel=”stylesheet” href=”http://deepa7476.googlepages.com/lightbox.css” type=”text/css” media=”screen” />
  3. You may choose any of the layout provided by blogger for uploading pictures ( Small – Medium – Large).
  4. If you notice the html part of the image code you will see something like
    <a href=”url of the picture at blogger”>
    < img src=”url of the pic..the full size” style=”width – height etc depending on the layout”/>
    </a>
  5. Here is what you need to do to activate the lightbox code
    <a href=”url of the picture at blogger” rel=”lightbox”> < img src=”url”>
  6. If you wish to show the pictures as collection (…say..flowers..animals..etc etc).. then all you need to do is

    <a href=”url of the picture at blogger”     rel=”lightbox[flowers]” > < img src=”url”>
    <a href=”url of the picture at blogger” rel=”lightbox[flowers]” > < img src=”url”>
    <a href=”url of the picture at blogger” rel=”lightbox[flowers]” > < img src=”url”>

    <a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”>
    <a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”>
    <a href=”url of the picture at blogger” rel=”lightbox[picnic]” > < img src=”url”>

  7. The above step does not involve blogger labels… so no conflict on codes.
  8. Remember that the lightbox code will get fuctional only after the entire page loads.

This code works for me and I hope this works for you too. Drop a comment and let me know

ADD ON:-
If you want to have a “Zoom Cursor” appear over your pictures as shown here.. the this is waht you need to do
LOCATE THE FOLLOWING IN YOUR TEMPLATE
And add the line shown in red.
.post img {
cursor:url(http://deepa7476.googlepages.com/ZoomIn.ani);
}
This is best viewed in IE. I dont know if FFox supports cursors in Stylesheets.

Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Different Profiles for different blogs

We all know about the Profile widget providedd to us by Blogger. This widget will display our name / other details that we have given in our profile and will be shown only if you have enabled the “share-my-widget” option.

Some of you might be having multiple blogs and would like a different set of details displayed for each blog in the about me section..depending on the mood of your blog… hmm.. fair enough.. you dont have to putup with the same profile contents.. if you choose not to

You can have a text / html widget instead of the profile widget and include the contents you want to be displayed.Those familiar with the standard html tags like <b>…<i> ..<u>….<font>..etc etc can use the EDIT_HTML mode to format your content to suit you blog. Others may use the RICH-TEXT mode and format using the buttons provided

Drop me a comment..if you face a roadblock in displaying the content to match your requirement.I shall try to be of help
Your appreciation is my motivation

From Deepa’s Template Tips

Posted on

Random Banner Display for your blog

Bloggers who use AdSense in their blog would like to have various banners displayed. But having them one below the other (or) one beside the other is cumbersome and space consuming. The blog-space is precious… so you cannot afford to waste even one pixel of it.. particularly if you are using Adsense

Lets say you have about 3 banners which you would like to display in your blog.. but alloting seperate space for each would make your blog look crowded. So how would it feel to have a specific space ( certain width and height) allotted , and the banners are flashed on-and-off while the reader is viewing the contents of your blog.To get a fair idea..look at the bottom of this blog.You can incorporate this into your blog..just follow the instructions closely. Its more advisable if the banners have the same width and height…( this will improve the looking-feel)

  1. Save and Backup your template
    ( eventhough you are dealing with a single HTML widget)

  2. Template-page Elements – Add Elements

  3. Add a HTML widget

  4. Add the following script code
    <script src="http://deepa7476.googlepages.com/Rotating_banner.js">
    </script>

  5. Then add this
    <a src=”http://www.hotspot.freeserve.co.uk/scripterlative/bn4.gif” href=”#” name=”myShow1″>
    <img     height=”49″ width=”335″ src=”http://www.hotspot.freeserve.co.uk/scripterlative/bn1.gif” name=”img1″ />
    </a>
    You may alter only the height and width property of the above <img> tag.
    Its advisable not to change anything else..coz.. this <img> holder will be responsible for the display of banner. I don’t think you would want to mess with that

  6. Add this
    <Script type=”text/javascript”>
    RBanner.show(‘myShow1′,’img1’, 2, false,
    ‘     URL_of_Banner1 ‘,’http://www.BANNERSITE_1.com’,” Text_On_MouseOver“,
    ‘ URL_of_Banner2 ‘,’http://www.BANNERSITE_2.com’,”Text_On_MouseOver“,
    ‘ URL_of_Banner3 ‘,’http://www.BANNERSITE_3.com’,”Text_On_MouseOver“,
    ‘ URL_of_Banner4 ‘,’http://www.BANNERSITE_4.com’,”Text_On_MouseOver“
    );
    Lets now see the Structure of STEP-4 ( Advanced users may view instructions within js file)

    This has 4 pictures used as banner, and each banner is displayed for about 2 seconds.If you wish to add more pictures just repeat the lines in exactly the same order…remeber.. the last image – URL- MouseOverText does not have a comma (,)

  7. Once you have replaced the appropriate Banner pictures- respective URL’s – and the respective Text that is displayed when the mouse is moved over , you may save the widget and view you blog

  8. This has worked out well for me.. Hope the same for you too

Do let me know what you think about this.Credits to scripterlativeYour appreciation is my motivation

From Deepa’s Template Tips

Posted on

Using Yahoo Pipe in Blogs

Yahoo has given a great oppurtunity for non programmers to try their hand at programming without involving any codes. Being a Graphical User Interface.. or rahter in a lay-man’s term.. drag -and-drop and start building is the motto of Yahoo Pipes. Its essential we gather some knowledge about Web-feeds towards understnaing Yahoo pipes.Following which, Building your own personal Yahoo Pipe shall not be difficult

However, once you have completed and executed your yahoo pipe, you might want to use the data it gives ( after all the personalised sorting and filtering) into your blog. For this you might have to go back and Run your pipe and get the Rss -feed-of-the-Pipe using the link at the bottom of your pipe result

Using the Pipe-feed to display data within your blog

  1. By using the Blogger-Feed-Widget

    1. Select  Template-Page Elements – Feed Widget
    2. Give the Rss Feed of the Pipe
    3. If all is well.. this widget will give you the top 5 results of the pipe

  2. By using services of Feed2JS

    1. Feed2JS ( Feed to Javascript) is a site that helps us in converting our Rss Feeds into script code.. which can be used in the HTML / Javascript widget of the blogger
    2. This shall display as many result you have chosen in the pipe ( using the Truncate Module)

  1. Go to Feed2JS
  2. Give the Rss of the Pipe in the URL field
  3. Select the Various options appropriately
  4. Select the UTF-8 Character Encoding if you want to display non-english languages
  5. Click on Preview feed before generating the Javascript
  6. Use the code generated here in the HTML Widget of the blog


Your appreciation is my motivation

From Deepa’s Template Tips

Privacy Policy - Terms and Conditions