Blogger slayt alanı eklentilerine bir yenisini daha ekliyoruz.Seçtiğiniz bir etikete göre slayt alanınıza yayınladığınız içeriklerden görüntü taşıyabilen bir slayt alanından bahsediyoruz.Örnek verecek olursak:Slayt alanını blogunuza ekledikten sonra sizin seçtiğiniz bir etiketi örneğin etiketimiz slayt olsun slayt alanında görüntülemek istediğimiz yazılara ekliyoruz. |
.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmWOv4obkFch_94o4LNO6kvH01mMdlDzbRu27fo5dvGeTpwvIrUKCfcfnrswVH4fdGXBxSQ56QmE9_VZfaIzNS9ElaXrWttWseUtx3ilOu3fzd5h8Lhd0JhiLJFQcubaMrYD5eI5hdinOn/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlf3E8cWzkh6H7x6ibzMyOtBg7GCDZqPFWnAJLXWgn-aXpzH3dHRomMoS0zRy796EyH0VjGFojjinphkxXNWqSY0-YVD48AX3zfMAS7D8t2kDlJ4SjHP9re7aa2fuBRMlDh44jR_TaEQtw/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url() no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}
kod içerisinde renkli olarak verdiğimiz 950px ve 325px değerlerini değiştirip slayt alanını kendinize göre boyutlandırabilirsiniz.
5-Html kodları içerisinde Ctrl+F yardımı ile</head> kodunu aratıp buluyoruz.
6-Aşağıdaki kodu kopyalayıp bulduğumuz </head>kodundan önceki kısma yapıştırıyoruz.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8v1Y5FJiZoKuEIyoC5_cgRC_gfJzH_ViLgSSzSNHKCkNa2UNMRfE-jtM2xzqX7GX6jyv9lpykKmDThgyZ4kX9K7T9RLBdTbaGgKqMZWOTkUSXl8pRyDZpxjIC4tu5p506W84BD9FtY4A/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 400;
summaryTitle = 25;
numposts2 = 7;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">devamını oku... </a></p></div><p class="order"><a href="'+posturl+'"></a></p></div>';
document.write(trtd);
j++;
}
}
function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2 ; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);
j++;
}
}
//]]>
</script>
7-Son olarak yine html kodları içerisinde Ctrl+F yardımı ile <div id='main-wrapper'>kodunu aratıp buluyoruz.Aşağıdaki kodu kopyalayıp bulduğumuz <div id='main-wrapper'> kodundan önceki kısma yapıştırıyotruz.
Not:Eğer kodlar içerisinde <div id='main-wrapper'> kodunu bulamazsanız; <div class='column-center-outer'> kodunu bulun ve aşağıdaki kodu kopyalayıp bu kodun bir üst satırına yapıştırın
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='blogmimarı slayt alanı' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</ul>
</div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<div class='shadow'/>
şablonumuzu kaydedip çıkıyoruz.
8-Şablonumuzu kaydedip çıktığımızda kumanda paneli>yerleşim yolunu takip ettiğimizde aşağıdaki gibi bir "blogmimarı slayt alanı" başlıklı blogger slayt alanı gadgetinin blogumuza eklenmiş olduğunu göreceğiz.Başlığı silmeyin slayt alanında görünmeyecek zaten.
Resimde de gösterdeğimiz blogger slayt alanına ait gadgette düzenle linkini tıklıyoruz.Düzenle linkine tıkladığımızda aşağıdaki gibi bir pencere açılacak.
Slayt alanımızın etiket bazlı olduğunu söylemiştik, burdaki gadget içerisine yazdığınız kelime yazılarınızda etiket olarak yazdığınız ve slayt alanında görünmesini istediğiniz yazılarda bulunması gereken kelimedir.Örnekle açıklayalım:Bir yemek blogunuz var bu yemek blogunuzda günün menüsü etiketine sahip 5 adet yazınız var.Günün menüsü etiketine sahip yazılarınızın slayt alnında görünmesini istiyorsunuz, ozaman yukarda verdiğimiz resimdeki alana günün menüsü diye yazıp kaydediyorsunuz.Blogger slayt alanı kullanıma hazır.
18 yorum:
farklı bir teknik uygulanabilir.ama yinede ben , benim bahsettiğim yöntemden yanayım (:
olmuyor arkadaşım ne yapmalıyım hiç birşey çıkmıyor sitede
yaptım sağolun bide arkapan gölge rengini ve kiçik resimlerin arka plan resmini diğiştirdim ama üstündekini değiştiremedim nerden değiştire bilirim
onuda yaptım size boşu boşuna soruyom sizi rahatsız ediyom özür dilerim
mükemmel
fakat slayt etiketindeki yazıların tümünü göstermiyor.ne yapmak lazım.saygılar-teşekkürler
BİR YORUMUM SİLİNMİŞ.NİYE.SEÇTİĞİMİZ ETİKETLER DEKİ TÜM YAZILARI GÖSTEMİYOR DEMİŞTİM.SEÇTİĞİM ETİKETTE 16 YAZI VARDI.SAYGILAR.
slayt alanı belli bir alana sahip kapasite olarak da bellirli bir sayıda yazı alıyor, bu sayıyı aşmamalısınız.Manşet yada slayt alanında zaten güncel konuları yada öne çıkanları koymak için yapıyorlar,
cevap için teşekkür ederim.
on numara beş 5
Çok güzelmiş de birde fotoları sağdan soldan bastırmasaymış daha iyi olurmuş.
bloğumda ekli olmasına rağmen görünmüyor.daha önce görünüyordu
Problem eklentide ki bir "js" uzantılı dosyanın bağlı bulunduğu hostdan silinmesinden kaynaklanıyor.Detaylı bilgi için http://kinghackteam.blogspot.com/2012/12/blogger-google-code-subversion-Repository-sorunu-ve-cozumu.html adresine gözatabilirsiniz.
Merhaba bende daha önce çalışan kodlarda şimdi bi sorun yaşanıyor sorunun nedeninide yanlış anlamadıysam https://masolis-javascript.googlecode.com/svn/trunk/slider.js dosyanın silinmesi tekrar aynı adrese upload ederseniz sorun ortadan kalkacaktır. başka adrese upload ederseniz lütfen url yi iletebilirseniz sevinirim teşekkürler
aynı işlevi gören bir js dosyasını bulup Googlecode gibi yerlere upload edebilirsiniz.sorun böylece çözülmüş olur. Bahsettiğimiz https://masolis-javascript.googlecode.com/svn/trunk/slider.js adresindeki js dosyası silinmiş kod ları alma gibi bir şans yok.bu yüzden dediğim gibi aynı işlevi gören bir js dosyasını bulup upload etmek gerek eklentiyi tekrar çalıştırabilmek için.
yaptığımı geriye almak istiyorum. nasıl olacak?
ben bu slaytı bloguma yapmak ıstıyorum ama bır turlu olmuyor ne yapmalıyım
ben yaptım ama büyük resim ve yazılar çıkmıyor onun dışında bir problem yok küçük resimler çıkıyor yardımcı olursanız sevinirim
Yorum Gönder