Blogger Note

Article :

Cara membuat SlideShow dibawah Header dengan JQuery

Untuk tutorial yang kita bahas untuk hari ini adalah tentang JQuery tepatnya membuat SlideShow dibawah Header dengan JQuery,terlihat banyak sekali di blog-blog lain yang juga banyak memasang SlideShow ala Zinmag Primus,terlihat dari desain yang elgant dan style yang berwarna hitam tentu membuat tampilan blog lebih atraktif dan bergaya,trik kali ini cukup simpel dan tidak akan membuat blog sobat berat (Sudah saya praktekin), yaudahlah,dari pada lama-lama,mari kita simak langsung tutorialnya

  • Login ke Blogger
  • Lalu klik Rancangan -> Edit HTML
  • Cari kode ]]></b:skin>

#slider {
background:url(http://img99.imageshack.us/img99/9594/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: #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: #ee0909;
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: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
  • Kemudian letakan kode javascript dibawah ini dibawah 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>
  • Kemudian cari kode <div id='header-wrapper'> ....... </b:section>
  • Letakan kode dibawah ini dibawah kode diatas.
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>

<div class='slide'>
<span class='slmet'> Posted by Admin </span>
<h2><a href='http://www.o-om.com/2008/05/e-book-kiat-sukses-promosi-blog.html'>eBOOK Kiat Sukses Promosi Blog</a></h2>
<p>Your Text</p>
<img alt='' src='Your Image'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Admin </span>
<h2><a href='Your URL</a></h2>
<p>Your Text</p>
<img alt='' src='Your Image'/>
</div>

</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
</div>
<div class='clear'/>

 Semoga Berhasil 

23 comments:

19 Agustus 2011 02.57

Agak bingung terkadang kalau mau menggunakan slideshow,, apa yg harus di tampilkan? kalau gambar postingan musti bagus resolusinya n gambar karya sendiri,, kalo menampilkan gambar pemandangan yg tidak nyambung dengan thema konten diblog nanti malah kurang klop. xixixi

19 Agustus 2011 04.39

Bagus sob slide show. Slide Show ala Zinmag Primus

19 Agustus 2011 06.58

keren nih sob...
tapi syng.. ini bisa membuat blog jadi makin berat. . . :)

19 Agustus 2011 12.02

mantef sob...infonya...tapi kalo menggunakan jquery berlebihan...blog bisa lelet kayak siput ke sleo

19 Agustus 2011 15.48

hmm, sepertinya menarik, namun akan lebih baik kalo dikasih demonya :D
cuma saran saja kok :)
makasih sharingnyaa . .

19 Agustus 2011 23.18

ehehhe.. keren.. sejauh ini saya hanya mengandalkan yang diberikan template aja nih mas :( gak tau klu ternyata kita bisa bikin sendiri :) hebat mas nya!!

20 Agustus 2011 23.07

To Se Avancee:Hmmm,sobat mungkin bisa memasukkan gambar dari artikel terpopuler sob,seperti link exchange dan lain2

To Shinobi Blog:Tidak teralu sob jika penggunaan javascriptnya tidak teralu banyak

To gang tutorial:hehehe..,bner tuh sob alias loadingnya lama

To Ladida:Sama2

To Majalah Masjid Kita:Biasa aja kok mas,hehehe,malah sebenarnya saya yang kurang tau tentang template

21 Agustus 2011 02.00

efek jquery dmna buat blog makin berat kwan, ad solusi lainny gk?
ane bawa artikel anget ==> sini

21 Agustus 2011 06.02

To Cek Info:Yang saya tau sob,cuma menggunakan JQuery seperlunya aja sob,dan juga membatasi Jquery yang sobat gunakan pada template

21 Agustus 2011 12.43

ini jadinya kaya gmn gan?
he,,he,,he,,

21 Agustus 2011 16.17

wah boleh juga nih artikelnya Ctrl D duluw sapa tau butuh,hehe,,,
makasih tip nya om :)

22 Agustus 2011 01.18

wah, ane pakai html 5 bos, gak ngaruh pake ginian, malah2 erorr, ha5x. info bagus.

23 Agustus 2011 20.02

bagus juga nih :D

24 Agustus 2011 06.50

Informasi yg bagus kawan. Sukses selalu buatmu.

24 Agustus 2011 07.37

mantav om tutorialnya...
sukses selalu.. :)

24 Agustus 2011 22.03

To Liandri eko:Jadinya kaya template Zinmag Primus

To Naughtyric:Bookmark aja sob :D

To Wagu Indonesia:Sorry sob karena tutorialnya gak bisa di gunakan di template sobat

To AcerNoval:Thanks dah berkunjung :D

To Blog Patrisia,Blogger Jelek:Amien...

12 September 2011 09.31

keren gan. lanjutkan..!!!

oya jangan lupa kunjung balik juga ke web saya untuk jejak link. http://adamclubs.blogspot.com

btw numpang promosi yahh....!!

buat yang pengen buat website gratis, gak ada website yang benar2 gratis dari indonesia. yg ada dari luar negeri. tp kudu musti ngerti dikit2 tentang bahasa inggris.

neh masuk dari sini dan buat website gratis, hanya perlu Sign Up dan ikuti petunjuk selanjutnya. klik link dibawah ini http://www.000webhost.com/496729.html

17 September 2011 22.19

Mantapp nih artikelnya...
Ok slm knl balik sob...

17 September 2011 22.47

@Tamu Terhormat:Thanks for coming

18 September 2011 17.00

bagus juga tipsnya mas...kapan-kapan perlu di coba ini

19 September 2011 00.30

@blog-nailah:Silahkan di coba om

22 September 2011 08.20

Mantab sob :D ijin praktek yah

10 Januari 2012 22.16

Nice share om
ijin sedot yak ...

di tunggu kunjungan baliknya om ...

Posting Komentar