Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger

Cara Untuk Membuat Image Slider Berdasarkan Kategori Tertentu Pada Blogger- Image Slider adalah Gambar slideshow yang biasanya berada di bawah header Blog.

Untuk saat ini memang banyak template yang meyediakan fitur slideshow ini untuk mempercantik tampilan template mereka. Jika tampilan blog anda masih sederhana dan anda berkeinginan untuk merubah tampilan blog anda agar terlihat lebih cantik nah,,, artikel berikut ini pastinya sangat menarik untuk anda simak.

Selain untuk mempercantik tampilan suatu blog fungsi lain yang tak kalah penting dari fitur slideshow ini adalah agar pengunjung lebih mudah dalam menemukan setiap informasi yang terdapat pada blog kita, dengan tampilan gambar dan sedikit deskripsi yang terdapat padaslideshow tentunya akan semakin menambah rasa penasaran para pengunjung untuk membaca artikel yang ditampilkan tersebut selengkapnya..

Untuk anda yang ingin mencobanya, ikuti langkah-langkah berikut ini ya,,

Cara Membuat Slideshow Berdasarkan Kategori Tertentu

* Pertama-tama Masuklah ke akun blogger milik anda terlebih dahulu

* Selanjutnya masuk ke Tata Letak > lalu pilih Edit HTML (jangan lupa centang expand widget templates)

* Kemudian cari kode ]]></b:skin> (gunakan ctrl+f untuk mempercepat pencarian), jika sudah copy dan pastekan kode dibawah ini diatas kode tersebut:

#featured{margin-bottom:8px}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

* Jika sudah, langkah selanjutnya cari kode </head> , kemudian salin dan tempatkan kode dibawah ini diatas kode tadi

<script>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeswpe8iTmUN42Cp256pudhq-aawVmKlDCwrcVsHrNajNriTLlMKTBwFw-_2wXLmfAzh_pAvkdVbGgtQFdawW0l7TwxjK_Tmb_E_HN733uUoavIXQwZnimvkHZRkfR2XJPO7G2HPu2CM/s1600/no+image.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

numposts1 = 5;

label1 = "Blog";

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

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];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 href="'+posturl+'"><img width="450" height="250" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';

document.write(trtd);

j++;

}}

//]]>

</script>

Perhatikan kode huruf yang berwarna merah label1 = "Blog"; itu adalah label atau kategori yang akan ditampilkan di slideshownya, ganti label tersebut dengan label yang ingin anda tampilkan. 

Tinggi dan lebar Slideshow bisa anda sesuaikan dengan cara merubah kode img width="450"height="250" Pilihlah ukuran yang tepat agar tampilan slideshow anda menjadi lebih menarik.

* Setelah itu cari kode </body> , jika sudah tempatkan kode dibawah ini sebelum kode tersebut.

<script src='http://dl.dropbox.com/u/12924430/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" 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)
}
})
//]]>
</script>

* Langkah berikutnya temukan kode <div id='main-wrapper'> letakkan kode berikut ini di bawah kode tersebut :

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

* Terakhir Save/simpan template, langkah untuk membuat slider image berdasarkan kategori tertentu kini sudah selesai, sekarang lihat hasilnya.

source : http://ardiyantobay.blogspot.com/2012/04/trik-cara-membuat-gambar-slideshow-pada.html