Sharing all info: Javascripts

Showing posts with label Javascripts. Show all posts

Wednesday, December 2, 2009

Auto Move Image Slider i.e carousel For Blogger

I had provided you earlier with an image slider with two left and right panels which on click take you to other images.But some of my readers at that time wanted it to have auto moves of images in slider.So in this post i will tell you how to auto move the images in slider.If you you don't know what exactly image slider is, then don't worry, just i would like you first to read my previous post on image slider for it and if you like it just follow that tutorial to have it in your blog.

Some other widgets you would like to implement for sure like peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.

Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.

Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F

Now search for </head> and place the below javascript codes before this tag.

In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.

Now Search for this code ]]></b:skin> and add the below css above it.

#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULFj2W-KTBqQf12WQTXAI-fnyjnEuy-58GYzjTrYaF0K9RxlOkEQN7Y95EEo_5XbnQT85WaTIPWsLf5pz3kRH6YrO78VC0WX1-t0oTSQFhkZFjoIvBl4K-gNXaf2LTZsIUcBf7CKEdw/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider.

Now Save Your Template.All the coding part is finished,now just how to add images to slider.

Just go to Layout > Page Elements > Add A Gadget > Html/Javascript

And add the below links of images and posts in it,in the format i am writing below.

Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.Java web hosting is also rising in popularity now, so better try searching one that suits your needs now.

Auto Move Image Slider i.e carousel For Blogger

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

Auto Move Image Slider i.e carousel For Blogger

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

Wednesday, June 24, 2009

Images Slider i.e carousels For Blogger

Carousels For Blogger what it is,it ia an type of images slider horizontally or vertically for your images with an link to desired post or website you want to link.In some carousels you can add title and description of posts also with an link to post.These image sliders are nowadays highly used by our blogger platforms to attract visitors to there content or show of there latest or best content.Every body use it of at different places in blog with different purposes.So why not you try and use it your blog.

You would have seen my last post peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.

Now lets carry on with an important tutorial of how to add the image slider to your blog.

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULFj2W-KTBqQf12WQTXAI-fnyjnEuy-58GYzjTrYaF0K9RxlOkEQN7Y95EEo_5XbnQT85WaTIPWsLf5pz3kRH6YrO78VC0WX1-t0oTSQFhkZFjoIvBl4K-gNXaf2LTZsIUcBf7CKEdw/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider and no of images to be shown at once in slider,so make it adjust acc. to you.If you increase images to be shown from 3 to any number then you have to increase the size of it also in slider css which is written below.

Now Save Your Template.All the coding part is finished,now just how to add images to slider.

Just go to Layout > Page Elements > Add A Gadget > Html/Javascript

And add the below links of images and posts in it,in the format i am writing below.

Images Slider i.e carousels For Blogger

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULFj2W-KTBqQf12WQTXAI-fnyjnEuy-58GYzjTrYaF0K9RxlOkEQN7Y95EEo_5XbnQT85WaTIPWsLf5pz3kRH6YrO78VC0WX1-t0oTSQFhkZFjoIvBl4K-gNXaf2LTZsIUcBf7CKEdw/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

Images Slider i.e carousels For Blogger

Just see it at top below the blog header.

Download this Zip file and get two javascript files from it for backup.

#myslides{

background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgULFj2W-KTBqQf12WQTXAI-fnyjnEuy-58GYzjTrYaF0K9RxlOkEQN7Y95EEo_5XbnQT85WaTIPWsLf5pz3kRH6YrO78VC0WX1-t0oTSQFhkZFjoIvBl4K-gNXaf2LTZsIUcBf7CKEdw/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

Tuesday, June 9, 2009

Make Your Blogger Page Title Scroll Using Javascript

Scroll your all blog pages title from left to right.Yes friends as you would have seen few blogs using this hack like to make scroll there blog page title i.e moving from left to right.As not many blogs are using this as it depends only upon admin likings.If you also want to have this hack then read on for sure to implement this hack.

First of all i would like to show you the demo of this hack.Visit my Blogger widgets blog and see there the blog title scrolling from right to left.

If you liked it want to have it in your blogger just follow this tut.As one my reader shaz wanted to implement this hack in his blogger and requested me to blog about it,so below are the codes to make it work.

Just Login To Blogger > Layout > Edit Html

Now at the beggining of the codes only you will find below line:-

If you using Swap Title Hack you will find these codes :-

<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Or may get codes like at this post too.

So what you have to do is just copy the javascript codes from below and paste it after the any of the above code which one you are using.

And now save your template.And you will now see your blogger title scrolling.

Make Your Blogger Page Title Scroll Using Javascript

If you using Swap Title Hack you will find these codes :-

<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Or may get codes like at this post too.

So what you have to do is just copy the javascript codes from below and paste it after the any of the above code which one you are using.

And now save your template.And you will now see your blogger title scrolling.

Make Your Blogger Page Title Scroll Using Javascript

If you using Swap Title Hack you will find these codes :-

<b:if cond='data:blog.pageName == ""'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

Or may get codes like at this post too.

So what you have to do is just copy the javascript codes from below and paste it after the any of the above code which one you are using.

And now save your template.And you will now see your blogger title scrolling.

Sunday, May 31, 2009

Welcome Alert Script For Blogger

Alert Script for Blogger,when anybody will visit your website or blog he will get an welcome message before loading your page completely.You can have anything in the message what you want.It can be helpful for you whenever you want to display to your welcoming visitor some message or alert which you can be important for him to get to your blog reading further.

I had before shared you with two scripts:-
1)Disable Right Click For Blogger
2)Making Image Reflections

Just login to blogger > Layout > Edit Html

Find <head> tag and add the below script just after it.

Just change text in red with your welcoming message.

And now save your template.And visit your blog you will get an welcome message.

Welcome Alert Script For Blogger

Just login to blogger > Layout > Edit Html

Find <head> tag and add the below script just after it.

Just change text in red with your welcoming message.

And now save your template.And visit your blog you will get an welcome message.

Welcome Alert Script For Blogger

Just login to blogger > Layout > Edit Html

Find <head> tag and add the below script just after it.

Just change text in red with your welcoming message.

And now save your template.And visit your blog you will get an welcome message.

Sunday, April 5, 2009

How Make And Show Image Reflections In Blogger Posts

Reflection of the images is made using photoshop,as you need to make each image with its reflection and have to post it on blogger posts.And when you want to post images with reflection and you don't know how to use photoshop,then what you will do.No need to worry friends now i will tell you the very easy way how to make your images reflect in blogger posts and you have not even to make any modifications to image just keep on posting it as before you are doing, just i will give you an javascript to add in your html,and after that you just have to define a class to your images while posting. Now i will tell you how to do it exactly.

As an same method i posted one more hacks before,How to make an hover effect to image if you havent checked check for sure.

Now how to make image reflection.

Login into blogger with your ID
Click Layout
Click Edit HTML tab
Click Download Full Template and please back up your template first.
Copy and Paste the below script right after ]]><b:skin>

Now download this script Reflection.js and upload to your own server.

And now whenever you define your image add the class='reflect' in code as like below highlited in red in below code.

I hope you will be able to make image reflect very easily.if you have any problem leave your comments below.

How Make And Show Image Reflections In Blogger Posts

And now whenever you define your image add the class='reflect' in code as like below highlited in red in below code.

I hope you will be able to make image reflect very easily.if you have any problem leave your comments below.

How Make And Show Image Reflections In Blogger Posts

And now whenever you define your image add the class='reflect' in code as like below highlited in red in below code.

I hope you will be able to make image reflect very easily.if you have any problem leave your comments below.

Wednesday, April 1, 2009

Disable Right Click Option in Blogger

Disable right click option in blogger,ya friends if you want that your visitors dont use right click on your blog to save your page or any images then its very easy for you to disable right click option in your blog.What you have to do is add small piece of javascript codes in your blog html.

There are two piece of codes one in which if visitor uses right click option an alert will be shown that is disabled.And other is one in which no alert will be shown.

You can add the codes in two ways.
1.Add below codes in blog html below the closing head tag </head>
2.Or add these codes in layout sidebar in Html/Javascript section and save it.

Script without message alert

Script without message alert