Ekliyeceğimiz blogger slayt alanı demosu için tıklayın.
Blogunuza ekliyeceğimiz blogger slayt alanı için gadget ekleme yöntemini kullanacağız.Bu eklentiyi sizlere iki adımda anlatacağız.
1.Adım:Blogger hesabımızla giriş yapıyoruz.Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz,widget şablonlarını genişlet kutucuğunu işaretliyoruz.Ctrl+F yardımı ile kodlar içerisnde </head> kodunu aratıp buluyoruz ve aşşağıdaki kodu kopylayaıp bulduğumuz </head> kodundan önceki satıra yapıştırıyoruz
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
/* ------------------------------------------------------------------------
s3Slider
Developped By: Boban Karišik -> http://www.serie3.info/
CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as
long as you leave my infos at the top.
-------------------------------------------------------------------------- */
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:-14px;
padding: 0px;
margin-left: 0;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style>
Not:Kod içerisinde kırmızı renkle belirttiğimiz timeOut:4000 değerini değiştirerek slayt geçiş hızını,yine kod içerisinde renkli olarak yazdığımız width:550px(genişlik)-height:200px(yükseklik) değerlerini değiştirerek slayt alanını kendi isteğinize göre ayarlayabilirsiniz,tabiki resim boyutunuzuda burdaki genişliğe göre seçmelisiniz.Gerekli düzenlemeleri yaptıktan sonra şablonumuzu kaydediyoruz.2.Adım:Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.Aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıp kaydediyoruz.
<!-- blogokulu.blogspot.com Kodu Baslat -->
<div id="s3slider"><ul id="s3sliderContent">
<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img692.imageshack.us/img692/6001/avatrkopyad.png" /><span>BASLIK-1 : Aciklama!!!</span></a></li>
<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img205.imageshack.us/img205/9700/53866363.png" /><span>BASLIK-2 : Aciklama</span></a></li>
<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img41.imageshack.us/img41/4797/87529467.png" /><span>BASLIK-3 : Aciklama</span></a></li>
<li class="s3sliderImage"><a href="YAZI-LİNKİNİZİ-BURAYA YAZIN"><img style="width:550px;height:200px;" src="http://img822.imageshack.us/img822/9282/51748703.png" /><span>BASLIK-4 : Aciklama</span></a></li>
<li class="s3sliderImage"></li>
</ul></div>
<div class='clear'></div>
<!-- blogokulu.blogspot.com Kodu Bitir -->
Kod İçerisinde:YAZI-LİNKİNİZİ-BURAYA YAZIN: Buraya resme tıklayınca açılmasını istediğiniz yazının linkini yazıyorsunuz.
http://img822.imageshack.us/img822/9282/51748703.png:Buraya görüntülemek istediğiniz resminin URL sini yazıyorsunuz.
BASLIK-4 : Aciklama:Resim üzerinde görünecek olan başlığınızı ve kısa açıklamanızı buraya yazıyorsunuz.
Gerekli düzenlemeleri yaptıktan sonra,gadgetimizi kaydediyoruz ve Blog Kayıtlarının üzerine yada şablonumuzun en üstüne gelecek şekilde veya blogumuzda görünmesini istediğimiz yere sürükleyip bırakıyoruz.Yeni slayt alanımız kullanıma hazır.
ALLAH razı olsun kaç gündür böyle birşey arıyordum başarılarının devamını dilerim
YanıtlaSilBLOGUMA SLAYT EKLEMEK İÇİN EPEY ARAŞTIRMA YAPTIM SONUNDA ARADIĞIMI BURADA BULDUM AMA BİR SORUM OLACAK BLOGA SÜREKLİ YENİ YAZILAR EKLEYİNCE HEP ESKİ KAYITLARMI GÖRÜNÜR YOKSA SON YAZILANLARMI GÖRÜNTÜLENİR???
YanıtlaSilLÜTFEN BUNA CEVAP YAZIN
en son yazdığınız ilk başta görünür.
YanıtlaSilcevapladığınız için teşekkür :)
YanıtlaSilHOCAM BU SLAYTI EKLEDİM İKİ SORUM OLACAK CEVAPLARSANIZ ÇOK MEMNUN OLACAĞIM.
YanıtlaSil1.SLAYTI BELİRTTİĞİNİZ GİBİ EKLEDİM ANCAK SÜREKLİ AYNI KONULARIN RESİMLERİ ÇIKIYOR BUNU ÖRNEĞİN SON AÇILAN 5 KONUYU GÖSTERECEK ŞEKİLDE AYARLAMAMIZ MÜMKÜNMÜ?
2.SLAYT ALANINI NE KADAR GENİŞLETSEMDE SLİDER ALANI BİR YERDEN SONRA HEP AYNI KALIYOR HİÇ GENİŞLEMİYOR NEDEN OLABİLİR?
cevap:1 Bu slayt alanında mümkün değil.Görüntülemek istediklerinize ait resimleri seçip anlattığımız gibi eklemeniz gerekiyor.
YanıtlaSilDaha önce popüler yazılar için slayt alanı eklemeyi anlatmıştık ama son yazılara ait slayt alanı için halen elimde bir kod yok.Popüler yazılar için slayt alnına burdan ulaşabilirsiniz.
cevap:2Yapmanız gereken işlem;
1-Slayt alanına eklediğiniz resmin boyutunu ayrlayın.Örnek:Eklediğiniz resim 600x300 boyutunda olsun.
2-Konu içerisinde 1.Adımda verdiğimiz mavi renkli olarak belirttiğimiz genişlik ve pembe renkli olarak belirttiğimiz yükseklik değerlerini değiştirin.Resme göre width:600 ve height:300 olmalıdır bu şekilde kaydedip görüntülerseniz, slayt alanının boyutunun değiştiğini göreceksiniz.
merhaba, öncelikle teşekkür ederim.. bu kodu bloguma uyguladığım zaman ne yazıkki siyah ekran almaktayım. başka blogda denedik sorun yoktu. sanırım daha önce eklediğim kodların bir çakışması oluyor. bu sorunu nasıl çözebilirim? teşekkürler..
YanıtlaSilblogum www.aliermanakyuz.com şuan bu yukarıdaki kodları tutuyorum, bakarsanız sevinirim.
YanıtlaSil1.Adımda verdiğimiz kodları tam ve doğru olarak yerleştirdiğinizden emin olun.Bu da olmazsa blogunuzda facebook eklentisi var sağ tarafta onun script kodunu kaldırıp deneyin.script kodları çakışmış olabilir.
YanıtlaSil1.adım kodları tamam. facebooku kaldırınca da olmadı. maalesef hala çalışmıyor.. size kodları göndermeyi deneyebilir miyim? Bir de öyle baksak.. Acemi olduğum için gözden kaçırdığım bişeyler mi var acaba, ya da başka bişeyle mi çakışıyor, anlamadım.. :(
YanıtlaSiltamam buldum. popüler yazılar küp şeklinde dönüyor, onun kodu ile çakışıyormuş. onu kaldırınca oldu. teşekkür ederim..
YanıtlaSilİyi bakalım hadi hayırlı olsun.
YanıtlaSilcalısmıyor malesef vıdeo linki yukledım olmadı resımlı haber ekledım olmadı kapkara goruntu var kodu head ekledım gadgete ekledım lınklerı yaptım degıstım resım lınkınıde ekledım acıklamada olmadı
YanıtlaSilAdmin bunu etiket bazlı yapamaz mıyız ? İstediğimiz etiketteki resimleri ve başlıkları alsın otomatik olarak.
YanıtlaSilbunda etiket meselesi yok.Etiket bazlı yayınladığım slayt alanları var onları kullanabilirsin.Şimdilik bunlarla idare edin, ileride inşallah onuda yayınlarız.
YanıtlaSil