Belajar Membuat Blog....!!!: Membuat Slider Post di bawah Header

Jumat, 22 Maret 2013

Membuat Slider Post di bawah Header

Published : 8:33 PM Author : blog

Slider post berperan menampilkan postingan yang diterbitkan dalam bentuk thumbnail dan link yang aktif. Letaknya di bawah header disertai dengan fasilitas slider yang bisa digeser guna meminimaliskan tampilan blog. Sebelumnya lihat dulu DEMO. Berikut langkah-langkahnya:

1) Login blogger

2) Pilih Template > Edit Html

3) Centang Expand template widget

4) Copy kode di bawah dan pastekan di atas tag ]]></b:skin>

Download:

Catatan:
Warna merah bisa kamu ganti ukuran widget image slider
Warna Orange bisa kamu ganti background image slider
Warna hijau bisa kamu ganti warna tanggal image slider
Warna kuning bisa kamu ganti background widget image slider

5) Selanjutnya copy kode di bawah dan pastekan di atas tag </head>

Download:

<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/carousellite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dghl448A8KlpAaIv6mCNnntfZtm0NJcNYcMqe7whqLHsKkb8wrVFw5QaxiQjqJnkUXXAkXnDsjN69tYTCQriEQa5VX-o3rA2lBeYeQ_mPJT7ujt5xMOb33YPOLcNCmBPX2kQUHOLRrk/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;
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('<ul>');
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;
//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 = ["January","February","March","April","May","June","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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]></script>

Catatan:
Warna merah adalah script JQuery version 1.7.2. jika pada template kamu sudah ada maka tidak perlu dicopy ke template
Warna ungu adalah ukuran image postingan slider atau thumbnail

6) Dan copy kode di bawah dan pastekan di atas tag <div id='main-wrapper'>

Download: