Membuat Slider Image Post Otomatis - Hallo sahabat Anak Google, Pada Artikel yang anda baca kali ini dengan judul Membuat Slider Image Post Otomatis, admin mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Mudah-mudahan isi postingan Artikel Blogger, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. Selamat membaca ya.

Judul : Membuat Slider Image Post Otomatis
link : Membuat Slider Image Post Otomatis

Membuat Slider Image Post Otomatis

Tutorial Blogger - Membuat Slider Image Post Otomatis. Postingan baru pasti akan sangat menarik jika kita tampilkan dengan tampilan yang lebih kreatif. Slider Image Post ini fungsinya adalah untuk menampilkan postingan terbaru anda dengan menampilkan gambar slide dan deskripsi postingan pada setiap slidenya.

Letak dari fitur ini ada di atas postingan yang ada di home page  anda.  Dengan fitur ini maka template anda akan terlihat lebih indah, rapi, dan profesional. Pada Slider Image Post kali ini dibuat sederhana dan akan sedikit menggunakan javacript yang pasti Slider Image Post ini leih enteng deh.

Beginilah langkah-langkah cara membuat Slider Image Post-nya:

1.Login ke blogger dengan akun Anda
2.Masuk ke template > Edit HTML, kemudian centang expand widget templates
3.Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan, sebaiknya backup dulu template anda.
4.Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#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/AVvXsEj-KE4EGZCEgY8CUE0NquS6GjbyOxgQg4Tty7idN-Td5F5TFLNdH0d45WtT_ZgLXLq13Vi9V-Ok8PT86s-6kYh5qFAlwFW9osXLo_174l_RksRQ5YXnl72v1rgkWf_37g1smGvfi1DqWcA/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/AVvXsEjPIDOiKNIPvEka9uOXf28wjCWxwt36th1grRn948UFDeqLnBf5rqGsCpJA077bgthJn8RNHQF3qUkx1kXvT6z87sdFbdX7or5nkhXLDUt7mx77ezDhqP4BISYwEF3Ml09qHaxjDCct0jU/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}

Perhatikan kode yang berwarna biru di atas adalah untuk mengatur lebar dan tinggi slider-nya silahkan untuk disesuaikan dengan keadaan template anda.

5. Cari kode </head> dan letakkan kode dibawah ini tepat di atasnya.

<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/jquery.innerfade.js' type='text/javascript'/>
<script src='https://masolis-javascript.googlecode.com/svn/trunk/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirOAcTmgCU7Z_nQm9ZipzWOPigcUhLM6kK-Uqq-MYWQmDFg6rkWMlDNF4pOcNW_EJmVxdWwnnv1a6P67tKOXjlHMobMuNay8y0PW0leH665ubLp3h2PilT_CCWj3pPYyMi2-iJa3VubhY/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>

Perhatikan kode yang berwarna merah itu adalah kode jquery.min.js seri terbaru yang digunakan pada tutorial ini. Jika template anda sudah terpasang kode jquery.min.js  walaupun serinya berbeda maka tidak usah memasukkan kode jquery di atas.
Untuk kode yang berwarna biru di atas adalah tinggi dan lebar gambar pada slide-nya.

6. Langkah ke enam adalah memasang kode pemanggil Slider image post-nya. Cari kode <div id='main-wrapper'> dan letakkan kode dibawah ini tepat dibawahnya:

<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?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>
</b:if>

Jika anda ingin menampilkan slider perkategori tinggal ganti kode:

/feeds/posts/default?max-results

Dengan kode:

/feeds/posts/default/-/LABEL YANG INGIN DITAMPILKAN?max-results

 7.Klik save template.

Demikianlah tadi tutorial Membuat Slider Image Post Otomatis yang pastinya akan menambah inda tampilan template anda.

Demikianlah artikel tentang Membuat Slider Image Post Otomatis

Sekianlah artikel Membuat Slider Image Post Otomatis kali ini, mudah-mudahan bisa memberi manfaat untuk pembaca semua.

Anda sekarang membaca artikel Membuat Slider Image Post Otomatis dengan alamat link https://anakugoogle.blogspot.com/2012/09/membuat-slider-image-post-otomatis.html

Tweet

Unknown