Cara Membuat Slide Show Slide Image Full Page Slider Keren Di Blog

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 :

Caranya tinggal vaste kan saja kode di bawah ini pada situs kita tepat nya di TATA LETAK

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

css

* { 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>

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