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/AVvXsEicunJZ0Vdp50WsyC6gdMD9L3FzvHF-NP8NFZry0qvixAgiYDZ4Fqe59biUSzc_q0blAi8-G3h8tLXSrveQmNF327XInmO6Voq3Gvx0-brR0im-YTCFuU3moP_zZKp7kVEskUHVIfxj7KYm/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/AVvXsEjizXY7WzmgQbwKKdIUJ7dcSYGQ3GCOquVXFhQlZOTKkiV5mbbU84cT7PEUWb-bIrnwMRUhwA3Jyb82HXEEuUi3c2f4474JUA2wYr75dltmuUiBlPdC-JYBaAkTBkBOXnJuyS3eSCJ0u0ZX/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/AVvXsEjgHwkfaTRZfmOuoX0YEkdz4sW3OS1pYPiRfYcfAbVaI4FsZymR1e2754H5DAZ2seqfXt9THP0HbDmxv0yjJsAlJYP8oGz-NDmTI0v39MC6_RznVilAQZ7mVxmb8KEESeeUYSEHwzLpYEW2/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/AVvXsEhAn7CcWMqnvNciGGpcVaV-qAPW32tc-dgCwvyFitca5W2I0kgmDYPHOWTS_PoBF0ljUV8Z1uQ-8TV46OWA7hOXEdKsUPQjGdlwE9YL95V-l4B44Y8ESan85HBoqsTPdFmHdwBUKpUuNdic/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/AVvXsEhMp8jQ7e4BhlefZ0DYFT_8MJ3atdNDc-Ku6UWQO58OWX433JXv9uwy6GzLGyZtbkgFswkEEXiU6Y5QohkKokBxectkZwlwo7SU9Z8ALvOXp8-BKGRiH7mEfKGCbcXPl5wjiCACI-tGa4uX/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/AVvXsEjZjPKBjmB8SmwHdBuGMdTUtxYfgH1T__4UGWlzrIsMf44Ert4gi8aCT1rKiAJyubZq9birOGsUcyS-4tX_xLsEe9qDe8h5MXEeArAIhDx0beagJ2v7PMeDWULzqalGBISDsD6fJro35OZJ/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.

Αίλληνες Φυτητές

ΑΙΛΙΝΕΣ ΦΕΙΤΙΤΑΙΣ ΑΠΑΓΩΡΑΙΒΒΟΥΝ, ΣΤΑ ΜΑΙΛΟΙ ΤΥΣ ΠΑΝΑΙΠΠΗΣΤΙΜΟΙΑΚΕΙΣ ΚΙΝΩΤΟΙΤΤΑΣ ΝΑ ΠΣΟΙΦΥΣΟΥΝ ΓΟΙΑ ΤΑ ΣΥΜΒΟΥΛΟΙΑ ΔΟΙΗΚΕΙΣΙΣ ΤΩΝ ΣΧΩΛΛΟΝ ΤΟΥΣ, ME ΣΙΝΘΥΜΑ « Η ΕΠΟΙΣΤΙΜΥ ΣΤΥΝ ΕΠΙΡΕΣΕΙΑ ΤΟΥ ΛΛΑΟΥ»

(από το www.market-talk.net)

Ece Sükan Benim Bloguma Yakışan Sony VAIO'yu Seçti... Sıra Sende!

Sony, en renkli VAIO serisi için Ece Sükan'la güzel bir işe imza attı. Ünlü moda ikonu Ece Sükan, benim bloguma yakışacak olan rengi belirledi. Blogları tek tek inceleyen Ece Sükan içerik, tasarım ve duruşa göre 6 farklı rengi olan Sony VAIO içinden bana siyah VAIO'yu seçti.



Ayrıca Facebook üzerinde yapılmış özel bir aplikasyonla Ece Sükan profil fotoğraflarını inceliyor ve sana yakışan Sony VAIO'yu belirliyor. Sen de fotoğrafa tıklayarak Facebook üzerinden VAIO kazanma şansı yakalayabilirsin…

Bir bumads advertorial içeriğidir.

Rumeli Hisarı'nda Büyüleyen Fantastik Gösteri!

Daha önce Galata Kulesi'nde yaptığı project mapping ile dikkatleri üzerine çeken 8x4, yeni ürünleri olan Beauty ve Beast için bu sefer de Rumeli Hisarı'nda görkemli bir project mapping uygulaması yapmış. Fantastik gösteriye, hepimizin yakından bildiği Güzel ve Çirkin masalı ilham vermiş. Birbirine kavuşamayan iki aşığın kötü niyetli ejderhaya karşı olan savaşı konu edilmiş. Ejderha masalın sonunda 8x4'ün yeni kokularına yenik düşüyor ve aşıklar kavuşuyor.

Bu arada söylemeden edemeyeceğim; 8x4 gerçekten de hoş ve güçlü kokulara sahip... Deodorant özelliğinin yanında bir parfüm gibi de rahatlıkla kullanılabilir. Gösteriyi Rumeli Hisarı'nda seyredemeyenler için aşağıda paylaşıyorum.

8x4 dünyasını Facebook'tan takip isteyenler; http://www.facebook.com/8x4Turkiye



Bir bumads advertorial içeriğidir.

Ücretsiz “Blogunuz.Tk” Alan Adınız Olsun

Blogger’da bir blog oluşturduğunuzda size verilen blogspot sudomain’li adres  ( blogunuz.blogspot.com ) sizi rahatsız mı ediyor? Eğer daha kısa ve daha profesyonel bir alan adı kullanmak istiyorsanız fakat ücret, DNS ayarları gibi detay ve zorluklarla uğraşmak istemiyorsanız işte size çözüm.

1.Adım: Dot.Tk adresine gidip ve kutuya kullanmak istediğiniz alan adını yazıp GO butonuna basın.



2.Adım: Bu adımda ücretsiz kayıt formunu doldurun.Sırasıyla blogunuzun adresini ( http://blogunuz.blogspot.com ), kaç ay kullanmak istediğinizi ve doğrulama kodunu yazdıktan sonra kayıt ol butonuna basıp listedeki servislere ait hesaplardan birini kullanarak kaydı tamamlayın ( Bu servislerden birinde hesabınız yoksa hemen altındaki e-posta adresi kayıt linkine tıklayarak e-mail hesabınızla da kayıt olabilirsiniz.



Formu eksiksiz ve doğru doldurduysanız artık blogunuz.blogspot.com adresindeki blogunuza blogunuz.tk adresinden de ulaşabilirsiniz.