Create Animated Effects on The Web Without Flash

Now it has a lot of animation on the web to implement its web interface, but no doubt much to save a lot of animation effects louding result pages to be slow. By karana that we need to optimize existing resources.
There are many ways to optimize web pages to quickly look without losing its animation effects. I explain that just a little to make the animation, not only can we use flash, but

there is a miraculous way more simple and easy to use. You can use JQuery in making certain effects that would effect has been packaged in one unit and we just call the function in order to use these effects.
In addition to the more rapid development of this web, web developers have created HTML5 and CSS3. A cross between HTML5 and CSS3 can make a powerful animation. But there are disadvantages of the use of HTML5 and CSS3 is the lack of compatible web browsers for some time and there are some HTML5 and CSS3 are not too good at parsing a web browser.
This is an option for those who want to use effects or animation in your web. You can estimate how much resource, compatible, and so forth that may affect your website.
OK that's it from me, antikan again next article

Read more.....

Create a JQuery Slide show Recent Post

Salam blogger, before I would berterimakasi to visitors and lovers of bloggers in particular sekalin shabat - blogger friend, on the occasion tonight I'll share one for a simple trick, simple but fun hehe, how to install was very easy.

OK, the trick that I will give is how to create a "Recent Post JQuery Slide Show" with the name "Recent Post Slide Show"

this blog we will be more beautiful and interesting, hopefully our visitors were also felt at home.

OK, since I do not want to talk at length because it is still much to do, simply:

1. As usual Log into your Blogger account, select "Layout" then "Page Elements", 2. Click the "Add a Gadget" (whatever okay), then select "HTML / JavaScript", 3. Copy-paste the code below:

<script src="https://sites.google.com/site/efekefek/file-js/recentpostslide.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://weblearning27.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src=https://sites.google.com/site/efekefek/file-js/recentpostslide2.js' type='text/javascript'></script>
</div>

CAUTION

Replace the red code with your link address, OK.

After all the measures passed, the store and see the results!

Read more.....

How to Create a Slideshow With Jquery Cycle Plug In

jQuery Cycle Plugin is a Plug In Slideshow light and pretty awesome. This plugin provides a method of calling in cycles that are involved in a container element, in which each element of the container into a slide.

If you are interested in using jquery slideshow with the cycle plugin for bloggers in particular friend or website please follow the steps below.

1. As usual my friend must log in first to blogger

2. select design

3. Then select Edit HTML

4. check the Expand Widget Templates and backup first your templete (to avoid the event of any errors)

5. Copy the code below and paste the code above </ head> or below the code ]]></ b: skin>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
<script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#myslides').cycle({
fx: 'cover',
speed: 500,
timeout: 2000
});
});
</script>

6. For the CSS code below, copy and paste this code above ]]></ b: skin>

#myslides {
width: 370px;
height: 220px;
padding: 0;
margin: 0 auto;
}

#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 350px;
height: 200px;
top: 0;
left: 0
}

CAUTION

You can edit the CSS code above in accordance with the width you want for example (width slidshow / image) and height (height slideshow / images)

7. The last step is to install the HTML code below where you want to put SlidShow by adding gadgets.

<div id="myslides">
<img src="http://weblearning27.blogspot.com/files/water.jpg" />
<img src="http://weblearning27.blogspot.com/files/fire.jpg" />
<img src="http://weblearning27.blogspot.com/files/air.jpg" />
<img src="http://weblearning27.blogspot.com/files/ground.jpg" />
<img src="http://weblearning27.blogspot.com/files/lightning.jpg" />
</div>

CAUTION

code yellow is the address of the image. Please change the address of your image.

Read more.....

How to Make a Table of Contents jQuery Accordion Effect

Now I do bebagai science jQuery neighbor who now banayak Bloggers who use it. Previously I also never made a post about how to create a table of contents but without jQuery. Well now if Nad interested in adding Dartar contents or site map with jQuery please follow the scarcity of the following:

How To make:

1. Login Keakun Blogger
2. Click Design
3. Click the Edit HTML Tab
4. Put the following code above the code ]]></ b: skin>
   

   # Dafis-acc {
   font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: # 333;
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2-oJMnagSUdplz7oIm-WewPspiVmYe7Sdc4W8YDwQl97lFTYYMxHw1zyuvUMq7wJh6GVFBm1fjhQNBNiueqNLIbKfNbSJCWUBs5m_QC0ViYqH5THVCDSDMCuMZufjqgfalkZp3yxnOho/d/bg5.gif) repeat-y scroll left center # E7F7FB;
   padding: 2px 0;
   border: 1px solid # 339DC6;
   }
   
   . Dafis-label {
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinZskdLSb3FPben3SeZ103MYzNwn9U-MjMprWVUMfY-_Xn3UFq-9lbEgPXUn7zyV0f_YCaRTF1vrEuZm7Dz8Eh2_VUZaknjp1W-gE7OdujrssyamYaZ9AbSvy2D7LXvUyYiwg884Pv9wA/d/bg4.gif) repeat-x scroll 0 0 # E1F4FB;
   font-weight: bold;
   line-height: 1.4em;
   overflow: hidden;
   white-space: nowrap;
   vertical-align: baseline;
   margin: 1px 3px;
   outline: none;
   cursor: pointer;
   text-decoration: none;
   padding: 2px 10px;
   color: # fff;
   text-shadow: 0 1px 1px RGBA (0,0,0, .3);
   border: 1px solid # 2F94BA;
   }
   
   . Dafis-label: hover {
   background: url (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLRuwlxhxEZIqA6PcxEyaoUktBkI2YxzReCQBKIV8L3bOhj17AjIVe63IJ_Vq1KxCiAZbM7weG__kMUvKgBUr1LGx0rbopZpUHtccfFZk93UnnRm2x9HLa8sU6GYUzJZD66bcI_ozB2s/d/bg2.gif) repeat-x scroll 0 0 # E1F4FB;
   color: # 003366;
   }
   
   . Dafis {ol-lists
   margin: 0 0 0 30px! important;
   padding: 0! important;
   }
   
   . Dafis-lists ol li {
   background-color: # C9E9F4;
   line-height: 1.5em;
   margin: 1px 3px! important;
   white-space: nowrap;
   text-align: left;
   border: 1px solid # 339DC6;
   }
   
   . Dafis-lists ol li a {
   text-decoration: none! important;
   color: # 333! important;
   display: block;
   padding-left: 10px;
   }
   
   . Dafis-lists ol li a: hover {
   background: # 7BC4DF;
   border-left: 5px solid # 333;
   padding-left: 5px;
   text-shadow: 0 1px 1px RGBA (0,0,0, .3);
   }
   

5. Then: put code below the above code </ head>
   

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

6. Click Save Template

The next step:

1. Create an article with the title up to you (eg: Table of contents or site map)
2. Move mode to Edit mode Editor HTML article
3. Copy and paste the code below into the article:
   

   <script type="text/javascript" src="http://hensblog.googlecode.com/files/dafis_accv1.js"> </ script>
   <script src="http://weblearning27.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"> </ script>

4. Change the URL of the blue code with your Blog URL
5. Publish articles.

Good luck good luck and helpful!

Read more.....