Cara Membuat Stylish Open Slideshow Dengan CSS Tampilan Slide pada template menjadi daya tarik tersendiri alasannya ialah gambar sanggup berpindah secara otomatis menyerupai pada Stylish Slideshow dengan Efek Transisi. Pada Slider ini, slide akan terlihat kalau cursor berada di atas salah satu gambar yang tersembunyi dan kemudian gambar akan terbuka.
Pada umumnya slider diciptakan dengan memakai 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 aba-aba dibawah ini dan pasangkan diatasnya atau sebelumnya.
Selanjutnya Anda cari aba-aba </head>, kemudian copy aba-aba dibawah ini dan psatekan beliau tasnya.
Kemudian Masukan aba-aba berikut sebelum <div class="content-wrapper"> atau <div id="content-wrapper"> atau mungkin juga sehabis <div class="outer-wrapper"> atau kira-kira aba-aba yang hampir sama, alasannya ialah setiap blog mempunyai nama yg berbeda-beda. Kode ini dimaksudkan untuk di letakkan di atas header.
Keterangan :
URL Gambar ialah untuk memasukkan aba-aba gambar
width="469" height="293" merupakan pengaturan panjang dan lebar gambar
Judul Halaman ialah untuk mengatur halaman judul
URL Tujuan merupakan pengaturan link tujuan
Deskripsi singkat Anda yang akan muncul disertakan link aktif.
Semoga bermanfaat !
Sumber http://www.websiteedukasi.com/
Pada umumnya slider diciptakan dengan memakai 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 aba-aba 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 aba-aba </head>, kemudian copy aba-aba dibawah ini dan psatekan beliau tasnya.
<link href="http://fonts.googleapis.com/css?family=Amarante" rel="stylesheet" type="text/css"/>
Kemudian Masukan aba-aba berikut sebelum <div class="content-wrapper"> atau <div id="content-wrapper"> atau mungkin juga sehabis <div class="outer-wrapper"> atau kira-kira aba-aba yang hampir sama, alasannya ialah setiap blog mempunyai nama yg berbeda-beda. Kode ini dimaksudkan untuk di letakkan di atas header.
<section class="acc_slider">
<ul>
<li>
<img src="URL Gambar" alt="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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="Cara Membuat Stylish Open Slideshow Dengan CSS Cara Membuat Stylish Open Slideshow Dengan CSS " 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 ialah untuk memasukkan aba-aba gambar
width="469" height="293" merupakan pengaturan panjang dan lebar gambar
Judul Halaman ialah untuk mengatur halaman judul
URL Tujuan merupakan pengaturan link tujuan
Deskripsi singkat Anda yang akan muncul disertakan link aktif.
Semoga bermanfaat !
Sumber http://www.websiteedukasi.com/
