In my template Simplex Darkness ,I used slider effect for recent posts like this :
To make a slider in blogspot ,I follow some steps bellow
step 1 : Using jquery and javascript to make slider effect in blogspot
step 2 : Use javascript to get information on recent posts such as title ,images ,post summary
and show them all in slider .
in this post ,I will show you the first step of making slider for recent posts .
in the page element ,create a HTML/Javascript widget
At first ,we need to styling the slider by CSS .So paste this CSS code into widget content .
because this slider effect is based on jquery plugin named Cycle , so after CSS code above ,we need to including Jquery framework and Cycle plugin . To do this ,just add this code after CSS section :
you can download two javascript files from url 's above and upload them to your hosting .
Now we start the main code for slider :
look at the code of left part and right part above , you can see each href attribute of tag in the right part refer to id of
tag in the left part ,for example ,in the left we have
and in the right we have
this mean when we click on the link in the right part ,it will show the content we need in the left part . The right work as control panel for the left part .
all the code of slider effect can't work if we don't initialize its variables .
Now ,right after
:
add this code :
ok . Save widget and check out the slider for its operation
In the next post ,I will tell you how to use this slider for showing recent post like what I did
Please subscribe this blog for receive update .
To make a slider in blogspot ,I follow some steps bellow
step 1 : Using jquery and javascript to make slider effect in blogspot
step 2 : Use javascript to get information on recent posts such as title ,images ,post summary
and show them all in slider .
in this post ,I will show you the first step of making slider for recent posts .
Step 1: make slider effect for blogspot
Look at the slider ,you will see it has two parts . The part in the left show the post summary and image ,part on the right show the title of posts .in the page element ,create a HTML/Javascript widget
At first ,we need to styling the slider by CSS .So paste this CSS code into widget content .
because this slider effect is based on jquery plugin named Cycle , so after CSS code above ,we need to including Jquery framework and Cycle plugin . To do this ,just add this code after CSS section :
you can download two javascript files from url 's above and upload them to your hosting .
Now we start the main code for slider :
look at the code of left part and right part above , you can see each href attribute of tag in the right part refer to id of
and in the right we have
this mean when we click on the link in the right part ,it will show the content we need in the left part . The right work as control panel for the left part .
all the code of slider effect can't work if we don't initialize its variables .
Now ,right after
:
add this code :
ok . Save widget and check out the slider for its operation
In the next post ,I will tell you how to use this slider for showing recent post like what I did
Please subscribe this blog for receive update .
0 komentar:
Post a Comment