Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Memuat CSS3 Image Slider

Image slider tidak harus menggunakan javascript. Dengan CSS3 sebuah image slider dengan transisi gambar yang menarik melalui durasi waktu dan effek blur (opacity effects) bisa diciptakan. CSS3 Image Slider akan bekerja secara sempurna di Opera atau di safari. Meskipun demikian, sekalipun tidak seoptimal di browser tersebut, slider dapat menampilkan beberapa efek CSS3 di Mozilla. Untuk membuatnya teramat gampang karena seluruh kode CSS dan kode HTML bisa disimpan melalui penambahan widget. Apabila akan disimpan di template sampeyan tinggal menyimpannya kode CSS di atas kode ]]></skin>

Cara Membuat CSS3 Image Slider

  1. Login to BloGGeR (Login ke BloGGeR) dengan menuliskan User Name (Nama Pengguna) atau Email Address kemudian tuliskan juga Password (Sandi). Setelah semua data tertulis dengan benar, silajhkan KLIK "Login".
  2. Setelah masuk di Halaman Dasboard (Dasbord) cari dan KLIK link "Design (Rancangan)".
  3. Ketika "Page Elements (Elemen Laman)" sudah terlihat, KLIK Add Gadget (Tambah Gadget)" yang berada dalam garis terputus-putus.
  4. KLIK "HTML/Javascript" kemudian tunggu beberapa saat hingga box penambahan widget terlihat.
  5. Copy-Paste Kode CSS dan Kode HTML dalam box penambahan widget.
  6. KLIK SAVE (Simpan) dan lanjutkan dengan membuka blog untuk melihat hasilnya.

Kode CSS "CSS3 Image Slider"

<style type="text/css">
.bgsGR_boksSlider{
background:#333 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;
padding:6px;
border:2px solid #555;
float:left;
border-radius:13px;
-moz-border-radius:13px;
-webkit-border-radius:13px;
box-shadow:4px 6px 4px #888;
-moz-box-shadow:4px 6px 4px #888;
-webkit-box-shadow:4px 6px 4px #888;
}
.bgsGR_boksSlider:hover{
background:#990000 url(http://www.phpzone.net/wp-content/themes/mystique/images/bg.png) bottom left repeat-x;
box-shadow:4px 6px 4px #555;
-moz-box-shadow:4px 6px 4px #555;
-webkit-box-shadow:4px 6px 4px #555;
}
#sliders {
width: 222px;
height: 222px;
overflow: hidden;
position: relative;
margin:0 0 10px 0;
}
#sliders img {
border:8px solid white;
padding:3px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: -222px;
z-index: 1;
opacity: 0;
transition: 1.5s;
-o-transition: 1.5s;
-moz-transition-duration: 1.5s;
-webkit-transition-duration: 1.5s;
}
#sliders img:target {
left: 0;
z-index: 9;
opacity: 1;
}
#sliders img:first-child {
left: 0;
opacity: 1.0;
}
#tap{
background:#FFFFFF url(http://i26.tinypic.com/vy6yox/bgsGR/bgSlider.jpg) top center repeat-x;
border:1px solid #777;
margin:-3px 0px 4px;
padding:5px 0px;
opacity: 1.0;
-moz-opacity:1.0;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
#tap a {
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
opacity: 0.7;
-moz-opacity:0.7;
filter:alpha(opacity=70);
text-decoration: none;
background:#ddd;
border: 2px solid #666633;
padding: 0px 10px;
color: #222;
}
#tap a:hover {
background: #00CC33;
opacity: 1.0;
}
</style>

Kode HTML "CSS3 Image Slider"

<div align="center">
<div class="bgsGR_boksSlider">

<div id="sliders">
<img id="slider1" src="http://img.theomegaproject.org/thumbs/2009/06/114.jpg" />
<img id="slider2" src="http://img.theomegaproject.org/thumbs/2009/06/111.jpg" />
<img id="slider3" src="http://img.theomegaproject.org/thumbs/2009/06/130.jpg" />
<img id="slider4" src="http://img.theomegaproject.org/thumbs/2009/02/227.jpg" />
<img id="slider5" src="http://img.theomegaproject.org/thumbs/2009/03/53.jpg" />
<img id="slider6" src="http://img.theomegaproject.org/thumbs/2009/02/167.jpg" />
</div>

<div id="tap">
<a href="#slider1">1</a>
<a href="#slider2">2</a>
<a href="#slider3">3</a>
<a href="#slider4">4</a>
<a href="#slider5">5</a>
<a href="#slider6">6</a>
</div>

</div>
</div>

Catatan/Keterangan :

  1. Untuk merubah tinggi slider, ganti ukuran width dan/atau height pada :
  2. #sliders {
    width: 222px; ====> Lebar Slider
    height: 222px; ===> Tinggi Slider

    dan

    #sliders img {
    border:8px solid white;
    padding:3px;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    width: 200px; ========> Lebar Gambar/Image
    height: 200px; ========> Tinggi Gambar/Image
    position: absolute;
    top: 0;
    left: -222px; ========> Samakan dengan Lebar Gambar + 22px (penambahan width pada box).
  3. - Selisih antara width pada #sliders dan #sliders img = 22px
    - Selisih antara height pada #sliders dan #sliders img = 22px
  4. Sebenarnya slider ini bisa berfungsi di IE, tapi sayangnya ketika di uji coba ditemplate blogspot fungsi slider menjadi tidak bekerja. Saat ini masih kucoba untuk mencari apa yang menjadi sebab kegagalan fungsi css3 slider di template ini.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

1 komentar:

 
GR | Edited by | gubhug reyot