Blogger Slayt Alanı Ekle ( Otomatik )

ads

ads

Blogger   için ototmatik slide manset slayt alanı blogger hızla her geçen gün kendini geliştirmekte ve en iyi seviyelere gelmektedir, fakat bloglarımızı eklentilerle daha iyi profosyonel görünümlere sokmamızda mümkün bunlardan en önemlisi  slide slayt alanıdır  büyük sitelerde ve bir çok sitelerde görmüssünüzdür      çeşitli çeşitli   slayt alanlarını blogger içinde bir çok  manset eklentisi var ama ben sizlere en iyi en şık  güzel duracağına inandığım eklentiyi  anlatmaya çalışacağım:



1-Blogger Hesabımızla giriş yapıyoruz.Her ihtimale karşı şablonumuzun yedeğini almayı unutmayınız 
2-Kumanda Paneli>Şablon>Htmlyi Düzenle>Devam Et yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz.
 3-Html kodları içerisinde Ctrl+F yardımı ile ]]></b:skin> kodunu aratıp buluyoruz. 
4-Aşağıdaki kopdu kopyalayıp bulduğumuz ]]></b:skin> kodundan önceki kısma yapıştırıyoruz...

.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8BbCAA0dvUPOoVY42K9Ck8HkzXkN5aPD5tEG8NRe606wYxpfnJGcZGhHV6dGUQtcv1OaU-9WRZnj3boNCTHrfLm8GxQFvS08dMvg8PzUu6cRF-u9B0GDlWSCf3Pp6xbtt7OWrGhog3k08/s1600/shadow1.png) no-repeat center;margin:0 auto}<br /> #featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8ZhQ0f3G_1UmOnU5CqDOGAGIPXWso-l4pemT7oUYEckxxqn-_U7QGsLAW6saacUSKdE22LbJACsd2ljCBXrzIXKGPBklU7MktK5R47kXQuAuL8_A2iUCDOHDirzajhQRZI_4HRAvomCPa/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}<br /> #featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}<br /> #featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}<br /> #featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}<br /> #featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}<br /> #featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}<br /> #featured-slider .featuredPostMeta a{color:#a1a1a1}<br /> #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;}<br /> #featured-slider .order a:hover{ color:#515151;}<br /> .featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}<br /> .featuredTitle a{color:#719429}<br /> .featuredTitle a:hover{color:#0a0a0a}<br /> #paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}<br /> #paginate-featured-slider ul{width:595px;list-style:none}<br /> #paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}<br /> #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/AVvXsEgTwoDJLCMJT9sfeTkQN5w6aTdEyng5QWUqorWLCyB2UKkNauXErSHzrAj_UngqUrGp_QJSikbXzvZ-Jl4QTWhXDSe2PLq2DPNB4vEpG0s6ExFLzLO2i0dgWimhyphenhyphenGWZljZYKRfi1o3WCG0/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-Ve son aşamaya geldik:  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

kodundan önceki kısma yapıştırıyotruz...

<b:if cond='data:blog.url == data:blog.homepageUrl'><br /> <div id='slide-wrapper'><b:section class='slide' id='slide' preferred='yes'><br /> <b:widget id='HTML82' locked='false' title='blogmimarı slayt alanı' type='HTML'><br /> <b:includable id='main'><br /> <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><br /> <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><br /> </b:includable><br /> </b:widget><br /> </b:section><br /> </div></b:if><br /> <div class='shadow'/>


Not: Slayt alanında hangi yazılarınızın görünmesini istiyorsanız o alana o yazının etiketini girmeniz gerekir mesela slayt alanı gatgetinin içine slayt yazdığınız zaman slayt etiketli yazılarınız manset olarak temanızda listelenecektir.

ads