Blogger Resimli Manşet(Featured Content) Yapımı-1

Gönderen Yasin 20 Nisan 2009 Pazartesi

Blogger slide show

Tam Bir Blog daha iyi bir bloga sahip olmanız için yardımcı olmaya devam ediyor. Gelecek üç yazımda sizlere bloggerda üç değişik manşet yapımını göstereceğim. Bu eklenti sayesinde blogunuzdaki en özel ve en iyi içerikli yazılarınızı blogunuzun istediğiniz bir yerine taşıyabileceksiniz. İnanılmaz slideshowlar artık sizinde blogunuzda yer alabilecek. Yazınızın başlığı ve kısa bir özeti farklı efektleriyle etkileyici bir görselliğe sahip.
Tabiiki demosunu incelemeden olmaz. İşte üç farklı özel içerik eklentisinin tamanının önizlemesi

Bu üç eklenti temanıza göre tamamen özelleştirilebilir. Enini,boyunu temanıza uyumlu hale getirmek sizin elinizde, sadece Tam Bir Blog farkıyla sizlerle… “(Bu sıralar yazılarımın çok fazla kopyalandığını görüyorum, yazılarımdan eğer faydalanmak istiyorsanız ya da blogunuzda yazıma yer vermek istiyorsanız lütfen altına alıntıdır ibaresiyle yazının ulaşılabilir linkini veriniz.)”

Özel İçerik-Manşet (Featured Content-Slayt Şov)-1
Blogger slide show
1. Adım:
Bir sorun yaşamamak için aşağıdaki dosyaları bilgisayar indirmenizi ve varsa kendi hostunuza yoksa bşrazdan isimlerini vereceğim sitelere yükleyebilirsiniz. Böylece eklentiler güvenli ve hızlı çalışacaktır.
jquery.js
s3Slider.js

Dosyaları buradan indirebilirsiniz.
2. Adım:
İndirdiğim,iz bu iki dosyayı varsa kendi hostumuza yoksa HotLinkFiles.com ya da SigMirror.com adreslerine yüklüyoruz. Tabikii önce kayıt oluyoruz. Daha sonra yüklediğimiz dosyaların direkt linkini bir yere not alıyoruz.
3. Adım:
Şimdi kod bölümüne geldik. Blogger’a giriş yaptıktan sonra Yerleşim---->Html’yi düzenle---->Widget şablonunu genişlet diyoruz.
Aşağıdaki kodu buluyoruz.
</head>
Kodu bulduktan sonra bu kodun hemen önüne aşağıdaki kodlarımızı yapıştırıyoruz.

<!--SLIDE-SHOW-BASLANGICI-->
<!-- JavaScripts-->
<script type="text/javascript" src="http://hotlinkfiles.com/........./jquery.js"></script>
<script type="text/javascript" src="http://hotlinkfiles.com/........./s3Slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
});
</script>
<!-- CSS -->
<style type="text/css" media="screen">
#slider
width: 410px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent {
width: 410px; /* important to be same as image width or wider */
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear {
clear: both;
}
.sliderImage span strong {
font-size: 14px;
}
.top {
top: 0;
left: 0;
}
.bottom {
bottom: 0
left: 0;
}
ul { list-style-type: none;}
</style>
<!--SLIDE-SHOW-BITISI-http://tambirblog.blogspot.com-->
Mavi olan linklieri silip, 2. adımda yüklemiş olduğumuz dosyaların linkini yapıştırıyoruz. Şimdi şablonumuzu önizlemeye alıyoruz. Eğer bir sorun yoksa kaydediyoruz. Yukarıdaki kırmızı renkteki sayılar ise eklentinin genişliğidir. Onları kendi temanıza göre düzenlemeniz gerekmektedir.
4. Adım
Şimdi Yerleşim---->Sayfa Öğeleri kısmına geliyoruz.Gadget ekleye basıp Html/Javascripti seçiyoruz.
Daha sonra aşağıdaki kodları içine yapıştırıyoruz.

<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<a href="#"><img src="images/410/1.jpg" alt="1" /></a>
<span class="top"><strong>Title text 1</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/2.jpg" alt="2" /></a>
<span class="top"><strong>Title text 2</strong><br /&gt;Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/3.jpg" alt="3" />
<span class="top"><strong>Title text 3</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/4.jpg" alt="4" />
<span class="top"><strong>Title text 4</strong><br />Content text...</span>
</li>
<li class="sliderImage">
<a href="#"><img src="images/410/5.jpg" alt="5" />
<span class="top"><strong>Title text 5</strong><br />Content text...</span>
</li>
<div class="clear sliderImage"></div>
</ul>
</div>
Kırmızı kodları silip gözükmesini istediğimiz resimlerin linkini giriyoruz.
class=”bottom/top” ise yazılarınızın üstte mi altta mı görünmesini istiyorsanız ona göre değiştirebilirsiniz. (Top:yukarı bottom:aşağı)
# işaretinin yerine ise yazının gideceği adresi giriyoruz.
Mavi kodlar ise anlaşılacağı gibi (Text title) yazınızın başlığı ve (content text) yazınızın özeti:)) Eklentide resimlerinizin daha hoş durmasını istiyorsanız. Temanıza göre ayarlamış olduğunuz eklentinin genişlik ve eninin yükleyeceğiniz resimlerle aynı ölçüde olmasına dikkat ederseniz daha iyi sonuçlar elde edebilirsiniz.
Şimdi widgetı kaydediyoruz ve istediğimiz yere sürüklüyoruz. Bence en iyi yer blog yazılarınızın üst kısmı olacaktır. Diğer iki eklentiyi kullanmak istiyorsanız tabiiki biraz beklemeniz gerekecek:))

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

29 yorum

  1. Nur Dedi ki,

    İmza denemem pek hoş görünmedi şuanda da kaldırmaya calışıyorum fakat ctrl-f kullansam da ekledigim kodu bulup kaldıramıyorum o minik sorunu hallettigim de bu slaytshow işini deneyecegim sevgilerimle...

    20 Nisan 2009 23:01

     
  2. selmankocael Dedi ki,

    Vay, hoşmuş.
    uzun geldi yapmak. onun için şimdi düşünmüyorum:D
    başarılar

    20 Nisan 2009 23:15

     
  3. Yasin Dedi ki,

    @Keyifli Hobiler
    sanırım kaldırmışsınız göremedim imzayı...
    @xmarx
    aslında kısa ama benim şu kodlar için bir çözüm bulmam lazım çok uzun duruyorlar yazı tipini değiştireyim en iyisi..

    20 Nisan 2009 23:47

     
  4. Şenay- Doğam Dedi ki,

    Emeğinize sağlık..en kısa surede deneyecegım :) malum yenı yenı ogrenıyorum HTML yı :)

    21 Nisan 2009 01:33

     
  5. Prince Turk Dedi ki,

    yardim lutfen msn'e gelebilirmisiniz

    21 Nisan 2009 14:22

     
  6. Unknown Dedi ki,

    Yine çok hoş bir çalışma olmuş,ama kafam çok karıştı.İçeriği nasıl görüntüleyeceğiz,bütün resimleri başka kanaldan mı içeri aktarıcaz...

    21 Nisan 2009 21:24

     
  7. Yasin Dedi ki,

    Resimleri images/410/1.jpg olan yere URL olarak gireceksiniz. Yalnız resimlerin. Yaklaşık olarak ayarladığınız genişlikte olmasına dikkat etmelisiniz.
    Eğer denmek isteyen arkadaşlar olursa önce şablonun yedeğini alınız

    21 Nisan 2009 22:14

     
  8. tarky Dedi ki,

    Yapamadım ben :S

    24 Nisan 2009 00:37

     
  9. Yasin Dedi ki,

    Yapımı biraz zor kabul ediyorum. Daha basit anlatımlı yeni manşetlerde önümüzdeki günler tambirblogda yerini alacaktı ama önce bu 3lü yazı dizimi bitirmem lazım...

    24 Nisan 2009 00:51

     
  10. Fikrin Ne? Dedi ki,

    dosyaları upload edemedım hosta yukelmeyemedım ne yapmamlazım tbb

    24 Nisan 2009 03:09

     
  11. Yasin Dedi ki,

    hosta yükleyemedin mi?
    İlk önce hotlinks sitesine üye oluyoruz.Üye olduktan sonra giriş yapıyoruz. Sonra upload kısmına geliyoruz. Hemen aşağıda gözat butonunu göreceksin oraya tıklayıp dosyaları upload ediyorsun. Umarım yardımcı olabilmişimdir.

    24 Nisan 2009 11:55

     
  12. eD Dedi ki,

    3. adıma kadar herşeyi harfiyen uyguladım olmadı ya :S niye acaba temamdan dolayı mı ? :S

    17 Mayıs 2009 15:29

     
  13. Yasin Dedi ki,

    bu slide da biraz hata var... ama çalışıyor istersen aşağıdaki slide showu dene o daha iyi...
    http://tambirblog.blogspot.com/2009/03/bloggera-featured-contetnt-eklentisi.html

    17 Mayıs 2009 15:34

     
  14. eD Dedi ki,

    1 dk. yeniden deneyeceğim de head kodunun hemen önüne derken önü neresi oluyor kodun üstü mü altı mı ? yanı mı :D

    17 Mayıs 2009 17:41

     
  15. eD Dedi ki,

    önüne koydum arkasına koydum yanına koydum yine olmadı çok güzel bir çalışmaydı bu ya niye olmadı :'( featured-contetnt ide hiç beğenmedim ...

    17 Mayıs 2009 22:18

     
  16. Yasin Dedi ki,

    :D head kodunun üst satırına yapıştır...

    17 Mayıs 2009 22:29

     
  17. 3rh4nb1 Dedi ki,

    Önceki manşete göre çok daha şık ve kolay yüklenilebilir oldu. teşekkür ederim.

    9 Haziran 2009 16:59

     
  18. Yasin Dedi ki,

    Çok güzel yakışmış sitenize, yalnız bana biraz büyük geldi.. boyu belki 2:3 üne indirilebilir...
    Slide da bazen hata oluyordu halledilmiş olmasına sevindim, güle güle kullanın...

    9 Haziran 2009 17:22

     
  19. ALeLaCaYip Dedi ki,

    dosyaları yuklemekle problem yasayanlara 110mb.com yada daha onceden actıgınız googlepages sayfalarına yuklemelerini tavsiye ederim

    16 Haziran 2009 12:40

     
  20. Fikrin Ne? Dedi ki,

    sunu bır yapamadım ozzyy ya bır yardımcı olmadın gıttıı

    16 Temmuz 2009 16:00

     
  21. Yasin Dedi ki,

    Bu biraz zor umut diğeri daha kolay onu dene o yüzden bu serinin devamını getirmedim..

    16 Temmuz 2009 17:03

     
  22. tigin Dedi ki,

    bu eklentiyi ekledim fakat manşette geçiişler yapamıyorum

    16 Ağustos 2009 19:08

     
  23. Admin Dedi ki,

    Bir önemli ayrıntı da ben söyleyeyim :

    Eğer head tagından önce eklediğiniz koddaki timeOut: 3000 kısmını 4000 5000 6000 ne kadar sürede geçirmek istiyorsanız değiştirebilirsiniz.3000=3 saniyede diğerine geçer.
    4000=4 snde 5000=5 snde 6000=6 snde anlaşıldı yeterince sanırım :)

    26 Ağustos 2009 18:30

     
  24. Uğur ! Dedi ki,

    Bu yorum yazar tarafından silindi.

    7 Eylül 2009 01:14

     
  25. A.Rıza Dedi ki,

    bende takipname.blogspot.com a attım ama yazının devamını okuyunca yane yazının başlığına tıklıyınca gine çıkıyor??

    24 Eylül 2009 16:16

     
  26. Önder Dedi ki,

    yaptım cok sagol sakin kafayla kolay oldu

    27 Ekim 2009 22:10

     
  27. Adsız Dedi ki,

    bunu siteme koymak istiyorum nasıl yapabilirim

    11 Aralık 2009 20:32

     
  28. Unknown Dedi ki,

    Herşeyi Yapmama rağmen birtürlü olmadı nedenini hala anlayamıyorum. Scriptleri fileden e java olarak yükleddim olmadı sigmiror da js olarak yükledim olmadı acaba temamlamı uyuşmuyor veya başka herhangi bir widget mi engel oluyor.Cevap yazarsanız sevinirm

    5 Temmuz 2010 17:42

     
  29. Fikir Delisi Dedi ki,

    firefox'da tuhaf bişey oluyor .Slide geçişlerinde açılıp kapanıyor girin ne dediğimi anlarsınız .

    9 Temmuz 2010 10:48

     

Yorum Gönder

Son Yazılar

Son Yorumlar

Translate

İzleyiciler