Cara memasang Slider Zinmag Primus Di Blogger Cara memasang Slider Zinmag Primus Di Blogger

Poskan Komentar Cara memasang Slider Zinmag Primus Di Blogger - Ada yang tau tentang  tempalte Zimag Primus ? itu lho template yang ada slider. Jadi, pada halaman muka/sekitar header, nanti ada slide yang bisa diisi dengan berbagai macam kreasi, seperti headline, iklan, widget, dan sebagainya deh. Penempatan slider zinmag primus ini biasanya diletakkan tepat di bawah header. Tapi, Sobat pun bisa menyesuaikannya pada desain template blog masing-masing. Untuk referensi Sobat bisa lihat tempalte buatan dari bloggerstyles.com atau http://btemplates.com/. Kira-kira previewnya seperti ini,

Jika Sobat inginmencoba membuatnya, mari ikuti langkah2 berikut dengan teliti, backup dulu template Sobat ya . . .

Langkah Pertama :

• Masuk ke blogger => Klik Tata Letak => Pilih Edit HTML(Backup dulu)
• Letakkan kode berikut di atas kode ]]></b:skin>

/* Slider Code
-------------------- */
#slider {
background : url( URL GAMBAR BACKGROUND SLIDER );
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
color: #ac0000;
padding:0px 0px 0px 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: #DF0101;
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: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

Note : untuk mengganti ukuran slider ,ubah kode => height: 229px;pada tulisan merah, masukkan alamat gambar untuk background slider Sobat, atau jika tidak menggunakan background, Sobat bisa ganti kode    url( URL GAMBAR BACKGROUND SLIDER ) dengan kode warna html ( Lihat kode-kode warna Html )


Langkah Kedua

• Letakkan kode berikut di bawah kode ]]></b:skin>

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/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>

Langkah Ketiga

• Pada contoh kali ini, kita akan meletakkan slidenya di bawah header. Tapi Sobat juga bisa menyesuaikan sendiri. Intinya, dipas-paskan saja dengan template Sobat. kita lanjutkanya . . .  cari kode berikut

<div id='header-wrapper'> ..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :

<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'>Kata-kata Sobat  ( posted by : )</span>
<h2><a href='URL POST'> Judul Post </a></h2>
<p> Tulisan untuk ditempatkan pada slider </p>
<img alt='judul gambar' src='URL GAMBAR POST'/>
</div>
<div class='slide'>
<span class='slmet'>Kata-kata Sobat  ( posted by : )</span>
<h2><a href='URL POST 2 '> Judul Post  2</a></h2>
<p>Tulisan untuk ditempatkan pada slider  2 .</p>
<img alt='judul gambar' src='URL GAMBAR POST 2 '/>
</div>  .  .  .  .  .  .
 
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

• Simpan

Note : 

• Sobat bisa mengubah seperti keterangan pada kode di atas.
• Jika akan menambahkan post lain ke dalam slide, Sobat cukup meletakkan kode di bawah, dan pastekan pada titik-titik hijau (  .  .  .  .  .  . )  pada kode di atas

<div class='slide'>
<span class='slmet'>Kata-kata Sobat  ( posted by : )</span> <h2><a href='URL POST ke- '> Judul Post  ke- </a></h2>
<p>Tulisan untuk ditempatkan pada slider  ke- .</p>
<img alt='judul gambar' src='URL GAMBAR POST ke-  '/>
</div>

• Jika Sobat masih merasa kesulitan, Sobat bisa download saja kode css nya (zinmag slider primus) di sini