Saturday, December 3, 2016

How to add Unique Snow Falling Effect to Blogger

File Under: , 3 comments

Most of blogger are use snow falling effect to their blog. It is a common trend all bloggers to in specific seasons.Snow falling effects are very famous in Christmas season. Sometime, evrn we search about snow falling effects for blogger, hard to get working versions.Therefore, today we will learn how to add snow falling effect to your blog.You can check our  previous snow effects tricks.

Must Read :

snow falling effect



Awesome 3d Effect CSS Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find </head> tag
3. Paste below code just above it.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>        
<script src="http://preview.bloggertrix.com/bloggertrix_christmas/snow.js"></script>      <style>
img.bg {
        min-height: 100%;min-width: 1024px;
        width: 100%; height: auto;
        position: fixed; top: 0;left: 0;}
h1 {
font-family: 'Chelsea Market', cursive;
color: #FFF;font-size: 90px;text-align: center;line-height: 95px;font-weight: normal;
margin-top: 350px;text-shadow: 5px 5px 5px #000;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
        img.bg { left: 50%;margin-left: -512px;   /* 50% */}
}
html, body {
font-family: Helvetica, Arial, sans-serif;font-size: 12px; line-height: 16px; padding: 0;
margin: 0;color: #333;
}
.bar {background-color: #111;color: #f0f0f0; box-shadow: 0px 0px 2px #333;
line-height: 25px;padding: 0px 20px;opacity: 0.7;
}
.bar:hover {opacity: 1;}
.bar a {color: #DDD;}
.bar a:hover {color: #FFFFFF;}
a { color: #CCC; text-decoration: none; }
a:hover { color: #FFFFFF; }
#canvas {border: 1px solid black;position: absolute;z-index: 10000; }
#flake {color: #fff;position: absolute; font-size: 25px;top: -50px;}
#page {position: relative;}
</style>
4.  Again find <body>
5. Paste below code after <body> tag.
<div id = "flake">&#10052;</div>
6. Now save your  Template  You are done. If you have any problem related to this snow falling effect. Just leave a comment.I will help you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Wednesday, November 23, 2016

How to Start a Profitable Niche Blog

File Under: , No comments


Now days, Starting new blog is challenging. But its a passion, mainly we all of have a problem, what is our blog will.You can start a blog talking about everything and anything. How ever these types blog are not good at all if you are target for revenue. Because, most of people are search on internet for one reason.Most of all are searching for get answer for their questions or Get solve their some problem and find information about some things.

what niche

How to find your special field for niche blog


For example, if you want to do a fashion trends you will follow a fashion blog. Because, you think that your ideas solve problems for people who search about fashion design or if you want to do a blog about mobile trends. You can write about mobile phone like android, Apple ,Sony etc. So, you can solve other problems and give information about new things people who don't know. Therefore, write down something you can do well .Then you will love it. It helps to give you a true copy of scope of the field you choose.

My ideas is, list down all of thing you can,things you like, things you enjoy, etc.It can be a big or small list. take your time and go through each topic and think. how long you can write about each topics. As a example. If you have a idea about cooking. There are lot of recipes  available to talk. You can do research for new recipes also. So the topic scope is very high. Blogging is always about contents you can write. So choose a right topic for your nice blog.

Be confident for your nice blog  topic.


Once you found a good topic, you can throw away other topic and focus to your niche topic. Don't go back once you selected a topic, just make sure you can do this. write a good article and try to give something to other. Then you will get enjoy of writing. you can build a good fan for your blog.

Read: Blogging basics

I hope you got a idea to find a niche blog to your blog. Next article we will talk about how to find a best keyword for your blog. we will talk about full series about blogging until get a good revenue monthly. so keep in touch.


Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Thursday, February 11, 2016

CSS3 Button Collection With Different Hover Effects

File Under: , , 24 comments

Awesome Css3 button collection for your  blog.


Check all buttons from bloggertrix.com

CSS3 buttons collection





CSS3 BUtton Hover Effects COllaection

1. Go to Blogger Dashboard > Template
2. Find ]]></b:skin>
3. Paste below code just below it.

                   

/*== Button hover css ==*/
button{border: 0; font-family: "Open Sans"; font-weight: 600; padding: 8px 12px; width: 120px; color: #fff; border-radius: 5px; background-color: #DB733B; cursor: pointer; position: relative; z-index: 1;}
.b1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b1:hover:before{height: 100%; bottom: auto; top: 0;}

.b2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b2:hover:before{height: 100%; top: auto; bottom: 0;}

.b3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b3:hover:before{width: 100%; right: auto; left: 0;}

.b4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b4:hover:before{width: 100%; left: auto; right: 0;}

.b5:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b5:hover:before{width: 100%; height: 100%; right: auto; left: 0; bottom: auto; top: 0;}

.b6:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b6:hover:before{width: 100%; height: 100%; left: auto; right: 0; top: auto; bottom: 0;}

.b7:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 50%; bottom: 50%; transition:.4s; z-index: -1;}
.b7:hover:before{width: 100%; height: 100%; left: 0; bottom: 0;}

.b8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b8:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b8:hover:before, .b8:hover:after{width: 50%;}

.b9:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:after{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 50%; top: 0; transition:.3s; z-index: -1;}
.b9:hover:before, .b9:hover:after{width: 50%;}
.b9:hover:before{left: 0;}
.b9:hover:after{right: 0;}

.b10:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.b10:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.b10:hover:before, .b10:hover:after{width: 50%; height: 100%;}

.b11:before{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b11:after{content: ""; width: 0; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b11:hover:before, .b11:hover:after{width: 50%; height: 100%;}

.b12:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.b12:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 0; transition:.4s; z-index: -1;}
.b12:hover:before, .b12:hover:after{height: 50%;}

.b13:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 50%; transition:.3s; z-index: -1;}
.b13:after{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; right: 0; top: 50%; transition:.3s; z-index: -1;}
.b13:hover:before, .b13:hover:after{height: 50%;}
.b13:hover:before{bottom: 0;}
.b13:hover:after{top: 0;}

/*= button hover with text =*/
.withText button{height: 39px; overflow: hidden;}
button span{display: block; position: relative; transition:.35s;}

.bt1 .after{top: -45px;}
.bt1 .before{top: 0;}
.bt1:hover .before{top: 45px;}
.bt1:hover .after{top: -18px;}
.bt1:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: -1;}
.bt1:hover:before{height: 100%;}

.bt2 .after{bottom: -10px;}
.bt2 .before{bottom: 0;}
.bt2:hover .before{bottom: 45px;}
.bt2:hover .after{bottom: 18px;}
.bt2:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt2:hover:before{height: 100%;}

.bt3 .after{left: -90px; top: -18px;}
.bt3 .before{right: 0;}
.bt3:hover .before{right: -90px;}
.bt3:hover .after{left: 0;}
.bt3:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt3:hover:before{width: 100%;}

.bt4 .after{right: -90px; top: -18px;}
.bt4 .before{left: 0;}
.bt4:hover .before{left: -90px;}
.bt4:hover .after{right: 0;}
.bt4:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: -1;}
.bt4:hover:before{width: 100%;}

.bt5 .after{top: -45px; z-index: 9;}
.bt5 .before{top: 0;}
.bt5:hover .before{top: -45px;}
.bt5:hover .after{top: -18px;}
.bt5:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; top: 0; transition:.4s; z-index: 1;}
.bt5:hover:before{height: 100%;}

.bt6 .after{bottom: -10px; z-index: 9;}
.bt6 .before{bottom: 0;}
.bt6:hover .before{bottom: -45px;}
.bt6:hover .after{bottom: 18px;}
.bt6:before{content: ""; width: 100%; height: 0; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt6:hover:before{height: 100%;}

.bt7 .after{left: -90px; top: -18px; z-index: 9;}
.bt7 .before{right: 0;}
.bt7:hover .before{right: 90px;}
.bt7:hover .after{left: 0;}
.bt7:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; left: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt7:hover:before{width: 100%;}

.bt8 .after{right: -90px; top: -18px; z-index: 9;}
.bt8 .before{left: 0;}
.bt8:hover .before{left: 90px;}
.bt8:hover .after{right: 0;}
.bt8:before{content: ""; width: 0; height: 100%; position: absolute; background-color: #3395D0; right: 0; bottom: 0; transition:.4s; z-index: 1;}
.bt8:hover:before{width: 100%;}

.bt9 .after{top: -45px;}
.bt9 .before{top: 0;}
.bt9:hover .before{top: 45px;}
.bt9:hover .after{top: -18px;}
.bt9:hover{background-color: #3395D0; transition:.4s;}

.bt10 .after{bottom: -10px;}
.bt10 .before{bottom: 0;}
.bt10:hover .before{bottom: 45px;}
.bt10:hover .after{bottom: 18px;}
.bt10:hover{background-color: #3395D0; transition:.4s;}

.bt11 .after{left: -90px; top: -18px;}
.bt11 .before{right: 0;}
.bt11:hover .before{right: -90px;}
.bt11:hover .after{left: 0;}
.bt11:hover{background-color: #3395D0; transition:.4s;}

.bt12 .after{right: -90px; top: -18px;}
.bt12 .before{left: 0;}
.bt12:hover .before{left: -90px;}
.bt12:hover .after{right: 0;}
.bt12:hover{background-color: #3395D0; transition:.4s;}

.bt13 .after{top: -45px; z-index: 9;}
.bt13 .before{top: 0;}
.bt13:hover .before{top: -45px;}
.bt13:hover .after{top: -18px;}
.bt13:hover{background-color: #3395D0; transition:.4s;}

.bt14 .after{bottom: -10px; z-index: 9;}
.bt14 .before{bottom: 0;}
.bt14:hover .before{bottom: -45px;}
.bt14:hover .after{bottom: 18px;}
.bt14:hover{background-color: #3395D0; transition:.4s;}

.bt15 .after{left: -90px; top: -18px; z-index: 9;}
.bt15 .before{right: 0;}
.bt15:hover .before{right: 90px;}
.bt15:hover .after{left: 0;}
.bt15:hover{background-color: #3395D0; transition:.4s;}

.bt16 .after{right: -90px; top: -18px; z-index: 9;}
.bt16 .before{left: 0;}
.bt16:hover .before{left: 90px;}
.bt16:hover .after{right: 0;}
.bt16:hover{background-color: #3395D0; transition:.4s;}
/*== Button hover css end ==*/
   
4. Now save your  Template  and get HTML Codes from below link

  HTML Codes for every CSS3 buttons

Now get your HTML code from below link for each buttons.
credits: http://tympanus.net/codrops/
Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Thursday, July 30, 2015

Colorful JQuery Unique Drop Down Menu bar for Blogger

File Under: , , , 21 comments

This is a unique colourful drop down menu bar implemented by me. Now days there are lot of jQuery menu bar tutorials available on the internet that you can use it for blogger.However i focused on to create colourful menubar. Because its hard to find a kind of menubars. I hope you like this. Please dont forget to share with your social profiles.


Check all menubars from bloggertrix.com

Bloggertrix menu bars

Colorful_Unique_Drop_Down_Menu



Awesome 3d Effect Css Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find </head>
3. Paste below code just above it.

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css">
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js"></script>
<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js" type="text/javascript"></script>
<style>
.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;
</style>
     
4.  Again find </body>
5. Paste below code just above it.
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif", imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
</script>


6. Now save your  Template  and go to blogger Layout
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.
<div class="menubar"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li> <li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/" style="">Free blogger tricks</a> <ul id="destination1"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;"> <li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li> <li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li> </ul> </li> <li id="desti_nav"><a href="#">Item 3.2</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> <li id="desti_nav"><a href="#">Item 3.3</a></li> </ul> </li> <li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/">CSS Tricks</a> <ul id="holidayt" > <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="holidayt" style="margin-left: 175px;margin-top: -2px;"> <li id="holiday_nav"><a href="#">Item 3.1.1</a></li> <li id="holiday_nav"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="holiday_nav"><a href="#">Item 3.2</a></li> <li id="holiday_nav" ><a href="#">Item 3.3</a></li> </ul> </li> <li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="http://www.bloggertrix.com/">JQuery Menu bars</a> <ul id="retrivemy"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;"> <li id="Retrivebk"><a href="#">Item 3.1.1</a></li> <li id="Retrivebk"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="Retrivebk" ><a href="#">Item 3.2</a></li> <li id="Retrivebk" ><a href="#">Item 3.3</a></li> </ul> </li> <li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a> <ul id="makenanEnquery"> <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a> <ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;"> <li id="mkeinq"><a href="#">Item 3.1.1</a></li> <li id="mkeinq"><a href="#">Item 3.1.2</a></li> </ul> </li> <li id="mkeinq"><a href="#">Item 3.2</a></li> <li id="mkeinq"><a href="#">Item 3.3</a></li> </ul> </li> <li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x; margin-left: 1px;"><a id="navhd" href="#">Contact Us</a> </ul> </div>  

7. Now save your HTML/Javascript'.You are done. If you have any problem related to this unique Menu bar. Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More

Friday, July 3, 2015

How to Add Custom Web Fonts for Blogger

File Under: , , 22 comments

This is a important idea which i missed to share with you all. Its about adding custom font to your blog.This will very important for who are making own blogger template for their blog.There are lot of beautiful fonts available other web templates except to blogger templates.In blogger, you can use only stranded computer fonts like Arial Time New Roman or Verdana.If you were add font to your HTML/CSS, you had to installed to your computer.So, visitors also need to installed same fonts to see it properly.Some people still try to add fonts in this way without realizing errors.

google-web-fonts


Google web fonts is the solution for this.If you add these google font, Anybody can view your fonts without having to have the font installed on their computer.Its easier to add it to blogger. Let make your blog attractive.

Step 1:  First go to Google fonts and select font.

google_fonts

Step 2 : Once you find a font click Quick Use icon like below.


Step 3 :On the next page, scroll down and get the “Standard” code like blow.

google_fonts_import
Step 4 : Now you can copy that link code to your blogger template. This is how it do.
             Go to blogger dashboard > Template > Edit Html and paste link under <head> tag. and save
              your template.

You need to add a  slash / to the end of the URL, like below, otherwise blogger will show up error.

<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
Remember to replace the font-family with your own generated font family. example like below.

h3.post-title, .comments h4 {
font-family: 'fontname';
font-size: 28;
}
If you need any help related to blogging.Contact me through email or facebook. I'm glad to help you.
Read More

Thursday, June 11, 2015

How to add Amazing Multi Animate Slider for Blogger

File Under: , , , 22 comments

Image sliders always make our blog attractive.As well as it's helps to show spacial things according to your blog niche,If it is eCommerce, you can list new items or daily offer.If it is a blog and something you hope to sell through it to customers, you can list it with using slider.In other hand, by using slider we can make our blog attractive.Anyway im not going to explain it more, i just tried to let you know how important it is. For now ill stop talking about it.  :D

Lets comeback to our new slider.This feature is, we can more few images with different different animations.There are more sliders i gave to you guys already. but this is different.have a look at into demo and get a idea about it.

Previous image sliders from bloggerrix
Awesome CSS Menubar For blogger

Amazing_Multi_Animate_Slider_for_Blogger



How to add Amazing Multi Animate Slider for Blogger


1. Go to Blogger Dashboard > Layout
5. Click Add Gadget and select 'HTML/Javascript'
6. Paste below code.

<style>
<!-- DC Revolution Slider CSS www.bloggertix.com-->
<link rel="stylesheet" type="text/css" href="http://preview.bloggertrix.com/Awesome_jquery_slider/awesome%20slider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://preview.bloggertrix.com/Awesome_jquery_slider/css.css" media="screen" />
<!-- DC Javascript Library www.bloggertix.com-->
<script type="text/javascript" src="http://preview.bloggertrix.com/Awesome_jquery_slider/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->

<!-- DC Revolution Slider JS www.bloggertix.com-->
<script type="text/javascript" src="http://preview.bloggertrix.com/Awesome_jquery_slider/jquery.templateaccess.plugins.min.js"></script>
<script type="text/javascript" src="http://preview.bloggertrix.com/Awesome_jquery_slider/jquery.templateaccess.revolution.js"></script>

<!-- DC Revolution Slider Start www.bloggertix.com-->
<div class="rev_bannercontainer">
  <div class="rev_banner">
    <ul>
     
      <!-- slide 1 -->
      <li data-transition="curtain-3" data-slotamount="5"  data-masterspeed="300" data-thumb="images/fish1.png" > <img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide1_a.jpg">
        <div class="caption sfb" data-x="490" data-y="40" data-speed="6900" data-start="500" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish1.png"></div>
        <div class="caption sfb" data-x="450" data-y="70" data-speed="7900" data-start="900" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish1.png"></div>
        <div class="caption lfr" data-x="550" data-y="120" data-speed="3700" data-start="800" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish2.png"></div>
        <div class="caption lfr" data-x="620" data-y="240" data-speed="4700" data-start="1000" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish3.png"></div>
        <div class="caption lfr" data-x="490" data-y="200" data-speed="2700" data-start="800" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish4.png"></div>
        <div class="caption lfr" data-x="660" data-y="50" data-speed="8700" data-start="800" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish5.png"></div>
        <div class="caption lfr" data-x="377" data-y="290" data-speed="2700" data-start="800" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/fish6.png"></div>
        <div class="caption lfb big_white"  data-x="50" data-y="47" data-speed="900" data-start="1700" data-easing="easeOutBack" style="padding:15px;"> Revolution Slider</div>
        <div class="caption lft big_white"  data-x="50" data-y="119" data-speed="900" data-start="1900" data-easing="easeOutBack" style="padding:9px;">World's <span style="font-weight:normal;">#1</span><em> Parallax Slider</em></div>
        <div class="caption lfr medium_grey"  data-x="60" data-y="190" data-speed="300" data-start="2500" data-easing="easeOutExpo">Unlimited Transitions</div>
        <div class="caption sfl" data-x="60" data-y="230" data-speed="300" data-start="2600" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/check.png"></div>
        <div class="caption lfr small_text"  data-x="120" data-y="228" data-speed="300" data-start="2600" data-easing="easeOutExpo">Sliding, Fading, Slots, Box Transitions<br/>
          <span style="color: #ccc;">SLIDER REVOLUTION</span> has it all!</div>
        <div class="caption sfl" data-x="60" data-y="280" data-speed="300" data-start="2900" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/check.png"></div>
        <div class="caption lfr small_text"  data-x="120" data-y="287" data-speed="300" data-start="2900" data-easing="easeOutExpo">Responsive & Mobile Optimized</div>
        <div class="caption sfl" data-x="60" data-y="330" data-speed="300" data-start="3200" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/check.png"></div>
        <div class="caption lfr small_text"  data-x="120" data-y="328" data-speed="300" data-start="3200" data-easing="easeOutExpo">Customizable Navigation<br/>
          Arrows, Bullets, Thumbs</div>
        <div class="caption sfb" data-x="55" data-y="380" data-speed="1000" data-start="3500" data-easing="easeOutBack"><a href="http://www.bloggertrix.com/" target="_blank" class="button blue small">Visit Bloggertrix.com</a></div>
      </li>
     
      <!-- slide 2 -->
      <li data-transition="boxfade" data-slotamount="12"  data-masterspeed="300"  data-link="http://www.nasa.gov" title="Visit NASA Website" data-thumb="images/thumbs/regular_thumb2.jpg"> <img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_a.jpg"  >
        <div class="caption lft big_white"  data-x="350" data-y="80" data-speed="900" data-start="1200" data-easing="easeOutBack">The Planets</div>
        <div class="caption sfl" data-x="-270" data-y="0" data-speed="700" data-start="1700" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_b.gif"></div>
        <div class="caption sfb" data-x="160" data-y="210" data-speed="800" data-start="1200" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_c.png"></div>
        <div class="caption sfb" data-x="210" data-y="215" data-speed="900" data-start="1300" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_d.png"></div>
        <div class="caption sfb" data-x="290" data-y="220" data-speed="1000" data-start="1400" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_e.png"></div>
        <div class="caption sfb" data-x="370" data-y="240" data-speed="1100" data-start="1500" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_f.png"></div>
        <div class="caption sfb" data-x="410" data-y="230" data-speed="1200" data-start="1600" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_g.png"></div>
        <div class="caption sfb" data-x="540" data-y="225" data-speed="1300" data-start="1700" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_h.png"></div>
        <div class="caption sfb" data-x="700" data-y="210" data-speed="1400" data-start="1800" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_i.png"></div>
        <div class="caption sfb" data-x="760" data-y="200" data-speed="1500" data-start="1900" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_j.png"></div>
        <div class="caption sfb" data-x="825" data-y="190" data-speed="1600" data-start="2000" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide2_k.png"></div>
        <div class="caption sfb small_text" style="padding:8px;"  data-x="350" data-y="120" data-speed="300" data-start="2600" data-easing="easeOutExpo">The Amazing Solar System</div>
      </li>
     
      <!-- slide 3 -->
      <li data-transition="slotfade-horizontal" data-slotamount="1" data-masterspeed="300"  data-thumb="/images/thumbs/regular_thumb3.jpg"> <img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide3_a.jpg"  >
        <div class="caption sfb" data-x="340" data-y="30" data-speed="900" data-start="500" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide3_b.png"></div>
        <div class="caption lfl" data-x="290" data-y="160" data-speed="700" data-start="800" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide3_c.png"></div>
        <div class="caption sfb" data-x="470" data-y="300" data-speed="700" data-start="1200" data-easing="easeOutExpo"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide3_d.png"></div>
        <div class="caption sfb medium_grey" style="padding:8px;"  data-x="40" data-y="320" data-speed="300" data-start="1800" data-easing="easeOutExpo">Www.bloggertrix.com</div>
        <div class="caption lfl very_big_white"  data-x="40" data-y="50" data-speed="300" data-start="1200" data-easing="easeOutExpo" style="padding:9px;">PC</div>
        <div class="caption lfl very_big_white"  data-x="40" data-y="140" data-speed="300" data-start="1300" data-easing="easeOutExpo" style="padding:9px;">Tablet</div>
        <div class="caption lfl very_big_white"  data-x="40" data-y="230" data-speed="300" data-start="1400" data-easing="easeOutExpo" style="padding:9px;">Mobile</div>
        <div class="caption lfb medium_grey"  data-x="40" data-y="400" data-speed="300" data-start="1500" data-easing="easeOutExpo" style="padding:9px;"><a href="http://www.bloggertrix.com/">Visit Now</a></div>
      </li>
     
      <!-- slide 4 -->
      <li data-transition="slideup" data-slotamount="20" data-masterspeed="300" data-delay="10000" data-thumb="images/thumbs/regular_thumb5.jpg"> <img src="http://preview.bloggertrix.com/Awesome_jquery_slider//images/slide4_a.jpg"  >
        <div class="caption lfb boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack">
          <iframe src="http://player.vimeo.com/video/49224248?title=0&byline=0&portrait=0;api=1" width="460" height="259"></iframe>
        </div>
        <div class="caption sft big_black"  data-x="550" data-y="120" data-speed="300" data-start="1200" data-easing="easeOutExpo">Video Support</div>
        <div class="caption sft big_white"  data-x="550" data-y="157" data-speed="300" data-start="1300" data-easing="easeOutExpo">Vimeo Example</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="210" data-speed="300" data-start="1400" data-easing="easeOutExpo">You can easily add</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="234" data-speed="300" data-start="1500" data-easing="easeOutExpo">Vimeo Videos</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div>
        <div class="caption sfb" data-x="0" data-y="0" data-speed="300" data-start="200" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/vimeo.jpg"></div>
      </li>
     
      <!-- slide 5 -->
      <li data-transition="slidedown" data-slotamount="14"  data-masterspeed="300" data-delay="10000" data-thumb="images/thumbs/regular_thumb6.jpg"> <img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/slide5_a.jpg"  >
        <div class="caption lft boxshadow" data-x="70" data-y="120" data-speed="900" data-start="500" data-easing="easeOutBack">
          <iframe src="http://www.youtube.com/embed/JYKpIr1lSG0?hd=1&wmode=opaque&controls=1&showinfo=0" width="460" height="259"></iframe>
        </div>
        <div class="caption sft big_black"  data-x="550" data-y="120" data-speed="300" data-start="1200" data-easing="easeOutExpo">Video Support</div>
        <div class="caption sft big_white"  data-x="550" data-y="157" data-speed="300" data-start="1300" data-easing="easeOutExpo">Youtube Example</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="210" data-speed="300" data-start="1400" data-easing="easeOutExpo">You can easily add</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="234" data-speed="300" data-start="1500" data-easing="easeOutExpo">Youtube Videos</div>
        <div class="caption lfb medium_grey"  data-x="550" data-y="258" data-speed="300" data-start="1600" data-easing="easeOutExpo">to your Slides</div>
        <div class="caption sfb" data-x="0" data-y="0" data-speed="300" data-start="200" data-easing="easeOutBack"><img src="http://preview.bloggertrix.com/Awesome_jquery_slider/images/youtube.png"></div>
      </li>
    </ul>
    <div class="tp-bannertimer"></div>
  </div> <!-- /rev_banner www.bloggertix.com-->
</div> <!-- /rev_bannercontainer www.bloggertix.com-->
<!-- DC Revolution Slider End -->
<div class="dc_clear"></div> <!-- line break/clear line -->
<br/>
<center><h2><a href="">Back to Article</a></h2></center>

<!-- DC Revolution Slider Settings -->
<script type="text/javascript">
                var tpj=jQuery;
                tpj.noConflict();
                tpj(document).ready(function() {
                if (tpj.fn.cssOriginal!=undefined)
                    tpj.fn.css = tpj.fn.cssOriginal;
                    tpj('.rev_banner').revolution(
                        {
                            delay:6000,
                            startheight:490,
                            startwidth:890,
                            hideThumbs:200,
                            thumbWidth:100,                         // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                            thumbHeight:50,
                            thumbAmount:5,
                            navigationType:"bullet",                    //bullet, thumb, none, both     (No Thumbs In FullWidth Version !)
                            navigationArrows:"verticalcentered",        //nexttobullets, verticalcentered, none
                            navigationStyle:"navbar",               //round,square,navbar
                            touchenabled:"on",                      // Enable Swipe Function : on/off
                            onHoverStop:"on",                       // Stop Banner Timet at Hover on Slide on/off
                            navOffsetHorizontal:0,
                            navOffsetVertical:20,
                            shadow:1,                               //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows  (No Shadow in Fullwidth Version !)
                            fullWidth:"off",                            // Turns On or Off the Fullwidth Image Centering in FullWidth Modus
                            stopLoop:"off"                          // on == Stop loop at the last Slie,  off== Loop all the time.
                        });
                    });
     


7. Now save your HTML/Javascript'.You are done. If you have any problem related to this Amazing Multi Animate Slider, Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter
Read More