Beatdownx - Cara Memasang Automatic Featured Posts Slider JQuery Di Blog - Hi, the article you are reading is Cara Memasang Automatic Featured Posts Slider JQuery Di Blog ,the information that we present as best as possible. Hopefully the contents of the post Article Blog, that we wrote according to what you are looking for, useful and can help you. all right, have a nice reading.

Cara Memasang Automatic Featured Posts Slider JQuery Di Blog

Featured posts slider ini akan otomatis mendekteksi recent posts blog bedasarkan label yang sudah kamu buat pada postingan blog kamu. Nah buat sobat blogger  yang merasa tertarik untuk Menampilkan Widget Automatic Featured Posts Slider JQuery Di Blogger kali ini, langsung saja ikuti resepnya sebagai berikut :

1. Silahkan login ke akun blogger sobat masing-masing
2. Karena kita akan melakukan Edit HTML, untuk itu sebaiknya Backk-up dulu template blog kamu untuk mengantisifasi kesalahan dalam melakukan Edit HTML
3. Setelah template berhasil kamu amankan, sekarang silahkan masuk kehalaman Edit HTML Blogger
4. Setelah kamu berada pada halaman Edit HTML sekarang cari kode ]]></b:skin> (agar pencarian kode lebih mudah, gunakan tombol CTRL + F dan F3)
5. Jika sudah menemukan kode tersebut Copas kode dibawah ini dan letakan diatas kode ]]></b:skin>  tadi.

#featured{margin:0;padding:10px 10px 0}
.sliderwrapper{position:relative;overflow:hidden;height:270px;-webkit-box-shadow:#222 0 2px 8px;-moz-box-shadow:#222 0 2px 7px;}
.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
.pagination{text-align:right;padding:15px 0 10px}
.pagination a{font-size:11px;color:#fff;background:#5e5e5e;text-shadow:0 2px 2px rgba(0,0,0,0.3);padding:3px 6px}
.pagination a:hover,.pagination a.selected{color:#000;background-color:#aeaeae}
.featuredPost{width:330px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{font-size:12px;line-height:1;margin:0}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

6. Langkah berikutnya Cari kode </head>. setelah ketemu letakan script Jquery dibawah ini tepat diatas kode </head> tadi.

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

Catatan : Jika Blog anda sudah menggunakan Jquery 1.2.6 sebelumnya, sobat bisa mengabaikan langkah ini.
7. Selanjutnya Copy kode dibawah ini dan letakan diatas kode </head>

imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoPGiDHVn0D8qzHCJ_7mfRXOKKt7ct_Z1wffH7EtnjHZFsF1-ovQL00Mgwce-4M-h0Ek4KzDFgFD0uOxRCP2GrpUccoIvIMN3z-8emXEbEx0O_EhneK0-nyKcJLTwlahvwV0VrqfUgI84/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
numposts1 = 6;
label1 = "Agama Islam";
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="350" height="270" 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>

Keterangan : Pehatikan kode yang berwana hijau dalam script diatas. Kode berwarna hijau tersebut adalah Jumlah Postinga yang akan ditampilkan dan nama label yang dipilih. silahkan kamu sesuaikan. kode yang berwana merah adalah lebar dan tinggi gambar yang ditampilkan.
8. Sekarang cari kode </body>, sudah ketemu copy kode dibawah ini dan letakan diatas kode </body> 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>

9. Masih pada halaman Edit HTML, Cari lagi kode <div id='sidebar-wrapper'> jika ingin melatekan Featured Post Slider di bagian sidebar atau cari kode <div id='main-wrapper'> jika ingin meletakan Featured Post Slider di atas postingan. Jika sudah ketemu salah satu kode tersebut copy dan paste diatas kode tersebut.


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

10. Langkah terakhir, klik Simpan
11. Selesai dan lihat hasilnya

Article Cara Memasang Automatic Featured Posts Slider JQuery Di Blog

Thats all Article about Cara Memasang Automatic Featured Posts Slider JQuery Di Blog for this time, thanks for reading and dont forget to share if this article helps you.

Related Post