Membuat Glider Konten

Home > JavaScript Blogger > Membuat Glider Konten

Demo :

British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland.

Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.

Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.

1 2 3 Back Foward

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatannya
dibawah <b:skin><![CDATA[
........
diatas </head>

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

<style type="text/css">
.glidecontentwrapper{
position: relative;
width: 350px;
height: 230px;
border: 5px solid yellow;
overflow: hidden;
}
.glidecontent{
position: absolute;
background: white;
padding: 10px;
visibility: hidden;
width: 330px;
color:black;
text-align:left;
}
.glidecontent img{border:none;}

.cssbuttonstoggler{
width: 350px;
margin:6px 5px;
text-align: center;
background: white;
overflow: hidden;
}
.cssbuttonstoggler a{
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqxVlY26R8r4v0R-vRbY6e4m5jIAHHTfNBgqULtmeJHPwl1scuLi73-PMC5EgALlvrLiXKQBvzXsEKw3SRN1934aIVWKHz0lRwntD9E3WZn0_kBAFA2KQ376DhB4BjEj0M-J34hct9u8/s1600/Nano+Yulianto+-+Left.gif') no-repeat top left;
color: #494949;
display: block;
float: left;
margin-right: 6px;
font: normal 13px Arial;
line-height: 15px;
height: 23px;
padding-left: 9px;
text-decoration: none;
}
.cssbuttonstoggler a span{
background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXz1uRsbcyCmIBuSLyzZAE5NAy_pSvxSyGC4CZiWGG9RWPZyFJrQr3SA5lGHpF6GO_Y8Yrkup-B8CURlhCqR0kuve-jF9Nv76ZGXj850k1hy9Ho-kPb7igUMSse16lf1kujOHsVBjmhO4/s1600/Nano+Yulianto+-+Right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0;
}
.cssbuttonstoggler a.selected, .cssbuttonstoggler a:hover{
background-position: bottom left;
}
.cssbuttonstoggler a.selected span, .cssbuttonstoggler a:hover span{
background-position: bottom right;
color: black;
}
.cssbuttonstoggler a.toc{}
.cssbuttonstoggler a.prev, .glidecontenttoggler-2 a.next{}
.cssbuttonstoggler a.prev:hover, .glidecontenttoggler-2 a.next:hover{}
</style>
<script type="text/javascript" src="http://pagenano.googlecode.com/files/konten%20glider.js"></script>

Induk JQuery jika sudah ada, tidak perlu lagi !.

Penempatannya
dibawah <body>
........
diatas </body>

<script type="text/javascript">

featuredcontentglider.init({
 gliderid: "canadaprovinces",
 contentclass: "glidecontent",
 togglerid: "p-select",
 remotecontent: "",
 selected: 0,
 persiststate: false,
 speed: 500, //Kecepatan
 direction: "rightleft", //efek muncul: "updown", "downup", "leftright", "rightleft"
 autorotate: true,
 autorotateconfig: [3000, 0]
})

</script>

<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<img src="http://i11.tinypic.com/8efzmmf.jpg" style="float: left; padding: 5px" />
British Columbia is the westernmost of Canada's provinces and is famed for its natural beauty. It's capital is Victoria, located at the southeastern tip of Vancouver Island. BC's most populous city is Vancouver, located in southwest corner of the BC mainland called the Lower Mainland. 
</div>

<div class="glidecontent">
<img src="http://i15.tinypic.com/72vilba.jpg" style="float: right; padding: 5px"/>
Ontario is a province located in the central part of Canada, the largest by population and second largest, after Quebec in total area. Toronto, the capital of Ontario, is the centre of Canada's financial services and banking industry.
</div>

<div class="glidecontent">
<img src="http://i17.tinypic.com/8bg0lkx.jpg" style="float: left; padding: 5px"/>
Yukon, still commonly referred to as "The Yukon Territory", is the westernmost of Canada's three northern territories. The Yukon's major appeal is its nearly pristine nature. Tourism relies heavily on this and there are many organised outfitters and guides available to hunters and anglers and nature lovers of all sorts.
</div>

</div>

<div id="p-select" class="cssbuttonstoggler">
<a href="#" class="toc"><span>1</span></a>
<a href="#" class="toc"><span>2</span></a>
<a href="#" class="toc"><span>3</span></a>
<a href="#" class="prev"><span>Back</span></a>
<a href="#" class="next"><span>Foward</span></a>
</div>

Credit : Dynamic Drive

Alhamdulillah

Tutorial Nano Yulianto

I am Blogger and Love Design