| 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. |
|
Şimdi blogger kullanıcıları için tasarlanmış bu şık görünümlü slayt alanını blogunuza eklemeyi anlatalım.
Demo Görünüm1-Blogger Hesabımızla
giriş yapıyoruz.Her ihtimale karşı
şablonumuzun yedeğini alıyoruz
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/AVvXsEiLhH9Kva_na0gyQRbsPJV_DGWDRSiMAHVUMJ_q68saTUgFhPlV13OLtQucHNu0i8kPltWh80st3ojB4XRh8_5fStOzGdWRPjIfd6QtxF0FjLiaN3tgCoPTNxvwouS9sLnTBf6MPVieEOfa/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/AVvXsEhsFPv-HmcIUgFyEu__R8yaiFATGfadz-hjSY2nAEx7agbOdX7FGQMgYv6zIWXPSjtuasBQ5XP0rKtnJ0mVG6J_eQhSstH4QHURtvMX608NmwZi5UTQuDZDl4Y8iNOuiBmAjy2IM9IVPVOn/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.Yine renkli olarak belirttiğim
width:297px ve
height:297px değerleride slayt alanında bulunan büyük resmin boyutlarını belirtir.
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='http://blogokuluslider.googlecode.com/files/blogokuluslider2.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbwbmKMxT0FfYu7t25KjYLFqQJDwATWd3zqYUJhFx3N98S6rPeMFvBMXgxfN6rAePdSKclh-4a7XKER66TggvwCvmcocrrmYgFlbwGpv5onknK1Huhr1A66FV7GJq8tjtQ37vN-e-xz0/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.
