 |
| Slider Post |
Letak Fitur ini ada diatas postingan home page blog shobat. dengan fitur ini mungkin blog shobat bisa terlihat lebih rapi dan enak dilihat oleh pengunjung blog shobat.
Bila shobat tertarik membuat atau memasang di blog shobat semua, caranya gampang saja shob asalkan ikuti tutorial berikut:
- Langkah pertama shobat Login terlebih dahulu ke blogger.
- Masuk kemenu Rancangan/Template
- Edit HTML =>> Dan cari kode ]]></b:skin>
- Copy Script berikut tepat 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}Keterangan :
#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/AVvXsEgltPAsR0EDVTgUO5UGdJ3Q3KVa7BfFRPGOQkGOESHadj3K2FXHsTxK9wOi2x9ISyUaMmp6prxRW71D6vcs4BuaZsU5mVv1tV2iQ46fPRDT23wav4FcCd6CGTA36SD6RBBVB6eQqNDlSHQ/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/AVvXsEi8GiLfyVRK1a_g4kqIMpcaAMOA8gEAeb2TTxBCvXw5s7ZxuAFP6POhZIe-xnWJvDC0n8GXLaXuRH2byAUag0KBdsICvMrE6u8nM8mC1QY3qvUOBK815i57G-tjWRZKCa0zAgm01S0ZXIE/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}
- Kode yag berwarna merah di atas itu bisa shobat ganti dengan ukuran template blogger shobat sehingga bisa terpasang dengan pas di blog shobat.
- Langkah berikutnya shobat cari kode </head> dan copy kembali Script berikut tepat di atas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>Keterangan :
<script src='http://johny-template.googlecode.com/files/jquery.innerfade.js' type='text/javascript'/>
<script src='http://johny-template.googlecode.com/files/cycle.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFL6xxhqMiEaN8OMbAs0_LRBOqlPM2CNyJhpOfI6IK9p98jlJ5w_I-SI8CXzzkm6UbCoUWwlGSCVyTodTY4wS43ZPbQvvMgHBAngIg63EYJTAH13TszhkoNu4CjwFoYqM4smzJ9asv90/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 »</a></div>';
document.write(trtd);
j++;
}
document.write('</div>')
}
//]]>
</script>
- Untuk kode Script yang bercetak oranye itu adalah kode Jquery bila shobat sudah terpasang kode tersebut abaikan saja.
- Dan untuk script yang saya cetak merah itu adalah posttingan terbaru yang akan shobat tampilkan di slider blog.
- Dan untuk script yang saya cetak warna kuning itu adalah ukuran panjang dan lebar dari image yang ada di slider post tersebut.
- Kita lanjutkan ke tahapan berikutnya dengan mencari kode Script <div id='main-wrapper'> dan Copy kembali kode di bawah tepat dibawah kode <div id='main-wrapper'>
<b:if cond='data:blog.pageType != "item"'>
<div id='featuredSlider'>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Isi dengan label shobat?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='navigation'>
<ul class='pagination'/> <script>
$('.slides').cycle({
fx: 'fade',
speed: 'slow',
timeout: 3000,
pager: '.pagination'
});
</script>
</div> </div> <!--end .container-->
</div>
</b:if>
Keterangan :
- Jika shobat ingin menampilkan hanya perlabel saja bisa ganti kode yang saya blur oranye dengan label yang akan shobat tampilkan.
- Namun bila shobat hanya ingin menampilkan postingan terbaru saja tinggal ganti saja dengan Default.
- Langkah terakhir shobat save template atau bisa shobat pertinjau terlebih dahulu supaya tidak ada yang salah dalam mengedit Template shobat. dan lihat hasilnya.
Demikian saya sahre Cara Membuat Slider Post Terbaru Otomatis (Tutorial Blog), Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar