cara membuat related post dan slider carousel

sahabat kali ini anna mau posting cara membuat related pos pada carousel. membuat related pos pada carousel yang terdapat di atas blog anna ini.
sahabat mau menggunakannya atau coba- coba ajja dulu sebagai ilmu pengetahuan.
ini bisa di sebut juga slinder carousel yang mungkin sahabt sudah menggunakanya namun tidak lagi.
slinder carousel juga bisa di buat seperti perlabel atau bisa juga di otomatiskan untuk membaca postingan terbaru.

ok sahabat kita langsung ajja ke acara selanjutnya.
maaf sahabat lihat gambar di bawah ini


nanti hasilnya seperti di atas sahabat gimana sahabat mau mencobanya?
pertama sahabat log in terlebih dahulu .
kedua ke tample langsung edit HTML
setelah itu sahabat silahkan pikir terlebih dahulu.tenang sahabat sebelum sahabat Save sahabat pratinjau ajja terlebih dahulu sehingga sahabat mau tidaknya menggunakan raleted pos menggunakan slinder carousel.
 dari pada kesana kemari sahabat temukan kode </head> 
 untuk mempermudah silahkan Sahabat tekan CTRL+F secara bersamaan.
setelah ketemu sahabat  tempelkan atau pastekan kode di bawah ini tepat di atasnya atau sebelum kode tersebut.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZBW_rMSjYNcKT0MWRkZTGYAy9b2L1Je97nLNq1gQmF8mpI_rzSr2fpZKHMWMxf3hQ5OjOWfbkXOimREl5gYj6gtrZ3KCaU6rtWZk8EvuroeQuOHFY-Lw8cmoCbHRaP3YnZhCc2tqn9UN8/s1600/11231216_704120709720499_8536583366933785763_o.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 10;
summaryTitle =false;
numposts1 = 20;

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="80" class="annone" 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>

untuk tulisan false sahabat bisa ganti dengan angka atau true
sedangkan angka 20 sahabat bisa ganti denag angka berapa posting yang bakal mau di munculkan dalam slider carouesel.
selanjutnya sahabat cari kode ]]></b:skin> dan tempelkan kode di bawah ini tepat di atasnya sehingga kode menjadi:



#carousel{width:720px;height:100px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:5px;width:920px;height:100px;overflow:hidden}
#carousel .thumb{float:left;margin-right:1px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_F9SBMnvSq93Go8TD1vLq-Eul0y1A0VyOEwZpVclKXsvGSSAKlzpALqC2twCZ4oIZb3G_GSbxOYgiN_6J2002dQXzceHO6uBuo4LZh4EBFTNFtYU5WG97eOJBIJrRS9EDp1wPxGNBL6zj/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBmEWejo4SZLwjo5mLs_PchIoG0P5sJ6I4bTgRUL4LgDQV7a-hU92UepI8tgg1TSc5WIyIIvy-UXRNTPKyDIjZOq2qTd5tE_T4yat-3PzB8B-K_Eg7hsKqnQ1XRg8HSYj-13wetlNuIUPN/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:6px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 14px Arial;border:0px solid #ccc;width:190px;height:90px;margin:0 1px 2px 15px;padding:1px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#carousel a img{display:block;background:#fff;margin-top:0}
]]></b:skin>

untuk warna hijau silahkan sahabat ganti sesuai kebutuhan.
dan yang terakir sahabat ini yang inti untuk sahabat tempatkan di atas apa di bawah homepage
silahkan sahabat tempelkan kode di bawah ini  dengan mencari kode <div id='main-wrapper'> bila sahabat di tempelkan di atas seperti yang ada di blog anna.Bila sahabt mau di tempatkan di bawah maka sahabat cari kode</body> dan tempelkan tepat di atasnya.



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/ blog?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>    
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,    
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)    
</script>
</b:if>

Tulisan blog   bisa sahabat ganti dengan label blog sahabat.
dan lihat hasilnya sahabat di pratinjau terlebih dahulu ya sahabat
setelah itu baru sahabat save.

oya sahabat

kode yang di bawah ini sahabat kode bila sahabat pemansang dengan postingan terbaru

script src=\"/feeds/posts/default?max-results

untuk menggantikan code di bawah,yang sesuai dengan label blog sobat

script src=\&quot;/feeds/posts/default/-/ blog?max-results

semoga bermanfaat.

Share this post