windowsw-7 Adakah anda mahu memasang featured content slider di blog anda seperti yang sedang aku gunakan ini.Featured content slider yang ingin aku tunjukkan kepada anda ini adalah daripada Revolution Template yang telah dibuat oleh Brian Gardner. Kini telah terdapat banyak template yang mempunyai Featured Content slider seperti ini dan selalunya kita boleh tengok terdapat di Template Khasnya untuk pengguna Wordpress.

Lihat Demo Featured Content Slider.

Sebenarnya anda tidak perlu lagi untuk memasang Featured Content Slider ini kerana telah terdapat begitu banyak sekali template-template yang berasal daripada wordpress yang mempunyai slider telah diconvertkan kepada blogspot dan anda boleh dapatkannya dengan percuma seperti di bloganol.com,Voothemes,Cahayabiru,free wordpress blogger templates serta banyak lagi diblog-blog yang lain.Tetapi kebanyakkan Featured content slider ini hanya terdapat di template yang berstail Magazine dan aku pasti bukan semua orang  berminat untuk menggunakan template jenis Magazine ini jadi aku harap dengan Tutorial Cara memasang Featured content slider ini akan memudahkan kepada anda semua memasangnya di tempalte yang anda gemari.Jika anda rasa berminat dan ingin mencuba memasang featured content slider ini bolehlah ikuti langkah-langkahnya dibawah.

P/S:Untuk memasang Featured content slider ini aku nasihatkan supaya anda gunakan hosting anda sendiri ini bagi membuatkan slider anda itu berfungsi dengan baik tetapi aku tahu tidak semua orang yang memiliki hosting untuk menyimpan javascript jadi anda boleh cuba menggunakan hosting yang free seperti   di Hotlinkfiles dan Opendrive.Mungkin banyak lagi terdapat free hosting yang menyediakan direct link nanti aku akan cuba untuk membuat Research dan membuat satu list supaya senang untuk anda semua upload file Javascript di hosting anda sendiri secara percuma.Kepada sesiapa yang tahu tempat untuk menyimpan fail js selain yang aku sebutkan ini bolehlah share dengan semua ya.

1.download dan Upload semula Js file dan Css ini ke hosting anda sendiri.

Mootools.js

Jd.Gallery.js

Jd.gallery.Css

2.Setelah siap upload sekarang anda perlu memanggil semula File Js dan juga Css itu dan diletakkan di dalam blog anda.Buat seperti dibawah.

<script src='http://linkurlanda/Mootools.js'type='text/javascript'/>
<script src='http://linkurlanda/Jd.Gallery.js'type='text/javascript'/>
<link href='http://linkurlanda/Jd.gallery.css' media='screen' rel='stylesheet' type='text/css'/>

kemudian anda cari kode <head> dan pastekan File Js dan Css ini dibawahnya.Kemudian kilk save.

3.Setelah itu anda perlu buat gambar yang ukurannya bersesuainya dengan kehendak anda dan berpadanan dengan blog anda itu.Contoh aku buat gambar yang berukuran 400x196.Dan aku nak ingatkan kepada anda supaya tidak membuat  terlalu banyak gambar dan tidak terlalu besar ukurannya ini untuk mengelakkan blog anda menjadi lambat disaat loading.Anda boleh upload gambar anda di photobucket,imageshack,picasa,Tinypic dan lain-lain.

contoh gambar

porschedes1  

4.Kemudian anda cari kode <div id='main-wrapper'> dan copy dan pastekan kode dibawah ini dibawahnya.Kemudian klik save.Tetapi Sebelum anda memasukkan kode dibawah ini anda perlu memasukkan link url gambar anda disimpan,Target link dan singkatan daripada artikel anda terlebih dahulu.Sila lihat contohnya dibawah.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='featured'>
<style>
#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 190px;
z-index:5;
border: 1px solid #000;
}

.jdGallery .slideInfoZone
{
position: absolute;
z-index: 10;
width: 100%;
margin: 0px;
left: 0;
bottom: 0;
height: 85px;
background: #000;
color: #fff;
text-indent: 0;
overflow: hidden;
}
</style>

    <script type='text/javascript'>
        function startGallery() {
            var myGallery = new gallery($(&#39;myGallery&#39;), {
                timed: true
            });
        }
        window.addEvent(&#39;domready&#39;,startGallery);
    </script>

<div id='myGallery'>
                               <div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div
                <div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div

                <div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div

<div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div
        <div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div
</div>

</div>
</b:if>

 

contoh yang aku buat>

<div class='imageElement'>
            <h2>pic 1</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec a pede et erat fringilla aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc vel urna. Vestibulum id nisi eget lectus tempor tincidunt.</p>
            <a class='open' href='http://arieyblog.blogspot.com/' title='Read More'/>
            <img class='full' src='http://i530.photobucket.com/albums/dd350/dadumerah79/porschedes6.jpg'/>
            <img class='thumbnail' src='http://i530.photobucket.com/albums/dd350/dadumerah79/porschedes6.jpg'/>

</div>

dan dibawah ini apa yang perlu anda tukarkan>

<div class='imageElement'>
           <h2>Tajuk Artikel anda</h2>
           <p>Singkatan daripada artikel anda </p>
           <a class='open' href='target link anda' title='Read More'/>
           <img class='full' src='Link url gambar anda disimpan'/>
           <img class='thumbnail' src='Link url gambar anda disimpan'/>
       </div>

dan kode dibawah ini pula adalah untuk saiz tinggi dan lebar featured content slider ini anda boleh menukarkanya mengikut kesesuain blog anda

#myGallery, #myGallerySet, #flickrGallery {
width: 400px;
height: 190px;
z-index:5;
border: 1px solid #000;

5.Selesai.selamat mencuba aku ucapkan.


10 comments:

  1. xde ape pun aku tgk kat blog demo tu.. cam template biasa jer.. ker pc aku yg ngok ngek..

    ReplyDelete
  2. pc ko ada masalah tu ezany xkn x nmpk slider mcm kat blog aku ni dkt demo tu

    ReplyDelete
  3. skrg ni aku tgh pakaila neon tp jenis lain

    ReplyDelete
  4. aku taktau tak nampak slider ape pon hahaha

    ReplyDelete
  5. Mana slide nyer???
    Ariey...aku pun x nampak..
    Si Lampu neon x nampak..
    Adeh...camana nak buat tutorial kalau x nampak...hehehe

    ReplyDelete
  6. slider tu dh x berfungsi sbb xde hosting nak simpan js file dia..kalau faethal ada hosting sendiri bolehla pakai

    ReplyDelete
  7. salam kenal mas..saya ge belajar buat blog..saya pake template free blogger yg udah punya slider nya..saya ingin menggantikan dengan gambar punya saya sendiri..bagaimana caranya..tlog ya...

    ReplyDelete

Sila tinggalkan komen ada dibawah ini dan yang berkenaan dengan post sahaja dan semua komen akan ditapis dahulu sebelum ditampilkan.