otomatik slider manşet


bloğunuza otomatik slider manşet eklentisi
öncelikle bloğunua giriş yapıyosunuz sonra asadaki sırasıyla yerleştiriyosunuz anlattım şekilde

ilk önce ]]></b:skin> bu kodu arattırın sonra üstüne aşadaki kodu yerleştirin
Demosunu Burdan Göre Bilirsiniz 

demo


#featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
#featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
#featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
.featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
.featuredTitle a{color:#f7441a}
.featuredTitle a:hover{color:#000}
.navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
ul.pagination a { float:left; margin:0 5px; display:inline; }
ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41CZgXVddotUDs0013BmhyphenhyphenQyQVfcmcE-2cJf4KtVPyWoENHhMlL_pa8qbLdn2qQ1e-ghPaeVdeqaVCJnNlrOcO46xYq55myDdsmNvBh_1yVictbtjqPxoG7NyKytRriYcYpEIS2tRJUQ/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a:hover { background-position:0 -12px; }
ul.pagination a.activeSlide { background-position:0 -12px }
a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGUIn3UCtLw3bJbra05xxneq5VuSzKWdjw2ydtdGKuT2c-shxOXKvb8ioz0nedN6GJGYzdfH9hmlNUJrO6C9Dt5D0YxwSSoFzuCmEguN2WoYrrtvQ1LR85KTFq8tgvPXq56IKgsdQ_Nuo/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
a.readmore:hover {color:#ff0}


Sonra</head> kodunun üstüne aşağıdaki kodu koyun

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/221222113215/jquery.innerfade.js' type='text/javascript'/>
<script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYYkKV9Sw9ydCGyUfe7063QO0hiSSrO8EeLioU_QfWiGruSBClXeF7y5Hjeh-GhjUhOPLH9t_ISeWNWSqR7vbFbmaobQsO8AaxIhL_pV7e6gqJO44jAFammC6kAOSJGTI5z5oFaEDx_M/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts  = 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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
    document.write('<div class="slides">')
if (numposts <= json.feed.entry.length) {
maxpost = numposts;
}
else
       {
   maxpost=json.feed.entry.length;
   }
   for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
document.write(trtd);


j++;
}
    document.write('</div>')
}

//]]>
</script>

Enson olarak <div id='main-wrapper'>bu kodu  bulup altınada aşağıdaki kodları


Not: kırmızı ile belirttiğim  yere siz kendi  etiket ismini yazıcaksınız.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='navigation'>
<ul class='pagination'/>      <script>
$(&#39;.slides&#39;).cycle({
 fx:     &#39;fade&#39;,
 speed:  &#39;slow&#39;,
 timeout: 3000,
 pager:  &#39;.pagination&#39;
 });
</script>
</div>  </div> <!--end .container-->
</div>

5 yorum:

  1. olmadıdı bu, etiketi nasıl çağırıyoruz

    YanıtlaSil
    Yanıtlar
    1. valla aslına bakarsan bunu denemedim ama mesela en aşağıdaki kodda kırmızı ile yazılmış sport yazan yere kendi hangi yayınlamak istedin etiketi koyup dene

      Sil
    2. burdaki adresi inceleyip baka bilirsin kod burda

      http://www.maskolis.com/2012/08/membuat-slider-image-otomatis-joss.html

      Sil