27 Şubat 2012 Pazartesi

Blogger’da Portföy Sayfası Oluşturma

18 yorum

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.

 

Portföy Sayfası

 

Ö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://lh6.googleusercontent.com/-STceCTn0bNQ/TzlxBByoWtI/AAAAAAAACN4/47yjKDt7Tz8/s1024/1329164543462.png" /><a href="http://bloghocam.blogspot.com/">Blog Hocam</a></div>
<div class="gallery-image">
<img src="http://lh4.ggpht.com/-dLvf4xRol3s/TzUMfte0xkI/AAAAAAAACLU/0n2i9e-uQJQ/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="http://lh3.ggpht.com/-5iGqRXDSsIM/TpV_L6wGhqI/AAAAAAAABOE/NhG0-BKcc9g/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="http://lh6.ggpht.com/-NvPo1yJUE6Y/TmkKk2T531I/AAAAAAAAA-Q/Bqxda04zwJI/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://lh3.googleusercontent.com/-1BNqCKZJC-4/ThQ6MquwVzI/AAAAAAAAAwg/sEBqGYxs1PM/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="http://lh4.ggpht.com/-vhKZxWPkC2M/Tue3XEPkSNI/AAAAAAAABuE/cBMwM97l33k/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.

18 yorum:

  1. Teşekkürler..Yaptım çok da güzel oldu.
    http://www.afterdarkhorrormovies.com/p/hangi-film.html

    YanıtlaSil
  2. Sayfanıza baktım gerçekten güzel olmuş.Farkettiyeniz jquery veya benzeri bir script kullanmadığımız için oldukça hızlı.En sevdiğim yanı da bu zaten.

    YanıtlaSil
  3. Evet bence de süper tekrardan çok teşekkürler.Sayenizde sürekli siteme yeni şeyler ekleme fırsatım oluyor.
    Hocam bu arada anasayfanızdaki slideshow jquery mi?Bazı sitelerden kodlar alarak eklemeye çalıştım ama beceremedim.Zamanınız olursa nasıl yapılacağını paylaşabilir misiniz?

    YanıtlaSil
  4. ben yaptım da bir sorum olacakben googleye .tk olarak kayıt etmelimiyim?edersem nasıl etmeliyim?ve bunun indexlemeye faydası nedir Blogunuz Çok Güzel Haa Birde Benim Bloguma yorum yaparsanız Sevinirim www.c-zblog.blogspot.com :) Bekliyorum ......

    YanıtlaSil
  5. merhaba hocam pek alakaılı olyan bir eklenti hakında bilginize başvurucam benim blog da eklediğim konunun nezaman eklendiği kaç dea okunduğu yazmıyor bir kaç konu denedim eyer sizde varsa buradan paylaşırsanız sevinirim saygıllar...

    YanıtlaSil
  6. Merhaba hocam peki ben bunu statik bir sayfaya değilde ayrı bir bağlantı oluşturmak istesem eğer nasıl link yapabilirim.

    YanıtlaSil
  7. @caner

    HTML kodlarını statik sayfanın değilde yeni kayıt sayfasının HTML bölümüne ekleyebilirsin.

    YanıtlaSil
  8. hocam bunlara tıklayınca jquarldeki gibi büyütebili yor myuz ??

    YanıtlaSil
  9. Hayır, onun için jquery eklememiz gerekir, o da sizin işinize yaramaz.

    YanıtlaSil
  10. hocam benim bi sorum var mesela ben sayfa acıyorum ama sayfa icinde bir cok kayıt acamıyorum kutu icinde sadece 1kayıt oluyor ama gördügüm cogu sayfada ana sayfada kayıt oluşturur gibi sayfa içinde kayıt oluşturuyorlar nası yapıcaz bi yardmcı olursan sevinirim..

    YanıtlaSil
  11. @Kerim
    Sabit sayfalarda ana sayfa gibi birden fazla kayıt oluşturamazsınız.Adı üstünde statik.

    YanıtlaSil
  12. merhaba denedim oldu güzelde oluyor fakat bunu anasayfaya nasıl koyacağız? yeni bir sayfa açıp html ye ekliyoruz o yüzden o sayfada açılıyor direk site açıldığında gelmesini istiyorsak nasıl yapacağız ? ana sayfayı o sayfaya yönlendirmeye kalktım olmadı :S

    YanıtlaSil
  13. Ana sayfaya widget olarak ekleyebilirsiniz.Tabi temanız uygunsa.

    YanıtlaSil
  14. merhabalar
    ben http://www.byblok.blogspot.com sitemde yayın içinde (her yayın olmayacak) gösterdiğiniz portföyü oluşturmak istiyorum bunu nasıl yapabilirim yardımcı olursanız sevinirim

    YanıtlaSil
  15. @42
    İkinci bölümdeki kodlarının yazının HTML bölümüne ekleyebilirsiniz.

    YanıtlaSil
  16. Merhabalar
    Ben şu şekilde olasını istiyorum.Blogumda yaptıgımı gösterdigim ürünleri bazı alışveriş sitelerinde satışa koydum.Yazıya tıkladıgımızda ,o siteye gitmesini istiyorum.
    Gerçi resimleri göstermeyi de başaramadım ama ,nasılsa başarırım.:)
    Dedigim şekilde bu kodları kullanma imkanım var mı?Yoksa başka tür bir kod mu gerekiyor?Eger bloga bakarsanız iletişimden hemen önce galeri sayfam var ,gerçi gözükmüyor ama ben kasıtlı görünen yazıyı sildim.İşi tamamlayabilirsem tekrar yazacagım .Linki mevcut.
    Çok uzun oldu:(

    YanıtlaSil
  17. @Semra Mollaoglu
    Elbette yapabilirsiniz. Sayfa adresi yerine alışveriş sitesine koyduğunuz ürünün linkini yazın.

    YanıtlaSil
  18. :)) Harikasınız oldu.Çok teşekkür ederim.

    YanıtlaSil

Picardes

LİNKLER