Cara Membuat Slide show ala Zigmag Primuz

Cara Membuat Slide show ala Zigmag Primuz

Mungkin dari para blogger ada yang pernah berkunjung ke suatu blog yang menggunakan template Zigmag Primuz. dimana pada blog tersebut terlihat tampilan slide show yang berisi postingan dan gambar yang ada dalam postingannya. contoh tampilannya seperti gambar dibawah ini.

 

bagaimana bila anda yang tidak menggunakan template Zigmag Primuz tapi menginginkan agar templatenya mempunyai tempilan slide show tersebut. untuk membuat tampilan slide show bergaya Zigmag primuz tersebut, caranya adalah sebagai berikut.

1. Setelah anda login ke blogger, kemudian anda masuk ke menu Tata Letak/Layout, setelah itu masuk ke menu Edit Html.

2. Pada halaman Html template anda, silahkan anda copy dan paste kode CSS dibawah ini di atas kode ]]></b:skin> .

#slider        {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhisAEeVgZbrBTC7lJsbSQbouqAJOcrd3erhrWUccBUvNh7zJlbnetaZZNsgoGMmfR-_as07NkCuAc_InnXrUM57m0q5uCZuLDDfvujKDZXVrt59PuWAwSSWaqrqdYVjsZ1NKMU5ueeploR/s1600/Slide+BG+960.png);      /* Bacground Slide Show */

width: 960px;         /* Ukuran Lebar Slide Show */
 height: 220px;      /* Ukuran Tinggi Slide Show */

overflow: hidden;

position: relative;

margin: 5px 0;
}

#mover {

 width: auto;
 position:absolute;
 overflow:hidden;
}

.slide {

padding: 10px 0px;

width: 940px; /* Ukuran Lebar Tampilan dalam Slide Show */

float: left;

position: relative;

height:200px;  /* Ukuran Tinggi Tampilan dalam Slide Show */

}

.slide h2 {

font-family:georgia, Helvetica, Sans-Serif;    /* Jenis Teks untuk judul Posting  */

font-size: 20px;      /* Ukuran Teks untuk judul Posting  */

color: #fffc09;       /* Warna Teks untuk judul Posting  */

padding:0px 10px 0px 10px;

margin:0px 0px;

width:580px;         /* Ukuran Lebar ruangan  untuk judul Posting  */

overflow:hidden;
        }

.slide h2 a:link, .slide h2 a:visited  {
 color:#fffc09;
 background-color: transparent;
 }

.slide h2 a:hover  {
 color: #fffc09;
 background-color: transparent;
  }

span.slmet {

color: #ee0909;       /* Warna Teks untuk nama Author  */

font-size: 10px;      /* UkuranTeks untuk nama Author  */

font-family:Tahoma, georgia, Helvetica, Sans-Serif;   /* Jenis Teks untuk nama Author  */

line-height: 20px;

width: 400px;       /* Ukuran Lebar ruangan Teks untuk nama Author  */

padding:0px 40px 0px 40px;

margin:0px 0px;

text-transform:uppercase;
}
.slide p {

color: #fff;                         /* Warna Teks untuk Isi postingan  */

font-size: 12px;               /* Ukuran Teks untuk Isi postingan  */

font-family:georgia, Helvetica, Sans-Serif;   /* Jenis Teks untuk Isi postingan  */

text-align: justify;

line-height: 20px;

width: 580px;                        /* Lebar ruangan Teks untuk Isi postingan  */

padding:0px 0px 0px 30px;

margin:0px 0px;
        }

.slide img {

position: absolute;

top: 10px;

width: 250px;    /* Ukuran Lebar Thumbnail Gambar postingan  */

width: 188px;      /* Ukuran Tinggi Thumbnail Gambar postingan  */

left: 620px;          /* Jarak untuk posisi Thumbnail Gambar postingan  dengan sisi kiri blog*/

background:#000;

padding:0px;
        }

#slider-stopper {

position: absolute;

font-family: Georgia, Helvetica, Sans-Serif;

font-weight: bold;

top: 90px;  /* Jarak untuk posisi tulisan Stop/Start dengan sisi atas blog*/

right: 45px;   /* Jarak untuk posisi tulisan Stop/Start dengan sisi kanan blog*/

color: #fff;

padding: 3px 8px;

font-size: 12px;

text-transform: uppercase;

z-index: 1000;

}

Keterangan :

Untuk Backgroung Slide show pada kode CSS di atas yaitu menggunakan gambar yang saya buat seperti dibawah ini. bila anda ingin menggantinya engan karya anda sendiri silahkan anda ganti dengan ukuran 960px.

bila ukuran lebar template anda lebih atau kurang dari 960px, maka anda harus menambah atau mengurangi ukuran gambar backgroundnya, dan sebaiknya semua ukuran yang lebih dari 350pz pada kode CSS di atas anda tambah atau kurangi sesuai perbedaan antara ukuran lebar template anda dengan ukuran 960px. misalnya lebar template anda 1000px, maka semuanya ditambah 40px.

3. Langkah selanjutnya yaitu anda copy dan paste kode dibawah ini tepat dibawah kode  ]]></b:skin>.

<script src='http://www.templatesimages.com/images/ZinmagPrimus/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://www.templatesimages.com/images/ZinmagPrimus/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
        var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
                sfEls[i].onmouseover=function() {
                        this.className+=" sfhover";
                }
                sfEls[i].onmouseout=function() {
                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                }
        }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>

4. Bila anda menginginkan slide show tersebut terletak bawah header, maka anda copy dan paste kode yang berwarna biru dibawah ini dibawah kode. <div id='header-wrapper'> ,  seperti dibawah ini..

<div id='header-wrapper'>
<b:section class='header' id='header' showaddelement='yes'/>
</div>

<div style='clear:both;'/>

<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

<div class='slide'>
<h2><a href='Masukan-Link-post-anda-disini' title='#'>Judul Posting Anda Disini</a></h2>
<span class='slmet'> Nama anda atau Author disini </span>
<p> Tulis sebagian postingan anda disini </p>
<img alt='' src='Link-gambar-yang-akan-ditampilkan-disini'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

<div class='clear'/>

Keterangan :

Silahkan anda Edit kode di atas sesuai dengan memasukan  isi postingan, Link Postingan, nama Author + Tanggal, dan Link Gambar yang akan di tampilkan.

5. Klik Save/simpan dan selesai.

Untuk Lebih Jelasnya silahkan anda praketekkan pada blog anda mengenai cara membuat slideshow bergaya Zigmag Primuz ini. Mungkin cukup sekian dulu postingan kali ini dan semoga bermanfaat,Salam blogger mania