Bloggerda css3 ile resim galerisi oluşturma

Css resim galerisi

Blogger blogunuza resim galerisi ekleyerek takipçilerinizle paylaşmak mümkün. Örneğin bir seyahat anılarınız yazdığınız bir blogunuz var ya da gezip gördüğünüz hoşunuza giden bir yeri yazı olarak blogunuzda yayınlamak istediniz. Yazı içinde de gördüğünüz yerlerde beğendiğiniz bir kaç kareyi paylaşmak istediğinizi varsayalım. Tek tek resim eklemek yazı içinde göstermek elbetteki mümkün. Ama bu eklediğiniz resimlerin sayfa yüklenmesi sırasında geç olacağını da unutmamak gerekir. Bu yüzden bu resimler bir galeride toplayıp paylaşmak isterseniz aşağıdaki adımları blogunuza uygulayarak css ile resim galerisi oluşturabilirsiniz. 

TEST

• Şablon sekmesine tıklayınız ve Html'yi düzenle butonuna tıklayınız.
• Aşağıda yazan kodu Ctrl+F yardımı ile kodlar arasında aratıp bulunuz.

]]></b:skin>

• Yukarıda bulunan kodun bir üst satırına aşağıdaki kodları yapıştırınız.

 /* ugurturkoglu.blogspot.com*/
.photos {
    width: 300px;
    height: 300px;
    margin: 100px auto;
    position:relative;}
.photos > div {
    background-color: rgba(128, 128, 128, 0.5);
    border: 2px solid #444;
    float: left;
    height: 70px;
    margin: 5px;
    overflow: hidden;
    position: relative;
    width: 70px;
    z-index: 1;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
    -webkit-transform:scale(1.0);
    -moz-transform:scale(1.0);
    -ms-transform:scale(1.0);
    -o-transform:scale(1.0);
    transform:scale(1.0);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -ms-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.photos > div img{
    width: 100%;
}
.photos > div:hover{
    z-index: 10;
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -ms-transform:scale(2.0);
    -o-transform:scale(2.0);
    transform:scale(2.0);
}
.photos > div div {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_wiaA74lFp0SPDnzf56YvF3SEw_3dT8qQubEoyMlIA0scou369E-3oRvsQAxhVbamECglvYAyUTbCP1x4tjOZF6EFK50zlilb1xqjL1sG0mvCGVjDJ5Q4T7-v5LA_5Ey_0BLEuKSgXY/s1600/hover.gif) repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 100px;
    left: 0;
    opacity: 0.7;
    position: absolute;
    top: 0;
    width: 100px;
    z-index: 15;
    -webkit-transition-duration: 1.5s;
    -moz-transition-duration: 1.5s;
    -ms-transition-duration: 1.5s;
    -o-transition-duration: 1.5s;
    transition-duration: 1.5s;
}
.photos > div:nth-child(1):hover div {
    height: 0%;
}
.photos > div:nth-child(2):hover div {
    height: 0%;
    margin-top: 100px;
}
.photos > div:nth-child(3):hover div {
    width: 0%;
}
.photos > div:nth-child(4):hover div {
    margin-left: 100px;
    width: 0%;
}
.photos > div:nth-child(5):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
}
.photos > div:nth-child(6):hover div {
    margin-left: 150px;
    width: 0%;
}
.photos > div:nth-child(7):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.photos > div:nth-child(8):hover div {
    height: 0%;
    margin-left: 150px;
    margin-top: 50px;
    width: 0%;
    -webkit-transform: rotateZ(600deg);
    -moz-transform: rotateZ(600deg);
    -ms-transform: rotateZ(600deg);
    -o-transform: rotateZ(600deg);
    transform: rotateZ(600deg);
}
.photos > div.pair div {
    width: 100px;
}
.photos > div.pair div:nth-child(odd) {
    margin-left: 100px;
}
.photos > div.pair:hover div {
    width: 0%;
}
.photos > div.pair:hover div:nth-child(odd) {
    margin-left: 100px;
}

• Daha sonra Kaydet butonuna tıklayın.
• Yerleşim sekmesinden gadget ekle ve html/javascript'e tıklayınız ve aşağıdaki kodları kopyalayıp yapıştırarak kaydediniz.
• Eklentiyi uygulamadan önce her ihtimale karşı blogunuzun şablonunun bir yedeğini almayı unutmayın.

<div class="photos">
            <div>
                <a href="URl link 1" target="blank"><img src="Image URL 1" /></a>
                <div></div></div><div>
    
                <a href="URl link 2" target="blank"><img src="Image URL 2" /></a>
                <div></div><div></div>
           
                <a href="URl link 3" target="blank"><img src="Image URL 3" /></a>
                <div></div><div></div>
            
                <a href="URl link 4" target="blank"><img src="Image URL 4" /></a>
                <div></div><div></div>
           
                <a href="URl link 5" target="blank"><img src="Image URL 5" /></a>
                <div></div><div></div>
            
                <a href="URl link 6" target="blank"><img src="Image URL 6" /></a>
                <div></div><div></div>
            
                <a href="URl link 7" target="blank"><img src="Image URL 7" /></a>
                <div></div><div></div>
            
                <a href="URl link 8" target="blank"><img src="Image URL 8" /></a>
                <div></div> </div>
           
                <div class="pair">
                <a href="URl link 9" target="blank"> <img src="Image URL 9" /></a>
                <div></div> <div></div>
            </div>
        </div>

• Kodlarda yer alan URl link , Image URL kısımlarına resim url'lerini ekleyin.

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email