Contoh Foto Galery Efek Zoom

Menyusun Foto dengan Efek Zoom pada Posting Blog

Membuat gallery foto dengan CSS kedengarannya sangat menarik sekali, karena dengan menggunakan CSS tentunya akan banyak menghasilkan triks-triks yang bagus misalnya yang sedang saya bahas sekarang ini mengenai cara membuat image/foto gallery menggunakan CSS3.

Tutorial menggunakan CSS yang disajikan sekarang ini sangat menarik sekali apalagi ditempatkan di blog, misalnya dengan koleksi foto-foto yang menjadi idola anda, tentunya sangat tepat untuk ditempatkan di blog anda sebagai koleksi album atau photo galeri.





Dengan MenDesaign gambar atau gallery photo yang rapi dan menarik untuk di pandang, tetapi tidak membutuhkan tempat yang banyak? Mungkin inilah Solusi yang anda cari. 

Cara Mudah Membuat Gallery Photo di Blog, jika anda tertarik anda bisa Mengikuti 7 cara yang saya posting pada blog atau pada halaman lainnya dalam artikel terkait berikut dibawah ini :

Silahkan anda lihat dan coba satu persatu Tips mana yang cocok dengan selera anda ...

- Cara Mudah Menyusun Gallery Photo di Blogspot
- CARA MEMBUAT FOTO GALLERY DENGAN TITTLE DAN DESCRIPSION
- CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM
- CARA MENYUSUN GAMBAR BANYAK DIDALAM POSTINGAN AGAR RAPI
- Trik Cara Mudah Membuat dan Pasang Gambar-Image Berderet Horizontal
- CARA MEMBUAT GALLERY IMAGE DENGAN CSS3
- CARA MUDAH MEMBUAT GALERI FOTO PADA BLOGSPOT
- 7 Cara Mudah Membuat dan Menyusun Gallery Photo pada Posting Blog


Anda sekarang berada dihalaman 
CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM

Bagaimana cara membuat image/photo gallery menggunakan CSS3? Caranya mudah, anda hanya membuat sebuah postingan dan tempatkan kode-kode yang akan saya berikan pada postingan anda dalam posisi HTML, cukup paham bukan? Ok sekarang anda coba arahkan kursor mouse anda ke gambar dibawah ini untuk melihat hasilnya.

Yang lebih menarik lagi dari image gallery dengan css3 yaitu adanya efek hover yang apabila mouse didekatkan atau diarahkan ke gambar atau foto gallery maka foto/gambar tersebut akan membesar. Cukup menarik bukan? Belum terlihat menarik kalau belum anda yang mencobanya.


TEST IMAAGE 
Silahkan lihat dan arahkan kursor anda pada Gambar dibawah

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

========================

dibawah Ini kode CSS3 efek hover untuk galllery photo yang harus anda masukkan di dalam postingan anda, ingat harus posisi HTML ya?

<style type="text/css">
ul.gambar{padding:230px; border:3px solid #000;     position:relative;     list-style:none;-webkit-box-shadow:7px 4px 10px rgba(0,0,0,.4); -moz-box-shadow:7px 4px 10px rgba(0,0,0,.4);   &nbsp: -moz-border-radius:20px;     -webkit-border-radius:20px;     background:-webkit-gradient(radial,45 45,50,50 10,640,from(#444),to(#333)) !important;    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq79FuK9A44cb9MHnzjIa7ky5XxKgcELnHnX7q5g3bGZKUs9fEMaJkDESzwsu-gp0yB4pOyZMTkvtzv2sIE5qZVBSxKmAw3Ml9VeOhSJFSyeyPlkfHgDNoQTv1mdLyreummLM_A6hN_6k/s200/batuakik.jpg)}
ul.gambar li{    position:absolute;     top:50%;     left:50%;     padding:6px 6px 40px 6px;      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdGR6ZKFRPccGrDnLzD4aPlbZUGsqP3CjmDmtJk5RU4rbDTrBNqaNXcZBiHWTXs1KYprfDvQaLKbTXFuui1DgPIF46teJg_FDSGPP3brgV_9dDBRbaORm9XkJyYuE_AnXHuBQ3uWAnT7I/s320/granitetilemed.png); width:150px;  height:120px;  -moz-border-radius:15px;  -webkit-border-radius:15px;  -moz-box-shadow:1px 1px 6px #222;  -webkit-box-shadow:1px 1px 6px #222;  box-shadow:1px 1px 6px #222;  -webkit-transition:all 3s ease-in-out;  z-index:0}
ul.gambar li img{ width:100%;  height:100%}
ul.gambar li:nth-child(1){ margin-top:-130px;  margin-left:-130px;  -moz-transform:rotate(30deg);  -webkit-transform:rotate(30deg);  transform:rotate(30deg)}
ul.gambar li:nth-child(2){ margin-top:-120px;  margin-left:-10px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:nth-child(3){ margin-top:-10px;  margin-left:-180px;  -moz-transform:rotate(-10deg);  -webkit-transform:rotate(-10deg);  transform:rotate(-10deg)}
ul.gambar li:nth-child(4){ margin-top:-50px;  margin-left:-80px;  -moz-transform:rotate(12deg);  -webkit-transform:rotate(12deg);  transform:rotate(12deg)}
ul.gambar li:nth-child(5){ margin-top:20px;  margin-left:30px;  -moz-transform:rotate(-20deg);  -webkit-transform:rotate(-20deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(6){ margin-top:-210px;  margin-left:-280px;  -webkit-transform:rotate(-20deg);  -moz-transform:rotate(-20deg)}
ul.gambar li:nth-child(7){ margin-top:20px;  margin-left:150px;  -moz-transform:rotate(60deg);  -webkit-transform:rotate(60deg);  transform:rotate(-20deg)}
ul.gambar li:nth-child(8){ margin-top:-190px;  margin-left:90px;  -moz-transform:rotate(19deg);  -webkit-transform:rotate(19deg);  transform:rotate(19deg)}
ul.gambar li:hover{ z-index:10;  width:480px;  height:322px;  margin-top:-170px;  margin-left:-240px;  -webkit-transition:opacity;  -moz-box-shadow:8px 8px 24px #111;  -webkit-box-shadow:8px 8px 24px #111;  box-shadow:8px 8px 24px #111;  -moz-transform:rotate(0deg);  -webkit-transform:rotate(0deg);  transform:rotate(0deg)}
</style>

<ul class="gambar">
<li> <img height="322" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyDuThAGvGqKp5K_xDI119szPKxvyMiOg2An3xJJenYD_Vf38LcdCSA6scUrNXTTLoeg2KQ2XEDFU2UdFxKkAW-d3E-zx5FZCQ4FTbVaariuQzeWEF0YAlr9ggzXrY3BQFbVLN8sVa9zs7/s1600/Annamaria+Rakosi16.jpg " title=" Annamaria Rakosi " width="480" /> </li>
<li> <img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizllc3XPz_i8g5e1YX8R0cO-Sgavise349BuDSyHG3H03F6XhGvnKcSJDPRt4832noNJW_OikXZQNglbFyGieFhD5vsgMqvZ_blTdOlKXc0ZmWQkhWF_BWgpGkJCjHSgn4ajWtaGOE_FI-/s1600/Sarah+Baderna9.jpg " title=" Sarah Baderna " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLVDel6GSH8pkdldk2syt8PZuY5MdcuHActKnOeGr20hFNB-JlHze3Khm1CiU_PdlRa5r_h5EEUNkh21lVelj9UEcLwM8cfHQg5YB22Hq1hOUUTFNPvuX3HN7MJCj8blaha_Fu-nEXMCG/s1600/Gina+Hargitay5.jpg" title=" Gina Hargitay " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNOndn_F6VI_NBjK31FvJU2tYxtUXEbzAjBArqHGG5tDOjMsPB8ucFR_kFXHA8HTOKgw3Pjb_8xrAm5FxYr8B45RJw_aFtuA7X8AfCN2O75UfbUPXX-9YnbiVcyDJmELdRlux1Msx3_Nva/s1600/Michiko+Tanaka2.jpg " title=" Michiko Tanaka " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjknY9xr1Czu9OB70qZ3dMLg9gqJg2c2vx-qnuNOP6SYrc7wKOPiGWa2DJmZ94q5fMw-ugTYliLKi1Lcf1L4Jt94IIFqd7fjZuKnb1hMKj2-hKETw4Iai_b4T9McsrNtVg5kg6JxDeaXYDq/s1600/Sarah-Lorraine+Riek2.jpg " title=" Sarah Lorraine Riek " width="480" /></li>
<li><img camille="" height="322" munro="" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMSbcT0HgL2vXtkzWMJ5XIW4UeDpEo_GCvjUoy6VYfvwXhXRra8TtG3Kzqx4cSY48tKfU3nO_odCZD4mGSdjyg3Pb0rHl2N4791kMHdkhIKHK32CnvDcRhoEvYLY5tEDNoMeKrCLZQdhmX/s1600/Camille+MUNRO6.jpg " title="”" width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbX9Kh7j-ubbTppnIDEK90fpqjIzcXEnGRdiHDHuZmJ5t64NJlOyNWmflxu4utQcPYMEMMQIRp1Pgy3AJi5vGA-x_6_yRFxXGA1sA76RbuFm3p3zIjoedmCqPBJJzcoONKpn-_KSxjOWm/s1600/Daniella+OCOR%C3%935.jpg " title=" Daniella OCORÓ " width="480" /></li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_A0Sk6QvGrQyrpuUREoT1hemxHD_KWbE3iDNIv2cWzDcukJey8-onawROiKnDEKiAQjRHj-i-0D4YEKQQZknDjFLLUPBBol_95fD4QiTYbffaMCC2P8rBRrudP9ZpAvVj2zL7xN8Ae3x4/s1600/Eva+DOMBROVSKA7.jpg " title=" Eva DOMBROVSKA " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgHKU68tdGurBgafXzKkByosQRgVxM_QKqp3jNc3pvLXw_BmNK2cbYQC8C7HXOFtW3tckRwL9wBN_y23T-KF856wIItHPGPZ2FNuBCSEgTk3nAFb3BsgMHjGxDsIHv0KyWRWEqeKUM3up/s1600/Melinder+Bhullar6.jpg " title=" Melinder Bhullar " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOxjQattApHDTgMPc88kX8cEDJa-navN0qvfQHrBXn9buRHbFkb9_MQ_FQZhPdiGuMJWVnOf4MOXwengTDheaL_6GhSwPoDFtX5VGwqL_FfC1KgA7FjsXiPRwbG_JS67Md9Yla9SDKbhqM/s1600/Ivana+MILOJKO15.jpg " title=" Ivana MILOJKO" width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyGtY43J0qKahBiccAGa0IFGv-1QA_YrARyB18OKbSyqyFC_wiMkkRNh1nH1Eoe9u9wGHjrTFLf5DxaqpDXOaT9fHkU_LU4vdYS3dHNvtPPL9MuJsPN2m6PTuGb-u_DTEyXoZJYYsCu8iT/s1600/Luz+Mery+DECENA+RIVERA6.jpg " title=" Luz Mery Decena RIVERA " width="480" /> </li>
<li><img height="322" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmwV83RN-_PzOdaDVJliHdJzDnshBcKi_zfjamLxg2ZjeoEM4jB9n9HSJwP8wsqCIXRfF4qQCDVCxKeai6f7KKq_-EV8Xym9TBjSnDent6U_-suOyA_3moznamhTTVfA7KJqQ1__rvzxgd/s1600/Coral+RUIZ+REYES2.jpg " title=" Coral RUIZ REYES " width="480" /> </li>
</ul>

Keterangan :
Teks warna merah silahkan anda ganti dengan url gambar atau image anda sendiri dan Teks Title ganti dengan title gambar anda. 

------------------------------------------------------
Sampai disini postingan Cara Membuat Gallery Foto dengan efek Zoom sebagai salah satu kunci kesuksesan blog yang bisa anda terapkan khususnya yang baru terjun di dunia blogger pemula seperti saya,

Setelah anda mengerti Cara Membuat Gallery Foto dengan Efek Zoom pada posting Blog, mungkin anda tertarik untuk bisa memasang Gambar dengan menggunakan CSS pada blog anda, silahkan anda baca pada artikel CARA MELIPAT GAMBAR DENGAN MENGGABUNGKAN CSS3 DAN JQUERY

Semoga postingan CARA MEMBUAT GALLERY FOTO DENGAN EFEK ZOOM diatas dapat bermanfaat untuk anda, salam sukses selalu ...

Edit; wawansurya
Sumber Mitra terkait;
http://wwbisnis.blogspot.com
www.affiliate-waones.com
http://waones-sbm.blogspot.com
http://mitra-sbm.blogspot.com

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Read more »

script, Tutorial,

{[['']]}

Cara Membuat SCROLL LABEL Termudah Tercepat

Sumber artikel kami ambil dari http://kuc0pas.blogspot.com

Scroll adalah gulungan atau rol yang bersifat memuat tulisan maupun dalam satu waktu halaman, scroll bisa bersifat gulungan geser ke kanan-kiri maupun ke bawah dan atas. Untuk fungsinya nanti akan saya jelaskan menurut sepengetahuan saya, jadi ikuti dan baca artikel ini dengan cermat dan teliti.

Mungkin jika sobat ingin blognya kelihatan rapi dan bersih, maka sobat bisa menggunakan trik yang akan saya share ini. Karena fungsi dari memasang scroll yang dipasang di widget adalah untuk menyingkat pada bagian widget maupun gadget agar kelihatan rapi dan enak dipandang. Intinya tampilan blog kita jadi simpel, dinamis dan minimalis, karena biasanya kalau label atau kategori diblog sobat sangat banyak maka akan memakan banyak tempat di template blog sobat. Jadi sobat bisa memasang scroll pada label atau kategori blog, agar tampilan blog kita jadi menarik dan singkat.

Seperti contohnya sobat bisa lihat di blog DEMO KUCOPAS, pada bagian label atau kategori di samping (Sidebar) sudah saya pasang scroll. Kelihatan sangat simpel kan sobat??? Namun tetap bisa menampilkan semua label atau kategori, karena dengan adanya scroll.

DEMO

Jika sobat tertarik ingin mengetahui trik Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog, silahkan sobat ikuti langkah-langkahnya sebagai berikut:

1. Silahkan sobat >>Masuk/Login ke >> Blogger.com menggunakan akun sobat.
2. Pada Dashboard tampilan blog baru pilih Menu >> Template >> Edit Html.
3. Kemudian cari kode ]]></b:skin> (Gunakan CTRL + F untuk mempercepat dan memudahkan pencarian).
Lihat gambar screenshot berikut ini.

KETERANGAN:

• No 1 adalah pencarian cepat menggunakan CTRL+F. Jika sobat sudah sampai pada >> Menu >> Template >> Edit HTML, maka gunakan CTRL+F dan isikan ]]></b:skin> pada kotak seperti gambar no 1 diatas, guna untuk mempercepat pencarian.

• No 2 adalah letak kode pada Html template sobat.

• No 3 adalah kode Scroll yang akan kita tambahkan.

4. Langkah yang selanjutnya silahkan sobat Copy/salin semua kode Html di bawah ini dan Paste/tempel tepat diatas atau sebelum kode ]]></b:skin> seperti pada contoh gambar screenshot di atas.

---

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

---

CATATAN:

• height:200px; adalah nilai tinggi kotak scroll, silahkan sobat ganti nilainya agar pas seperti dengan keinginan sobat.
• #Label1 adalah Id Html Gadget (widget) blog sobat, tidak perlu diganti jika id widget label sobat sama. Namun jika id widget label sobat berbeda, maka silahkan di cocokkan dengan id widget label blog sobat.

5. Langkah yang terakhir jangan lupa sobat klik >> Pratinjau untuk menghindari kesalahan waktu Edit Html Template sobat. Jika hasilnya sudah seperti yang sobat inginkan, silahkan sobat klik >> Save/Simpan Template.

Sampai di sini mungkin sobat sudah mengerti Cara Membuat Dan Memasang Scroll Pada Label Kategori Blog, jika sobat belum jelas, silahkan bertanya. Dan saya akan menjelaskanya secara detail. Demikian tutorial blog ringan yang dapat saya share, semogabisa sangat bermanfaat bagi sobat KUCOPAS semua. - See more at: http://kuc0pas.blogspot.com/2012/06/cara-membuat-dan-memasang-scroll-pada.html#sthash.GM7aNqdc.dpuf

Read more »

Tutorial,

{[['']]}

Widget Daftar Link Unik Dengan CSS Efel

WIDGET DAFTAR LINK DENGAN CSS EFEK

Masih seputar widget unik dengan menggunakan sedikit efek CSS agar tampilannya lebih menarik, widget ini bisa kita gunakan untuk daftar link misalnya Exchange Link. Dengan warna yang lebih berani dan stylish mungkin bisa juga anda terapkan pada template blog metro.

• DEMO

Untuk pemasangan di blog cukup masuk Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<style scoped="scoped" type="text/css">
#vn-link {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#vn-link {
    width: 360px;
}
#vn-link ul {
    list-style: none;
    text-indent: 0px;
}
#vn-link li {
    margin-top: 0px;
    border-bottom: 2px solid #555;
}
#vn-link a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight:bold;
    font-variant: inherit;
    text-transform:uppercase;
    padding: 0px;
    color:#fafafa;
    display: block;
    padding: 13px 50px;
    height: 16px;
    line-height: 16px;
    text-decoration: none;
    background: #FF6347;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#vn-link a:hover {
    background: #1E90FF;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
  
}
#vn-link a:visited {
    background:#FF6347;   
}
#vn-link a:active {
    background:#FF6347;   
}
</style>

<br />
<div id="vn-link">
<ul>
<li><a href="#">VIRLYZ NYZAM A</a></li>
<li><a href="#">VIRLYZ NYZAM B</a></li>
<li><a href="#">VIRLYZ NYZAM C</a></li>
<li><a href="#">VIRLYZ NYZAM D</a></li>
<li><a href="#">VIRLYZ NYZAM E</a></li>
<li><a href="#">VIRLYZ NYZAM F</a></li>
</ul>
</div>

Anda cukup mengganti tanda # dengan URL blog yang ingin anda tampilkan, angka 360 px adalah lebar widget sesuaikan dengan sidebar blog anda

sumber artikel :
http://samsury-sites.blogspot.com

Read more »

Tutorial,

{[['']]}

Situs dan Blog penyedia Template Gratis Terbaik

Selamat datang di blog kumpulan artikel tentang belajar internet. Kali ini kami kutip dari sumbernya website favorit saya yaitu http://www.maskolis.com salah satu blog yang sangat saya gemari terutama soal koleksi template. Nach berikut ini adalah 10 blog yang memmuat template gratis terbaik. Silahkan klik link nya dan selamat mencoba. saya juga masih belajar juga, makanya meng koleksi link semua belajar internet dalam blog saya ini.

1. eBlog Templates


2. B-Template


3. Our Blog Templates


4. Blog Crowds




5. Jisele Jaguenod


6. Final Sense

7. Blogger Styles


8. Zoom Template







9. Blogger Templates



10.BieTemplates

Daftar situs tersebut akan terus diperbaharui karena masih banyak lagi situs penyedia layanan template gratis di internet. Silahkan anda coba!.

Read more »

Template, Tutorial,

{[['']]}