tes posting

<div align="center" style="display:block;margin:30px auto;text-align:center;width:410px;">
<a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_green-frog.jpg" rel="GRlightbox[gallery-1]" title="Kodok ngorek neng pinggir kali."><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_green-frog.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_youtube-lord-ofthe-ring.jpg" rel="GRlightbox[gallery-1]" title="The Lord of The Rings"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_youtube-lord-ofthe-ring.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_red-flower.jpg" rel="GRlightbox[gallery-1]" title="Indonesia seharusnya seindah bunga ini! Sayang banyak pejabat jadi maling!"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_red-flower.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a><a href="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/img_war-horse.jpg" title="War Horse ....&lt;a href=&quot;http:&#47;&#47;gubhugreyot.blogdetik.com&quot; target=&quot;_blank&quot;&gt;gubhugreyot.blogdetik.com&lt;/a&gt;" rel="GRlightbox[gallery-1]"><img src="https://sites.google.com/site/lightboxgubhugreyot/proto-culous/02-lightbox-slideshow/demo-images/th_war-horse.jpg" width="180" height="130" style="float:left;margin:5px 12px 5px 0;padding:4px;background:#ddd;border:1px solid #888;box-shadow:0 0 10px #000;" /></a>
</div>

test posting

Contoh poating

#gallery { border: 10px solid #1D0C16; height: 300px; width: 800px; margin-left: auto; margin-right: auto; overflow: visible; background: #272229; /* Kotak efek bayangan di Safari dan Chrome*/ -webkit-box-shadow: #272229 10px 10px 20px; /* Kotak efek bayangan di Firefox*/ -moz-box-shadow: #272229 10px 10px 20px; /*Kotak efek bayangan di IE*/ filter: progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=10); /* Kotak efek bayangan di Browser yang mendukung, Opera 10,5 pra-alpha release*/ box-shadow: #272229 10px 10px 20px; }   #gallery ul{ /* Posisi isi ul di tengah galeri */ margin-left:-30px; }   #gallery ul li { /* Untuk menciptakan efek yang tepat dengan melayang-layang kita harus menggunakan display inline-tabel Ini akan menampilkan gambar besar di sebelah kanan thumbnail */ list-style:none; display:inline-table; padding:10px; }   /*  Ini adalah pic untuk menampilkan saat efek yang melayang-layang terjadi selama li yang berisi thumbnail */ #gallery ul li .pic{ /* Animasi dengan transisi di Safari dan Chrome */ -webkit-transition: all 0.6s ease-in-out; /* Animasi dengan transisi di Firefox (No supported Yet) */ -moz-transition: all 0.6s ease-in-out; /* Animasi dengan transisi di Opera (No supported Yet)*/ -o-transition: all 0.6s ease-in-out; /* The opacity menjadi 0 untuk menciptakan efek fadeOut*/ opacity:0; visibility:hidden; position:absolute; margin-top:10px; margin-left:-20px; border:1px solid black; /* Kotak efek bayangan di Safari dan Chrome*/ -webkit-box-shadow:#272229 2px 2px 10px; /*Kotak efek bayangan di Firefox*/ -moz-box-shadow:#272229 2px 2px 10px; /* Kotak efek bayangan di IE*/ filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229', Direction=135, Strength=5); /* box shadow effect in Browsers that support it, Opera 10.5 pre-alpha release*/ box-shadow:#272229 2px 2px 10px; }   #gallery ul li .mini:hover{ cursor:pointer; }   /* Ini menciptakan efek yang diinginkan menampilkan gambar ketika kita mengarahkan mouse ke thumbnail*/ #gallery ul li:hover .pic { / * Lebar dan tinggi adalah seberapa besar gambar akan pertumbuhan dengan efek * / width:200px; height:200px; opacity:1; visibility:visible; float:right; }

dua

tiga

empat