44 Cara Membuat Automatic Featured Posts Slider Dengan JQuery

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Automatic Featured Post Slider BloggerAlhamdulillah 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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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.


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

44 komentar :

  1. apa gak membuat blog lebih berat nih?

    BalasHapus
    Balasan
    1. Setiap penambahan script pasti nambah waktu loading, tp berat tidak juga tergantung koneksi internetx.

      Hapus
  2. Oke juga nih..
    Keren sob..

    Tapi cocok nggak ya dengan template blog saya..

    Coba dulu aja deh..
    Ijin praktek sob..
    Thanks..

    BalasHapus
    Balasan
    1. Untuk menyesuaikan dengan template blog khn tgl penyesuain code CSSx, Oke Silahkan dicoba, semoga berhasil dan bermanfaat!

      Hapus
  3. Pa kabar Ukhti? Meskipun Ukhti super sibuk (jarang OL) tapi sekali posting kualitasnya luar biasa. Btw, desain blognya makin mantap dan full animasi.

    BalasHapus
    Balasan
    1. Alhamdulillah baik, terimakasih ats apresiasinya.

      Hapus
  4. bikin berat loading blog gak kawan?

    terimakasih sudah berbagi tutorial, dan salam kenal.

    BalasHapus
    Balasan
    1. Iya, sama-sama. Thanks juga kunjungan dan apresiasinya.

      Hapus
  5. boleh juga untuk di coba di blog saya.
    iji nyoba dulu ya kawan.

    terimakasih banyak sebelumnya.

    BalasHapus
    Balasan
    1. Silahkan dicoba, teimakasih apresiasinya.

      Hapus
  6. Balasan
    1. Sama-sama, terimakasih juga tuk kunjungan dan apresiasinya.

      Hapus
  7. Mampir sekalian bersilaturrahmi aja sob..

    BalasHapus
    Balasan
    1. Terimakasih telah menyempatkan mampir, smg terus mmbudayakan silaturahim ssama blogger.

      Hapus
  8. Sobat, sebelumnya saya mohon maaf bila mengeposkan komentar yang kurang sesuai dengan topik yang dibahas dalam uraian artikel ini.

    Sekedar memberitahukan bahwa uraian jawaban atas pertanyaan yang Sobat ajukan, dapat dilihat pada artikel yang sebelumnya Sobat gunakan untuk mengeposkan komentar.

    Sekian dan salam. :)

    BalasHapus
    Balasan
    1. Gpp, terimaksh ats kunjungan dan jwbn anda.

      Hapus
  9. info yang sangat bermanfaat soob ..

    thanks atas infonya ..
    ditunggu kunjungan baliknya :D

    BalasHapus
  10. kalo labelnya diganti dengan recent post bisa gk ya?
    atau slide show untuk recent post gtu?

    BalasHapus
    Balasan
    1. Bisa jk feedblog pd script recentpostsx diganti.

      Hapus
  11. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
    Balasan
    1. Maaf ya, kolom komentar ini disediakn untuk anda menyampaikan saran kritik membangun sbg apresiasi anda sbg pengunjung dan pembaca yg baik. Bukan untuk sekedar nitip link.

      Terimaksh ats perhatian dan pemaklumanx.

      Hapus
  12. .: keren tutorial-nya Sob, kalo tidak salah templates yg ane pake sudah ada fasilitas beginian dah...^_^

    BalasHapus
  13. boleh di coba.. mas tolong posting slidenya berada di atas posting.. terima kasih

    BalasHapus
  14. Aku suka ini
    www.hendyazizirpelangi18saudara.blogspot.com

    BalasHapus
  15. terimaksih atas informasinya dan petunjuknya,,,good luck

    BalasHapus
  16. Work buat website ga? saya ada tugas nih disuruh membuat website. thanks :)

    BalasHapus
  17. Work buat website ga? saya ada tugas nih disuruh membuat website. thanks :)

    BalasHapus
  18. Mantap .. ijin coba dolo .. semoga berhasil saya masukan ke blog saya..

    jangan lupa mampir yah ke blog ane Biaya Pendidikan

    BalasHapus
  19. sip bos caranya


    from : http://wayanfai-s.blogspot.com/

    BalasHapus
  20. makasih mas, kunjungi juga blog adik ya http://prediksibola888.blogspot.com

    BalasHapus
  21. kalau di template blog tidak ditemukan kode id='main-wrapper bagaimana gan?

    BalasHapus
  22. wah banyak ya bos yang di tambahkan nya,,, bisa ga ya saya melakukanya nie hehe

    BalasHapus
  23. Akhirnya... ketemu juga cara membuat featured posts slider otomatis. Thanks

    BalasHapus
  24. demo nya kok ga ada sliderslid nya bos..

    BalasHapus
  25. Aku dah coba dan masukin kode feature post di blog ku dan berhasil .. nih contoh penampakannya >> Best Android Game

    Terima kasih bnyk ilmu nya sangat bermanfaat.. saya update selalu artikel dari sini :)

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!