Membuat Slider Gambar Zinmag Primus

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Membuat Slider Gambar Zinmag Primus dan semoga artikel ini bermanfaat.

---

  

Membuat Slider Gambar Zinmag Primus ini saya dapat inspirasi dari websitenya maskolis oleh karena itu saya ucapkan banyak terima kasih buat maskolis.

Slider ini cukup menarik dan sangat cocok buat blog/website yang menjual produk dan ini bisa dijadikan tempat iklan produknya, pada slider ini pemasangan gambar, link dan summury nya memang dilakukan secara manual sehingga kita bisa memasukannya yang memang dijadikan produk utama atau terpavorit, Ok buat sobat yang penasaran dengan bagaimana tampilannya slide gambar zinmag Primus ini silahkan klik tombol demonya.

Gimana sobat sudah lihat demonya? lumayan keren kan, sekarang buat sobat yang tertarik untuk memasang slide tersebut caranya gampang ko, ga terlalu ribet. yah biar sobat yang mau masang slidernya cepet selesai berikut ini langkah-langkahnya:

Langkah Pertama Membuat Slider Gambar

• Seperti biasa saja login dahulu ya..
• klik rancangan/template jangan lupa setiap mau ngedit HTML download lengkap dulu ya sobat, buat jaga-jaga aja. kalau ada salah tinggal ngembaliin, alasannya.
• Klik edit HTML klik lanjutkan kemudian cari kode ]]></b:skin> setelah ketemu letakan kode dibawah ini tepat diatas kode tersebut.

#sliderku {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcnVBMq9BOPlY9P2rHqUCmBN0XbSoFMDy3tPY8qs2ejdbS6KHsKdSBEz4wMeHwtB4_T_ZbjU6H-OeyGIGYQN-GCnkLgx_mFQP80NnS-y9519csC25zClCHIjiDW2sSA52coyLnM9dfDfYN/h21/sonuc2.jpg)no-repeat bottom left 120px #000;
height: 200px;
overflow: hidden;
position: relative;
margin: 5px 0;
border-radius: 10px;
border:2px solid #ff0000;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slideku {
padding: 10px 0px;
width: 910px;
float: left;
position: relative;
height:200px;
}
.slideku h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 14px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slideku h2 a:link, .slideku  a:visited {
color:#fff;
background-color: transparent;
}
.slideku h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.aku {
color: #DF0101;
font-size: 11px;
font-weight:bold;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 25px;
width: 500px;
padding:0px 0px 10px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slideku p {
color: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 530px;
padding:10px 30px 0px 30px;
margin:0px 0px;
}
.slideku img {
position: absolute;
top: 10px;
left: 600px;
Width:200px;
Height:120px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMR-W-kV4BzOTWlffx9-oxpSXeUSbglkiYPdno-L4k1sVOroJ08o4TbuHhrgUC_5qBH9NUnwl6VjrLfq_UMlKOBFxWykUyJgay5CoRVYdR46E6gAg2F7kWzvaCMoGeAr6pNodVaVQhq8ON/h120/17.jpg);
margin-top:-60px;
padding:60px 18px 30px 18px;

}
#slider-stopper {
border-radius: 0 100px 100px 0;
background:#fff;
position: absolute;
font-family: trebuchet;
color: #0B610B;
padding:8px 15px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
top: 85px;
right: 30px;
}

• Selanjutnya sobat cari kode </head> setelah ketemu letakan kode dibawah ini sebelumnya atau diatasnya.

<!-- Slider Zinmag Primus -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://my-project-favicon.googlecode.com/files/Slidku.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>
<!-- Slider Zinmag Primus end -->

• Setelah selesai simpan dulu templatenya, 

Langkah Kedu Membuat Slider Gambar

• Pada langkah kedua ini sobat harus sudah keluar dari halaman edit HTML dan klik Tata letak selanjutnya klik tambah gadget yang berada dibawah judul header. atau dimana saja terserah sobat.
• Setelah klik tambah gadget selanjutnya klik HTML/javascript dan masukan kode dibawah ini

<div id='casing'>
<div id='sliderku'>
<div id='mover'>
<div class='slideku'>
<span class='aku'> Posted by Abdul Kohar </span>
<h2>
<a href='http://azzam10.blogspot.com/2012/08/membuat-slider-gambar-keren-dengan-nivo-slider.html'>Membuat Slider gambar keren dengan Nivo Slider</a></h2>
<p>
Membuat Slider gambar keren dengan Nivo Slider Mungkin sobat sudah pada tau fitur ini slider gambar, namun barangkali ada sobat yang kesempatan ini lagi nyari slider seperti ini buat blognya, tepat sekali kalau sobat menggunakan Nivo Slider dengan pemasangan kodenya yang tidak rumit serta tampilannya yang lumayan menarik saat ini nivo slider ini sudah banyak yang menggunakan</p>
<img alt='Nivo Slider' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj73Um5ELl9Rsi9avTOVxofN9TltSty048DTFQq9gqT8_wfvZd5XOjGzuY1dAraGMn8n08e1c1EtGHpA-K_cl-HzfuBYqgQCcbVLJCa3gIKVtOgfdXwlUGdS3q8ky-rXMYgWvkUy-kzoSE/s1600/nivo.jpg'/>
</div>
<div class='slideku'>
<span class='aku'> Posted by Abdul Kohar </span>
<h2>
<a href='http://azzam10.blogspot.com/2012/07/maksimalkan-modem-anda-dengan-netscream.html'>Maksimalkan modem anda dengan netscream</a></h2>
<p>
Maksimalkan modem anda dengan netscream ini mungkin yang sobat cari sekarang, karena sobat mungkin mengalami hal yang sama seperti apa yang saya alami sebelum memakai software ini.
Pengalaman yang saya alami sebelum menggunakan software ini yang diantaranya kinerja modem saya kurang optimal dimana sering terjadinya hubungan internet terputus secara tiba-tiba.</p>
<img alt='Netscream' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid5OcrSxHkWKqBQgoZqmpJFsiFKvrK_c6mwEhj_gYvgB7kbi2OW-U8q1Xl8GwdS7shu21Zv4qTMOTUN1wjxvGNo5ONt2g4-zfbfoqxKmj8Y5-fyuyrYPYss0EoVaiVelH9FAp66fCeVfK9/s320/Screenshot_45.png'/>
</div>
<div class='slideku'>
<span class='aku'> Posted by Abdul Kohar </span>
<h2>
<a href='http://azzam10.blogspot.com/2012/07/widget-radio-online-seluruh-indonesia.html'>Widget Radio online seluruh Indonesia</a></h2>
<p>
Widget Radio online seluruh Indonesia ini memang paling komplit, karena dengan widget ini kita bisa mendengarkan atau memilih radio kesukaan kita yang ada di indonesia. widget ini saya dapat dari http://radioindonesia.info. untuk mencoba widget radio online seluruh indonesia ini silahkan saja coba widget radio yang ada di sidebar blog ini.
</p>
<img alt='Widget Radio online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTdcXGir4d15gKHD6aFRhT7ssFU_8eQsWbjnDNRZd2KFHrtyqsBxgh77FjD3y35uae3qMLUo8BlxKUeTd2GH1AESgRUs2Zw1EYprcqeGlT6IgTo1ih8SzGTU1vfzvzrrubo-JDt-_RXszs/s1600/index.jpg'/>
</div>
</div>
</div>
</div>

Penjelasan:

• Yang berwarna Hijau Silahkan masukan URL dan Judulnya
• Yang berwarna Merah masukan catatan mengenai apa yang mau disampaikan.
• Yang berwarna biru masukan URL gambar sobat.

Untuk Pengisian slider ini mungkin harus menyita sedikit waktu karena tidak secara otomatis namun hasil yang didapat akan lebih maksimal. karena kita bisa memasukan pada slider ini apa yang menurut kita perlu untuk dimasukan. 

Cara mudah pengisiannya yaitu kita buka halaman postingan kita terlebih dahulu sebelum memasang tutorial ini, nanti kalau sudah pada tahap terakhir sobat buka postingan yang mau dipasang dislider ini kemudian copy pastekan saja mulai dari URL, judul, paragraf pertama dan URL gambarnya.

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Membuat Slider Gambar Zinmag Primus kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 15:01