B L O G S A Y A: cara membuat menu slider

Menu slider ini sebenarnya dapat sobat temukan di template zinmag-primus yang dapat sobat download di beberapa situs yang menyediakan layanan template gratis.

Menu silder ala zinmag-primus ini cukup menarik untuk diletakkan dibawah header. Selain atraktif karena bentuknya yang dinamis, menu slider ini cukup efektif mengundang pengunjung blog untuk melihat dan mengklik post yang sobat letakkan di menu slider tersebut.

Ada beberapa perubahan yang saya lakukan dalam menu ini, selain warna background, model tulisan, dan warna tulisan, saya juga merubah waktu jeda ( Delay ) antara post yang satu dengan yang lain.

Baiklah, langsung pada tutorialnya aja ya, langsung ke setting HTML template sobat :

Login ke Blogger.
Langsung tuju ke Edit HTML.
Jangan lupa backup template sobat terlebih dahulu.
Kemudian klik Expand Template Widget.
Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

/*Menu Slider*/

#slider {
background:#FFF; height:254px; overflow:hidden; position:relative; margin:5px 0}

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

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

.slide h2 {font-family:verdana,georgia,helvetica,Sans-Serif; font-size:20px;color: #ac0000; padding:0px 0px 0px 30px; margin:0px 0px; width:500px; overflow:hidden}

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

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

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

.slide p {color:#000; font-size:12px; font-family:verdana,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:#2E2E2E; padding:10px 10px}

#slider-stopper {position: absolute;font-family: verdana, georgia, helvetica, Sans-Serif;top:10px; right:10px; color:#B40404; padding:3px 8px; font-size:14px; font-style:bold; text-transform:uppercase; z-index:1000}

kemudian letakkan kode berikut dibawah / setelah kode ]]></b:skin>

$(function(){
var $slide1 = $(".slide");

    var panelWidth = $slide1.css("width");
    var panelPaddingLeft = $slide1.css("paddingLeft");
    var panelPaddingRight = $slide1.css("paddingRight");

    panelWidth = parseFloat(panelWidth, 10);
    panelPaddingLeft = parseFloat(panelPaddingLeft, 10);
    panelPaddingRight = parseFloat(panelPaddingRight, 10);

    panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
    var numPanels = $(".slide").length;
    var tooFar = -(panelWidth * numPanels);
    var totalMoverwidth = numPanels * panelWidth;
    $("#mover").css("width", totalMoverwidth);

$("#slider").append('<a href="#" id="slider-stopper">Stop</a>');

    sliderIntervalID = setInterval(function(){
        doMove(panelWidth, tooFar);
    }, delayLength);
    $("#slider-stopper").click(function(){
        if ($(this).text() == "Stop") {
            clearInterval(sliderIntervalID);
             $(this).text("Start");
        }
        else {
            sliderIntervalID = setInterval(function(){
                doMove(panelWidth, tooFar);
            }, delayLength);
             $(this).text("Stop");
        }
    });

});
//]]>
</script>

Setelah itu cari bagian header yang letaknya setelah <body>, atau kira-kira seperti ini kode-nya :

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

Letakkan kode berikut ini dibawah / setelah kode header ( seperti diatas ) :

<div id='casing'>

<div id='slider'>
<div id='mover'>

<span class='slmet'> Posted by Dody Farial </span>
<h2><a href='http://miscah.blogspot.com/2009/10/redh-template.html'>Red-H Template ( Free Blogger Template )</a></h2>
<p>Template ini jauh lebih baik dibanding template pertama, karena selain warnanya yang menarik, template ini sudah menggunakan read more otomatis dan beberapa fitur menarik lainnya. Sobat bisa mencobanya jika tertarik, silahkan baca spesifikasi lengkapnya dibawah ini, tapi tolong jangan menggunakan template untuk keuntungan pribadi, seperti mengupload di situs paid to upload ( ziddu, 4shared, dll..) dan menyebarkannya lewat blog.</p>
<img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/StDT8ObEDDI/AAAAAAAACBk/iQrI6pf269w/RED%20-%20H%20Image_thumb%5B1%5D.jpg?imgmax=800'/>
</div>

<div class='slide'>
<span class='slmet'> Posted by Dody Farial </span>
<h2><a href='http://miscah.blogspot.com/2009/09/pasang-avatar-mybloglog-di-kotak.html'>Avatar Mybloglog di Kotak Komentar</a></h2>
<p>Tutorial cara memasang avatar mybloglog di kotak komentar sebenarnya sudah lama, tapi dari beberapa kali saya berkunjung ke beberapa blog sobat, jarang sekali yang mengaplikasikannya. Padahal menurut saya, tutorial memasang avatar di kotak komentar yang di populerkan oleh Amanda ini sangat bagus, karena kita bs melihat wajah yang memberi komentar dengan syarat telah menjadi member mybloglog.</p>
<img alt='' src='http://lh5.ggpht.com/_7Y9pl24WpQY/Sqf1T4ve8NI/AAAAAAAAA3k/Nv9CaQU17us/Avatar_thumb%5B2%5D.jpg?imgmax=800'/>
</div>

</div>

</div>

</div>
<div class='clear'/>

Kemudian Simpan Template.

Sekarang coba lihat hasilnya, jika berhasil maka menu slider akan berada dibawah header pada blog sobat.

Apa saja yang harus sobat edit ?

Kode javascript diatas menggunakan delay waktu var delayLength = 5000 yang berarti 5 detik, silahkan sobat buka kode javascript yang diatas kemudian ubah delay waktu sesuai keinginan sobat. Sebagai catatan, 1 detik = 1000 (jika sudah sesuai, tidak usah dirubah).
Silahkan sobat ubah tulisan dan url-nya dengan milik sobat :

Untuk kode berwarna merah yang pertama adalah untuk url yang hendak dituju, sedangkan kode berwarna merah yang kedua adalah alamat url dari gambar. Tulisan yang saya tandai tebal adalah judul tulisan, dan huruf miring dibawahnya adalah isi dari tulisan sobat.

Klik disini untuk melihat demo menu slider. Selamat berpusing ria.

Refrensi : http://miscah.blogspot.com

B L O G S A Y A

Laman

cara membuat menu slider

0 komentar:

Posting Komentar