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...
29 yorum
harıkasın
4 Mayıs 2009 00:26
Ç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
: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
teşekkürler tam bir blog çok işime yaradı :D
4 Mayıs 2009 18:24
biraz karışık ancak hallettim gibi
4 Mayıs 2009 18:25
Eline Koluna Beynine Sağlık :) Çok güzel Olmuş...
4 Mayıs 2009 18:33
@lugatiweb, @iddaa, @Gizemliblog
değerli yorumlarınız için teşekkürler arkadaşlar..
4 Mayıs 2009 18:41
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
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
Benim siteme bakar mısın ,zahmet olmazsa,bazı yazılarım bozuk çıkıyor,sevgiler
5 Mayıs 2009 11:40
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
Teşekkür ederim,sağolasın...
5 Mayıs 2009 13:08
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
güzel anlatmışsın ellerine sağlık. uzun sürmesine şaşırmamak lazım.
7 Mayıs 2009 17:03
süpersin ama bayagı karmaşık ya :S
16 Mayıs 2009 12:19
aslında karışık değil uzun gözüküyor...
16 Mayıs 2009 12:34
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
Harika bir anlatım ve harika bir eklenti.Teşekkürler
21 Mayıs 2009 16:38
süüpperr bir site yapmışsın , bayılım çok ayrıntılı ve güzel anlatımlı.
12 Haziran 2009 23:46
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
2. kodu arattırınca çıkmıyor, neden??
24 Haziran 2009 07:04
hocam sadece skin diye arat sanırım aradıktan sonra ikinci gelen b:skin kodu olmalı...
24 Haziran 2009 13:36
denedim yine olmadı, 3. adım da olmuyor of :(
neyse teşekkürler, vazgeçtim :(
25 Haziran 2009 19:48
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
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
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
yazıda yqsa headera bakın dio ancak birsürü header var
23 Temmuz 2009 13:18
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
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