Tutorial memasang slideshow gambar pada blog

Tutorial memasang slideshow gambar pada blog

Baca Juga

Selamat sejahtera kepada semua rakan.

Pertanyaan Saudara Muhd Asyraff bagaimana untuk membuat slideshow pada blog?
Untuk blog Cik Normi, slideshow tersebut telah tersedia pada template. Sop hanya ubah gambar dan sedikit setting sahaja

Sop kongsikan tutorial untuk membuat slideshow cara mudah untuk rakan-rakan lain yang mungkin juga berminat :)

Terdapat 2 cara untuk membuat slideshow ini. Pertamanya boleh masukkan slideshow pada 'add a gadget' atau terus pada html template. Jika template yang tersedia slideshow ini, mereka biasanya telah masuk siap-siap ke dalam template. Cara paling mudah memasang slidashow ialah melalui 'add a gadget'. Boleh diletak dimana-mana sahaja tempat yang boleh dimasukkan 'gadget' atas atau bawah entry atau juga sidebar.

Ikuti langkah berikut untuk memasang slideshow gambar:

1. Pergi ke 'Layout'
2. 'Add A Gadget' dan pilih 'HTML/JavaScript'
3. Masukkan kod berikut:

<style type="text/css">

 /* JavaScript Image Slider By http://www.helperblogger.com/ Share by http://www.sop.name.my */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 590px;
 margin: 0 auto;
        border:5px solid #3399ff;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url() no-repeat;
 z-index: 7;
}

#slider {
 width: 590px;
 height: 300px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBGDfVjl3U75d_1bDcOP56Yy4uhmMzjQdEpCBUXIZPUPqA1kiE-U901K2bb15L2uXPNlnX-cYz-0VuBD_z1Jcn_lDfqxosNE5-joATOrZj_gHW7ZI3ojnzvwIvVVcQLNqMC_YcDhdRpGw/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>

<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMb5omeIY63vbA1q-U9nOPJ4WOYPUa2V6IJeTHs7o2JZz-wPtL5yRraNNO8JQ-SVQdwSbH0hTN6izph0y_bFyEZ3zU6L9CxF9OvadPxbqcETlMyV9xd6sqJesFSYgun99Omp6QA5Zcdxo/s1600/slide-1.png" alt="#htmlcaption"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipd5OhUHoja4Eggn_HiAk0jyRSA0XlFYWNWU8KZWRGsh7A4CZ02WZpF03ynq9sPNNhASPwYaRU70niFxXWz5wG3PVGLQAD8x0r1mE-IMsj5qeBETTWqZ9j3LzuAlR4Z50IOJq6G7KAgN4/s1600/slide-2.png" alt="#htmlcaption"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo9IRiv81hm84DhjWFLoeqSig2YAa0-ZD5ngjaAo7cVrraUNjrQMUTUbRSsIWpEYCIto8tbQUsObP87m82R6vVKs8dUYZ3d5OxmzR_Uyu2Y7_VCaeQMb90Qpcgp3-NrJQxnVuV0V2UOas/s1600/slide-3.png" alt="#htmlcaption"/></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK4gB455FFMQKwMcWWDvmLX2Gxv4BBh0ezJ8W_TSrkG54at6S_zI5VTEFmbxO6Dx3NSWEskpC9yiQx6q4E_FTrHu9uTZ9TEbLASxu6SuHh5iDbC3jaVcywmsvMTlAs3j5dru2a1bD1Qiw/s1600/slide-4.png" alt="#htmlcaption"/></a>

4. Ubah width: 590px; kepada saiz yang sesuai. Jika 'gadjet' tersebut pada entry utama, sila rujuk saiz main entry. Begitu juga jika diletak pada sidebar atau tempat lain.
5. Ubah border:5px solid #3399ff; untuk pilihan ketebalan bolder dan warna bolder slideshow
6. Ubah  width: 590px; dan height: 300px; mengikut saiz slideshow dan gambar anda
7. Ubah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnDqYgBwul-AUt6h6eyoi1Yv6V7FjmUNnPlxKYMYQwnpB3XuxKRror3-aLDSm9GDead5Ru2T2a7MFXT-lBHJvZQT5lCjDINOlWYk9TRcvZMisYIPZ5nVmsfI0OCZ_ic5QgAb1jR4BbXY/s1600/slider-1.png dengan link gambar anda. Masukkan link pada # jika ingin membuat pautan pada gambar. Sila bina gambar mengikut saiz yang anda telah tetapkan untuk hasil yang terbaik :)
8. Tekan simpan.

Slideshow anda telah siap tetapi ia akan terpapar pada semua halaman. Jika anda ingin paparkan slideshow pada halaman utama sahaja, sila ikuti tutorial di sini atau di sini.

Untuk contoh, sila lawati http://upkkl.com