HTML Kodlarıyla Jquery Resim Galerisi

HTML kodlarıyla Resim Galerisi
Siteme Resim Galerisi Nasıl Eklerim?
HTML Kodu Jquery Resim Galerisi Yapımı 
Blogger, WordPress Resim Galerisi Ekle  
İleri geri butonlu resim galerisi yapımı

<style>
#broder {
width:580px; 
height:440px; 
background: #333; 
border:3px solid #666; 
position:relative; 
margin:30px auto 20px auto;}
#slide {
width:480px; 
height:360px; 
overflow:hidden; 
position:absolute; 
left:49px; top:29px; 
background:#fff; 
border:1px solid #698639; 
border-color:#698639 #e0ebcb #e0ebcb #698639;}
#slide a {
text-decoration:none; 
display:block; 
width:480px; 
height:360px; 
position:absolute; 
left:480px;}
#slide a img {
display:block; 
border:0;}
#title {
width:131px; 
height:132px; 
position:absolute; 
left:5px; 
top:-30px;}
#previous b {display:none;}
#previous {width:74px; height:74px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAy3QLXBpfOTkZWlZSAWOtWpdJmmLm7RU0gu0ifiIpPlLhql5Djay17vLjAzauU_EC1EERdDY-7-VX-UtF8KiRYYhW-K9QvaX8RUTD01ngf8L51i8VmL96gzJfAiOqCagiWlTZcBozkAuh/s1600/slide-left.png"); position:absolute; left:5px; top:175px; cursor:pointer;}
#next b {display:none;}
#next {width:74px; height:74px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2j-2xWbC-wU3qfMVYGX142LWRNCtWJ5Zk5Dt-0eUKu7fR_iu2Ix_7DaUadl0b28PPqF0nl40Vmll-xgpirv03BBrj_EMSubyx4NtSJQjAnJ9ukeuHP2vexmEYm-RIbDQDLZxiSPdpxMDb/s1600/slide-right.png"); position:absolute; left:510px; top:175px; cursor:pointer;}
#buttons {position:absolute; left:50px; top:405px;}
#buttons div {width:20px; height:20px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMi4vRPKvsXxsDo98i_6ZAvpeEQzgXzF0oEmUYMoKhpATbVKrc338AEMi9KUd6loAFCdaEpO8cr_HDW_6SpOF1fUaQb8CXIk0m2HwmLJMpQODT_MQeTKsUXgqGaq8Ldi8RS3YE_cKmkvwF/s1600/slide-button.gif"); float:left; margin-right:5px; display:inline;}
#buttons div b {display:block; width:20px; height:20px; line-height:19px; font-family:arial, sans-serif; font-size:11px; color:#16a;text-align:center; cursor:pointer;}
img#loading {position:absolute; left:240px; top:170px;}
</style>
<script src="http://social-media-dosyalari.googlecode.com/files/jquery-slider.js" type="text/javascript"></script>
<script src="http://social-media-dosyalari.googlecode.com/files/photo-slide.js" type="text/javascript"></script>
<br />
<div id="broder">
<div id="slide">
<img alt="" id="loading" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQZAGvmXlGc9RdpGBA6FZLpZ9M5ADifiL6N_513y08QoInfk1eNXKeetu55JOT-RAGqB-0Porih0Hy4AWPSkhm6BWJR5DphbKbYReEwvZvF0BdHCiQPfR7Xps-3WduVCqmPA892PjQW1Wp/s1600/loading.gif" />
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsh_QZB8esKPoaEaig68XE-TGp4E8i3PWzK-MQm97InadfA3974tLYcVtH1_qo6t2OvIn9cQuZJob9KCnThPOCMfDnu8ul_TdLLgiZosHZNNaVbsyr6RVtvznpLKFg4dB83ODa21lLchw8/s1600/ol.jpg" id="p1"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsh_QZB8esKPoaEaig68XE-TGp4E8i3PWzK-MQm97InadfA3974tLYcVtH1_qo6t2OvIn9cQuZJob9KCnThPOCMfDnu8ul_TdLLgiZosHZNNaVbsyr6RVtvznpLKFg4dB83ODa21lLchw8/s1600/ol.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLSzmRzQ8_nYJwDmUjTXftNZw_t8JgXgzRqBlgwBTqBmBy6l3KCmweSwoYuF4spI8FL7yn6lwL9zF_pRHmrau3RXGkrK3ScxJ5OrYQeyXRlbhwOttP4R0Bk0npxl10lAMIHmzwAsi0Ccw/s1600/havuz.jpg" id="p2"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyLSzmRzQ8_nYJwDmUjTXftNZw_t8JgXgzRqBlgwBTqBmBy6l3KCmweSwoYuF4spI8FL7yn6lwL9zF_pRHmrau3RXGkrK3ScxJ5OrYQeyXRlbhwOttP4R0Bk0npxl10lAMIHmzwAsi0Ccw/s1600/havuz.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqEofxfKJX6JtbgL15_7c4oCuNTevgKRgOuS842dCY2FIGM_jArERZWj08ud-6V4-PNGXz37va9rV29VxSTcg-L5BlgSjd5LkKzLpCp1l05SYwBUYIgviI0TufWFgSmCTkkJCb8Y1dJb_/s1600/salon.jpg" id="p3"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqEofxfKJX6JtbgL15_7c4oCuNTevgKRgOuS842dCY2FIGM_jArERZWj08ud-6V4-PNGXz37va9rV29VxSTcg-L5BlgSjd5LkKzLpCp1l05SYwBUYIgviI0TufWFgSmCTkkJCb8Y1dJb_/s1600/salon.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutOVQBvBn3fAcfktu_VVV0EZJgiw3dHVwkXbZOJrNYakuY1oKQun7_a25V5A8YK1Z436RJBladHrrwOI8qFNrJBB9CCYY8zOTl8ZzihrhSkxMsLLBl-BU1oZjcBWPZtJvgbZvAzpRwvjc/s1600/balkon.jpg" id="p4"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutOVQBvBn3fAcfktu_VVV0EZJgiw3dHVwkXbZOJrNYakuY1oKQun7_a25V5A8YK1Z436RJBladHrrwOI8qFNrJBB9CCYY8zOTl8ZzihrhSkxMsLLBl-BU1oZjcBWPZtJvgbZvAzpRwvjc/s1600/balkon.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLT6HO0YuyBlEichLH8iE_jm1ufPSjhb2bEkSYZpUzCEUKFIwzBJuJEXD9bIE3wojlW5x1KGK1lQFgDfJHQCNLDEkCDJc94ro6mk5UvSU2NUw8qjAoLtXpMRqhtS-0eBxJXThBOc6eJx2/s1600/meftun_aparts9b.jpg" id="p5"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcLT6HO0YuyBlEichLH8iE_jm1ufPSjhb2bEkSYZpUzCEUKFIwzBJuJEXD9bIE3wojlW5x1KGK1lQFgDfJHQCNLDEkCDJc94ro6mk5UvSU2NUw8qjAoLtXpMRqhtS-0eBxJXThBOc6eJx2/s1600/meftun_aparts9b.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_XYsyEnGEtRw4APqVk5Ph3arl-mY6HKgrh31M6Pe2VzmFw7uvyJWCNrcsMA3IPMfjZJw9xrhTLP7RFkiMJP6eCkDODfFv4jMyu8wQOG13o8qYEGoJ65lJ4P1RnbaQhNyud-PY9b4_TPKv/s1600/meftun_aparts10b.jpg" id="p6"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_XYsyEnGEtRw4APqVk5Ph3arl-mY6HKgrh31M6Pe2VzmFw7uvyJWCNrcsMA3IPMfjZJw9xrhTLP7RFkiMJP6eCkDODfFv4jMyu8wQOG13o8qYEGoJ65lJ4P1RnbaQhNyud-PY9b4_TPKv/s1600/meftun_aparts10b.jpg" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbetoLassx47Plv7khCBBbYVU3jzv-sjN-MBykOQA3IsuJymVMnYe5IMO5B9fne9dHuODJjBoQxHX0l4lSrGl-RdAxLu8EuIkYanP_i_S2c-zXGc-PPmcjyK3L6bd6wkLFj5ezlnTakupr/s1600/5.JPG" id="p7"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbetoLassx47Plv7khCBBbYVU3jzv-sjN-MBykOQA3IsuJymVMnYe5IMO5B9fne9dHuODJjBoQxHX0l4lSrGl-RdAxLu8EuIkYanP_i_S2c-zXGc-PPmcjyK3L6bd6wkLFj5ezlnTakupr/s1600/5.JPG" width="480" /></a>
         <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjey7Lf7KEPGkzMzMbRyIlkwQ46FwgKgiaV3E3LNU3b2jZOcftfBW4pcYIpkNjWJvnTTN6wmW-_LvvFPHe5jEFRCFYezTLn4jCsdAqFiaR1IGlA0HA63S_FEQmTMDH-f5Q0KKh9y4jxf6UW/s1600/7.JPG" id="p8"><img height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjey7Lf7KEPGkzMzMbRyIlkwQ46FwgKgiaV3E3LNU3b2jZOcftfBW4pcYIpkNjWJvnTTN6wmW-_LvvFPHe5jEFRCFYezTLn4jCsdAqFiaR1IGlA0HA63S_FEQmTMDH-f5Q0KKh9y4jxf6UW/s1600/7.JPG" width="480" /></a>
      </div>
<div id="previous">
<b>Önceki</b></div>
<div id="next">
<b>Sonraki</b></div>
<div id="buttons">
<div id="b1">
<b>1</b></div>
<div id="b2">
<b>2</b></div>
<div id="b3">
<b>3</b></div>
<div id="b4">
<b>4</b></div>
<div id="b5">
<b>5</b></div>
<div id="b6">
<b>6</b></div>
<div id="b7">
<b>7</b></div>
<div id="b8">
<b>8</b></div>
</div>
</div>