Zinmag Primus Resimli Manşet/Slide Yapımı

Gönderen Yasin 3 Mayıs 2009 Pazar

Zinmag Primus, bildiğimiz gibi bu senenin en beğenilen blogger temalrından oldu. Hem profesyonelliği hem de sahip olduğu eklentilerle bloggerı bir adım daha öteye taşıyan bir temaydı. Bu temanın tabiiki en dikkat çeken kısmı resimli manşet/slide show menüsüydü. Bir çok arkadaş bana nasıl diğer şablonlara uyarlayacağımızı da sormuştu. "Oom" bunu bizler için yapmış bulunuyor. Bizde ona değerli bilgileri için teşekkür ediyoruz. Slide showun nasıl olduğunu merak edenlere orjinal temadan önizleme.



1. Adım:İlk olarak şablonumuzda Html kodlarından ]]></b:skin> kodunu buluyoruz ve hemen önüne aşağıdaki kodları yapıştırıyoruz.


#slider {
background:url(http://img99.imageshack.us/img99/9594/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}


2. Adım: Şimdi ]></b:skin> kodundan sonra aşağıdaki kodları yapıştırıyoruz.



<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>


3. Adım: Şimdi aşağıdaki kodları arıyoruz.

<div id='header-wrapper'>
.......... ..........
......... .........
</b:section> </ b: section>


4. Adım: Header-wrapper kodunun bittiği b:section kodundan sonra aşağıdaki kodları ekliyoruz. Header-wrapper kodu temanızda bulunmayabilir, o zaman sadece header olarak da aratabilirsiniz. Yalnız temanızın yedeğini almayı unutmayın. Temayı kaydetmeden önce de önizleyin. Geniş temalar için uyumludur.



<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/resimli-son-yazlar-eklentisi.html'>Resimli Son Yazılar Eklentisi</a></h2>
<p>Bu eklenti Türkiye'de ilk kez Tam Bir Blog'da. Bu eklenti sayesinde son yazılarınızı resimleri ve yorum sayısıyla birlikte blogunuzda gösterebileceksiniz. Hem kullanışlı hem de görsel açıdan zengin ve tasarımınıza göre ayarlarıyla oynayabilirsiniz.</p>
<img alt='' src='http://img5.imageshack.us/img5/3928/resimlisonyazlartambirb.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>


Şimdi kaydediyoruz ve blogu görüntülüyoruz.
Peki nasıl düzenleyebiliriz bu kodları temamız göre? 1) Eklentinin daha hızlı çalışması için tüm javascript dosyalarını ücretsiz host sitelerine upload edebiliriz. Javascript dosyalarını buradan indirebilrisiniz.

2) Arkaplan başka bir resim mi koymak istiyorsunuz ya da farklı bir renkli bir arkaplan mı yerleştireceksiniz; yapmanız gereken tek şey kodlardan
# slider (background: url (http://img99.imageshack.us/img99/9594/slide.png); height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;)

kodunu bulup yeşil renkli linkle kendi resim Url'nizin yerini değiştirmek.

3) Slide showuna resim ve yazı eklemeye geldi sıra. 4. adımda bulunan aşağıdaki kodları farkedeceksiniz. Bu kodlar slide showdaki yazı ve resimlerinizin görünmesini sağlayacaktır. Birazdan vereceğim kodu 4. adımda istediğiniz kadar çoğaltarak birden fazla yazınızın manşette çıkmasını sağlayabilirsiniz.

<div class='slide'>
<span class='slmet'> Tam Bir Blog tarafından yayınlandı. </span>
<h2><a href='http://tambirblog.blogspot.com/2009/04/blogger-yorumlara-avatar-ekleme.html'>Blogger Yorumlara Avatar Ekleme</a></h2>
<p>Bloggerda yepyeni bir eklentiyle daha karşınızdayım. Bloggerda yorumlarımıza MyBlogLog aracılığyla yorumcularımızın avatarlarını blogumuzda yayınlayabileceğiz.</p>
<img alt='' src='http://img5.imageshack.us/img5/1571/yorumlaraavatarekleme.jpg'/>
</div>

Lacivet kod: yazınızın linki,
Mor kod: Yazınızın başlığı.
Yeşil kod: Yazınızın özeti.
Kırmızı kod: Slide showda gözükmesini istediğiniz resmin Urlsi.

Tekrar yinelemek istiyorum. 4. Adımda verdiğim kodlarla yalnızca slide showunuzda 3 adet yazı çıkacaktır. Siz yukarıdaki kodu 4. adımda istediğiniz kadar yapıştırarark daha fazla yazınızın manşette gözükmesini sağlayabilirsiniz.


Bugünlük bu kadar... Biraz geç de olsa yazıyı yayınlayabildim. Güle güle kullanın...

Yazıyı İmle
Digg Technorati Stumble This Twitthis Del.icio.us Furl Reddit

29 yorum

  1. Fikrin Ne? Dedi ki,

    harıkasın

    4 Mayıs 2009 00:26

     
  2. Hayalbemol Dedi ki,

    Çok güzel bir anlatım, fakat ben yapsam elime yüzüme bulaştırırım diye korkuyorum. Her zaman olduğu gibi çok açıklayıcı bilgi vermişsin, fikrine sağlık.

    4 Mayıs 2009 00:42

     
  3. Yasin Dedi ki,

    :D Biraz uzun ama gözünü korkutmasın. Blogumda anlatılan eklentileri denemek için kendinize test blogu oluşturabilirsiniz. Böylece eklentileri korkmadan deneme fırsatıda bulmuş olursunuz...

    4 Mayıs 2009 00:50

     
  4. lugatiweb Dedi ki,

    teşekkürler tam bir blog çok işime yaradı :D

    4 Mayıs 2009 18:24

     
  5. iddaa Dedi ki,

    biraz karışık ancak hallettim gibi

    4 Mayıs 2009 18:25

     
  6. Adsız Dedi ki,

    Eline Koluna Beynine Sağlık :) Çok güzel Olmuş...

    4 Mayıs 2009 18:33

     
  7. Yasin Dedi ki,

    @lugatiweb, @iddaa, @Gizemliblog
    değerli yorumlarınız için teşekkürler arkadaşlar..

    4 Mayıs 2009 18:41

     
  8. Unknown Dedi ki,

    ikinci b:skin ve
    div id=header-wrapper ( bunu buldum ama )ama

    b:section b: section bunları bulamadım...

    4 Mayıs 2009 18:58

     
  9. Yasin Dedi ki,

    div id=header-wrapper bulduysan... bu koddan sonraki "ilk" b:section ı bulman yeterli olacaktır.
    iki tane bulmana gerek yok.. Bir dene olmazsa tekrar buradayım... Bunu önce bir test blogu açıp orada denersen daha iyi olacaktır...

    4 Mayıs 2009 19:19

     
  10. Unknown Dedi ki,

    Benim siteme bakar mısın ,zahmet olmazsa,bazı yazılarım bozuk çıkıyor,sevgiler

    5 Mayıs 2009 11:40

     
  11. Yasin Dedi ki,

    Sanırım hatalı iki yazın var... Bun yazılarına baktım olası iki sebep var görürde:
    Resimler yanyana olduğu için devamını oku eklentisi hata veriyor olabilir.
    Ya sa resimleri alırken bir problem oldu. Bu iki kaydı düzenle ve Html kodlarına gel. Ana sayfa çıkan kodlar eğer yazıda varsa bunları sil.
    örneğin: YAŞAMDAKİ HER ŞEY BİR MUCİZE BENCE! yazısına gel.. eğer bu yazının html kısmında anasayfada çıkan kodlar varsa sil.

    Sonucu bekliyorum...

    5 Mayıs 2009 12:01

     
  12. Unknown Dedi ki,

    Teşekkür ederim,sağolasın...

    5 Mayıs 2009 13:08

     
  13. kolonto Dedi ki,

    Teşekkürler hocam ben yaptım da genislikte sorun oldu benım blog 1200px genisliginde kodları degıstırdım ama verim alamadım.

    6 Mayıs 2009 01:13

     
  14. Savaş Çocuğu Dedi ki,

    güzel anlatmışsın ellerine sağlık. uzun sürmesine şaşırmamak lazım.

    7 Mayıs 2009 17:03

     
  15. eD Dedi ki,

    süpersin ama bayagı karmaşık ya :S

    16 Mayıs 2009 12:19

     
  16. Yasin Dedi ki,

    aslında karışık değil uzun gözüküyor...

    16 Mayıs 2009 12:34

     
  17. EfsaneFenerli Dedi ki,

    olmadı yha

    Düzgün bir şekilde oluşturulmadığından şablonunuz çözümlenemedi. Lütfen tüm XML öğelerinin düzgün biçimde kapatıldığından emin olun.

    böle hata geldi

    18 Mayıs 2009 19:22

     
  18. Mapavrili Dedi ki,

    Harika bir anlatım ve harika bir eklenti.Teşekkürler

    21 Mayıs 2009 16:38

     
  19. süüpperr bir site yapmışsın , bayılım çok ayrıntılı ve güzel anlatımlı.

    12 Haziran 2009 23:46

     
  20. Merhaba, 1. adımdaki kodu buldum fakat 2. adımdaki kodu arattırınca 1. adımdaki kod çıkıyor yine.. Lütfen yardımcı olun. Şimdiden teşekkürler!

    24 Haziran 2009 02:00

     
  21. 2. kodu arattırınca çıkmıyor, neden??

    24 Haziran 2009 07:04

     
  22. Yasin Dedi ki,

    hocam sadece skin diye arat sanırım aradıktan sonra ikinci gelen b:skin kodu olmalı...

    24 Haziran 2009 13:36

     
  23. denedim yine olmadı, 3. adım da olmuyor of :(
    neyse teşekkürler, vazgeçtim :(

    25 Haziran 2009 19:48

     
  24. Yasin Dedi ki,

    darkroad
    O kadar soru sormuşsun ki hepsine yanıt veremiyorum kusura bakma lütfen. Bu hafta bir de sınav haftası...

    25 Haziran 2009 23:45

     
  25. fatih Dedi ki,

    ben bunu becercek kadar akıllı olsaydım ohhooo:) böyle temaları indiriyorum ama yüklerken parça parça yüklemek gerekiyor onu da beceremiyorum..önce şunu yükse sonra bunu :) ne yapsam olmuyor

    21 Temmuz 2009 00:44

     
  26. admin Dedi ki,

    Bu harika birşey, teşekkürler.
    Yanlız ben bir sorunla karşılaştım.İe'yle blogu açtığımda bir problem yok, fakat mozillayla açtığımda göremiyorum?

    22 Temmuz 2009 13:33

     
  27. dosto Dedi ki,

    yazıda yqsa headera bakın dio ancak birsürü header var

    23 Temmuz 2009 13:18

     
  28. irfan Dedi ki,

    peki hocam slide lar otomatik geçiyor. bunu aynı zamanda senin sitendeki gibi elle kontrol edebilmek için ne yapmamız lazım. sağ ve sol tarafa ok koyarak bu işi halletmek istiyorum ama nasıl yaparız acaba

    http://kapesese2010.blogspot.com/

    benim blogum...

    23 Temmuz 2009 16:44

     
  29. Unknown Dedi ki,

    Allah bu siteyi yapandan yazandan razı olsun.Bu eklentiyide siteme koydum.Dehşet bir site olduğunu düşünüyorum.Sitem profesyonel bir tasarıma kavuştu.

    http://arsivmerkezi.blogspot.com

    24 Aralık 2010 22:40

     

Yorum Gönder

Son Yazılar

Son Yorumlar

Translate

İzleyiciler