Html Kodları İle Resim Galerisi

Blog Sitenizde kullanabileceginiz HTML kodları Ile oluşturulmuş slayt animasyonlu resim galerisi Sayesinde Resimlerinizi Sitenizde rahatlıkla sunabilirsiniz.Aşağıda ki demo görüntüsünü incelerseniz nasıL oldugunu göreceksiniz.Ayrıca Html Kodları ile resim galerisini blogunuza Gadget ekleme Yöntemi Ile Blog Sitenize ekleyebilirsiniz blog.

Html Kodları ile resim galerisini Gadget Olarak ekledik den sonra isterseniz de yazınızı İÇERİSİNDE de kullanabilirsiniz.
Html resim galesini blogunuza Eklemek Click;

Kumanda Paneli & gt; Residential & gt; Gadget Ekle & gt; HTML / Javascript Ekle yolunu konumundadır edin.
ACMIS Olduğunuz gadget içerisine aşağıda ki kodları ekleyın A.Ş. belirttiğim yerlere ekleyecek Olduğunuz resim linklerini ekleyerek kaydedin.

& Lt; stil & gt;
{#broder
genişliği: 580px; 
height: 440px; 
background: # 333; 
border: 3px solid # 666; 
position: relative; 
margin: 30px 20px oto auto;}
{#slide
genişliği: 480 piksel; 
height: 360px; 
taşma: hidden; 
position: absolute; 
Sol: 49px; top: 29px;
arka plan: #fff; 
border: 1px solid # 698639; 
border-color: # 698639 # e0ebcb # e0ebcb # 698639;}
#slide bir {
text-decoration: none; 
display: block; 
genişliği: 480 piksel; 
height: 360px; 
position: absolute; 
Sol: 480px;}
{bir img #slide
display: block; 
Sınır: 0;}
#title {
genişliği: 131px; 
height: 132px; 
position: absolute; 
Sol: 5px; 
top: -30px;}
#previous b {display: none;}
#previous {width: 74px; height: 74px; position: absolute; Sol: 5px; top: 175px; imleç: işaretçi;}
#next b {display: none;}
#next {width: 74px; height: 74px; position: absolute; Sol: 510px; top: 175px; imleç: işaretçi;}
#Buttons {position: absolute; Sol: 50px; top: 405px;}
#Buttons div {width: 20px; height: 20px; yüzer: sol; margin-right: 5px; display: inline;}
#Buttons div b {display: block; genişliği: 20px; height: 20px; line-height: 19px; font-family: Arial, sans-serif; font-size: 11px; color: # 16a; text-align: center; imleç: işaretçi;}
img # yükleme {position: absolute; Sol: 240px; top: 170px;}
& Lt; / style & gt;
& Lt; script src = "http://social medya-dosyalari.googlecode.com/files/jquery-slider.js" type = "text / javascript" & gt; & lt; / script & gt;
& Lt; script type = "text / javascript" & gt;
$ (Document) .ready (function () {
akımı = 1;
düğmeye = 1;
görüntüler = 10;
width = 480;
. $ ('# P1') ({"sol": "0px"}, 400, "swing") canlandırın;
$ ('# B1'). Css ("backgroundPosition", "sol alt")
$ ('# B1 b') css ("renk", "# fff").;
$ ("# Sonraki"). {) ((Function tıklayın
        düğmeye = akım;
        Geçerli ++
    (Eğer mevcut == (fotoğraf + 1)) {akımı = 1}
animateLeft (akım, düğme)
});
$ ("# Önceki"). {) ((Function tıklayın
        düğmeye = akım;
        current--
    (Eğer mevcut == 0) {akımı = görüntüleri}
animateRight (akım, düğme)
});
$ ("# Düğmeleri div"). {) ((Function tıklayın
    düğmeye = akım;
    clickButton = $ (this) .attr ('id');
    akım = parseInt (clickButton.slice (1));
    (Eğer mevcut & gt; düğmesi) {animateLeft (cari, düğme)}
    (Eğer mevcut ve lt düğmesi) {animateRight (cari, düğme)}
});
$ ("# Tuşlarını div b"). Mouseover (function () {
    if (($ (this) .css ("renk")) == "# 16a" || ($ (this) .css ("renk")) == "rgb (17, 102, 170)") { $ (this) .css ("renk", "# 000");}
});
$ ("# Tuşlarını div B"). Mouseout (function () {
    if (($ (this) .css ("renk")) == "# 000" || ($ (this) .css ("renk")) == "rgb (0, 0, 0)") { $ (this) .css ("renk", "# 16a");}
});
fonksiyonu animateLeft (cari, düğme) {
    $ ('# S' + akım) .css (genişlik + "px", "sol");
    $ ('# S' + akım) .animate ({"sol": "0px"}, 400, "swing");
    ({"Sol": -width + "px"}, 400, "swing") $ ('# s' + düğmesi) .animate;
    setbutton ()
}
fonksiyonu animateRight (cari, düğme) {
    $ ('# S' + akım) .css ("sol", - genişliği + "px");
    $ ('# S' + akım) .animate ({"sol": "0px"}, 400, "swing");
    $ ('# S' + düğmesi) .animate ({"sol": genişlik + "px"}, 400, "swing");
    setbutton ()
}
fonksiyonu setbutton () {
    $ ('# B' + düğmesi) .css ("backgroundPosition", "üst sol")
    $ ('# B' + düğmesine 'b' +) css ("renk", "# 16a.");
    $ ('# B' + akım) .css ("backgroundPosition", "sol alt")
    $ ('# B' + 'b' + akım) css ("renk", "# fff");}.});
& Lt; / script & gt;
& Lt; div id = "broder" & gt;
& Lt; div id = "slayt" & gt;
& Lt; img alt = "" id = "yükleniyor" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF9TX4Va8kGt7NlPUPhlrnIjHowrqv6C2Rt8_E_XoBkQdjuDGRchHGvTebsZepHNKnIS_oN56AcO-f9gvrFkpD7Igsev1n6xu3yujveUTeppZgzAjuecgzZvGysuzoCocG1CM_5pxrxQ9i/s1600/loading.gif" / & gt;
         Her ortaya çıkışta, id = "p1" & gt; & lt; img height = "360" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HA7nyvUjaB0B3pRZ6UsMfhxsH-oO-cQer1VntAO0mRI8Js4ukav8piwCS_6GofVLllTnVQTfLQwo4s67saeQQgSlaZfiBPt0hvFAdfRIrU6eHZAT3fA7vx7Rj_FWCrq8Y-nd0kPF1lA/s1600/images+(7 ) .jpg "width =" 480 "/ & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "P2" & gt; & lt; img height = "360" width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "P3" & gt; & lt; img height = "360" width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "p4" & gt; & lt; img height = "360" width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "p5" & gt; & lt; img height = "360" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfNaR-8oLkFlWRy-6_MLqNFp8ip4Z6sIiX3caHUC91wYDiUdQt-UeMkALUcRQtwObc8BBX1CN1uu-UiYJNarKHSK945j4BtOt5n4Rw59pPa93HoxDcXOJT7dbY5Oknfu1Q9EX1F6nwBTk/s1600/images+(5).jpg "width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "P6" & gt; & lt; img height = "360" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfzvGd3Ki9TOu77itoF2hccVfZGJm8ymzKtVMeCNXrPvdw-TqDlKL2cnWlv_gGdVeYWwNJl0Vaxa-1W2x5CvPcC1bhHoitO3C48Z7zaToIPvFhoH0GU2fubI80oASmSyvGbbZW8erGWE/s1600/images+(2).jpg "width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "syf7" & gt; & lt; img height = "360" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc8Iu0y9kMXoIKbTroGWNMpCK5SaoaqrwYP_Hqg1rzr2Lt-CkuIyimKJhuRh1rpIUzFv1VHHSByFnhSQUX6T2uGG6uh5suC0I3iaQaD8diZnsgY0tt7qw4r_h5OZeMgUcEkJa-fZOyYZc/s1600/images+(3).jpg "width = "480" / & gt; & lt; / a & gt;
         Her ortaya çıkışta, id = "p8" & gt; & lt; img height = "360" src = " https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPbEPCQ5ZrX2jsDGyJ2OJZrn86virt-WY2y8pHGXlD1eOJFpBuPvlYftAiJAF8y9P2X7WpFtp3hZwwMALdtk7XG9_oSvA6NVaJUgrkt8K-9VtkmLJQDX9QIKKD71DCYRZ9Uy3JKm5zRnM/s1600/images+(4).jpg "width = "480" / & gt; & lt; / a & gt;
      & Lt; / div & gt;
& Lt; div id = "önceki" & gt;
& Lt; b & gt; Onceki & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "next" & gt;
& Lt; b & gt; Sonraki & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "düğmeler" & gt;
& Lt; div id = "b1" & gt;
& Lt; b & gt; 1 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b2" & gt;
& Lt; b & gt; 2 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b3" & gt;
& Lt; b & gt; 3 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b4" & gt;
& Lt; b ^ 4 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b5" & gt;
& Lt; b & gt; 5 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b6" & gt;
& Lt; b & gt; 6 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b7" & gt;
& Lt; b & gt; 7 & lt; / b & gt; & lt; / div & gt;
& Lt; div id = "b8" & gt;
& Lt; b & gt; 8 & lt; / b & gt; & lt; / div & gt;
& Lt; / div & gt;
& Lt; / div & gt;

Kırmızı renkle Yazılı Olan resim linkleri satın aldılar Kendiniz ekleyecek Olduğunuz resim linklerini ekleyın.
NOT: Her resime AIT Iki resim linki Eklenecek kodu İyice inceledik den sonra işleminizi yapın.Örnek Olarak yukarıda ki mavi işaretlediğim resim linkleri Gibi,

Önizleme İçin BURAYA TIKLAYIN