Category: Add-on

Posted on

Building a Simple Yahoo-Pipe

Yahoo pipes as I said earlier has several modules(components) that you can use in a combination that best fits your idea .. however for a begginer.. I shall be using the Fetch-Feed Module , Sort Module and the Truncate module

Conceptualizing the pipe:-
This is like figuring out what you want from the pipe.. It would be rather irrelevant that you open the pipes-edit page and stare at the screen while you have no idea what you want.
My Pipe concept :- Display the result of the 3 blog fields in the latest post apprearing first and display only first 15 results
(A)Organising your concept :- This gives you a headstart in choosing the modules

  1. Give the post feed for the 3 blogs that I have chosen
  2. sort the result so that the latest post is seen first in order of the published date
  3. Show only top 15 results ( logically assuming that posts beyond the top 15 are all older posts)

(B)Building your First Yahoo Pipe :- By organising your concept.. you can very well say that you will be using the following module

Fetch Feed Module Where you give the Feed URL
Sort Module Which arranges the result in ascending / descending order of published date
Truncate Module Stops the Feed module from retrieving more results after the top 15

(C)Creating your First Yahoo Pipe:-Browse through this post to get an idea as to how to use the various modules

  1. Go to Yahoo Pipes
  2. Sign In using your Yahoo Account
  3. Click on:- Create a Pipe
  4. Drag down the workspace where the modules are inserted
  5. Drag a Feed Module

    1. By default it allows you add one Rss feed.
    2. I shall be using 3 Rss feeds for test purpose ( 3 languages)
    3. To be able to add more than 1 Rss feed click on the ” + ” of the Feed module
    4. http://beta-templatetesting.blogspot.com/feeds/posts/default?alt=rss
      http://epandit.blogspot.com/feeds/posts/default?alt=rss
      http://tamilblogging.blogspot.com/feeds/posts/default?alt=rss
    5. Click on the Title of the Feed module and see the results of the feed in the Debugger frame

  6. Drag a Sort Module

    1. Connect the output of the Feed Module to the Input of the sort Module
    2. After the module gets updated…
    3. Select item.pubdate and sort in descending order
    4. Click on the Title-bar of the Sort module to view the results in the debugger

  • Drag a Truncate Module

    1. Connect the Output of the Sort Module to the input of the Truncate module
    2. Give the value as ” 15“
    3. Connect the Truncate module to the Pipe Output

  • Save the Pipe as My First Yahoo Pipe

    • (D)Executing your Pipe and get its Rss feed

    1. Run the Pipe…and see the results in the browser
    2. Further down the page.. you will be able to see as
    3. Right click -Properties – Copy the URL in a notepad …This is the RSS feed for this particular pipe

    Using Yahoo Pipes in blogs
    Your appreciation is my motivation

    From Deepa’s Template Tips

    Posted on

    Yahoo Pipes .. Programming without codes

    We learnt a little bit about web-feed as a warm-up session towards understanding Yahoo Pipes. Now let see what yahoo pipes is all about and how it can be put to use by an average blogger / web developer However an advanced developer can work as far as his logical imagination can take him

    Yahoo Pipes – Its a A Feed Aggregator
    Yahoo Pipes is a Web-Application by Yahoo… That allows the users to create their own aggregation of feeds without any sort of coding. Yahoo Pipes uses a Graphical-User-Interface allowing users to Drag-Drop controls

    Basics – for the Average Joe / Jane
    As a blogger, I presume certain subjects / people interests you more than the other .so you would like to keep a track of upcoming posts on those areas among your blogging circle of friends. In this fast paced world.. we do not always have time to visit the entire list of friend’s blog .Subscribing to their blogs will put an update in your inbox when a new post is made.. But then with the friends list growing lengthier by the day.. you would also not prefer to see your inbox bombarded with updates alone.

    So to save you all the trouble you can create a yahoo-pipe (Create a Basic Yahoo Pipe) specifying the Web-feed URL of the respective blogs/websites ..where in the results are manipulated ( as you wish) ..say.. within a date range.. only top-15 results – sorted in ascending/descending order… displaying just the title only or along with the description …just about anyting you can think of…You can also perform custom search ..and manipulate the results

    Once you are satisfied with the results of the pipe you have created you can now use the Web-feed-of-your-pipe into your blog by either directly giving it in the feed-widget of blogger ( this displays only the top 5 results by default)…. or convert Web-feed-of-your-pipe into a script code ( Using Yahoo Pipe in Blogs ) and insert that code into the HTML/JavaScript widget of blogger and see exactly the same result as you would see when you execute the pipe

    If you are the more adventurous type.. you can configure your pipe such that it can take input ( URL / text / dates..etc etc) and execute them to give the concerned results

    Moreover… if you have the appropriate fonts installed you can use the pipe to retrieve data from blogs/ website in other languages as well ( In my Sample Pipe I have used the Rss of English – Tamil – Hindi Blogs)
    Your appreciation is my motivation

    From Deepa’s Template Tips

    Posted on

    Web-Feeds .. A Pre-requisite towards understanding Yahoo Pipes

    Many must have been seeing news snippets regarding Yahoo-pipes in the blogs that you pass by.. more adventurous souls would have googled and would have tried to gather information regarding this and try to figure out what this hype is all about..
    Here is a Pictorial represntation of how effectively you can use yahoo pipes in your blog

    1. Definition of Web-Feed
      Web feed is a Document that contains information regarding the content of the respective URL
    2. What is the purpose of web-feed?
      With the number of websites/ blogs growing everyday.. its practically impossible to visit each one of them just to check if there is an update on your favourite story..so what the end-user (reader of the website) does is..He subscribes to the feed of the particular website/ blog
    3. Real-Life Example of using Web-Feeds
      Most of us use our post feeds and comment feeds to display our RecentPosts(5) and RecentComments(5) in our sidebar.. For those who don’t know..
      POST FEED – http://YOUR_BLOG_NAME.blogspot.com/feeds/posts/default?alt=rss
      CONTENT FEED – http://YOUR_BLOG_NAME.blogspot.com/feeds/comments/default?alt=rss
    4. How does Subscribing help me?
      If there is an update.. you get an alert in your mailbox–If there is no update.. then you can rest in peace..and need not worry about missing the latest news
    5. Web-feed…an XML document
      Web Feed as I said earlier are XML-documents. So they are developed to be read by machines (machine-readable) than by humans..(humanly-readable)By doing this.. when the feed is directly viewed in the browser ..Its only natural that you are not able to make head-or-tail out of it
    6. How is Web-feed being read
      This is done with the help of applications like FeedBurner, FeedReader, GoogleReader etc…
      ie..once you subscribe to a feed ( or give the URL).. these applications ( machine-reads) reads the XML document( web-feed) and displays them in a more readable format (HTML document) in the browser
    7. Feed Aggregation
      Making a collection of web feeds accessible in one spot is known as aggregation.
    8. Yahoo Pipes – A Feed Aggregator
      Yahoo Pipes is a Web-Application by Yahoo… That allows the users to create their own aggregation of feeds without any sort of coding. Yahoo Pipes uses a Graphical-User-Interface allowing users to Drag-Drop controls

    Source:- Wikipedia

    From Deepa’s Template Tips

    Posted on

    Customising Calendar Archive

    By now I am sure mostyou have started using phydeaux’s Calendar Archive in their blog..He has indeed given us a great tool .The dull blogger archive is replaced with more vibrant clanedar archive

    I am sure some of you would have gone a step further and modified the calender style sheet to modify he appreatence of the calender to match your blog’s color scheme.

    If you want to perform such a customisation…and really dont know how to go about it..then all you have to do is just follw the instructions ..drop in your comment help shall come to you

    In the Picture below I have marked certain areas in the calendar with refrence to its code in the stylesheet

    1. #bcaption
    2. #bcaption select
    3. td.highlightCell
      This is responsible for the cells(dates) which have posts in them
    4. td.filledCell
    5. table#bcNavigation
    6. table#bcalendar thead tr th
      This is responsible for the display of the days of the week
    7. ul#calendarUl li
      This is responsible for the display of the posts (of selected month) as lists

    It is my guess that the basic customisation works with adding some background color for the dates – days – title etc..this can be done in a very simple manner

    You may add Background color by adding background-color:COLOR to the respective block of the code
    Say.. you want to add the background as pink in the area marked #bcaption..Then your code will look something like this
    #bcaption
    {border:1px outset #000;
    background-color:pink;
    padding:2px;
    margin-left:0;
    margin-right:0;
    margin-top:10px;
    margin-bottom:0
    }
    You may also use the hexadecimal color code to get the color of your choice…background-color:#ffc0ff;

    Once the month is selected the posts made during that month is displayed as list…You may want to add a picture to appear near those titles in the list (See my Calender archive.. you will see picture)

    You can also do this all you need to do is

    1. Choose a picture that you would like to display

      2. The width and height of the picture must NOT exceed 16*16px

    2. Upload the picture to a common fileserver..like googlepages

    3. Add the <img src=”URL_of the picture“/> to the ul#calendarUl li

    From Deepa’s Template Tips

    Posted on

    Calendar Archive is out and functional

    Hi.. All.. This is a long awaited add on to the Blogger Archive.. Thanks to Phydeaux3 for his BLOG ARCHIVE CALENDAR

    The Archive offered by blogger was dull and used to take lot of space and did not offer much flexiblity.Phydeaux3 has solved this problem

    There seems to be some minor glich in this blog..(still working on getting things right here)…but u can see it in perfect action at this blog

    In my opinion.. this is a MUST HAVE for any blogger
    He has come up with some some standard styles and also allows us to manupliate the calender style to suit the template of your blog through stylesheet or using the Blogger Font / Color Selector


    From Deepa’s Template Tips

    Posted on

    Using marquee ( Header and anywhere else)

    We were introduced to the standard header by blogger.com.Now we have grown to design our own header-presentation-style. For instance ,.. I have used a 3 colum header to accomodate a common backgound pic – a clock – brog title & description – and Best viewed text

    Some might like to have their custom banner in the header along with the key words scrolling around so as to compliment the design and subject of the blog.This post is for such enthusiastic minds

    The code for scrolling the image from left in an infinite loop is
    <marquee direction=”left”>
    <img src=”    URL of the picture“/>
    </marquee>


    The code to show the text in the manner shown below is
    <marquee bgcolor=”turquoise” behavior=”alternate” width=”82%”>
     Any text you wish to display
    </marquee>
    Some Template Enhancements
    So let’s start by understanding the MARQUEE tagJust like any other HTML tag.. marquee also has the start & the end tags <marquee . . > and the </marquee>
    The <marquee…> has the following properties

    WIDTH Any numeric value as how wide you want it (100 – 250 etc)..even percentage (%) 50% – 20% will be accepted
    HEIGHT Any numeric value as how tall you want it (100 – 250 etc)..even percentage (%) 50% – 20% will be accepted
    DIRECTION Right – Left – Up – Down
    BEHAVIOUR Slide – Alternate – Scroll
    SCROLLDELAY This delays the speed of the marquee by milliseconds ( 1000 – 5000 etc)…However its advisable to avoid this and use the scroll amount instead
    SCROLLAMOUNT Numeric vaules starting from slowest 1-2-3-4… 1 is the slowest .. increasing numbers means increasing speed
    LOOP If you donot mention this in the tag.. then the content is displayed in an infinite loop… But if you say Loop= 2 then the content disappers from view after 2 loops…again not advisable to use
    BGCOLOR Any color red – blue- green – turquoise – or #CCFFCC (hexadecimal color code preceeded with # )

    Now take a closer look at the code I had given for the scrolling image and scrolling text…understand the combination of attributes I have used to arrive at the displayed result

    So before you start off with the marque… ascertain yourself..on waht atttributes you will be using and what values would compliment the design and the content of your blog

    Anything that is placed between the <marquee> _________ </marquee> tag will behave as per your wish if you would give the values correctly ..it could be a text – image – marquee inside / outside of a table – just unleash your imagination.. You will never know if somethig works or not.. unless you actually try it out…Best of luck..Drop in when you face a roadblock..I shall be glad to help

    UPDATE : REMOVING THE HEADER WIDGET
    I totally overlooked this mistake in my post,,, Thanks to Kulats and Daryl
    I am sooooo sorrry..

    In the Template EDit html page ( The Expand widget box is NOT CHECKED)
    locate <div id=’header-wrapper’>
    <b:section class=’header’ id=’header’ maxwidgets=’1′>
    <b:widget id=’Header1′ locked=’true’ title=’3colum tester..dont use for other templates (Header)’ type=’Header’/>
    </b:section>
    </div>

    Delete the lines in Red — this will give a warning that your header will be lost forever.. dont worry just confirm – Save

    – Go to Template – Page elements – Add new elements

    If at any point of time you wish to have your header back in place… just choose PAGE HEADER from the add elements list

    From Deepa’s Template Tips

    Posted on

    Create your own Animated pictures

    Sometimes we would like to create our own animated gif files..It could be either using 2 ( or more) picturtes available with us ( say some of own digital photos) or comming up with your own creation of an animated picture

    Here I have use 2 existing jpeg files and put them in a loop so that both the pics appear on and off
    Here I have
    used a collection of pictures to create the effect of opening and closing of a Star as a single animated gif file….I found geometric designs to be easy for learning puropse…and i have used 6 bmps here

    In order to be able to do this.. you need to have Photoshop / Image-Ready already installed .. you must be willing to give yourself some time to learn about the workspace get used to the environment…Follow the instructions carefully

    1.THE PREPERATION

    1. If you are going to create your animation form your existing collection of jpegs.. then I suggest taht you copy them and place them in an exclusive folder in your hard disk..say C:\Testing_animation
    2. Say you are using Pic1.jpeg & pic 2.jpeg
    3. It is adviable if the pictures have same width and/ or height for best visuals
    4. I have used Photoshop CS2 to create the animation..But the instructions would be similar for pre-CS2 versions also….(if the Animation option is avilable)

    The Star.gif uses 6 bmp files each with the same 100×100 dimentions

    2.PHTOSHOP CS2

    By now I hope you would have decided on the dimentions of your gif file and chosen the pics accordingly

    1. Open both Pic1.jpeg & Pic2.jpeg in Photoshop
    2. Create a New Photoshop file from FILE — NEW — Sepcify the width and height
    3. Before we actually begin our animation lesson.. Lets see the order of the pictures

      Pic_1 — Pic_2 –Pic1

      Here we will be putting pictures in photoshop in this order using layers

    4. Keep the Layers pallete visible…WINDOW — LAYERS

    All New files will have a default layer which serves as the background

    1. Add Pic_1 to layer1
    2. Add New Layer — Add Pic 2 (Layer 2)
    3. Add New Layer — Add Pic 1 (Layer3)…this is to give an impression of loop
    4. You may name the layers appropriately
    5. Donot worry over what you may see on the image canvas at this point of time
    6. I have given the layer palette of my star.gif where I have used bmp’s
    7. The layers are named for quick refrence
    8. Save this file in psd format … so that you may reuse for editing in photoshop againAlso save a backup copy ( psd format) at this point on
    9. Make sure that the pictures are well arranged in the layers .. in exactly the same order as you want them to be displayed in the gif file
    10. You may rearrange the layers by click-and-drag methord

    3.THE ANIMATION PROCESS

    1. Now you must have your pictures in the desired sequential manner in the respective layers
    2. Make sure only the first layer (first pic to be displayed) has its EYE TURNED ON… Rest all the layers must have its “eye-turned-off”
    3. You may see in my layer pic that only the ist layer has the “Eye” icon.. all the other lauers donot-have-eye-icon
    4. This can be done by selecting the respective layer and clicking on the “Eye”
    5. Enable the animation pallete WINDOW — ANIMATION

    6. Since all the required pictures are arranged in layers…we need not worry about adding indivivual frames and modifying them
    7. We can convert all the layers into frames using the option given in the animation palette
    8. SEE PICTURE

    9. this will convert all your layers into frames
    10. The technical-know-how is…..Cick on each frame and see that only its corresponding layer will have the EYE-TURNED-ON…..Rest all layers will have its eye-turned-off
    11. You may set the time for each frame..at the location specified in the pic
    12. Use the Play-buttond to see the animation. (inside photoshop)
    13. Once fully satisfied you may use the FILE — SAVE FOR WEB — GIF FILE
    14. Now you have a Gif file in the folder..view the gif file in IE
    15. You may now upload this gif file and display it using <img src= ” ___ “/>

    IF this post has been helpful to you..kindly leave a comment and express your appreciation by linking back to this post.
    Your appreciation is my motivation

    From Deepa’s Template Tips

    Posted on

    Too many List-Items…Use ComboBox (Dropdown ListBox)

    Everyone likes Traffic in ones-own blog..this is one place where (Blog) Traffic is welcomed with open arms..We feel immensly happy if someone blogrolls us or backlink to us..At the same time it is also our responsiblity to linkback to the person as a gesture of appreciation of the effort taken

    Now we all know , how to add Linked lists (using the List-Widget of blogger), and , when the list grows too long..we can optimise our blogspace by converting the lists into a Scrolling list..See my CREDITS in the right-sidebar

    If you feel..that your lists are too long even for a Scrolling -List, then I suggest that you use a combo box or a Drop down list ( As you may see in my Right-side-bar)
    For instructions..reader further

    1. Before embarking on the journey of Dropdown (combo) box.. you need to know two important things
      • The text that is displayed in the box
      • The URL to which the text is directed

      If these two parameters are clear to you then writing the code for a combo box is a peice of cake

    2. Further..the respective links will open in a new browser wndow

    3. The best way to do this, is to start preparing the list in a notepad


      4. <form name=”form1″>
      <select onchange=”window.open(this.options[this.selectedIndex].value)” name=”combo1″>
      <option/>List of ….
      <option value=”URL_for the text“/>Text displayed in the dropdown box
      <option value=”URL_for the text“/>Text displayed in the dropdown box
      <option value=”URL_for the text“/>Text displayed in the dropdown box
      </select></form>

    4. You may repeat the
      <option value=”URL_for the text“/>Text displayed in the dropdown box
      with the Appropriate texts and its respective URLs ..till you are finished with the list

    5. Now you may copy this to a HTML-page element and use it in your blog

    If you were inspired to add a combo box to your blog after comming here..do backlink to me..
    Your appreciation is my motivation

    From Deepa’s Template Tips

    Posted on

    Show your Power-point (like)Presentation in the blog

    We all know the Power(point)of Presentations..An old saying goes that One Picture is Worth a Thousand Words…Keeping the same spirit ..I guess today we can say that One (PowerPoint) Presentation is worth several hyperlinks


    http://www.spresent.com
    Move the mouse over the 2 buttons in the LEFT-SIDE-CORNER of the presentation to activate the NEXT & PREVIOUS slides

    1. Start with a Test presentation ( min 2 slides) and embed in a test blog
    2. While Embedding the code in the post & when you try publishin
      g… you “may/maynot” get an error message saying Your HTML cannot be accepted: Tag is not closed: showing the <embed > tag
    3. Donot Panic..This is normal..Just give..check-mark at Stop showing errors for this post
    4. However..Each time you update the presentation..after you have intially published it online.. you need to re-copy and paste the code again..Guess they are still working on the update

    Save and view.

    If you liked this idea.. and were able to impliment it sucessfully.. do drop in your word..
    Your Appriciation is My Motivation

    From Deepa’s Template Tips

    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

    Privacy Policy - Terms and Conditions