Cara Membuat Efek Gambar Dengan Panel Description di Blog. Ok sobat berikut ini seocips.com akan membagikan tutorial yang mungkin sudah tidak asing lagi untuk sobat yaitu tentang cara membuat efek gambar dengan panel description. Gambar ini dapat memberikan efek zoom sekaligus hover deskripsi yang muncul secara halus bergeser secara otomatis.

Ketika mouse diarahkan ke gambar maka dapat memberikan efek zoom serta deskripsi yang muncul secara halus dengan efek slider.

Cara Membuat Efek Gambar Dengan Panel Description di Blog

LIVE DEMO

Berbicara mengenai slider sebelumnya juga telah dibagikan mengenai:
Ok Sobat berikut ini adalah cara memasang efek gambar dengan panel description di blog:

Cara memasang efek gambar

1. Klik Template kemudian pilih Edit HTML
3. Cari kode ]]></b:skin> atau </style>
4. Tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>
/* Sliding Description Panel For Images */
.imagepluscontainer {
 /* main image container */
    position: relative;
    z-index: 1;
    font-family: verdana;
    font-size: 13px;
}
.imagepluscontainer img {
 /* CSS for image within container */
    position: relative;
    z-index: 2;
    -moz-transition: all 0.5s ease;
 /* Enable CSS3 transition on all props */
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.imagepluscontainer:hover img {
 /* CSS for image when mouse hovers over main container */
    -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    -moz-transform: scale(1.05, 1.05);
    -webkit-transform: scale(1.05, 1.05);
    -ms-transform: scale(1.05, 1.05);
    -o-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
}
.imagepluscontainer div.desc {
 /* CSS for desc div of each image. */
    position: absolute;
    width: 90%;
    z-index: 1;
 /* Set z-index to that less than image's, so it's hidden beneath it */
    bottom: 0;
 /* Default position of desc div is bottom of container, setting it up to slide down */
    left: 5px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.8);
 /* black bg with 80% opacity */
    color: white;
    -moz-border-radius: 0 0 8px 8px;
 /* CSS3 rounded borders */
    -webkit-border-radius: 0 0 8px 8px;
    border-radius: 0 0 8px 8px;
    opacity: 0;
 /* Set initial opacity to 0 */
    -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
 /* CSS3 shadows */
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
    -moz-transition: all 0.5s ease 0.5s;
 /* Enable CSS3 transition on desc div. Final 0.5s value is the delay before animation starts */
    -webkit-transition: all 0.5s ease 0.5s;
    -o-transition: all 0.5s ease 0.5s;
    -ms-transition: all 0.5s ease 0.5s;
    transition: all 0.5s ease 0.5s;
}
.imagepluscontainer div.desc a {
    color: white;
}
.imagepluscontainer:hover div.desc {
 /* CSS for desc div when mouse hovers over main container */
    -moz-transform: translate(0, 100%);
    -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    -o-transform: translate(0, 100%);
    transform: translate(0, 100%);
    opacity: 1;
 /* Reveal desc DIV fully */
}
/* Below CSS when applied to desc DIV slides the desc div from the right edge of the image */
.imagepluscontainer div.rightslide {
    width: 150px;
 /* reset from default */
    top: 15px;
    right: 0;
    left: auto;
  /* reset from default */
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 0 8px 8px 0;
    -webkit-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0;
}
.imagepluscontainer:hover div.rightslide {
    -moz-transform: translate(100%, 0);
    -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    -o-transform: translate(100%, 0);
    transform: translate(100%, 0);
}
/* Below CSS when applied to desc DIV slides the desc div from the left edge of the image */
.imagepluscontainer div.leftslide {
    width: 150px;
  /* reset from default */
    top: 15px;
    left: 0;
    bottom: auto;
  /* reset from default */
    padding-left: 15px;
    -moz-border-radius: 8px 0 0 8px;
    -webkit-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px;
}
.imagepluscontainer:hover div.leftslide {
    -moz-transform: translate(-100%, 0);
    -webkit-transform: translate(-100%, 0);
    -ms-transform: translate(-100%, 0);
    -o-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
}
/* Below CSS when applied to desc DIV slides the desc div from the top edge of the image */
.imagepluscontainer div.upslide {
    top: 0;
    bottom: auto;
  /* reset from default */
    padding-bottom: 10px;
    -moz-border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    border-radius: 8px 8px 0 0;
}
.imagepluscontainer:hover div.upslide {
    -moz-transform: translate(0, -100%);
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%);
}
/* Sliding Description Panel For Images */
5. Untuk menggunakannya di postingan blog, adalah menggunakan mode HTML ketika membuat postingan dan kemudian masukan kode dibawah ini kedalam halaman posting.
<div class="imagepluscontainer" style="width:263px;">
<img src="URL GAMBAR">
<div class="desc downslide">
DESKRIPSI GAMBAR
</div>
</div> 
Keterangan:
Kode URL Gambar, silahkan ganti sesuai keinginan sobat.
Kode berwarna biru adalah arah panel deskripsi bergeser, silahkan sesuaikan dengan menggantinya menjadi: rightslide, leftslide, atau upslide , downslide terserah sobat suka nya yang mana.
Kode "deskripsi gambar" silahkan ganti sesuai keinginan.

Ok sobat Sekian tutorial yang dapat dibagikan seocips kali ini dan jangan lupa untuk selalu melihat artikel terbaru seocips. Semoga Cara Membuat Efek Gambar Dengan Panel Description di Blog ini bermanfaat.
6 Komentar untuk "Cara Membuat Efek Gambar Dengan Panel Description di Blog"

gan kasih tutorial seo gan. setiap anda posting pasti pada top 5 walaupun keyword berbeda - beda.

Nanti gan di artikel berikutnya, :) oh mungkin kebetulan saja dapet peringkatnya.

cara mebuat gambar emultion gimana sperti ini (h)

Untuk membuat emoticons seperti di komentar blog ini langsung lihat tutorialnya di link dibawah ini:
http://www.seocips.com/2014/09/cara-membuat-emoticon-di-komentar-blog.html

ijin coba mas, biar tambah seo friendly

mas gimana caranya kalo dipasang digambar postingan halaman utama