Automatic Recent Posts Slider dengan jQuery Untuk Blogger

P osting terbaru Oto Website kali ini akan membahas Automatic Recent Posts Slider dengan jQuery Untuk Blogger. Automatic Recent Posts Slider dengan jQuery Untuk Blogger adalah cara terbaik untuk menunjukkan posting terbaru blog Anda sebagai slide show.
Anda mungkin melihat slider slider seperti di blog wordpress banyak tetapi ketika datang di blogger hal ini tentunya tidak banyak. Widget ini dibagi oleh Abu Farhan dan saya melakukan banyak perubahan menggunakan trik saya sendiri lebih lanjut saya sesuaikan plugin ini untuk bekerja sempurna di blog Anda.
Anda mungkin berpikir bahwa kustomisasi gadget ini akan sulit, maka anda salah, gadget ini sangat mudah untuk menyesuaikan dan sangat mudah untuk. Anda tidak perlu menambahkan foto, teks atau link seperti slider lainnya semuanya otomatis. Di sini saya memberikan tutorial tentang menambahkan slider recent post untuk blogger.

Live Demo ▼

---

Cara Tanbah Automatic Recent Posts Slider

---

---

Langkah 1 - Menerapkan Gaya

---

1. Pergi ke akun Blogger.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Seperti biasa Centang Expand Template Widget ➨ Backup template Anda.
4. Sekarang temukan kode ]]></b:skin> (bila kesulitan mencarinya coba klick DISINI)
5. Lalu tambahkan bawah kode CSS berikut tepat di atas kode tadi.

/* START EasySlider By otowebsite.blogspot.com */
#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}
#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}
.slide-desc {
    background: transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}
.slide-desc h2 {
    display: block;
}
.crosscol .widget-content {
    position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}
#slider2 {
    margin-top: 1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}
#nextBtn, #slider1next {
    left: 520px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_prev.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a {
    background: url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_next.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}
ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}
ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}
ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}
/* END EasySlider By otowebsite.blogspot.com */

Anda dapat mengedit nilai-nilai CSS di atas dengan menggunakan OW - HTML Editor untuk melihat live preview perubahan (Catatan - Jika Anda mengedit gadget ini di  OW - HTML Editor  maka anda harus menambahkan ketiga kode secara bersamaan di editor).

---

Langkah 2 - Menambahkan JavaScript

---

1. Sekarang temukan kode </body>
2. Tambahkan kode di bawah ini hanya setelah / di bawah kode </body>.

<!-- Start easy content slider by otowebsite.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by otowebsite.blogspot.com -->

3. Sekarang menyimpan template Anda.

---

Menambahkan Gadget

---

Sekarang pergi ke Page Layout
Tambah Gadget ➨ Pilih elemen HTML / JavaScript.
Tempel kode di bawah ke dalam elemen HTML / JavaScript tadi.

<div id="slider">
<script style="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/easy-Slider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://otowebsite.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Sebelum menyimpan lakukan perubahan dulu.

---

Melakukan Perubahan

---

• Sekarang ganti http://otowebsite.blogspot.com dengan url blog Anda sendiri.
• Untuk mengubah jumlah posting yang akan di tampilkan, cukup edit kode var numposts_gal = 6; dalam kode di atas.
• Jika Anda ingin mengubah jumlah karakter untuk menunjukkan dalam deskripsi edit kode var numchars_gal = 150;

Sekarang Anda dapat menyimpan semua perubahan dan melihat hasil kerja Anda.

---

Apa Selanjutnya ?

---

Pertanyaan, pertanyaan dan umpan balik selalu welcome.Also jika Anda memerlukan bantuan tentang menyesuaikan gadget ini maka jangan ragu untuk meminta bantuan dari saya. saya akan dengan senang untuk membantu Anda.