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.
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
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($('myGallery'), {
timed: true
});
}
window.addEvent('domready',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.
xde ape pun aku tgk kat blog demo tu.. cam template biasa jer.. ker pc aku yg ngok ngek..
ReplyDeletepc ko ada masalah tu ezany xkn x nmpk slider mcm kat blog aku ni dkt demo tu
ReplyDeleteaikk ko tak pakai slide ek? dulu pakai
ReplyDeleteskrg ni aku tgh pakaila neon tp jenis lain
ReplyDeleteaku taktau tak nampak slider ape pon hahaha
ReplyDeletex nmpk ke hehe pelik ni..
ReplyDeleteMana slide nyer???
ReplyDeleteAriey...aku pun x nampak..
Si Lampu neon x nampak..
Adeh...camana nak buat tutorial kalau x nampak...hehehe
slider tu dh x berfungsi sbb xde hosting nak simpan js file dia..kalau faethal ada hosting sendiri bolehla pakai
ReplyDeletesalam 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...
ReplyDeleteblog sya ini www.elib-mrb.co.cc
ReplyDelete