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.

Posting Komentar Blogger Disqus

  1. Main Ke Blog sahabat...sekalian cari2 cari referensi.

    BalasHapus
  2. gan permisi.. klo mau merubah lebar slide gimana ya?? contoh blog saya http://itechcommreborn.blogspot.com

    BalasHapus
  3. artikel yg menarik nie, dan saya menyukainya nie, dan salam kenal dari mico ya, makasi atas infonya dan bagi teman2 yg suka film box office,horor,action dan suka download film. silakan kunjungi situsnya ya, makasi

    BalasHapus
  4. Mantap gan, dah tak coba memaang maknyus, tapi kok ada tulisan "Normal 0 false false false IN X-NONE X-NONE MicrosoftInternetExplorer4 ..." ini maksudnya apa gan ?
    maklum, awam banget tentang kode2an.

    BalasHapus
  5. How to change img size any code?

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL 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>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top