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

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...


kaynak: http://tambirblog.blogspot.com/2009/04/zinmag-primus-resimli-mansetslide-yapm.html