ibrahimfirat.net | KişiseL Görüş Evrensel Bilgi: blogger slide manset

blogger slide manset

Blogger Yatay Slayt Eklentisi

By: İbrahim Fırat on Salı, Aralık 25, 2012 / yorum : 0 blogger, blogger eklentileri, blogger slide manset, iF

Blogger için vaz geçilmez olan eklentilerden bir taneside slayt alanı eklemektir. Bu yazımda üstteki resimde gördüğünüz gibi yatay bir slayt alanı oluşturacağız. Blog'unuz bu sayede hem daha şık bir görünüme ve profosyonel bir tasarıma sahip olacak.

Bu eklentiyi sitenizin hemen hemen her tarafında kullanabilirsiniz üstte, altta veya ortada seçim sizin zevkinize kalmış bir olay.

Kurulumu:

Blogger kumanda paneli şablon HTML'yi düzenle Ctrl + F yardımı ile aşağıdaki kodu bulunuz.

</head>

Yukarıda bulduğunuz kodun üstüne gelecek şekilde aşağıdaki kodları ekleyiniz.

Üstteki işlemi yaptıysanız </body> kodunu bulun ve üstüne aşağıdaki kodları ekleyin..

Ve son aşamaya geldik blogger kumanda paneli yerleşim gadget ekle html javascript seçeneğinden aşağıdaki kodu ekleyiniz.

<br />
                <ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/4.jpg" alt="image04" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/5.jpg" alt="image05" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/6.jpg" alt="image06" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/7.jpg" alt="image07" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/8.jpg" alt="image08" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/9.jpg" alt="image09" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/10.jpg" alt="image10" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/11.jpg" alt="image11" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/12.jpg" alt="image12" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/13.jpg" alt="image13" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/14.jpg" alt="image14" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/15.jpg" alt="image15" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/16.jpg" alt="image16" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/17.jpg" alt="image17" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/18.jpg" alt="image18" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/19.jpg" alt="image19" /></a></li>
<li><a href="#"><img src="https://dl.dropbox.com/u/60346665/BlogHocam-MinimalSlayt/images/small/20.jpg" alt="image20" /></a></li>
</ul>
<br />

Bütün işlemleri doğru yaptıysanız, sorunsuz çalışacaktır..

Kaynak >> http://bloghocam.blogspot.com/2012/12/minimal-yatay-slayt-eklentisi.html

Blogger Slayt Alanı Ekle ( Otomatik )

By: İbrahim Fırat on Perşembe, Ekim 11, 2012 / yorum : 1 blogger, blogger eklentileri, blogger slide manset, Etiket bazlı slide, iF, otomatik slayt alanı, Slayti Slide ekle

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(http://4.bp.blogspot.com/-FePkOajMbd8/T656LNNmKSI/AAAAAAAAGEE/Vcpgql7qqXQ/s1600/shadow1.png) no-repeat center;margin:0 auto}<br />
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(http://4.bp.blogspot.com/-XIuN9wCp7P4/T6v_XWDrceI/AAAAAAAABKg/X5A25lOVkVk/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...

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;
}

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++;
 }
 
}

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.

Sitemizin kategorilerinde bulunan toplam yazı, bu yazılara yazılmış yorum bulunmaktadır!

Popüler
Yasal Uyarı
Yorumlar
Kategori

Tüm Hakları Saklıdır - !BR@H!M F!R@T - Skype: live:iletisim_1269 - Tema Düzenleme | Set by NarKo | Sitemiz, hukuka, yasalara, telif haklarına ve kişilik haklarına saygılı olmayı amaç edinmiştir. Sitemiz, 5651 sayılı yasada tanımlanan yer sağlayıcı olarak hizmet vermektedir. İlgili yasaya göre, site yönetiminin hukuka aykırı içerikleri kontrol etme yükümlülüğü yoktur. Bu sebeple, sitemiz uyar ve kaldır prensibini benimsemiştir. Telif hakkına konu olan eserlerin yasal olmayan bir biçimde paylaşıldığını ve yasal haklarının çiğnendiğini düşünen hak sahipleri veya meslek birlikleri, ibo.firat@gmail.com mail adresinden bize ulaşabilirler. Buraya ulaşan talep ve şikayetler Hukuk Müşavirimiz tarafından incelenecek, şikayet yerinde görüldüğü takdirde ihlal olduğu düşünülen içerikler sitemizden kaldırılacaktır. Sitede yayınlanan köşe yazılarından yazarları sorumludur. Site yönetimine ulaşmadan yapılan hukuki işlemlerden site yönetimi hiçbir şekilde sorumlu tutulamaz. Bu siteye giren her kullanıcı bu duyurudan haberdar olmuş sayılır. Sitedeki tüm harici linkler ayrı bir sayfada açılır. Sitemiz harici linklerin sorumluluğunu almaz.

Sponsor Alanı

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

Blogger Yatay Slayt Eklentisi

Kurulumu:

Blogger Slayt Alanı Ekle ( Otomatik )

Popüler Yayınlar

Comments

Pages

Slider

İlgi Çeken Videolar

Sağlık

Teknoloji

Sinema

Televizyon

Ne Nedir?

En5 Konular

Blogger Yatay Slayt Eklentisi

Kurulumu:

Blogger Slayt Alanı Ekle ( Otomatik )

Popüler Yayınlar

Comments

Labels

Pages