Iklan 300 x 250

Random Post

Recent Post

 

Membuat Slider Zinmag Primus

Text Resizer: Click for Resizer
Bismillah membuat slider zinmag primus setelah sebelumnya aku telah share ilmu kepada sobat tentang Membuat Slider Content Dengan Animasi jQuery pada tutorial kali ini saya akan menjelaskan kepada sobat tentang Membuat Slider Zinmag Primus. Mungkin dari para sobat blogger ada yang pernah berkunjung ke suatu blog yang menggunakan template Zigmag Primuz. Sebagai contoh seperti blognya Bangdel atau i-om yang memakai slider zigmag primus. Oh ya kalo kurang jelas sobat bisa melihat pada gambar berikut.


Jadi nanti pada halaman muka/sekitar header, nanti ada slide yang bisa diisi dengan berbagai macam kreasi sobat seperti headline,iklan dsb. Biasanya untuk penempatan slider zinmag primus terletak dibawah header. Tetapi sobat dapat menyesuaikan pada template masing-masing. Oh ya sampek lupa untuk refrensinya sobat dapat melihatnya di template buatan bloggerstyles.com atau http://btemplates.com/ Bagaimana tertarik????

Untuk membuatnya ikuti saja langkah-langkah berikut ini:

1.Log in dulu ke account blog anda
2.Masuk Ke Rancangan --> Edit HTML --> Centang Expand Template Widget
3.Jangan lupa download template lengkap untuk jaga-jaga
4.Selanjutnya cari kode ]]></b:skin> dan simpan script berikut diatasnya
/* Slider Code
-------------------- */
#slider {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsjJWkDpzZTKVcsHBrRYdx0Tm1AaJy0ij47uRcbfsn3gj2eku8ZxwSHVyE2ozNXxWgLv34B2HF5FBue4lJWbaf2n_Bsj2XQbBbiDS9x7qucue96IDBxt0GRF6dVqjUUQm2tPyNxzPY4rI/s1600/slide.png);
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;
}

  • Ganti Url gambar dengan Url gambar kalian (Sesuaikan dengan template sobat)
  • Kemudian Atur posisi gambar, tulisan dengan cara mengedit css diatas.

5.Langkah selanjutnya cari kode </head> dan simpan script berikut diatasnya
<script src='http://myscriptforme.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://myscriptforme.googlecode.com/files/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>
6.Sekarang cari kode berikut ini untuk penempatan silder zinmag primusnya.
<div id='header-wrapper'>
..........
.........
</b:section>
7.Langkah terakhir simpan script berikut dibawahnya
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> DIPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
<div class='slide'>
<span class='slmet'> DIPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
<div class='slide'>
<span class='slmet'> DiPOSKAN OLEH : SAYA </span>
<h2><a href='URL TUJUAN'>JUDUL POSTINGAN KALIAN</a></h2>
<p>TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN</p>
<img alt='keterangan GAMBAR' src='URL GAMBAR KALIAN'/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>
8.Simpan template kemudian preview hasilnya

  • Ganti DIPOSKAN OLEH : SAYA dengan Penulis / Nama Kalian
  • Ganti URL TUJUAN dengan Link yang akan kalian tuju
  • Ganti JUDUL POSTINGAN KALIAN dengan judul postingan yang ditampilkan
  • Ganti TULISAN POTONGAN ARTIKEL YANG DITAMPILKAN dengan postongan artikel kalian yang ditampilkan
  • Ganti keterangan GAMBAR dengan keterangan gambar kalian
  • Ganti URL GAMBAR KALIAN dengan URL gambar yang akan kalian pakai

Semoga Berhasil Sobat......


Artikel Terkait:

Nobi Noku Ditulis oleh : Arga Anggriawan | BLOG : This Is My Art
Dalam Judul : Membuat Slider Zinmag Primus
Dalam Kategori :
Saya hanyalah blogger pemula yang ingin belajar dan berbagi dengan sahabat, Semua artikel blog ini bersumber dari pengalaman saya dari dunia blogger.

24 komentar:

Unknown mengatakan... Reply Comment

salam sahabat
wah bagus membuat slider zinmag ini simple jug yach tapi bikin lelet loading gak ya.maaf telat

Admin 3 mengatakan... Reply Comment

makasih sob tips nya...
n tkaran link yuk sob, n link qm udah q
pasang dluan..mksih ya sob..!!

@Dhana/戴安娜

Tergantung mbak dhana,mungkin bagi saya untuk slider zinmag tidak terlalu berat untuk blog saya standart. Tapi jika loading blog mbak dhana tidak terlalu berat ada salahnya slider ini patut dicoba :j:

sangat menarik sahabat, makasih sudah sharing.

hAi Nobi..mAna dora Emon, hehe...you have a nice Blog too Bro..!!
SlidernyA klo dipasang ke blogq aneh gAk Ya..??hwahaha...
http://aboesite.blogspot.com

nice inpo sob....
cara bikin emotion utk comentar kyk gitu gmn?
http://catatan-sang-pemimpi.blogspot.com/

@Maniak Bisnis

waah cocok atau tidaknya itu sih tergantung template blognya sobat. Tidak ada salahnya kok untuk dicoba :e:

@Sang Pemimpi

inyaallah gan akan aku postingkan tutornya thanks ya udah mampir :h:

nas mengatakan... Reply Comment

succes for you $

martos mengatakan... Reply Comment

mantap cuy..
bw
hoping you visit my blog and comment in my posting too.
harap comment di posting ane ja yach..
banner anda sudah dipasang di blog ane.. silahkan di check.
jangan lupa pasang banner ane juga ya...

Belum nyampe sini ilmuku Nob..nanti deh belajar .. makasih infox.. :i:

Unknown mengatakan... Reply Comment

sangat bagus tutrialx lengkap bgt.
hnya sja d template seperti blog saya sepertix kurang pas ya sob....

boleh di coba nih,,aku save dulu ya sob...txs,

Rizal mengatakan... Reply Comment

kunjungan bakik, tq dah kunjung ke my blog :)
salam beloging, tingkatkan kembali coretanmu :P

Keren sekali nih, nanti akan saya coba :q:

sibutiz mengatakan... Reply Comment

mantabs banget kawan tutonya..
menarik banget,patut di coba nich...
maaf ya kawan telat datang nya soalnya koneksi lagi lemot..

wah keren nih tutorial nya sob ,, tapi saya sudah pasang slideshow jquery yg model lain , hehehe

mantap sob...
kira2... kalo ane pake slider berat gak ya blog ane.?
nobi kan pernah buka blog ane, berat gak?
di tunggu jaawaban na sob...

@danupuspito

menurutku blog mas danu stndart-standart aja tidak berat kok :j: ...coba aja mas :e:

sob. tukaran banner yuk...
Link sobat udah di letak di blog saya...

Linda mengatakan... Reply Comment

makasih sharenya,
salam kenal..

Ladida mengatakan... Reply Comment

keren bro . ,

sayangnya kurang pantas utk dipasang di blog saya . , hehee , tp saya simpan scriptnya utk experimen . ,

ditunggu post selanjutnya !!! :j:

@Ladida

ok sobat selamat bereksperimen ria :q:

@all thanks ya telah mampir di blog ane :P:

Sony mengatakan... Reply Comment

:b gak bikin berat tuh aniway good info...

:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n: :o: :p: :q: :r: :s: :t: :u: :v: :w: :x: :y: :z:

Posting Komentar

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda.Blog ini Blog Do Follow,Trims atas kerja samanya

 
 
 

Temukan Kami Dalam FB

Sahabat Blogger

http://nobinoku.blogspot.com/

Tukeran Link Yuk..!! Silahkan copy kode di atas..!!
Saya akan segera link balik..!! Link & Banner Teman
powered by PRBbutton Powered by  MyPagerank.Net backlink Site Meter http://www.wikio.com Free Automatic Backlink
Check Google Page Rank
Cerita Seks Panas Dewasa 17Tahun
free counters
 
Copyright 2010 - 2011 © This Is My Art | Didukung Oleh : Blogger
Template Name : Evolution Magazine Template | Modification by : Argabluesky