Blogger acilir kapanir galeri olusturma

Blogger Html'yi düzenleye girin:
b:skin kodunun üstüne aşağıdaki kodları yapıştırın:

/* Photo Gallery styles */
.gallery {
    margin-top: 100px;margin-bottom: 100px;
    width: 800px;
}
.gallery a {
    display: inline-block;
    height: 135px;
    position: relative;
    width: 180px;

    /* CSS3 Prevent selections */
    -moz-user-select: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
.gallery a img {
    border: 8px solid #fff;
    border-bottom: 20px solid #fff;
    cursor: pointer;
    display: block;
    height: 100%;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 100%;
    z-index: 1;

    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 Box Shadow */
    -moz-box-shadow: 2px 2px 4px #444;
    -webkit-box-shadow: 2px 2px 4px #444;
    -o-box-shadow: 2px 2px 4px #444;
    box-shadow: 2px 2px 4px #444;
}

/* Custom CSS3 rotate transformation */
.gallery a:nth-child(1) img {
    -moz-transform: rotate(-25deg);
    -webkit-transform: rotate(-25deg);
    transform: rotate(-25deg);
}
.gallery a:nth-child(2) img {
    -moz-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    transform: rotate(-20deg);
}
.gallery a:nth-child(3) img {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
.gallery a:nth-child(4) img {
    -moz-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
.gallery a:nth-child(5) img {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
}
.gallery a:nth-child(6) img {
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.gallery a:nth-child(7) img {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
.gallery a:nth-child(8) img {
    -moz-transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
}
.gallery a:nth-child(9) img {
    -moz-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
.gallery a:nth-child(10) img {
    -moz-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
.gallery a:nth-child(11) img {
    -moz-transform: rotate(25deg);
    -webkit-transform: rotate(25deg);
    transform: rotate(25deg);
}
.gallery a:nth-child(12) img {
    -moz-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
}

.gallery a:focus img {
    cursor: default;
    height: 250%;
    left: -150px;
    top: -100px;
    position: absolute;
    width: 250%;
    z-index: 25;

    /* CSS3 transition rules */
    -webkit-transition: all 1.0s ease;
    -moz-transition: all 1.0s ease;
    -o-transition: all 1.0s ease;
    transition: all 1.0s ease;

    /* CSS3 transform rules */
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}</style>

daha sonra aşağıdaki kodu ister htm gadget oluşturacağınız yere ister yazınıza ister de sayfanıza
yapıştırın....

<div class="gallery"> <a tabindex="1"><img src="http://tipstrikblogging.googlecode.com/files/1.png"></a> <a tabindex="2"><img src="http://tipstrikblogging.googlecode.com/files/2.png"></a> <a tabindex="3"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6II0F4rZ5mrUX1s6hegZUkYiYCpmw2Sw9mES9i-1W5_1hL6efmmUCx9sMIxE0BGb2XyTdTcpnvdemswMVy7DNtxOpGQeoDxhsqXEfphWb_8I2v4wnMdMAna_cHnIcSvPQBqNmDpDRNyVF/s1600/3.png"></a> <a tabindex="4"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjam3gpxp2DDC0V-_pHsGT5ZisuK3ZE97omj4USUKNXumMOnHAkTxStJSr_ziFdWzV_LLsLIQPvPSLU0nJcKY9yc0bcL4fBuppvCtTmR_Ae0B0LNtMLOBIVZ2kFrOwmN5qUAHWERP4B_eL8/s1600/4.png"></a> <a tabindex="5"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT2QJPVR8ceOuBJt9vLFLL3itGrw5zpwARs3swQ85cndiUj-ybu6JzMRwL3_silDnUsE5K19RNoZ8tJgrs__CF6LvXmb_IO_O6_FqmnS3oLqg0Rvq6BFAnT-vKwVXoxZRtfKevX8M-AGaf/s1600/8.png"></a> <a tabindex="6"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnyKyL99fO_TybOtdyZlcwX3mTthllGGPm01smze9NDDvEgKoDvnTHLhjucejikwSIw_eO7kcmG5-4WIw5qV0Sv5l9O8xAKaIQI-ASU61UfjR2EZN8nkruIUTstG-UZwsF-KlaBpJXy57/s1600/6.png"></a> <a tabindex="7"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA3_V4mXLxn35nKVzo3caFu9tTXHlrInfSbb4hN62HuaHlYExwEpG4a6P5dDQTdivYX4ir73uvzM3bL2Doya6-fLHLnsk6j1zWebt96EoHjKvo383sjcaDhrOOqfkYsC0X3lbOUtgBLfcQ/s1600/10.png"></a> <a tabindex="8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBMqlEr8MUmJHO9CySbs2Wxe5SyyUOhS80A1oiwMJedCDZ7pUnYrCrWu-X5Q_DTcxwLLATnARIUth4ERSS3SAdWm6D4KMh3sSVaIIvpjSWdXo8D6ueBhsvggulqDhEIJHfRZeu1EUoCRFB/s1600/11.png"></a> <a tabindex="9"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2VGugM1q8XcJeTAqQswPNCsimyNyzQS01I7Ht1XsBHMujlegYzjdbR-QsL4c06zoosuGjnVLp08nRx9RTCIr7-wDinlxIaB8bpuYWJBgCqOzS74nh5lvTswnVwB9Fl9zfJ0_XTLS0P4A/s1600/12.png"></a> <a tabindex="10"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_7S3Paol6tSnHJTmNs5XXI9x5HY2fAMT8HOCEBfi_S2DYam-yOSSJ_FtGJ8j3OTYmsnCiPJEqwlbeMr56eTBdcmKm0ULOLdlOLwPeQqS-vwSWUpaQV6J80Zurcst1uckA8FriHQsUI5Eh/s1600/7.png"></a> <a tabindex="11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirx7lTqYynxE0uiC9nSlu0SJ9MPUoKeWckLh9XEPTF-pk1eZk67qI4VRIT0kSxKglBky7Lg99qWvitUh5o8tGwKWMkJ1JIERyomc8pMlZewwkXvWHWnJYxKSoOQ6t6WalRWB0YmS46vTOh/s1600/9.png"></a> <a tabindex="12"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2VGugM1q8XcJeTAqQswPNCsimyNyzQS01I7Ht1XsBHMujlegYzjdbR-QsL4c06zoosuGjnVLp08nRx9RTCIr7-wDinlxIaB8bpuYWJBgCqOzS74nh5lvTswnVwB9Fl9zfJ0_XTLS0P4A/s1600/12.png"></a> </div></p> <div class='clear'></div> resimleri değiştirirsiniz. kolay gelsin... demo aşağıdaki gördüğünüz