Blogunuza Otomatik Slider Yapın

4 dakika


43
15 Yorum, 9 Paylaşım, 43 Beğeni

otomatik slider, Blogger otomatik slider, blogger eklentileri Blogunuza otomatik bir slider yapmak ister misiniz ? Otomatik derken şöyle ; Önceleri sliderlar için her defasında ayrı ayrı resim ekliyor, url ile uğraşıyorduk. Şimdi bunları tek bir eklentide bulacaksınız. Bu eklenti şöyle işliyor. “Featured” yazan kısmı istediğiniz bir etiket ile düzenliyorsunuz örneğin blogger etiketli kayıtlarınızın görünmesini istiyorsanız “Featured” yazan yere etiketinizi yazacaksınız. Otomatik olarak yazılarınız ve resimleriniz slider’ınıza eklenecektir.

İlk adım : Temanızın yedeğini almayı unutmayın.

Sırasıyla TASARIM > HTML’Yİ DÜZENLE bu yolu izleyin ;
Şimdi widget şablonlarını genişlet’i tıklayın.

Şimdi ctrl + f ile aşağıdaki kodu bulun

</head>

Bu kodu bulduktan sonra üstüne aşağıdaki kodu ekleyin….

&lt;script&gt;
/* Script from:http://simplexdesign.blogspot.com/ */
imgr = new Array();
imgr[0] = &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;

numposts1 = 5;
label1 = &quot;Featured&quot;;

function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf(&quot;&gt;&quot;)!=-1){s[i]=s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);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&lt;numposts1;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&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)[0];break}}
       
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;); b = s.indexOf(&quot;src=&quot;&quot;,a); c = s.indexOf(&quot;&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!=&quot;&quot;)) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&quot;,&quot;Apr&quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&quot;,&quot;Aug&quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&quot;,&quot;Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&quot;&gt;&lt;div class=&quot;sliderPostPhoto&quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;&lt;img width=&quot;590&quot; height=&quot;240&quot; class=&quot;alignnone&quot; src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=&quot;featuredPost&quot;&gt;&lt;h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;&lt;/h2&gt;&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';     
document.write(trtd);      
j++;
}}
&lt;/script&gt;

Şimdi aşağıdaki kodu bulun

</body>

Bu kodun öncesine şu kodu ekleyin

&lt;script src='https://dl.dropbox.com/u/12924430/contentslider.js'&gt;&lt;/script&gt;
&lt;script&gt;
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;], //Valid values: [&quot;inline&quot;, &quot;&quot;] or [&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values: &quot;#increment&quot;, &quot;markup&quot;, [&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;Previous&quot;, &quot;Next&quot;], //labels for &quot;prev&quot; and &quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[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)
}
})
&lt;/script&gt;

Şimdi aşağıdaki kodu bulmalısınız

<div id='main-wrapper'>

Bu kodu bulduktan sonra altına aşağıdaki kodu ekleyin.

 <b:if cond='data:blog.pageType == &quot;index&quot;'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write(&quot;&lt;script src=&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1&quot;&gt;&lt;/script&gt;&quot;);
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

Şimdi son aşamadayız son olarak aşağıdaki kodu arayın ve bulun ctrl + f yardımı ile

]]></b:skin>

Öncesine aşağıdaki kodu ekleyin.

#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility: hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;background:#68667b;background:rgba(104, 102, 123, 0.9);color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Yararlandığım kaynak : http://www.r10.net/ucretsiz-bloglar/777678-blogger-temaya-slider-yapimi.html


Beğendiniz mi? Arkadaşlarınızla Paylaşın!

43
15 Yorum, 9 Paylaşım, 43 Beğeni

Sizin Tepkiniz Nedir?

Beğendim Beğendim
4
Beğendim
Beğenmedim Beğenmedim
3
Beğenmedim
Muhteşem Muhteşem
2
Muhteşem
Şaşırdım Şaşırdım
2
Şaşırdım
Güldüm Güldüm
1
Güldüm
İnanılmaz İnanılmaz
0
İnanılmaz
Kızdım Kızdım
6
Kızdım
Oha Oha
4
Oha
sosyofikir
Doğu Akdeniz Üniversitesi Mimarlık Fakültesi'nden 2018 yılında mezun oldum. Blog serüvenim yaklaşık 8 sene önce başladı. Hala o eski heyecanımı taşımaktayım. Amacım sizler için kaliteli, özgün ve sıkıcı olmayan kullanıcı tabanlı bir site hazırlamaktır. Teşekkür ederim. Bana her türlü konuda ulaşabilirsiniz. admin@sosyofikir.com

15 Yorum

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

  1. hocam gerçekten çok hoş oldu yalnız bir iki sorum olacak cevaplarsanız sevinirim

    – yalnızca bir etiket adı mı verebiliriz
    -birden çok etiket için yada tüm etiketler i nasıl görüntüleyebiliriz

    şimdiden çok teşekkür

    1. Hocam şuan için bir etiket üzerine çalışılmış ama birden çok etiket eklentisi geldiği zaman paylaşırım buradan hocam isterseniz sitemize mail adresiniz ile üye olabilir yeni konularımızdan daha iyi haberdar olablirsiniz.

    1. belirttim ama gözunuzden kaçmış olmalı. Otomatik olarak yazdığınız etikete göre resimler ve yazılar çıkıyor siz ayrıca bir yazı ve ya resim eklemiyorsunuz sadece etiket ekliyorsunuz. Örneğin blogger ile ilgili bir etiketiniz var ve bu etikete bağlı 20 adet yazınız var bu da otomatik olarak blogger yazarsanız görünüyor orada blogger etiketi adı altındaki her yazı ve resim yukarıdaki gibi

  2. Anladım yayın yapıyoruz ve yayını etiketliyoruz böylece otomatikmen yayınımız manşete çıkıyor eyvallah kardeşim saol 🙂

Bir format seç
Kişisel Test
Kişisel bir şey ortaya koymayı amaçlayan sorular dizisi
Basit Test
Bilgiyi kontrol etmek isteyen doğru ve yanlış cevaplı sorular dizisi
Anket
Karar verme ya da görüş belirleme/oy verme
Serbest Yazı
Yazılarınıza Görseller Bağlantılar Ekleyebilirsiniz
Liste
Klasik İnternet Listeleri
Geri Sayım Listesi
Klasik İnternet Geri Sayım Listeleri
Açık Liste
Kendi öğenizi gönderin ve en iyi sunum için oy verin
Oylanabilir Liste
En iyi liste öğesine karar vermek için yukarı veya aşağı basın