Icon Header

Thursday, July 30, 2009

Free Website Hosting Account!

What Godaddy.com sells for a minimum of $4/month, can now be procured for free. And no, there will be no ads in your website frames, or pop-ups, or any hidden costs.

000WebHost (stands for $0.00 Webhost) is an industry leader in providing top class free web hosting services without any advertising!

When you sign up for an account, you get 1.5 GB of disk space and 100 GB Bandwidth - and the account is capable of hosting PHP-MySQL Web Applications.

You can click on this link to get your free Hosting Account!

Keep Reading...

posted by Dan at 9:17 PM 0 Comments

Friday, July 10, 2009

How to create Expandable Posts in Blogger (Layout Templates)

Blogger.com gives the option to choose the number of blog posts to display on the main page and then displays the contents of the posts in their entirety. When posts are long or composed of a considerable number of lines, it may be a good idea to show partial content to the user with a "Read More" link that shows the whole post. The article will explain how to create blog posts with partial content displayed or more aptly termed as 'Expandable Posts'.

  1. This step is same as that for Classic Templates at this link 

 

  1. The next step involves adding some JavaScript code to our blog template.

The JavaScript to be added should be pasted right above the closing <head> tag. This is what needs to be added. Make sure you copy the code correctly and in its entirety:

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = 'inline';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'none';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'inline';
        }
}
function hideFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = 'none';
             }
             if (spans[i].id == "showlink")
                 spans[i].style.display = 'inline';
             if (spans[i].id == "hidelink")
                 spans[i].style.display = 'none';
        }
        post.scrollIntoView(true);
}
function checkFull(id) {
	var post = document.getElementById(id);
        var spans = post.getElementsByTagName('span');
        var found = 0;
        for (var i = 0; i &lt; spans.length; i++) {
             if (spans[i].id == "fullpost") {
                 spans[i].style.display = 'none';
                 found = 1;
             }
             if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
                 spans[i].style.display = 'none';
        }
}
</script>
</b:if>


Your blog skin/theme is either a template or a layout, but not both. If there are elements that start with '<b:' it is a Layout Template; else it is a Classic Template.





  1. The third step is to add the 'Read More' link code within the <body> tags of the blog template. This code should surround the <data:post.body/> - do a CTRL+F to search for the phrase 'data:post.body'. Right above the line that the phrase is present, should be present the following line:

<div class='post-body'>
<div class='post'>
<div class='entry'>
<div class='post-body entry-content'>

In case your template is a third-party one, it is possible for this line to be completely different.


For example, if this is what your it present in your template:

<div class='post-body entry-content'>
   <data:post.body/>
   <div style='clear: both;'/> <!-- clear for photos floats -->
</div>
...it should be changed to this:
<div class='post-body entry-content'  expr:id='"post-" + data:post.id' >

     <b:if cond='data:blog.pageType == "item"'>
        <style>#fullpost{display:inline;}</style>
        <p><data:post.body/></p>
     <b:else/>
        <style>#fullpost{display:none;}</style>

        <p><data:post.body/></p>

       <span id='showlink'>
        <a expr:href='data:post.url'>Read More......</a>
       </span>
       <script type='text/javascript'>
         checkFull("post-" + "<data:post.id/>");
       </script>
     </b:if>

     <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>


The 'Read More......' can be replaced with any other alternative message such as 'Keep Reading...', etc.



At this stage, save the template changes done so far.




  1. The final step is to add the <span> tags whenever a blog post is made.

    On the right-hand top corner of the editor, click on 'Edit HTML'.


    Put the partial content that is to be displayed above the <span id="fullpost"></span> and the rest of the content to be hidden between the opening and closing <span> tags.
Keep Reading...

posted by Dan at 5:16 AM 0 Comments

Wednesday, July 08, 2009

Create a Timed Slideshow with JQuery SlideViewerPro

JQuery can be used to create timed, image slideshows such as on this webpage with the SlideViewerPro and Timer plugins.  

Step 1: The HTML Content

In Step 1, we add the HTML markup for the slides' contents within the <body> of the webpage. There is no limit on the number of slides. In this example, there are 3 images as the 3 slides.

<!-- Timed Slideshow HTML –>

<div id="banner" class="svwp">
  <ul>
   <li><img src="banner1.jpg" alt="" title=""/></li>
   <li><img src="banner2.jpg" alt="" title=""/></li>
   <li><img src="banner3.jpg" alt="" title=""/></li>
  </ul>
</div>

<!-- Slideshow HTML ->

 

Step 2: The CSS Content

The next step, is to add the CSS content within the <head> element of the webpage that consists of the slideshow style rules. These rules can be modified according to the need; for example, the height and width rules of the slide images should be changed in the CSS rule for #banner to reflect the size of the images (also make sure all images are of the same size which gives the slideshow a consistent look and feel).

<style type="text/css">
<!--

.svwp {
    width: 50px;
    height: 20px;
}         /*preloader stuff. do not modify!*/

.svwp ul {
    position: relative;
    left: -999em;
}         /*preloader stuff. do not modify!*/

.slideViewer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
}

.slideViewer ul {  /*your list of images*/
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.slideViewer ul li {
    float:left;
}

/* Banner Animation Styles */
#banner {
    height:303px;
    width:988px;
}
.panelwrappers {
    overflow:hidden;
}

-->
</style>

 

Step 3: The JavaScript content

In this step, we insert the JavaScript code to manipulate the DOM for the slideshow effect. Our code is dependent on the JQuery JavaScript library as well as the SlideViewerPro and Timer JavaScript libraries of JQuery, therefore these libraries will be linked as well.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.slideViewerPro.1.0.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>

<script type="text/javascript">
        $(function() {
        $("div#banner").slideViewerPro({
            galBorderWidth: 0,
            autoslide: true,
            thumbsVis: false,
            shuffle: true
            });
        $("#tree").treeview({
            collapsed: false,
            animated: "medium",
            control:"#sidetreecontrol",
            prerendered: true,
            persist: "location"
            });
        });
</script>

 

Step 4: Customizing SlideViewerPro

The SlideViewerPro plugin is completely customizable with the following options and their default values when not explicitly assigned a value in the JavaScript code:

// slideViewerPro options (defaults)
galBorderWidth: 6,  // the border width around the main images


thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images


thumbsRightMargin: 3, // the distance of each thumnail respect to the next one


thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around


buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails


galBorderColor: "#ff0000", // the border color around the main images


thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one


thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail


buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner


thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0


thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0


easeTime: 750, // the time it takes a slide to move to its position


asTimer: 4000, // if autoslide is true, this is the interval between each slide


thumbs: 5, // the number of visible thumbnails


thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original


thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible


leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";


rightButtonInner: "+", //could be an image or an escaped char as "&rarr";


autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin


typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed


typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.


shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

 

The timed slideshow is now ready.
Keep Reading...

posted by Dan at 11:16 AM 1 Comments