Posted by Aak
Aak-share.com Updated at: 9:24:00 AM

Cara Membuat Stylish Open Slideshow Dengan CSS

4 comments:
Cara Membuat Stylish Open Slideshow Dengan CSS ~ Tampilan Slide pada template menjadi daya tarik tersendiri karena gambar dapat berpindah secara otomatis seperti pada Stylish Slideshow dengan Efek Transisi. Pada Slider ini, slide akan terlihat jika cursor berada di atas salah satu gambar yang tersembunyi dan kemudian gambar akan terbuka.



Pada umumnya slider diciptakan dengan menggunakan fungsi javascript, namun pada Open Slideshow ini menciptakannya dengan properti CSS. Slider ini biasa Anda pasangkan diatas header atau di dalam postingan. Bagaimana Anda tertarik, berikut ini caranya :

Silahkan anda buka Editor Template, kemudian Anda cari kode ]]></b:skin>  lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya.

/*Main Slider Box */
.acc_slider {
  width: 753px;
  height: 293px;
  background-color: #ccc;
  margin: 20px auto;
  overflow: hidden;
  border: 1px solid #000;
}
.acc_slider:before {
content: " ";
display: block;
position: absolute;
width: 753px;
height: 293px;
background-color: #000;
z-index: -1;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
}
.acc_slider ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 3000px;
  height: inherit;
}
.acc_slider li {
  position: relative;
  list-style: none;
  float: left;
  padding: 0;
  margin: 0;
  width: 94px;
  overflow: hidden;
  border-right: 1px solid #000;
}
.acc_slider li img {
  width: 469px;
  margin-left: -70px;
}
.acc_slider li,
.acc_slider li img {
  height: inherit;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.acc_slider li:last-child {
  padding-right: 500px;
}
/*Texts*/
.acc_slider li .slide_textarea ,
.acc_slider li .slide_title {
color: #fff;
position: absolute;
white-space: nowrap;
}
.acc_slider li .slide_title {
top: 94px;
left: 190px;
font-size: 32px;
}
.acc_slider li .slide_textarea {
top: 150px;
left: 240px;
font-size: 24px;
}
/*Special Text !*/
.acc_slider li .slide_title {
top: 58px;
}
.acc_slider li .slide_title:first-letter {
font-size: 63px;
}
.acc_slider li:nth-child(1) .slide_title:first-letter {
color: #b4180d;
}
.acc_slider li:nth-child(2) .slide_title {
top: 49px;
left:208px;
}
.acc_slider li:nth-child(2) .slide_title:first-letter {
color: #779c1a;
}
.acc_slider li:nth-child(3) .slide_title:first-letter {
color: #cdcbc9;
}
.acc_slider li:nth-child(4) .slide_title:first-letter {
color: #7328ab;
}
.acc_slider li:nth-child(5) .slide_title {
top: 69px;
left:262px;
}
.acc_slider li:nth-child(5) .slide_title:first-letter {
color: #d76b35;
}
.acc_slider li:nth-child(5) .slide_textarea {
top: 190px;
left: 280px;
}
.acc_slider li:nth-child(6) .slide_title {
top: 69px;
left:212px;
}
.acc_slider li:nth-child(6) .slide_title:first-letter {
color: #538bc7;
}
.acc_slider li:nth-child(6) .slide_textarea {
top: 200px;
left: 240px;
}
.acc_slider li:nth-child(7) .slide_title:first-letter {
color: #b97259;
}
.acc_slider li:nth-child(8) .slide_title:first-letter {
color: #f2c366;
}
/*main hover*/
.acc_slider ul:hover li {
  width: 40px;
}
.acc_slider ul li:hover {
  width: 469px;
}
.acc_slider ul li:hover > img {
  margin-left: 0;
}
/*Powered slide*/
.mghayour {
height: 42px;
font-size: 42px;
text-align: center;
color: #444;
}
.mghayour:before {
content: "Powered By ";
display: inline;
}
.mghayour:after {
content: "MGhayour";
color: #7328ab;
display: inline;
}

Selanjutnya Anda cari kode </head>, lalu copy kode dibawah ini dan psatekan dia tasnya.

<link href="http://fonts.googleapis.com/css?family=Amarante" rel="stylesheet" type="text/css"/>

Kemudian Masukan kode berikut sebelum <div class="content-wrapper"> atau  <div id="content-wrapper"> atau mungkin juga setelah <div class="outer-wrapper"> atau kira-kira kode yang hampir sama, karena setiap blog memiliki nama yg berbeda-beda. Kode ini dimaksudkan untuk di letakkan di atas header.

    <section class="acc_slider">
    <ul>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                 <a href="URL Tujuan">
                            Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                 <a href="URL Tujuan">
                              Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                         Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                            Deskripsi singkat </a></div>
      </li>
        <li>
        <img src="URL gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                              Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                              Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                             Deskripsi singkat </a></div>
      </li>
      <li>
        <img src="URL Gambar" alt="AvnSlider_Slide" width="469" height="293">
<div class="slide_title">Judul Halaman</div>
<div class="slide_textarea">
                <a href="URL Tujuan">
                              Deskripsi singkat </a></div>
      </li>
    </ul>
  </section>

Keterangan :
~ URL Gambar adalah untuk memasukkan kode gambar
~ width="469" height="293" merupakan pengaturan panjang dan lebar gambar
~ Judul Halaman adalah untuk mengatur halaman judul
~ URL Tujuan merupakan pengaturan link tujuan
~ Deskripsi singkat Anda yang akan muncul disertakan link aktif.

Semoga bermanfaat !


Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

4 comments

keren mas brow..artikelnya.

Balas

Terimakasih mas bro. =D

Balas

tpi aku trkndala di kode yg ke tiga mas brow..
tdk ada satupun yg aku temukan dari tiga kode yg mas brow tulis (yg untuk header). gmna donk mas brow..?? mhon pncerahannya..!!

Balas

Cari kode yang mirip gan dengan nama wrapper.

Untuk memudahkan pencarian gunakan Ctrl+F pada keyboard.

Balas