Blogger’da Portföy Sayfası Oluşturma

Başlıkta portföy dediğime bakmayın.Bu yazıda paylaştığım kodlarla istediğimiz resimleri çerçeve içine alıp yan yana ve alt alta sıralayacağız.Bunların üzerine gelince efekt oluşturmak için CSS3 kullanacağız.Resmin altına yazacağımız başlığa tıklayınca da istediğimiz bir sayfayı açacağız.Yani bu kodlarla oluşturacağınız sayfayı sadece portföy olarak değil, en iyi yazılarınızdan oluşan bir Best Of sayfası olarak, favori linklerinizden oluşan bir link sayfası olarak ta kullanabilirsiniz.Daha pek çok kullanım şekli üretilebilir.

Örnek teşkil etmesi ve daha iyi anlaşılması için oluşturduğum Portföy sayfasına bakabilirsiniz.Dediğim gibi oluşturduğum portföy sayfası sadece örnek için.Gerçekten benim portföyüm olduğunu sanmayın lütfen.

Hemen sayfayı nasıl oluşturacağınıza anlatayım.Önce stil kodlarını ekleyeceğiz.Stil kodlarını her zaman olduğu gibi şablonumuzdaki ]]></b:skin> kodundan önce ekliyoruz.Şablonunuzdan ]]></b:skin> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

#gallery{
        width:600px;
        display: block;
        margin: 2px 2px;
}
.gallery-image{
        width:150px;
        background-color: #fff;
        border: 1px solid #c2c2c2;
        -moz-box-shadow:0 0 20px #292929;
        -webkit-box-shadow:2px 5px 8px #292929;
        box-shadow:2px 3px 8px #292929;
        padding: 10px 10px 30px 10px;
        float: left;
        position: relative;
        margin-right: 20px;
        margin-bottom: 20px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
}
.gallery-image img{
        background: #000;
        width: 150px;
        height: 150px;
}
.gallery-image a{
        position: absolute;
        bottom: 10px;
        left: 10px;
        font-family: arial;
        font-weight:bold;
        font-size: 15px;
        color: orange;
        text-decoration:none;
        text-align: center;
}
.gallery-image:hover{
        transform: skew(5deg,5deg);
        -ms-transform: skew(5deg,5deg); /* IE 9 */
        -webkit-transform: skew(5deg,5deg); /* Safari and Chrome */
        -o-transform: skew(5deg,5deg); /* Opera */
        -moz-transform: skew(5deg,5deg); /* Firefox */
}

İkinci olarak kumanda panelinizden statatik bir sayfa oluşturup, sayfanın HTML kodları bölümüne aşağıdaki kodları ekleyin.

<div id="gallery">
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHpX7jIXZ4dxRZUm65OakBkhvp03rVzvaxK9TLSh3kcvAHsauHpMHnEK-e1sME2xS7bBLgszXCboE9Exawn7Qhd0EjJrRTQSbmBP3SXcOXKUGv7xhoI572iSblZiQwM8-dr7VfO_3UYrrE/s1024/1329164543462.png" /><a href="http://bloghocam.blogspot.com/">Blog Hocam</a></div>
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0DS38y9Q4Iz8erjjgXtiQR4w0ZdBrULetrZvhDCO24-ffgj96VOhmrKDbO4KAH-ajl_uH5HMOus4DNpHys06Q3zvOPO9ojKM2-k_elVGqYCTGkVoFzlreIsQw6zPG4iSpLwC2njoHuGM0/s1600/Elite-Minima7.png" /><a href="http://bloghocam.blogspot.com/2012/02/elite-minima-ucretsiz-premium-blogger.html">Elite Minima</a></div>
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis3MO1_5GoDdtZL-mKs6GuzXVK4LtQNCvujIV-4jRuAHtXEPvN0E344KpIEC30RE_ac8WjWedxpNtF-ZKUITbYQuLUrxNUDIyNHISE3rvZ4PxaKRBso95-RvFopXQfnY3JAFXG2ZvpjINQ/s1600/curo-blogger-tema13.png" /><a href="http://bloghocam.blogspot.com/2011/10/curo-blogger-temas.html">Curo</a></div>
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihNvbZrpXtNyrzNGjZliqOvUq_5wsIiLl0Qr5ZJ6IPToPwQsPVh6AWYUxro79sbM1qweb3ji6L5vDQKkimBMnuFktUIyfAOBa-kiOwFpDtmnSnWX3pHHuIJdX7-ZUhEHbYyI2NR9190g2w/s1600/simple-market-blogger-template5.png" /><a href="http://bloghocam.blogspot.com/2011/09/simple-market-temasn-turkcelestirdim.html">Simple Market</a></div>
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXuXwWEt6le_yR_IksyKyJvaM2k5Ow_GupmsNOP1atYSHEi_cmxkDQQVp6928gG11C-hHlefqa35D4F_NjCbLhwTtGGN-TGuxX6ldoNZNK-Row9CyqPAGLxHJyAeqMgxSdED8tM3Kw6O6w/s576/kadinlar-icin-blogger-temasi.jpg" /><a href="http://bloghocam.blogspot.com/2011/07/blogcu-bayanlar-icin-blogger-temas.html"> Echo That Is Love</a></div>
<div class="gallery-image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCu98e_CeH-gv5YtZmo8yHd-zYfP2yGPQh35aETwc9xwuee48q38SwHYIMjCRi6d4BNuu1KI8F99LVvO-82-lGh5_Uh9zV4OFHxNfRXs5qsqDmRn6PJXpqJ_jIu4jsuNUMmcbe9vp5hpII/s1600/StraightAhead-premium-kalitede-blogg.png" /><a href="http://bloghocam.blogspot.com/2011/12/straight-aheadpremium-kalitede-blogger.html">Straight Ahead</a></div>

</div>

Şimdi de kodları nasıl düzenleyeceğinizden bahsedeyim.Her bir çerçevenin kodu şu şekildedir:

<div class="gallery-image">
<img src="resim.png” /><a href=”http://sayfa-adresi”>Başlık</a></div>

• resim.png yerine çerçeve içerisinde gösterilecek resmin adresini yazın.
• http://sayfa-adresi yerine başlığa tıklayınca açılmasını istediğiniz sayfanın adresini yazın.
• Başlık yerine resmin altında gözükecek başlığı yazın.