Memasang sliding Zinmag Primus pada blog

satu lagi tips dan trik mempercantik blog. tips kali ini adalah memasang sliding gallery zinmag primus. sliding zinmag primus adalah suatu widget seperti foto gallery yang dapat bergerak secara otomatis. selain itu, terdapat juga tombol "Start" dan "Stop" yang berfungsi mengendalikan slidingnya.

cara memasang sliding zinmag primus cukup mudah. selain itu, kelebihan menggunakan sliding ini adalah dapat membuat blog kita menjadi lebih hidup. kita bisa memasang artikel-artikel terbaru disana agar artikel kita lebih dilihat oleh visitor. berikut ini preview dari sliding ala zinmag primus :

Berikut ini tutorial membuat sliding zinmag primus pada blog.

Langkah 1
1. Menu Dashboard, klik Tata Letak, klik Edit HTML.
2. Centangin checkbox Expand Widget Template.
3. Copy paste kode berikut ini diatas / sebelum kode ]]></b:skin> :

#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsJTaNxV-esBt8iv1DspyiyGiYRVJESylKaEbeJjn-B1xcvC5SijrXyRjqWq_QO0l84jQPKdIuvyCf01SW1jrI7H-6oEhtYlrCZFtAc8T-dDMsekMEoiKGHqxL-s8ZQ2X8FdXB3I-nBo/s1600/slide.png);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0; }

#mover {
width: auto;
position:absolute;
overflow:hidden; }

.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px; }

.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #3b5998;
padding:0px 0px 10px 30px;
margin:0px 0px;
width:500px;
overflow:hidden; }

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

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

span.slmet {
color: #3b5998;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase; }

.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px; }

.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px; }

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 20px;
color: #3b5998;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000; }

4. Copy paste kode berikut diatas/sebelum kode </head> :

<script src='http://blogipank.fileave.com/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://blogipank.fileave.com/js/slider.js' type='text/javascript'/>

5. klik simpan. 

Langkah 2
1. Menu Dashboard, klik Tata Letak, klik Elemen Halaman.
2. Klik Tambah Gadget. Klik HTML/Javascript. (widget ini lebarnya kurang lebih 900pixel)
3. Copy Paste kode berikut (warna hijau):

<!-- Slider -->
<div id="slider">
<div id="mover">
<!-- kode diatas jgn dihapus-->

<!-- mulai menu-->

<div class="slide"><h2>
<a href="URL judul">

(JUDUL)

</a></h2>
<br/><p>

Deskripsi kalian..
scascasc
ascascsa
ascascasc

</p>
<img alt="" src="URL Gambar"/>
</div>

<!-- selesai menu yg kalian buat. kalian bisa copy paste sesuai banyaknya yg kalian butuhkan-->


<!-- kode dibawah jgn dihapus-->
</div>
</div>


(Penjelasan & Contoh dibawah ini)

<!-- Slider -->
<div id="slider">
<div id="mover">
<!-- kode diatas jgn dihapus-->


<!-- mulai menu 1-->

<div class="slide">
<h2>
<a href="#">

blognyaipank.blogspot.com

</a></h2>
<br/><p>

Blognya ipank berisi tips2 blogging dan lain...

</p>
<img alt="" src="http://i677.photobucket.com/albums/vv136/bebsaa/logo.jpg"/>
</div>
<!--akhir menu 1-->

<!-- mulai menu 2-->

<div class="slide">
<h2>
<a href="#">

blognyaipank.blogspot.com

</a></h2>
<br/><p>

Blognya ipank berisi tips2 blogging dan download film gratis...

</p>
<img alt="" src="http://i677.photobucket.com/albums/vv136/bebsaa/logo.jpg"/>
</div>
<!--akhir menu 2-->

<!-- kode dibawah jgn dihapus-->
</div>
</div>

4. klik simpan.

Sekian sobat tips dan trik mempercantik blog dengan memasang sliding zinmag primus pada blog. semoga bermanfaat!