cara membuat feurture post tumbner ulr dengan ganbar di bawah.
anna coba, dan hasilnya sahabat bisa lihat di SINI
bagaimana? sahabat mau coba :
caranya ya kita lanjuta ajja deh
sahabat log ini ke blogger sahabat.
setelah itu sahabat cari kode ]]></b:skin>dan letakan kode di bawah ini tepat diatasnya
#featuredContent{float:left;width:850px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:650px;height:345px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:650px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-rDQjx7zeM9zXqu2ekGg-FvGVELx29lIdPUPbn9dYuEwtLEe4Um5DayWReUG10av0CAdAUiuDZwv35Ux6dH0fto_8iGKJPcXNxqLc_nbk5QRj-cu3648Lbw3RyOXjo1EFf4rzO4eTJRQ-/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:615px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:115px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:2px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:2px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:2px solid #357798}
setelah itu sahabat cari kode </head> dan letakan di atasnya kode tersebut.
<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh9G1vlXe8WNomw7F5DU1ylX3rYFkrUKZtiIFcfCkCA9-wQILir1JzS4WfTForC5ij_3hdhV-sdstSLH0MzS9ycUwRd91J18RbkYn-XqBl71X8-8cgaIKIFMhBsP62Wsw67JwRRH0X73Mu/s1600/11231216_704120709720499_8536583366933785763_o.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryTitle = 25;
numposts3 = 5;
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 showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="600" height="340" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}
}
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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 daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li><a class="toc" href="#"><img width="200" height="100" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
untuk warna merah silahkan sahabat ganti sesuai kebutuhan blog sahabat.begitu juga yang di bawah ini.
tetap di situ sahabat, bila sahabat belum aja JQUERY silahkan sahabat copy pastekan kode berikut tepat di atas yang tadi sahabat pastekan
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
setelah itu sahabat cari kode <div id='main-wrapper'> latakan kode di bawah ini tepat di bawahnya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'/>
</div>
</b:if>
setelah itu sahabat save.
Tunggu dulu sahabat jangan lihat hasilnya karna belum selesai.
Untuk berikutnya sahabat klick TATA LETAK
lalu gadget javascrit dan pastekan kode di bawah ini
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[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>
</div>
silahkan sahabat pilih mau diletakan di mana.Oya sahabat punya anna sih yang baru postingan.kalau sahabat pengen yang perlebel sahabat tinggal tambahin -/label sahabat? yang tanda hijau ya sahabat
sudah deh baru sahabat lihat hasilnya....