Home » Archives for tháng 5 2013

Jquery Stylish Featured Post Slideshow for Blogger/Blogspot Site

Posted by Unknown Thứ Hai, 27 tháng 5, 2013 0 comments

Many web designer wants to create a beautiful website. This tutorial helps you to add a nice stylish featured post slideshow to your blogger/blogspot site. This widget created by jquery,javascript,css and html. It's not effecting on your website speed so you can use this widget on your site without any hesitation. Besides you can used to this in your web design project.

What's facility you achieve?

1. You can able to customize if you prefer.

2. You can able to add 5 featured images.

3. You can able to enable/disable autoplay.

4. You can able to add Title and Description.

How to add?

step-1: First login to your Blogger account.

step-2: Click Template.

step-3: Click Edit HTML.

step-4: Click Format Template.

step-5: Then click Ctrl+f.

step-5: Now search below of the code.

]]></b:skin>

step-6: Now copy following code and paste above ]]></b:skin>

css:

/**Jquery slideshow Start from www.noxdo.blogspot.com**/

.desSlideshow{

    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfTgT_9cHMHQ1aY-dgF8nY8fLIU6CoL3-4aJYihAyopgUCrMu5FCTURw454P9N7fxBuX_tMDXvgCUZDStp6_xNMjkS9n6fADLCLsi-PpGWZBMUOmslZxvamhyphenhyphenBlJpsBe5C1ZkPfho0jBI/s1600/loading.gif);

    background-position: center center;

    background-repeat:no-repeat;

}

.desSlideshow .switchBigPic,.desSlideshow .nav{

    display:none;


}
/**Jquery Slideshow End from www.noxdo.blogspot.com**/

step-7: Now again search.

</head>

step-8: Now copy below of the code and paste above </head>

Javascript:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js' type='text/javascript'></script>

<script src="http://noxdo-blogspot-com.googlecode.com/svn/trunk/demo/Jquery%20featured%20desslideshow-noxdo.blogspot.com/js/desSlideshow.js"></script>

<script language="javascript" type="text/javascript">

    $(function() {

        $("#desSlideshow1").desSlideshow({

            autoplay: 'enable',//option:enable,disable

            slideshow_width: '800',//slideshow window width

            slideshow_height: '249',//slideshow window height

            thumbnail_width: '200',//thumbnail width

            time_Interval: '4000',//Milliseconds

            directory: 'images/'// flash-on.gif and flashtext-bg.jpg directory

        });

    });

</script>

<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:blog.url == data:blog.item'><b:if cond='data:post.isFirstPost'><a href='http://noxdo.blogspot.com/'>Blogger widget</a></b:if></b:if></b:if>

Code analysis:

** Remember if your template already existed below of the code please delete it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js' type='text/javascript'></script>

Search http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js if you find the code two time delete any one of the code.

** If you want to disable autoplay just replace enable from below of the code

            autoplay: 'enable',//option:enable,disable

step-9: Now save the templates.
step-10: After saving click Layout
step-11: Click Add a Gadget
step-12: Scrolling and click HTML/JavaScript

step-13: Now copy below of the code and paste in the HTML/JavaScript box.

<div id="desSlideshow1" class="desSlideshow">

<div class="switchBigPic">

<div>

                    <a title="" href="#"><img class="pic" src="/images/006.jpg" /></a>

                    <p><strong>Title1</strong><br/>

                        Description Content1

                    </p>

      </div>

<div><a title="" href="#>"><img class="pic" src="/images/004.jpg" /></a>

                    <p><strong>Title2</strong><br/>

                        Description Content2

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/001.jpg" /></a>

                    <p><strong>Title3</strong><br/>

                        Description Content3

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/003.jpg" /></a>

                    <p><strong>Title4</strong><br/>

                        Description Content4

                    </p>

      </div>

<div><a title="" href="#"><img class="pic" src="/images/003.jpg" /></a>

                    <p><strong>Title5</strong><br/>

                        Description Content5

                    </p>

      </div>

  </div>

<ul class="nav">

<li><a href="#">Slideshow1</a></li>

  <li><a href="#">Slideshow2</a></li>

  <li><a href="#">Slideshow3</a></li>

  <li><a href="#">Slideshow4</a></li>

  <li><a href="#">Slideshow5</a></li>

</ul>

</div>

** Just replaced red,yellow,blue color with your link,image,Title and Description.

step-14: Now drag this gadget above the Blog post.

Now save arrangement and you are done. Then see your beautiful website by using this widget. Thanks to read. Wait for our next project.

Create a House with HTML5

Posted by Unknown Thứ Năm, 23 tháng 5, 2013 0 comments

HTML5 is a new horizon for web design and web development. It's canvas element help you create a beautiful graphic design without photoshop. In the future, people will make their dynamic and beautiful website by using HTML5. Now we make our House model by using it. Let's take a look at the designdesigne of home model.

All Project Code:

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background:#099;
         }
      #myHouse {
        border: 1px solid #9C9898;
        margin:15px;
        background:#F99;
      }
      h2{color:#fff;}
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myHouse");
        var context = canvas.getContext("2d");
        //left roof
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(300, 10);
        context.stroke();        
        //right roof
        context.beginPath();
        context.moveTo(300,10);
        context.lineTo(500, 100);
        context.stroke();        
        // roof ground
        context.beginPath();
        context.moveTo(100,100);
        context.lineTo(500, 100);
        context.stroke();        
        //left side
        context.beginPath();
        context.moveTo(200,100);
        context.lineTo(200, 180);
        context.stroke();        
        //right side
        context.beginPath();
        context.moveTo(400,100);
        context.lineTo(400, 180);
        context.stroke();        
        //top floor
        context.beginPath();
        context.moveTo(100,180);
        context.lineTo(500, 180);
        context.stroke();        
        //ground floor
        context.beginPath();
        context.moveTo(100,198);
        context.lineTo(500, 198);
        context.stroke();        
        //floor left side
        context.beginPath();
        context.moveTo(100,180);
        context.lineTo(100, 198);
        context.stroke();        
        //floor rite side
        context.beginPath();
        context.moveTo(500,180);
        context.lineTo(500, 198);
        context.stroke();          
        //door left side
        context.beginPath();
        context.moveTo(260,110);
        context.lineTo(260, 170);
        context.stroke();        
        //door right side
        context.beginPath();
        context.moveTo(340,110);
        context.lineTo(340, 170);
        context.stroke();        
        //door top
        context.beginPath();
        context.moveTo(260,110);
        context.lineTo(340, 110);
        context.stroke();        
         //door down
        context.beginPath();
        context.moveTo(260,170);
        context.lineTo(340, 170);
        context.stroke();
      };
    </script>
  </head>
  <body>
  <center>
    <canvas id="myHouse" width="578" height="300"></canvas>
    <h2> A Simple House made by HTML 5.</h2>
    </center>
  </body> 
</html>

Now open Notepad copy code and paste. Then Click File>Save As and give File name index.html. Now open index.html file by using your web browser and you showed like the below image.

Project Analysis:

** We're designing our canvas in HTML by using..

<canvas id="myHouse" width="578" height="300"></canvas>

We determine canvas height and weight by using it. Canvas element or Canvas tag <canvas></canvas> work like other html tags <div><p> but here only difference it's executes by using javascript code. To executed id="myhouse", we're used below of the javascript code.

      window.onload = function() {
        var canvas = document.getElementById("myHouse");
        var context = canvas.getContext("2d");

** We are using 13 lines to make our house. To create each of the lines, we use similar script in all code. Here's the script..

context.beginPath(); 
context.moveTo(100,100); 
context.lineTo(300, 10); 
context.stroke();

context.beginPath();

Drawing of the path that has been used.

 context.moveTo(100,100);

It is presented in a simple way, context.moveTo(100,100);'s starting point is the coordinate of each line has been set. Coordinate can be calculated from the left side of the top corner.

 context.lineTo(300, 10);

It is presented in a simple way, context.lineTo(300,10);'s ending point is the coordinate of each line has been set. Coordinate can be calculated from the left side of the top corner.

 context.stroke();

Determine is the color for each line. Here we do not specify any color, so it's looking the black. But if you want to add color just used below of the code to delete the current context.stroke();like..

         // left roof
        context.strokeStyle = '#292929';
        context.stroke();

It's changed your left roof color. At the same time, you can add more color in your house to using this method.
Thanks to read our full house project tutorial. Wait for our next project.

mesothelioma law firm

Jquery Stylish Featured Post Slideshow for Blogger/Blogspot Site

Create a House with HTML5

Arsip Blog

Category