Cara Membuat Automatic Featured Posts Slider Dengan JQuery -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Automatic Featured Posts Slider Dengan JQuery, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger JQuery, Artikel Blogger Tutorials, Artikel Blogger Widgets, Artikel Featured Posts Slider, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Cara Membuat Automatic Featured Posts Slider Dengan JQuery
link : Cara Membuat Automatic Featured Posts Slider Dengan JQuery
Gambar dibawah ini

Cara Membuat Automatic Featured Posts Slider Dengan JQuery

Alhamdulillah kembali lagi dengan tutorial membuat featured posts slider dengan JQuery, sebelumnya telah ada 7 tutorial membuat featured posts slider yang sudah saya posting diblog ini, fetured posts slider yang akan kita buat kali ini berbeda dengan pendahulu-pendahulu sebelumnya, kalau versi sebelumnya kita harus menambahkan images, link dan deskripsi posts secara manual maka featured posts slider kali ini akan otomatis mendekteksi recent posts blog ( postingan atau artikel terbaru blog ) bedasarkan label. Tentunya untuk bisa berfungsi seperti yang telah disebutkan tadi maka script yang digunakan selain script JQuery juga menggunakan script modifikasi dari recent posts.

Tampilan dari featured posts slider ini seperti screenshoot diatas. Sebelum mencoba tutorial ini anda bisa melihat live demonya dulu dengan menekan tombol berikut:

View Demo 

Nah jika anda tertarik untuk membuat atau menambahkan featured posts slider otomatis ini pada blog anda, silahkan ikuti tahapan pembuatannya sebagai berikut:

1. Silahkan login ke akun blogger anda
2. Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut sebelum kode ]]></b:skin>

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

Catatan: Kode CSS diatas masih dapat anda modifikasi kembali, seperti merubah lebar featured posts, ukuran font ataupun warna agar sesuai dengan desain blog anda. Untuk referensi kode warna silahkan gunakan tool tabel kode warna disini

4. Kemudian letakkan script JQuery berikut diatas kode </head>

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

Catatan: Bagi anda yang telah menambahkan script JQuery kedalam template blognya, maka langkah no 4 diatas diabaikan saja.

5. Selanjutnya tambahkan script berikut dibawah script JQuery

<script src='https://www.google.com/jsapi?key=ABQIAAAA2hx9d_4eShgrICEQXtat9RTVScYuS-PfTXZAugRIEupjRG9uXBQkXC_ud1s1okAN7kkWYKCL_xf9qQ' type='text/javascript'/>

<script>

//<![CDATA[

/* Script from:http://www.tipstrikblogging.com/ */

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xnQzqmkYM0kENsWsKXf2mF2lBrpxMAcjvihVnpARaSxmkhyphenhyphenQVjuOdihT-ZsaBtNdb3EwaAgdadqBJo4SaKiYEeaTiX5cBUWy_4b3nZyCSztKiVKB4BY2glNOt6KvTVGP8J-QAKOwfuQ/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>

/* Script from:http://www.tipstrikblogging.com/ */

Catatan: Tulisan berwarna biru diatas adalah jumlah posting yang akan ditampilkan dan label yang dipilih anda sesuaikan dengan label pada blog anda!

6. Tambahkan pula script berikut diatas kode </body>

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

7. Langkah terakhir, tambahkan kode HTML berikut diatas <div id='main-wrapper'> jika anda ingin meletakkannya diatas kolom posting atau diatas <div id='sidebar-wrapper'> jika anda ingin meletakkannya diatas sidebar blog

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

8. Selesai dan lihat hasilnya diblog anda!

Demikian tutorial cara membuat featured posts slider otomatis pada blog, semoga bermanfaat.

Anda bisa melihat tutorial membuat featured posts slider lainnya pada blog ini dengan label featured posts slider.

Demikianlah Artikel Cara Membuat Automatic Featured Posts Slider Dengan JQuery

Sekianlah artikel Cara Membuat Automatic Featured Posts Slider Dengan JQuery kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Cara Membuat Automatic Featured Posts Slider Dengan JQuery dengan alamat link https://trikmitos.blogspot.com/2012/12/cara-membuat-automatic-featured-posts.html