Trick and tips: Cara Membuat Automatic Featured Posts Slider Dengan JQuery

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.
membuat atau menambahkan featured posts slider otomatis

Silahkan login ke akun blogger anda
Pada dasbor >> masuk menu template >> klik edit HTML >> cek lists Expand Template Widget
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

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

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("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</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,

Laman

Wednesday, November 2, 2016

Cara Membuat Automatic Featured Posts Slider Dengan JQuery

Baca juga Trick and Tips Blog Lainya di bawah ini :

No comments:

Post a Comment

Welcome In Creating Website

Contoh Sliding Login Dengan JQuery

Tutorial Blog

Member Login

Not a member yet? Sign Up!