Mas Uya

Halo semuanya setelah cukup lama saya meninggalkan blog,Kini saya akan kembali lagi untuk blog ini yaitu "Mas Uya".
Pada kesempatan kali ini,saya akan share sebuah gallery yang bernama Classic Gallery.
Kenapa? Memang gallery ini sangat classic dengan fitur description dibawah foto.

Nah dengan namanya yang classic dan pasti cara mengeditnya pun juga classic.
Dari pada banyak basa basi lebih baik kita masuk ke tutorial cara mengeditnya.

Tutorial Mengedit Classic Gallery:
1.Pastikan kalian sudah membuat blog baru
2.Jika sudah,masuk link ini untuk cara memasang gallerynya
3.Jika sudah,copy html dibawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
*{ margin:0;  padding:0}
.cf:before, .cf:after{ content:'';   display:table}
.cf:after{ clear:both}
h1{ text-transform:uppercase;  text-align:center;  margin-top:10px;  color:#444;  background-color:#f1f1f1;  padding:10px;  font-size:14px}
.container{ position:relative;  margin:50px auto;  max-width:80%;  background-color:#f1f1f1;  padding:10px;  border:1px solid #c5c5c5}
.gallery{ width:100%;  overflow:hidden}
.image{  display:inline-block;  padding:2%;  background-color:#fff;  margin:1%;  width:18%;  box-shadow:2px 2px 4px rgba(0,0,0,0.6);  text-align:center;   border:1px solid #c3c3c3;  cursor:pointer}
.image figure{ width:100%;  margin-bottom:5px}
.image figure img{ width:100%}
figcaption{ background-color:rgba(0,0,0,0.8);  text-transform:uppercase;  text-align:center;  padding:5px;  font-size:16px;  font-family:sans-serif;  cursor:pointer;  color:slategrey;  max-width:100%;  font-weight:bold}
figcaption:hover{ color:#fff}
</style>
</head>
<body>
<div class="container">
    <div class="gallery cf">
        <div class="image">
            <figure>
                <img src="http://wfiles.brothersoft.com/m/mercedes-benz-concept-style-23_195539-1280x720.jpg" alt="" />
            </figure>
      <figcaption>
          MERCEDES
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcTNy5y8IFltDojaplEWTITd-ngAnNWlz1d4muHubpGZDbfoQ3Eb" alt="" />
            </figure>
      <figcaption>
          TUATARA
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://img.wallpaperstock.net:81/bugatti-veyron-red-black-wallpapers_23707_1280x720.jpg" alt="" />
            </figure>
      <figcaption>
          BUGATTI
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://t2.gstatic.com/images?q=tbn:ANd9GcTh5H9kzc39yUFKOrjYNxXA7IYDtUpj6rC6fYz9G6LHxmnlAIRt" alt="" />
            </figure>
      <figcaption>
      LAMBORGHINI 
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://imgs.mi9.com/uploads/car/4798/2010-concept-car-porsche-918-spyder-wallpaper_1920x1200_86968.jpg" alt="" />
            </figure>
      <figcaption>
          PORSCHE
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://www.yoyowall.com/wallpapers/2013/02/2011-Honda-Ev-Ster-Concept-2-720x1280.jpg" alt="" />
            </figure>
      <figcaption>
          HONDA
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://t1.gstatic.com/images?q=tbn:ANd9GcSOFsfcqxL8yLODqebO3zBz-6mJSJfhZMtgY_76LXq4xRAKm5AH" alt="" />
            </figure>
      <figcaption>
          FORD
      </figcaption>
        </div>
    <div class="image">
            <figure>
                <img src="http://wallpaper77.com/upload/DesktopWallpapers/cache/Maserati-MC-Sport-Line-front-maserati-wallpaper-car-wallpaper-1280x720.jpg" alt="" />
            </figure>
      <figcaption>
          MASERATI
      </figcaption>
        </div>
    
    </div>
</div>
</body>
<html>

Untuk lebih jelasnya,Mari kita pisahkan yang mana css yang mana HTMLnya

<style type='text/css'>
*{ margin:0;  padding:0}
.cf:before, .cf:after{ content:'';   display:table}
.cf:after{ clear:both}
h1{ text-transform:uppercase;  text-align:center;  margin-top:10px;  color:#444;  background-color:#f1f1f1;  padding:10px;  font-size:14px}
.container{ position:relative;  margin:50px auto;  max-width:80%;  background-color:#f1f1f1;  padding:10px;  border:1px solid #c5c5c5}
.gallery{ width:100%;  overflow:hidden}
.image{  display:inline-block;  padding:2%;  background-color:#fff;  margin:1%;  width:18%;  box-shadow:2px 2px 4px rgba(0,0,0,0.6);  text-align:center;   border:1px solid #c3c3c3;  cursor:pointer}
.image figure{ width:100%;  margin-bottom:5px}
.image figure img{ width:100%}
figcaption{ background-color:rgba(0,0,0,0.8);  text-transform:uppercase;  text-align:center;  padding:5px;  font-size:16px;  font-family:sans-serif;  cursor:pointer;  color:slategrey;  max-width:100%;  font-weight:bold}
figcaption:hover{ color:#fff}
</style>

<div class="container">
<div class="gallery cf">
<!--Gambar satu-->
<div class="image">
<figure>
<img src="Your-Image" alt="" />
</figure>
<figcaption>
Your-Description
</figcaption>
</div>
<!--Gambar dua-->
<div class="image">
<figure>
<img src="Your-Image" alt="" />
</figure>
<figcaption>
Your-Description
</figcaption>
</div>
<!--Gambar tiga-->
<div class="image">
<figure>
<img src="Your-Image" alt="" />
</figure>
<figcaption>
Your-Description
</figcaption>
</div>
<!--End Gambar-->   
</div>
</div>