Senin, 20 Januari 2014

Membuat Efek Gambar Bergeser Artikel Blog

Membuat Efek Gambar Bergeser Artikel Blog - Membuat efek tertentu dalam blog itu sangat menyenangkan, apalagi membuat efek untuk gambar di artikel atau di dalam blog. Selain artikel ini, saya juga sudah banyak membahas tentang efek gambar di blog ini, silahkan di baca artikel lainnya yang berhubungan dengan artikel ini, membuat efek gambar artikel blog bergeser :

atau Klik Disini untuk lebih lengkapnya

Untuk efek gambar bergeser ini bisa langsung lihat demonya berikut ini. Sorot gambar..

DEMO ▼


566
124
Hallo... Hai... Bisa digeser ya..
Anda bisa meletakkan teks disini
Anda bisa meletakkan link disini
Gambar untuk sementara belum bisa
Membuat Efek Gambar Bergeser Artikel Blog
Membuat Efek Gambar Bergeser Artikel Blog
CSS
Salin kode css efek gambar bergeser berikut ini kedalam template blog. Letakkan sebelum kode ]]></b:skin> atau diatas </style>

.view {
    overflow: hidden;
    width: 316px;
 height: 216px;
 margin: 10px;
 float: left;
 position: relative;
 border: 8px solid #fff;
 box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
 background: #333;
 -webkit-perspective: 500px;
 -moz-perspective: 500px;
 -o-perspective: 500px;
 -ms-perspective: 500px;
 perspective: 500px;
}
.view .view-back {
    padding-left:15px;
    color: #aaa;
}
.view div.view-back{
 width: 100%;
 height: 100%;
 position: absolute;
 left: 0;
 background: #666;
 z-index: 0;
}
.view-back span {
 display: block;
 float: left;
 width: 100%;
 text-align: left;
 font-size: 16px;
 color: rgba(255,255,255,0.6);
}
.view-back span:first-child {
 padding-top: 10px;
}
.view-back a {
 display: bock;
 font-size: 18px;
 color: rgba(255,255,255,0.4);
 position: absolute;
 left: 15px;
 bottom: 15px;
 border: 2px solid rgba(255,255,255,0.3);
 border-radius: 50%;
 width: 30px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 font-weight: 700;
}
.view-back a:hover {
 color: #fff;
 border-color: #fff;
}
.view-back span[data-icon]:before {
    content: attr(data-icon);
    font-family: 'icons';
    color: #aaa;
 color: rgba(255,255,255,0.2);
 text-shadow: 0 0 1px rgba(255,255,255,0.2);
 padding: 0px;
}
.view img {
    width: 316px;
    height: 216px;
 position: absolute;
 z-index: 0;
 -webkit-transition: left 500ms ease-in-out;
 -o-transition: left 500ms ease-in-out;
 -moz-transition: left 500ms ease-in-out;
 -ms-transition: left 500ms ease-in-out;
 transition: left 500ms ease-in-out;
}
Simpan Template

Untuk mengganti 'icons', silahkan baca kumpulan icons sederhana

JavaScript
Salin kode javascript berikut sebelum </head>

<script type='text/javascript'>
$(function() {$('.view').hover(function(){$(this).find('img').animate({left:'260px',right:'200px'},{queue:false,duration:500});}, function(){$(this).find('img').animate({left:'0px',right:'0px'},{queue:false,duration:500});});})
</script>
Simpan Template

HTML
Sebagai hasil akhir, salin kode html efek gambar bergeser berikut ini kedalam artikel blog atau di bagian manapun selama tetap didalam blog :)

<div id="grid" class="view">
<div class="view-back">
<span data-icon="&hearts;">566</span>
<span data-icon="&#9658;">124</span>
Hallo... Hai... Bisa digeser ya..
Anda bisa meletakkan teks disini
Anda bisa meletakkan link disini
Gambar untuk sementara belum bisa
<a href="http://www.panduantemplateblog.com/2014/01/membuat-efek-gambar-bergeser-artikel.html">&#9658;</a>
</div>
<img src="http://4.bp.blogspot.com/-DC6dL-TF96w/Utv2qxVy9mI/AAAAAAAACRo/fV-KE-WuQG4/s1600/template-cloning.png" />
</div>
Keterangan:
Angka 566 dan 124 hanyalah aksesoris saja
Ganti url link http://www.panduantemplateblog.com/2014/01/membuat-efek-gambar-bergeser-artikel.html dengan url link yang lainnya
Ganti url gambar http://4.bp.blogspot.com/-DC6dL-TF96w/Utv2qxVy9mI/AAAAAAAACRo/fV-KE-WuQG4/s1600/template-cloning.png dengan url gambar yang lain

PS:
Dalam membuat efek gambar bergeser di artikel blog ini menggunakan kode css dengan atribut .view . Silahkan ganti atribut tersebut jika didalam blog Anda sudah terdapat kode yang sama karena akan menimbulkan bentrok

Untuk membuat efek gambar yang lainnya atau memasangnya didalam template secara otomatis untuk gambar artikel blog, silahkan gunakan imajinasi Anda untuk membuat hasil kreatif yang lebih sempurna. Terimakasih

Membuat Efek Gambar Bergeser Artikel Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

15 komentar:

  1. Selamat pagi mbk
    kalau dibuat seperti ini jadi hidup artikel yang kita buat ya mbk...
    jadi ngk bosan hanya melihat tulisan saja....
    makasih mbk...

    BalasHapus
    Balasan
    1. selamat pagi juga mas..
      iya betul mas, sekaligus bisa menyembunyikan sesuatu yang diinginkan...
      terimakasih kembali mas.. :)

      Hapus
  2. keren mbak . . banyak sekali ya kode cssnya hehehe

    BalasHapus
    Balasan
    1. heheee, tapi tidak memberatkan loading kok mas :)

      Hapus
  3. mantap, ijin save as buat coba-coba ...

    BalasHapus
  4. makasih mbak izin bookmark kaya nya keren nihh ^_^

    BalasHapus
    Balasan
    1. sama-sama mas, makasih kembali
      silahkan di bookmark :)

      Hapus
  5. keren mbak, bisa nih di terapkan di blog baru saya.. :)

    BalasHapus
  6. Mantab mba.. ntar saya pasang yang ini pas saya mau ganti template.. makasih bgt mba :)

    BalasHapus
    Balasan
    1. okey, silahkan mas Hari, semoga bermanfaat dan terimakasih juga ya :)

      Hapus
  7. terima kasih sudah berbagi..
    tampilan nya jadi keren... ngga monoton.. :D



    Pulau Tidung

    BalasHapus
    Balasan
    1. iya betul mas, jadi lebih menarik :)

      Hapus
  8. bisa di buat seperti itu juga tow ternyata? info yang sangat membantu mba,, trimakasih

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia