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
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-->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.
<!-- 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-->
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">Kırmızı kodları silip gözükmesini istediğimiz resimlerin linkini giriyoruz.
<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 />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>
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
29 yorum
İ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
Vay, hoşmuş.
uzun geldi yapmak. onun için şimdi düşünmüyorum:D
başarılar
20 Nisan 2009 23:15
@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
Emeğinize sağlık..en kısa surede deneyecegım :) malum yenı yenı ogrenıyorum HTML yı :)
21 Nisan 2009 01:33
yardim lutfen msn'e gelebilirmisiniz
21 Nisan 2009 14:22
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
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
Yapamadım ben :S
24 Nisan 2009 00:37
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
dosyaları upload edemedım hosta yukelmeyemedım ne yapmamlazım tbb
24 Nisan 2009 03:09
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
3. adıma kadar herşeyi harfiyen uyguladım olmadı ya :S niye acaba temamdan dolayı mı ? :S
17 Mayıs 2009 15:29
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
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
ö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
:D head kodunun üst satırına yapıştır...
17 Mayıs 2009 22:29
Önceki manşete göre çok daha şık ve kolay yüklenilebilir oldu. teşekkür ederim.
9 Haziran 2009 16:59
Ç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
dosyaları yuklemekle problem yasayanlara 110mb.com yada daha onceden actıgınız googlepages sayfalarına yuklemelerini tavsiye ederim
16 Haziran 2009 12:40
sunu bır yapamadım ozzyy ya bır yardımcı olmadın gıttıı
16 Temmuz 2009 16:00
Bu biraz zor umut diğeri daha kolay onu dene o yüzden bu serinin devamını getirmedim..
16 Temmuz 2009 17:03
bu eklentiyi ekledim fakat manşette geçiişler yapamıyorum
16 Ağustos 2009 19:08
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
Bu yorum yazar tarafından silindi.
7 Eylül 2009 01:14
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
yaptım cok sagol sakin kafayla kolay oldu
27 Ekim 2009 22:10
bunu siteme koymak istiyorum nasıl yapabilirim
11 Aralık 2009 20:32
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
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