Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog

Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog – jika biasanya adalah membuat gambar hanya dengan single image, maka sekarang sedikit berbeda dengan biasanya. Kali ini adalah tidak hanya satu gambar saja, melainkan beberapa gambar yang ingin ditampilkan kedalam posting blog yang ingin dijadikan sebagai gallery gambar. Dengan menambahkan kode CSS yang berbasis sebagai pembesar gambar atau efek zoom yang dapat menampilkan thumbnail gambar yang mengubah ukuran dimensi aslinya ketika mouse berguling ke arah gambar. Kode CSS bekerja dengan cara yang meniadakan kebutuhan untuk untuk user secara manual yang biasanya harus menentukan dimensi setiap gambar jika akan diperbesar, hal ini menghemat banyak waktu. Sebuah deskripsi tekstual juga dapat ditampilkan di bawah gambar yang diperbesar. Dengan begitu maka keterangan gambar dapat secara langsung di tuliskan kedalam elemen HTML gambar dan dapat langsung tampil saat gambar tersentuh mouse. Berikut adalah tutorial untuk cara membuat Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog di posting blog:

1. Login ke akun blogger.
2. Klik Template > Sesuaikan > Tingkat Lanjut > Tambahkan CSS (paste kode didalam kolom tersebut).

.ienlarger {
    float: left;
    clear: none;
    padding-bottom: 5px;
    padding-right: 5px;
}
.ienlarger a {
    display:block;
    text-decoration: none;
}
.ienlarger a:hover{
     position:relative;
}
.ienlarger span img {
    border: 1px solid #FFFFFF;
    margin-bottom: 8px;
}
.ienlarger a span {
    position: absolute;
    display:none;
    color: #FFCC00;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    background-color: #000000;
    font-weight: bold;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 13px;
    padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
    display:block;
    top: 50px;
    left: 90px;
    z-index: 100;
}
.resize_thumb {
    width: 150px;
    height : 120px;
}
.resize_large{
    width: 500px;
    height : 300px;
}

3. Klik Terapkan ke Blog.

Selanjutnya apabila akan menampilkan Gallery Gambar Efek Smart Enlarger With Teks Deskripsi di Blog ini kedalam postingan maka langkahnya adalah saat posting menggunakan mode HTML kemudian masukan kode dibawah ini:

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFUOIYLSq51Dm04JdLr41CYkAYiNzpLOILpX_qTwX7P5koNCMs6wDgbmIz_jLxKvx8QD7_q3VlyOimCi8-yXalpiruD5R_lzxGZBkyecj6AcRcxiFd0vH6b6ipkxHF8SJ42PuZa0biR4/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYFUOIYLSq51Dm04JdLr41CYkAYiNzpLOILpX_qTwX7P5koNCMs6wDgbmIz_jLxKvx8QD7_q3VlyOimCi8-yXalpiruD5R_lzxGZBkyecj6AcRcxiFd0vH6b6ipkxHF8SJ42PuZa0biR4/w250-h200-no/Faceblog+Evolutions+%25288%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlLPryWC6M-6SRVNeMFbng5BaB4l3J09aYSyfxoBwudvwIgvV7EA6AC8CznaDCl6Cu1N1QX9Tmfq2CujBUZYdJCw15FIVbfb-IRrJ5h11TPWQvx09shdnll0gDlo4IeFnYMOrWDEb6Yw/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlLPryWC6M-6SRVNeMFbng5BaB4l3J09aYSyfxoBwudvwIgvV7EA6AC8CznaDCl6Cu1N1QX9Tmfq2CujBUZYdJCw15FIVbfb-IRrJ5h11TPWQvx09shdnll0gDlo4IeFnYMOrWDEb6Yw/w250-h200-no/Faceblog+Evolutions+%25287%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugLQ4FQ0YDhrPO1ngRrTvJcOPWVMNWaR9DWhaAvwo4i15YvyMDlsSl8sOVgVOixVlnmvIcZZRS5m2W5dXjMkZ7204uUPQuVITX7YBizMTcQxGhnSCDVOhXVVL_EK3zAa4nTaJ3TMM04Y/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugLQ4FQ0YDhrPO1ngRrTvJcOPWVMNWaR9DWhaAvwo4i15YvyMDlsSl8sOVgVOixVlnmvIcZZRS5m2W5dXjMkZ7204uUPQuVITX7YBizMTcQxGhnSCDVOhXVVL_EK3zAa4nTaJ3TMM04Y/w250-h200-no/Faceblog+Evolutions+%25285%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c74NeBxfWRAHOZg00xXeBL8S2uQtJm9P-7yseSYKnh1rgwkf1C9uY3b1eShYmRp2DgHpNGKAijn_7pjT3WzSsSuPiOnecOheHYIc6lFNwtH3Y9a6ORrj_BqhJSDw2o3SKU0kmGN6n60/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3c74NeBxfWRAHOZg00xXeBL8S2uQtJm9P-7yseSYKnh1rgwkf1C9uY3b1eShYmRp2DgHpNGKAijn_7pjT3WzSsSuPiOnecOheHYIc6lFNwtH3Y9a6ORrj_BqhJSDw2o3SKU0kmGN6n60/w250-h200-no/Faceblog+Evolutions+%25286%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPD9K8dSwIS1cu2AQGRcbnkJj8YLyXCgAxTDVJXiqv-1zfz1yaet1s_qaqgAqTko6q-z3R7zIxVXrM4WZvQfzRewnpksma8s09YUqpN9OHXxb1y7QOjaQ8sT9Q5ns42bDqzkBNUPXqt4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYPD9K8dSwIS1cu2AQGRcbnkJj8YLyXCgAxTDVJXiqv-1zfz1yaet1s_qaqgAqTko6q-z3R7zIxVXrM4WZvQfzRewnpksma8s09YUqpN9OHXxb1y7QOjaQ8sT9Q5ns42bDqzkBNUPXqt4/w300-h200-no/Faceblog+Evolutions+%25284%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>

<div class="ienlarger"><a href="http://digratisan.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw_kSQLV6I_JJGadGbu2LRoRaML08ILDXZ-yyHiZZpiofipyLy6URUuVWLTmn3NtczB6hkz050oKhE-r_cOsVYHQF7m5zxa-MIAFqhu2r0gOzsKOd9gB57eIxjKtGUmie-3KTLOkdYd8/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="thumb" class="resize_thumb" /><span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvw_kSQLV6I_JJGadGbu2LRoRaML08ILDXZ-yyHiZZpiofipyLy6URUuVWLTmn3NtczB6hkz050oKhE-r_cOsVYHQF7m5zxa-MIAFqhu2r0gOzsKOd9gB57eIxjKtGUmie-3KTLOkdYd8/w300-h200-no/Faceblog+Evolutions+%25283%2529.jpg" alt="large" class="resize_large" /><br />
Silahkan isi dengan teks deskripsi sesuka anda</span></a></div>
<br style="clear:left" />

Keterangan:
Jika ingin menambah gambar lebih banyak lagi maka hanya perlu menambahkan kode dibawah ini:

<div class="ienlarger"><a href="URL TUJUAN"><img src="URL GAMBAR" alt="thumb" class="resize_thumb" /><span>
<img src="URL GAMBAR" alt="large" class="resize_large" /><br />
TEKS DESKRIPSI GAMBAR</span></a></div>

Sebelum atau diatas kode:

<br style="clear:left" />

DEMO:

Read More

Cara Membuat Efek Zooming Dan Drop Shadows Pada Gambar Dengan CSS3

Kali ini saya ingin berbagi lagi, hanya sebuah trik sederhana cara membuat atau menambahkan efek zooming dan drop shadows pada gambar dengan CSS3.

Jika anda tertarik untuk menambahkan efek ini pada blog atau postingan anda, caranya sangat mudah, silahkan ikuti langkah-langkah berikut:

• Setelah login ke akun blogger anda
• Pada dasbor >> klik Template >> Edit HTML >> Proceed
• Cari kode  ]]></b:skin> (Gunakan Ctr + F untuk memudahkan pencarian)
• Setelah dapat letakkan kode CSS berikut diatas kode ]]></b:skin>

.TTB-CSS3 img{
-webkit-transform:scale(0.7); /*Webkit 0.7 times the original Image size*/
-moz-transform:scale(0.7); /*Mozilla 0.7 times the original Image size*/
-o-transform:scale(0.7); /*Opera 0.7 times the original Image size*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla Animation duration*/
-o-transition-duration: 0.5s; /*Opera Animation duration*/
opacity: 0.5;
margin: 0 10px 5px 0;
}
.TTB-CSS3 img:hover{
-webkit-transform:scale(1.1); /*Webkit: 0.5 times the original Image size*/
-moz-transform:scale(1.1); /*Mozilla 0.5 times the original Image size*/
-o-transform:scale(1.1); /*Opera 0.5 times the original Image size*/
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray;
-moz-box-shadow:0px 0px 30px gray;
opacity: 1;
}

• Simpan template.

Nah sekarang cara menampilkan efek zooming dan drop shadows pada gambar postingan blog anda.
Pada bagian HTM editor posts cukup tambahkan kode berikut:

<div class="TTB-CSS3">
<img src="Image URL Here" />
</div>

Ganti Image URL Here dengan URL/ link image yang ingin anda tampilkan pada postingan anda.

Read More

Widget Popular Posts Dengan Efek Spinning Dan Zooming

  Nah jika tertarik untuk mencoba menambahkan widget popular posts dengan efek hover spinning dan zooming pada blog anda, silahkan ikuti tahapan instalansinya:
Tahapan Pertama

• Setelah login ke akun anda, pada dasbor pilih tata letak >> tambahkan gadget popular posts seperti image berikut:

• Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya “Popular Posts”. Anda bisa menggantinya sesuai keinginan.
• Pada bagian konfigurasi widget popular posts, anda ceklist pada kotak kecil thumbnail, dan untuk snippet tidak perlu.
• Pilih jumlah popular posts yang ingin ditampilkan
• Save atau simpan

Tahapan Kedua:

Menambahkan popular posts dengan efek hover spinning dan zooming atau animasi gambar berputar dan membesar

• Masuk pada menu Template >> Edit HTML (Tidak perlu menceklist Expand Widget Template)
• Kemudian cari kode ]]></b:skin> dan letakkan kode CSS berikut diatasnya

.popular-posts .item-thumbnail {
float:left;
}
.popular-posts ul {
padding-left:30px;
}
.popular-posts ul li {
list-style-image: none;
list-style-type: none;
display:inline;
}
.popular-posts ul li img {
padding:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 2px solid #CCC;
}
.popular-posts ul li img:hover {
border:2px solid #ccc;
-moz-transform: scale(1.3) rotate(-360deg);
-webkit-transform: scale(1.3) rotate(-360deg);
-o-transform: scale(1.3) rotate(-360deg);
-ms-transform: scale(1.2) rotate(-360deg);
transform: scale(1.3) rotate(-360deg);
}

• Selanjutnya cari kode

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

• Ganti semua kode tadi dengan kode berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> 
<b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>

• Save template anda, dan lihat hasilnya!

Read More