PESLAW

Dalam Posting ini kita akan membahas tentang Cara Membuat Menu 3D Tampilan Seperti Jendela Keren Di Blog dengan menggunakan tag html dan kode Css saja. 

Dan tentunya kali ini tidak akan kalah keren dengan postingan yang lain. Yaitu Kita akan share Menu dengan tampilan 3D dan saat disentuh mouse akan terbuka seperti layaknya jendela kamar rumah. 

Penasaran...?


Nah itu saja yang dapat Kita gambarkan tentang postingan kali, tak perlu panjang panjang ini untuk lebih jelasnya dapat kita lihat dan dowload filenya.

Baiklah berikut ini tag html yang dapat membangun Menu 3D Tampilan Seperti Jendela Keren Di Blog :

<style type="text/css">

#menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:-1;}

.menu3Dflip
{margin:0 auto; text-align:center; position:relative;  background:#0091d6; -moz-perspective: 200px; -webkit-perspective: 200px; -o-perspective: 200px; perspective: 200px; }

.menu3Dflip ul.nav li {display:inline-block; display:inline;}

.menu3Dflip ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; }

.menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}

.menu3Dflip ul.nav > li
{-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}

.menu3Dflip ul.nav li a.top-a
{display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}

.menu3Dflip ul.nav li a.top-a b
 {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}

.menu3Dflip ul.nav li:hover a.top-a
{background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }

.menu3Dflip ul.nav div
{position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; }

.menu3Dflip ul.nav div.left {left:auto; right:4px;}

.menu3Dflip ul.nav div ul
{padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); }

.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}

.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}

.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}

.menu3Dflip ul.nav div ul li
{float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}

.menu3Dflip ul.nav div ul li:last-child {border:0;}

.menu3Dflip ul.nav div ul li a
{display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent  no-repeat left center;}

.menu3Dflip ul.nav div ul li a:hover
 {color:#09c; background:transparent  no-repeat 1px center;}

.menu3Dflip ul.nav div.col1 {width:160px;}

.menu3Dflip ul.nav div.col2 {width:310px;}

.menu3Dflip ul.nav div.col3 {width:310px;}

.menu3Dflip ul.nav li:hover div
{ -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

</style>

Dan Kode yang dibawah ini salin dan vaste kan di TATA LETAK

pilih Di mana saja yang kita sukai lalu Klik tambahkan widget lalu pilih HTML/Java scrift setelah itu jangan lupa di vaste. 

Dan lihatlah hasilnya..

Kode Html

div id='menufixed'>
<div class="menu3Dflip">
 <ul class="nav">
<li><a class="top-a" href="#link"><b>Home</b></a></li>
<li><a class="top-a" href="#link"><b>Menu 1</b></a>
  <div class="col3">
   <ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
<ul class="col">
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 2</b></a>
  <div class="col2">
   <ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
<ul class="colRight">
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 3</b></a>
  <div class="col1">
   <ul class="colSingle">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
<li><a href="#link">Sub Menu 5</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#link"><b>Menu 4</b></a>
  <div class="col2 left">
   <ul class="colLeft">
<li><a href="#link">Sub Menu 1</a></li>
<li><a href="#link">Sub Menu 2</a></li>
<li><a href="#link">Sub Menu 3</a></li>
<li><a href="#link">Sub Menu 4</a></li>
</ul>
<ul class="colRight">
<li><a href="#link">Sub Menu 5</a></li>
<li><a href="#link">Sub Menu 6</a></li>
<li><a href="#link">Sub Menu 7</a></li>
<li><a href="#link">Sub Menu 8</a></li>
<li><a href="#link">Sub Menu 9</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
   

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

<div id="sliderSK">
<style>
#sliderSK {
width: 468px;
height: 260px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
}
#maskSK {
overflow:hidden;
}
#sliderSK:hover {
background-color:#fff;
border-right: 4px solid rgb (176,0,0)
border-left: 4px solid rgb(176,0,0)
border-top: 4px solid rgb (22,22,22)
border-bottom: 4px solid rgb(22,22,22)
box-shadow :0px 0px 13px;
}
#sliderSK:hover #pauseSK {
opacity:1;
}
#sliderSK:hover #progressSK {
background-color:rgba(255,255,255,0.0);
}
#sliderSK:hover ul, #sliderSK:hover #progressSK, #sliderSK:hover #overlaySK {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#sliderSK ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}
#pauseSK {
width:468px;
height:260px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progressSK {
width:2px;
height:3px;
background-color:#0054BB;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlaySK {
width:4680px;
height:260px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#sliderSK ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#sliderSK li {
display:inline;
width:468px;
height:260px;
margin:0;
padding:0;
float:left;
position:relative;
}
#sliderSK li:last-of-type {
background-color:#362c30;
}
#sliderSK li a {
display:block;
text-decoration:none;
}
#sliderSK li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
</style>

html

<div id="sliderSK">
<div id="maskSK">
<ul>
<li><a href='#' target='_blank'><img alt='SHUKAKU4RT' height='260' src='dolphins.jpg' title='SHUKAKU4RT' width='468'/></a></li>
<li><a href='#' target='_blank'><img alt='SHUKAKU4RT' height='260' src='5.jpg' title='SHUKAKU4RT' width='468'/></a></li>
<li><a href='#' target='_blank'><img alt='SHUKAKU4RT' height='260' src='2.jpg' title='SHUKAKU4RT' width='468'/></a></li>
<li><a href='#' target='_blank'><img alt='SHUKAKU4RT' height='260' src='0.jpg' title='SHUKAKU4RT' width='468'/></a></li>
</ul>
</div>
<div id="progressSK">
</div>
<div id="overlaySK">
</div>
<div id="pauseSK">
</div>
</div>
   

Dalam Posting ini - Cara Membuat Slide Show Image Pakai Tombol Dan keterangannya Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal Memakai tombol dan juga penampakan keterangannya secara bergantian dengan menggunakan tag Css, html javascrift. 

slider Image ini sangat cocok dan tampilannya menarik  jika di letakkan untuk bagian atas header blog kita, dengan sliding image secara horizontal Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. penasaran .... ? mari kita langsung saja menuju TKP.

kode css

<style>

#wrslider {
 background: white url(background.jpg);
 height: 227px;
 width:70%;
 overflow: hidden;
 float:center;
 position: relative; }

#mover {
 width: 2880px; position: relative; }
.slide {
 padding: 40px 30px;
 width: 900px;
 float: left;
 position:
 relative; }

.slide h1 {
 font-family: Helvetica, Sans-Serif; font-size: 30px;
 letter-spacing: -1px; color: #ac0000; }

.slide p {
 color: #999;
 font-size: 12px;
 line-height: 22px;
 width: 300px; }

.slide img {
 position: absolute;
 top: 20px;
 left: 400px; }

#slider-stopper {
 position: absolute;
 top: 1px;
 right: 20px;
 background: #ac0000;
 color: white;
 padding: 3px 8px;
 font-size: 10px;
 text-transform: uppercase;
 z-index: 1000; }

</style>

Klik tambahkan widget lalu pilih HTML/Java scrift lalu vaste.

kode html

<div id="wrslider">
<div id="mover" style="width: 2880px; left: 0px;">
<div id="slide-1" class="slide">
<h1>
Judul 1</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
<img alt="learn more" src="image_1.png" style="top: 20px;">
</img>
</a>
</div>
<div class="slide">
<h1>
Judul 2</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
 <img alt="learn more" src="image_2.png" style="top: 20px;">
 </img>
 </a>
 </div>
<div class="slide">
 <h1>
Judul 3</h1>
<p>
tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba tes dicoba.
</p>
<a href="#">
<img alt="learn more" src="image_3.png" style="top: 20px;">
</img>
</a>
</div>
</div>
</div>
   

kode javascrift

Dalam Posting ini - Cara Membuat Slide Show Image Vertikal Dari bawah Ke atas Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara Vertikal bergerak dari bawah ke atas secara bergantian dengan menggunakan tag html Css dan javascrift. 

Biasanya Slide show ini sangat cocok jika di pasangkan dan di letakan di bagian sidebar blog kita agar sesuai letak dan posisi nya agar tampilannya menarik dan keren.

slider ini  yang sangat cocok dipasang untuk blog kamu, dengan tampilan secara vertikal dan post yang tampil akan bergantian secara terus menerus. Untuk dapat membangun slidernya kita membutuhkan tag css, html, dan Javascript. Penasaran... ? mari kita langsung saja menuju TKP. 

<style type="text/css">
.jcarousel-skin-tango .jcarousel-container{margin:auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv56z9-FbID9eT4krqdabivVDr3yfMfVksFG3eYITvL3ybA1iEwj1o5l_pkQYm6spmCaS5bI4-QcJTBVMO3h-sz87zrt3WiA_UfoXkcstzclu6yI82B3VW2svZXx-j5-X0zFvqr0K0SIsL/s1600/border.gif) bottom;}
.jcarousel-skin-tango .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin-tango .jcarousel-container-horizontal{width:663px;}
.jcarousel-skin-tango .jcarousel-clip{overflow:hidden;}
.jcarousel-skin-tango .jcarousel-clip-horizontal{width:663px;height:203px;}
.jcarousel-skin-tango .jcarousel-item{width:221px;height:220px;}
.jcarousel-skin-tango .jcarousel-item-horizontal{margin-left:0;margin-right:0px;}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal{margin:0px;}
.jcarousel-skin-tango .jcarousel-next-horizontal{position:absolute;top:40px;right:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz66y7LsI4TNbzQuzAkTmS4IVr-Huvw2AID-hctTVcGSEwjwpOPWrJoiCsx9TiyQx4RAdj4YuLW2094VQ7qZTmAVECIACTtyRN8u7GY_CONjp1wc_bRQSJPGmLZIIfSZDolNfY0dj5MpdF/s1600/control_right.png) no-repeat 0 0;}
.jcarousel-skin-tango .jcarousel-prev-horizontal{position:absolute;top:40px;left:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9IaqVS8-eMYJz5b7QhYVq2lJ6c_aDvB2qmyw25c9hYppHBN6ZvXbMof50UQZrr7DizvvP-XzFYyDYY8slB6bX0RoMB4jr-V2-X6qUv1-58fsEZKiS4MXNxISGgfPgOjU7sHkNVYKMVYT/s1600/control_left.png) no-repeat 0 0;}
.jcarousel-skin-tango2 .jcarousel-container{margin:auto;}
.jcarousel-skin-tango2 .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin-tango2 .jcarousel-container-horizontal{width:663px;}
.jcarousel-skin-tango2 .jcarousel-clip{overflow:hidden;}
.jcarousel-skin-tango2 .jcarousel-clip-horizontal{width:663px;height:129px;}
.jcarousel-skin-tango2 .jcarousel-item{width:211px;height:220px;}
.jcarousel-skin-tango2 .jcarousel-item-horizontal{margin-left:0px;margin-right:15px;}
.jcarousel-skin-tango2 .jcarousel-direction-rtl .jcarousel-item-horizontal{margin:0px;}
.jcarousel-skin-tango2 .jcarousel-next-horizontal{position:absolute;top:40px;right:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz66y7LsI4TNbzQuzAkTmS4IVr-Huvw2AID-hctTVcGSEwjwpOPWrJoiCsx9TiyQx4RAdj4YuLW2094VQ7qZTmAVECIACTtyRN8u7GY_CONjp1wc_bRQSJPGmLZIIfSZDolNfY0dj5MpdF/s1600/control_right.png) no-repeat 0 0;}
.jcarousel-skin-tango2 .jcarousel-prev-horizontal{position:absolute;top:40px;left:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9IaqVS8-eMYJz5b7QhYVq2lJ6c_aDvB2qmyw25c9hYppHBN6ZvXbMof50UQZrr7DizvvP-XzFYyDYY8slB6bX0RoMB4jr-V2-X6qUv1-58fsEZKiS4MXNxISGgfPgOjU7sHkNVYKMVYT/s1600/control_left.png) no-repeat 0 0;}
.transparent-1 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-1 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-1 h5 span a{color:#FFF;}
.transparent-1 h5 span a:hover{color:#999;}
.transparent-1 div{border-right:1px solid #D4D3D3;}
.transparent-2 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-2 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-2 h5 span a{color:#FFF;}
.transparent-2 h5 span a:hover{color:#999;}
.transparent-2 div{border-right:1px solid #D4D3D3;}
.transparent-3 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-3 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-3 h5 span a{color:#FFF;}
.transparent-3 h5 span a:hover{color:#999;}
.transparent-4 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-4 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-4 h5 span a{color:#FFF;}
.transparent-4 h5 span a:hover{color:#999;}
.transparent-4 div{border-right:1px solid #D4D3D3;}
.transparent-5 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-5 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-5 h5 span a{color:#FFF;}
.transparent-5 h5 span a:hover{color:#999;}
.transparent-5 div{border-right:1px solid #D4D3D3;}
.transparent-6 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-6 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-6 h5 span a{color:#FFF;}
.transparent-6 h5 span a:hover{color:#999;}
.jcarousel-skin-tango-video .jcarousel-container{margin:auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv56z9-FbID9eT4krqdabivVDr3yfMfVksFG3eYITvL3ybA1iEwj1o5l_pkQYm6spmCaS5bI4-QcJTBVMO3h-sz87zrt3WiA_UfoXkcstzclu6yI82B3VW2svZXx-j5-X0zFvqr0K0SIsL/s1600/border.gif) bottom;}
.jcarousel-skin-tango-video .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin-tango-video .jcarousel-container-horizontal{width:663px;}
.jcarousel-skin-tango-video .jcarousel-clip{overflow:hidden;}
.jcarousel-skin-tango-video .jcarousel-clip-horizontal{width:663px;height:130px;}
.jcarousel-skin-tango-video .jcarousel-item{width:221px;height:220px;}
.jcarousel-skin-tango-video .jcarousel-item-horizontal{margin-left:0;margin-right:0px;}
.jcarousel-skin-tango-video .jcarousel-direction-rtl .jcarousel-item-horizontal{margin:0px;}
.jcarousel-skin-tango-video .jcarousel-next-horizontal{position:absolute;top:40px;right:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz66y7LsI4TNbzQuzAkTmS4IVr-Huvw2AID-hctTVcGSEwjwpOPWrJoiCsx9TiyQx4RAdj4YuLW2094VQ7qZTmAVECIACTtyRN8u7GY_CONjp1wc_bRQSJPGmLZIIfSZDolNfY0dj5MpdF/s1600/control_right.png) no-repeat 0 0;}
.jcarousel-skin-tango-video .jcarousel-prev-horizontal{position:absolute;top:40px;left:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9IaqVS8-eMYJz5b7QhYVq2lJ6c_aDvB2qmyw25c9hYppHBN6ZvXbMof50UQZrr7DizvvP-XzFYyDYY8slB6bX0RoMB4jr-V2-X6qUv1-58fsEZKiS4MXNxISGgfPgOjU7sHkNVYKMVYT/s1600/control_left.png) no-repeat 0 0;}
#headline-news{}
.transparent-1 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-1 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-1 h5 span a{color:#FFF;}
.transparent-1 h5 span a:hover{color:#999;}
.transparent-1 div{border-right:1px solid #D4D3D3;}
.transparent-2 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-2 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-2 h5 span a{color:#FFF;}
.transparent-2 h5 span a:hover{color:#999;}
.transparent-2 div{border-right:1px solid #D4D3D3;}
.transparent-3 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-3 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-3 h5 span a{color:#FFF;}
.transparent-3 h5 span a:hover{color:#999;}
.transparent-4 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-4 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-4 h5 span a{color:#FFF;}
.transparent-4 h5 span a:hover{color:#999;}
.transparent-4 div{border-right:1px solid #D4D3D3;}
.transparent-5 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-5 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-5 h5 span a{color:#FFF;}
.transparent-5 h5 span a:hover{color:#999;}
.transparent-5 div{border-right:1px solid #D4D3D3;}
.transparent-6 h5{position:absolute;bottom:91px;background:rgb(0, 0, 0);background:rgba(0, 0, 0, 0.7);width:206px;min-height:30px;padding:3px 5px 5px 10px;}
.transparent-6 p{line-height:17px;margin:0px 10px 5px 10px;padding-right:5px;min-height:65px;}
.transparent-6 h5 span a{color:#FFF;}
.transparent-6 h5 span a:hover{color:#999;}
.jcarousel-skin .jcarousel-container{margin:auto;}
.jcarousel-skin .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin .jcarousel-container-horizontal{width:663px;}
.jcarousel-skin .jcarousel-clip{overflow:hidden;}
.jcarousel-skin .jcarousel-clip-horizontal{width:664px;}
.jcarousel-skin .jcarousel-item{width:151px;margin-right:20px;}
.jcarousel-skin .jcarousel-item-horizontal{}
.jcarousel-skin .jcarousel-direction-rtl .jcarousel-item-horizontal{margin:0px;}
.jcarousel-skin .jcarousel-next-horizontal{position:absolute;top:40px;right:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz66y7LsI4TNbzQuzAkTmS4IVr-Huvw2AID-hctTVcGSEwjwpOPWrJoiCsx9TiyQx4RAdj4YuLW2094VQ7qZTmAVECIACTtyRN8u7GY_CONjp1wc_bRQSJPGmLZIIfSZDolNfY0dj5MpdF/s1600/control_right.png) no-repeat 0 0;}
.jcarousel-skin .jcarousel-prev-horizontal{position:absolute;top:40px;left:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9IaqVS8-eMYJz5b7QhYVq2lJ6c_aDvB2qmyw25c9hYppHBN6ZvXbMof50UQZrr7DizvvP-XzFYyDYY8slB6bX0RoMB4jr-V2-X6qUv1-58fsEZKiS4MXNxISGgfPgOjU7sHkNVYKMVYT/s1600/control_left.png) no-repeat 0 0;}
.jcarousel-skin-tango-sorot .jcarousel-container{margin:auto;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv56z9-FbID9eT4krqdabivVDr3yfMfVksFG3eYITvL3ybA1iEwj1o5l_pkQYm6spmCaS5bI4-QcJTBVMO3h-sz87zrt3WiA_UfoXkcstzclu6yI82B3VW2svZXx-j5-X0zFvqr0K0SIsL/s1600/border.gif) bottom;}
.jcarousel-skin-tango-sorot .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin-tango-sorot .jcarousel-container-horizontal{width:663px;}
.jcarousel-skin-tango-sorot .jcarousel-clip{overflow:hidden;}
.jcarousel-skin-tango-sorot .jcarousel-clip-horizontal{width:663px;height:169px;}
.jcarousel-skin-tango-sorot .jcarousel-item{width:221px;height:220px;}
.jcarousel-skin-tango-sorot .jcarousel-item-horizontal{margin-left:0;margin-right:0px;}
.jcarousel-skin-tango-sorot .jcarousel-direction-rtl .jcarousel-item-horizontal{margin:0px;}
.jcarousel-skin-tango-sorot .jcarousel-next-horizontal{position:absolute;top:70px;right:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz66y7LsI4TNbzQuzAkTmS4IVr-Huvw2AID-hctTVcGSEwjwpOPWrJoiCsx9TiyQx4RAdj4YuLW2094VQ7qZTmAVECIACTtyRN8u7GY_CONjp1wc_bRQSJPGmLZIIfSZDolNfY0dj5MpdF/s1600/control_right.png) no-repeat 0 0;}
.jcarousel-skin-tango-sorot .jcarousel-prev-horizontal{position:absolute;top:70px;left:5px;width:25px;height:25px;cursor:pointer;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9IaqVS8-eMYJz5b7QhYVq2lJ6c_aDvB2qmyw25c9hYppHBN6ZvXbMof50UQZrr7DizvvP-XzFYyDYY8slB6bX0RoMB4jr-V2-X6qUv1-58fsEZKiS4MXNxISGgfPgOjU7sHkNVYKMVYT/s1600/control_left.png) no-repeat 0 0;}



h5{ font-size:12px; line-height:1.1em;font-weight:normal;margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;font-family: inherit;vertical-align: baseline;}
:focus {outline: 0;}
a {color:#333; text-decoration:none; outline:none; padding:0px; margin:0px;}

a:hover {text-decoration:none; outline:none; color:#CC0000}

</style>

Dan berikut ini tag html yang dapat membangun Slide Image nya :

Kode html

<ul id="mycarousel" class="jcarousel-skin-tango2">
<li class="transparent-1">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTjjIUg77cJvg2F6_LIhVl8eHjjBhFQVPUzTZqhJyeRVRhbpsIiJIE9G78WY2YRPZ6F0jMHpo25I_RWCluekkevYHyww6muNNCCA5sfh5tQNV01eANO3-EgxyeK4ysBBVKTYVISk6daTb6/s1600/desain_rumah_idaman.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">Desain Rumah idaman anda, cukup hubungi kami di .,...</a></span></h5>
</li>
<li class="transparent-2">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOHT_JTo95oZZ9TvlnCwrTu3E38Cmi1uKIzvnXb8YawCr_1Uz-30kMv4gooH6tuNh_AvxM0XqZNs5TjAGLHlfPDfNbpiCrrc5tmiWlRjfJ0iU8hKUL5YcqauFvztxNrDdJilqtUNDCqKa7/s1600/Desain-Rumah-Idaman-Minimalis-6.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">pengen rumah baru,? hubungi kami...</a></span></h5>
</li>
<li class="transparent-3">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrB9dCy-ijy1I6GMUJ5lHngtdF2F59T8E9eEd4tAj2zfhG8Yn6_vyWaCaHBt53QW-DIgwy7Uz4bLI4rX8qFwWWDv5hBYNGp2MZbec1Of-d9vvnVjmiujRnwkSziV-c8Z_TdD6zvQa_PJB/s1600/dijual-rumah-idaman-minimalis-murah-ngeliat-pasti-suka-hub-20140610204123-53976d730d733.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#"> jual dengan harga yang memuaskan ?, kunjungi situs kami di ...</a></span></h5>
</li>
<li class="transparent-4">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9_Hp9YTF7IMCZgyHh_9oIt5XYzNIOFpf7NZ1aGHvuJiMS3j7XrGQ9aaEJt7dQwZgXuxnMu5crAhldXhcKKmRvZ1v0cjZlr7_cHbjiMMHuhV-miXLm-B-TkS9PU_pyf3lJhdnHuZYOS8ts/s1600/Gambar-Model-Rumah-Idaman-2013.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">rumah kos yang mewah dan murah.? hub kami hanya di ...</a></span></h5>
</li>
<li class="transparent-5">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS2gIg9xuSmcMnKFRonpqaYz6JzQHnLc_HuHXw-ATRiU3fv1DA31P1CqWhhpXQv7QFrqzIgKNQ11pYVhnFrjWwfAqangjL9qdkbv7t7QhaKUlniqOZz1pNc4l6C2oHfwY7GVuPVVWccU5M/s1600/images.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">hotel penginapan yang memuaskan anda </a></span></h5>
</li>
<li class="transparent-6">
                 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQwfnfuSzUjGNzhO8gNWHtayonoT8-U658ujRaTdghkuDeRreoSbfojSX5J1aIFPLplxCMBICwdI-2bhi-QHujH-muZW0ijeuaEfE96nOyN4m5b8shZ5fv3bj6M6hW1E0HyvyG0bVhZIl/s1600/pantone-titanium-decor-Desain-Interior-dan-Dekorasi-Interior-Rumah-Idaman.jpg" width="211" height="129" alt=""/>
                    <h5>
<span><a href="#">rumah dapur kami memang disajikan untuk anda</a></span></h5>
</li>
</ul>
          

Coba lihat hasilnya..

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

css

<style type="text/css">
    .amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style>

<div class="amdhas" id="ke2">
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHjfWYr06MDvazl8DBpuEzIyKnYlu1vzU1XckUVUbo5idQSiMa3YNeYFNk4z6yjOKRkgbJpo3MdVErKc8L0xuCWka13iLJfZ2CNg0FtzlPbTSXDJ-cXDgIJkiGwQUjGdpF_LQxqoUyMVHR/s1600/img_gubhugreyot-cleopatra.jpg" width="400" />
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbNaSJcVC38Jq4OSQNX8FhlEw34kKWapsY8K3t5B3lbfIqP6WlWWKPrp0bSd7UYHSgnAGun6ASKU7fyyJE9KoVVobBFgHxe1co6weXdgiZjZcX9gOEIQa0xygP3WM5uEUwBAyQNUZUnVm/s1600/img_gubhugreyot_gadisku-06.jpg" width="400" />
    <img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimIkeiyW2S79t3PcU91ezGxFoimPd1zgWnWEfFZW12CyLnCvMT7wQ4M9jqdbVmdtmr_DnTrpgo3EikHwH82i55X9B9r4VU-lkp2DG2SH9VoefGgwWng3JTMsbRtTy6oIVJRMttUSyChVCZ/s1600/img_gubhugreyot-house2.jpg" width="400" /></div>
         

javascrift

Dalam Posting ini - Cara Membuat Slide Show Image Pakai Tombol Slider Keren Di Blog kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri secara Bergantian bisa juga memakai tombol slider secara bergantian dengan menggunakan tag Css html dan javascrift. 

Kode css

<style>
.main_slider {
float: left;
margin-left:28%;
position: relative;
}
.window_slider {
height:400px;
width: 600px;
overflow: hidden;
position: relative;
}
.image_reel {
position: absolute;
top: 0; left: 0;
}
.image_reel img {float: left;}
.paging {
position: absolute;
bottom: 40px; right: -7px;
width: 178px; height:47px;
z-index: 100;
text-align: center;
line-height: 40px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyDRrtYbuR3wZUNLNrZZ1h05eEQsK8PymkBIqeFXYa__8gwpdgr0_mBqPMXofeTom9QghDDmrtIRu2LwvqJSYCLOSf_nak5sBGThYalkvu4RoPQZ72Xo4whrlgOPnZoOJ1lQdqcgc_RrMy/s1600/paging_bg2.png) no-repeat;
display: none;
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
border: 1px solid #610000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
</style>

Dan berikut ini tag html yang dapat membangun Slide Image nya :

Kode html

<div class="main_slider">
<div class="window_slider">
<div class="image_reel">
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfv9xwL8f30E8jS4OlBll9tSYCV3RB3oqOm3exXrwOqyJS4Yg1erI9o_oqgSC4ypZsCK9RWGpwrH9L24NAv4PPLa53SXyxdWq9UoKE_IHAchEx4drg-9nN1y6FtrYE3Crebzrr3-1fBJM4/s1600/slide-1-728.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMOWJ9Il8h3Iw6P2v4_GAjDTNjwEthyeXCq3JNa1UYTwVKeGKMsIth0WDc_6Zm3f9Soy1vCAUZIiWhD9CIGpFUDeqdwVVOZolmKYG4L02sFl7Pt6IakyOC17rlkdGF8kY7eI_uaKU1iPnH/s1600/lt_growth2013_co_53_powerpoint_templates_title_slide.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoLcFLQrlJOokK6SyOiSwUD0drPYrRDdUPPTnezxbr44eMzgbRKpt0GltxvOoWoAc_r9KGg11SF0xb0lrv_LMzWRGKJm47jF5BKIezZXvzff_M0A_LW-zXBjPm2EZtwkMbBEDFH4PlNdlr/s1600/903-PowerPoint+2010+TP+-+Reading+View.jpg"></img>
</a>
<a href="#link_post">
<img width="600px" height="400px" alt="Slider Image untuk blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf3hyphenhyphenOCo8kEeQPi3-ycS9txSyps3I9uMe2Jg2W0mSd7HGWfLaaU9einfUAKgyed8kQLHD0x20J1VmMmRK_wrx1Gq0T4CP1hyUy5gNwsXaDRDhf8iCqU_-eR-xfa26Sffrmj6b5uL9IVB8u/s1600/Slide15.jpg"></img>
</a>
</div>
</div>
<div class="paging" style="display: block;">
 <a class="active" rel="1" href="25"> 1 </a>
 <a class="" rel="2" href="221"> 2 </a>
 <a class="" rel="3" href="514"> 3 </a>
    <a class="" rel="4" href="155"> 4 </a>
 </div>
</div>
          

Adapun File nya dapat dilihat hasilnya  dan dapat juga diunduh berikut di bawah ini :

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Dalam posting saya akan berbagi tentang Slider Image dengan mode full page, dengan mode ini kamu dapat menampilkan slider gambar full page. ok langsung saja kita bahas tentang bagaimana cara membuat slider tersebut. Dan perlu diketahui juga bahwa slider ini tidak menggunakan Jquery atau Javascript slider hanya menggunakan CSS3. Baiklah berikut ini tag untuk membuatnya :

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan tampilan yang sangat keren. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

* { margin: 0; padding: 0; }

body { overflow: hidden;
color: #222;
font-family: helvetica, arial;
line-height: 1.2; }

a:active { outline: none;}

.nextbutton, .backbutton {
 position: absolute;
 top: 0; height: 100%;
 width: 50%; }

.nextbutton {
 cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJBJojRQLtYXUOXRp0rmvpdcAb6tPNbpwuagwSxXWD6MvccYZVG6-PAO_UXGKypjU1kitogg8qkuPr_Gxl2lSPRdIzH-X0fkMdLfggzaDtBD-l-0bYYYGZddas5hFiuxjnXrEqNB2oZ2Ay/s1600/right.png'), e-resize; right: 0; }

.backbutton { cursor: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSednvWcqF0VHqzsC80JenLiCTQkL55wAl3teW0hsSzqyA9zRjqIM-Dnib7D7gpn2kEndANXdTqhl7x4vZLjaSgU6V_QW1VDZwMRHeN05lycQufXUUd1VOi0Z5y6ndmnQpFPtiCYE_Z_Tl/s1600/left.png'), w-resize; left: 0; }

h1 {
text-align: center;
padding: 0 50px;
margin-top: 150px;
font-size: 50px; }

img {
margin: 0 auto;
display: block;
margin-top: 50px;}

footer {
z-index: 2;
position: fixed;
bottom: 60px;
left: 50%;
width: 600px;
margin-left: -300px;
text-align: center; }

footer a.link {
color: #111;
font-size: 15px;
font-weight: bold;
text-decoration: none;
border-bottom: solid 2px; }

footer a.link:hover { color: red; }


/* Top Navigation.  */

table {
display: table;
width: 100%;
cellspacing: 0;
border-collapse: collapse;
position: fixed;
z-index: 5000;
top: -1px;
left: 0;
right: 0;
}


table a {
line-height: 54px;
font-family: helvetica, arial;
font-size: 11px;
font-weight: bold;
text-decoration: none;
color: #aaa;
display: block;
text-align: center;
margin: 0;
background-color: #111;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}


#a1:target #p1,
#a2:target #p2,
#a3:target #p3 { background-color: red; color: #fff; }

table a:hover {
background-color: #444;
-moz-transition: background 0s;
-webkit-transition: background 0s;
-o-transition: background 0s;
transition: background 0s;
}

.page {
position: absolute;
width: 100%;
height: 100%;
}

/* The Pages */

#i1 { left: 0%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1NNOK5m-p4bDITRCRdx7woJd3gezKCdJrLXbEoTcRqjOFTaktF6qihZtpgRY5o8bFUhkyz84ALw_LBeatV_qb6BWAMYkvy-SDVR3onQCaaGDLD81fkzydf2l0Fnzni4LexsaKQVHINGj/s1600/a.jpg);
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat;}

#i1 { left: 100%;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1NNOK5m-p4bDITRCRdx7woJd3gezKCdJrLXbEoTcRqjOFTaktF6qihZtpgRY5o8bFUhkyz84ALw_LBeatV_qb6BWAMYkvy-SDVR3onQCaaGDLD81fkzydf2l0Fnzni4LexsaKQVHINGj/s1600/a.jpg);
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat;}

#i2 { left: 200%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2G7MbN-mLdx02LUgZTaHrakozsTpiSqJ0om85JSuxap7hJD7a3B4RdqaqUNUhXBKOkEWdmv9LhB54hISbn0O2mP82Z2Wo1OHbtKKZg_ZIyPh1y4QXeMTZZxJYK8w6XYa4mFNjQSiUE_Iq/s1600/b.JPG);
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat; }

#i3 { left: 300%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8xrgSWYxCaqKlWZgh-I9xLBbt7b4tcTuJR9Da4_UVmpOWDDgWtiC25u-CUrVvjr4PAXTYqJPEoga_gqvCohLAfCgOUIUSPI0b9MSDMUXtE7m_fXjUPtU54vM5gFYbhZr__9nKgwxQsidJ/s1600/c.jpg);
background-size: 800px 600px;
background-position:300px 60px;
background-repeat: no-repeat; }

/* The Transition Effect */

.page {
-webkit-transition: -webkit-transform 0.8s;
-moz-transition: -moz-transform 0.8s;
-o-transition: -o-transform 0.8s;
transition: transform 0.8s;
}

/* The Sliding Action */
/* TranslateX for better Performance. Translate3D for better Performance on Ipad. */

#a1:target .page {
-webkit-transform: translateX(-100%);
 -moz-transform: translateX(-100%);
 -o-transform: translateX(-100%);
 transform: translateX(-100%);}

#a2:target .page {
 -webkit-transform: translateX(-200%);
 -moz-transform: translateX(-200%);
 -o-transform: translateX(-200%);
 transform: translateX(-200%); }

#a3:target .page {
 -webkit-transform: translateX(-300%);
 -moz-transform: translateX(-300%);
 -o-transform: translateX(-300%);
 transform: translateX(-300%); }

/* The First Page - Initial Positioning without Anchor */

.page {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);}

<div id="a1">
 <div id="a2">
  <div id="a3">

   <table>
<tr>
     <td><a href="#a1" id="p1">1</a></td>
     <td><a href="#a2" id="p2">2</a></td>
     <td><a href="#a3" id="p3">3</a></td>
    </tr>
</table>
<div id="i1" class="page">
   <a href="#a3" class="backbutton"></a>
   <a href="#a2" class="nextbutton"></a>
   <h1>
Pure CSS Slideshow</h1>
</div>
<div id="i2" class="page">
   <a href="#a1" class="backbutton"></a>
   <a href="#a3" class="nextbutton"></a>
   <h1>
Simplified Demo</h1>
</div>
<div id="i3" class="page">
   <a href="#a2" class="backbutton"></a>
   <a href="#a1" class="nextbutton"></a>
   <h1>
Check the Source Code</h1>
</div>
</div>
</div>
</div>
<footer>

 <a href=" class="link">Mustakim</a> <b>'2014</b>

  

Dalam Posting ini kita akan membahas tentang membuat tampilan Slide image yang bergerak secara horizontal bergerak ke kiri dan ke kanan secara bergantian dengan menggunakan tag html saja. 

Pada pertemuan kali ini saya akan berbagi Slder Image dengan dengan tampilan yang sangat keren. dengan dropdown lain dari pada yang lain. kamu juga dapat melihat sendiri hasilnya setelah didowload atau lihat sendiri pada link Demo.juga dapat didowload pada link download. berikut ini saya jelaskan tag html dan cssnya :

Baiklah berikut ini tag html yang dapat membangun Slide Image nya :

<style>
.sixtyright { width: 46%;margin-left:30%;background:rgba(28,139,183,1);height:250px;float: center; }
/***** Carousel *****/
.carousel {
margin: 0 auto;
border: none;
padding: 20px 0 0;
}
.carousel .slides {
float: left;
margin: 20px 0 0 30px;
padding: 0;
border: none;
list-style: none;
position: relative;
}
.carousel .slides .slideItem {
position: absolute;
cursor: pointer;
padding: 5px;
border-radius: 4px;
margin: 0;
border: none;
background: rgba(255, 255, 255, 1);
}
.carousel .slides .slideItem a {
display: block;
text-decoration: none;
margin: 0;
padding: 0;
border: none;
}
.carousel .slides .slideItem img {
margin: 0;
padding: 0;
border: none;
display: block;
width: 100%;
height: 100%;
}
.carousel .description {
color: #000;
font-size: 14px;
float: left;
clear: both;
margin: 22px 0 0 13px;
height: 20px;
position: relative;
z-index: 999;
text-align: center;
left: 0;
width: 100%;
white-space: nowrap;
display: block;
}
.carousel .description h3 a {
color: #000;
}
.carousel .text {
display: none;
}
.temp {
position: absolute;
opacity:0
}
.carousel .description a:hover {
color: blue;
}
.carousel #next {
cursor: pointer;
display: inline-block !important;
color: #blue;
margin: 0 0 0 8px;
position: relative;
top: 1px;
}
.carousel #next:hover {
color: red;
}
.carousel .prevButton {
display: none;
}

.carousel .holder {
position: relative;
}

.carousel .right {
position: absolute;
top: 0;
left: -40px;
cursor: pointer;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,1)), color-stop(32%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,0)));
background: -webkit-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
background: linear-gradient(to right, rgba(28,139,183,1) 0%, rgba(28,139,183,1) 32%, rgba(28,139,183,0) 100%);
z-index: 99;
}

.carousel .left {
position: absolute;
top: 0;
cursor: pointer;
right: -40px;
height: 100%;
bottom: 0;
width: 150px;
background: -moz-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(28,139,183,0)), color-stop(68%, rgba(28,139,183,1)), color-stop(100%, rgba(28,139,183,1)));
background: -webkit-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -o-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: -ms-linear-gradient(left, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
background: linear-gradient(to right, rgba(28,139,183,0) 0%, rgba(28,139,183,1) 68%, rgba(28,139,183,1) 100%);
z-index: 99;
}

.boutique img {
margin: 0;
padding: 5px;
border-radius: 3px;
background-color: #ededed;
}

.carousel .remove {
display: none !important;
}

.carousel .frame3 img {
margin: 0 !important;
box-shadow: 0 1px 13px rgba(0,0,0,.47);
}

.boutique {
margin: 0;
padding: 0;
position: relative;
z-index: 1
}

.boutique li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
z-index: 1;
display: none;
border-width: 0
}

.boutique img {
border: 0;
vertical-align: bottom
}

.boutique a, .boutique a:hover {
cursor: default;
text-decoration: none;
outline: none
}

.boutique img, .boutique li, .boutique a {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
cursor: pointer;
}

.carousel .holder {
width: 490px;
margin: 10px 50px 0 0;
float: right;
}
</style>

html

<div class="sixtyright">
  <div class="carousel ">
   <div class="holder">
    <div class="right">
</div>
<div class="left">
</div>
<ul id="team">
<li><a href="1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV9oRNKjQMifdlvOKHJVmOuLE9Adhy0VTZng8SMYT4tOmRUvoRZ7EAdYkRJz8TIu7VZ-C-NPuutw9EYtJqC2laZQ4VUktsrFAGCnvD5SxZB_ztYtKe_lHc6W2JGhv9dkvVaevodY1CMI8B/s1600/naruto.jpg" alt=slider image transparant" /></a></li>
<li><a href="2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOMSa5KYGbpYOrYfxmMPvPHfX07Dc63ZypN0JJvRh8k_q7I_1daLMqR7q4v1WIlnTZJn4IbVIqQy7lwt947CFAEikJi7aUfj8QphpPnNTYV00BUQxdIybETAzDHZuykxbtahq31sA2uo3w/s1600/luffy.jpg" alt="slider image transparant" /></a></li>
<li><a href="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggue14F46Nmxq2zbQulPcms9Jhxd9qnh4C2qB8e9Texwv1LfpOa31Aw8OiWqCXTo28qSAr7R3LhX_6erVHro1Frcz9Xm_2qQWDk3ZVK4sjBSiFxcqmZ1Ef3AcH-1g_N9GUmSO_ZK9SkkmM/s1600/ichigo.jpg" alt="slider image transparant" /></a></li>
<li><a href="4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQFMFp5NN1cd9NSCbtVF03evkkdBt8epGkSji6tOpvt42776LKPjocQJWxi2Z5Tq5zFtZES01_TXlnxsXK40rIPZ5c-FsnuTv5XwZxyRhRlBcpda2bcClBihJDirsuqN35Ya44MOAfjb6U/s1600/goku.jpg" alt="slider image transparant" /></a></li>
<li><a href="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicHUHi7SLdjp_0U-2BJswl6wWeR0TbGyKSA99wMbHq91wOFLtLgu5OUoyFUCTUWKqZaw_732MiM8pALOULdSbU-4GairKdr44LMCGmLKXO3J2EeWSC8mKmS8jeLje6h1lms9cBLrBHdUST/s1600/fairly_tail.jpg" alt="slider image transparant" /></a></li>
<li><a href="6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFR091r9s4zsZlxbvJvQLDd3uhz6HRVMtAd-aaLvz89ePRngUncGlSdmMpMZkv8nlLgUhomLHIzY2ddnmoLRNIc5TIzAqIAi-SilQjkaYaqqJrkRO51dwLtLDw1M04hPOVvJf5iZyV734u/s1600/Death_Note_Ryuk_w.jpg" alt="slider image transparant" /></a></li>
</ul>
<div class="text">
     <span><a href="#" title="Uzumaki Naruto">
     <strong> Uzumaki Naruto </strong>
         </a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong></span>
     
     <span><a href="#" title="Monkey D'Luffy">
     <strong>Monkey D'Luffy </strong></a> seorang <strong> Kapten </strong> dari <strong> Bajak Laut</strong></span>
   
     <span><a href="#" title="Kurosaki Ichigo">
     <strong> Kurosaki Ichigo </strong></a> seorang <strong> Shinigami </strong> atau <strong> Dewa Kematian </strong></span>

     <span><a href="#" title="Son Goku">
     <strong> Son Goku </strong></a> seorang <strong> Manusia </strong> dengan <strong> Kekuatan Seiya </strong></span>
   
     <span><a href="#" title="Lucy Heartfilia">
     <strong> Lucy Heartfilia </strong></a> seorang <strong> Penyihir </strong> yang <strong> Mencari Naga </strong></span>
   
     <span><a href="#" title="Light Yagami">
     <strong> Light Yagami </strong></a> seorang <strong> Siswa </strong> yang <strong> Jenius </strong></span>
   
    </div>
<div class="description">
       <h3>
        <span class="term-one">
         <a href="#" title="Uzumaki Naruto">
          <strong> Uzumaki Naruto </strong>
         </a> seorang <strong> Shinobi </strong> atau <strong> Ninja </strong>
        </span>
       </h3>
</div>
</div>
</div>
</div>

jquery

<script src="https://doc-00-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/35cmfd6pr94di4dj1b6ko2tlisftajln/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7oZEJFNFB5ZlN2SHc?h=16653014193614665626&e=download"></script>
<script>
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
</script>
 <script src="https://doc-14-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/5bbkvq3hadmnvn3bp5bffs4qccdp418f/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7oaVVUMjdodHBuSUk?e=download&h=16653014193614665626&nonce=ep2gv86v5r3o6&user=11363352952214392690&hash=6u1ffc1dmk6hsba6cbpcb3etbutc17ri"></script>
 <script src="https://doc-0g-94-docs.googleusercontent.com/docs/securesc/ablidbh4rht10l23pgj24kkl3nnec7sj/64kklvg9krbb4oefgkfofo5l7l2hq3vv/1404273600000/11363352952214392690/11363352952214392690/0B9OR40LPow7odEtmWGxhTVY4dW8?h=16653014193614665626&e=download"></script>