Membuat Efek Slide blog

10th April 2011 | Cat: Aksesoris, Hosting, Tutorial Blog | 195 Views | 5 Comments

Membuat Slider pada blog blogspot

cara mudah membuat tampilan dan efek slider pada blog blogspot Membuat efek slider pada blog blogspot, tau dong yang namanya slider blog, itu lho tampilan beberapa ringkasan postingan yang bisa bergerak secara otomatis,biasanya seh terletak pada header blog. Tapi mungkin ada sedikit kekurangannya yakni tidak ada ke-SEO-annya soalnya berdasarkan pengamatan blogtegal teks di dalam slider tidak pernah tertangkap oleh search engine,namun ada pula yg mengatakan bahwa slider blog termasuk SEO Friendly.

Efek Slider pada blog dimanfaatkan untuk mempercantik tampilan blog secantik Ayu Hastari, oh. . . . Ayu Hastari awak nge-fans banged ma loe, matamu… Bibirmu… Wajahmu… Membuat jantung ini berdegup kencang setiap memandang foto kamu dag…dig…dug…mempercantik tampilan efek slider blog Andai saja kamu mo jadi cewek awak, wah… Serasa tersirami hati ini, uppss…ss!! mempercantik tampilan efek slider blog jadi ngelantur hiks…hiks…hiks… Kita langsung ke tutorialnya tentang membuat efek slider pada blog.

  • Pertama login ke dashboard blog kamu.
  • pilih Rancangan »» Edit HTML
  • download template lengkap dulu barangkali terjadi kesalahan.
  • Tandai kotak kecil pada Template Widget Content.
  • Letakan kode CSS berikut diatas kode ]]>
  • kode CSS-nya:
    #slider { background:url(http://blogtegal.googlecode.com/files/blogtegal.jpg); 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 berikut dibawah kode ]]>

    <!– sfHover = function() { var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
    for (var i=0; i

  • Kemudian cari kode dibawah ini:
    ………. ………
  • Letakan kode berikut dibawah kode diatas.
    Posted by Blogtegal

    Kartu debit payoneer gratis, MAU?

    Kartu Debit payoneer gratis dari klikot | mau memeliki kartu debit secara gratis, silahkan saja gabung di situs jejaring klikot untuk mendapatkannya, GRATIS 100% PENDAFTARAN. Cara kerja klikot pun cukup mudah, tinggal saling view file di account masing-masing dan dapatkan dollarnya.

    Posted by Blogtegal

    Harga jual Blackberry iPhone Laptop Murah

    Harga jual blackberry iphone laptop murah | Adalah artikel kontes yang sedang diadakan tahun ini yang diselenggarakan oleh situr hargagila.com,dengan pemenang 1 mendapatkan Rp 6.000.000.00-

  • Yang terakhir Simpan Template dan lihat hasilnya

Mungkin kode-kode diatas ingin diganti dan di sesuaikan dengan selera kamu maka ada beberapa yang perlu di edit, apa saja itu?

  1. Background image yang perlu di sesuaikan dengan kondisi template sodara-sodara, silahkan disesuaikan pada kode:
    #slider { background:url(http://blogtegal.googlecode.com/files/blogtegal.jpg); height: 254px; overflow: hidden; position: relative; margin: 5px 0; }
  2. Untuk menambah isi dari slider itu sendiri silahkan tambahkan kode berikut:
    Posted by Admin

    <a href='http://link-artikel.com/detail-artikel.html‘>Judul slider artikel

    Deskripsi isi slider

    <img alt='' src='http://link-gambar.jpg‘/>

  3. Untuk mengatur warna text,bentuk text, warna link,jenis font silahkan di oprak-aprek pada kode CSSnya,děsini awak gak bisa jelaskan karna masing-masing template blog berbeda-beda.
  4. Untuk mengatur delay (kecepatan slider) pada slider, silahkan buka file http://blogtegal.googlecode.com/files/slider.js menggunakan notepad atau wordpad atau sejenisnya, kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, mis 5000 atau 9000 (catatan: 1 detik = 1000)

Selamat mencoba dan berpusing ria cara membuat slider blog cara membuat slider blog

5 Comments to “Membuat Efek Slide blog


  1. arsya says:

    Sob, image-nya kok ga keluar ya?

  2. @arsya: coba di cek ulang apakah alamt image-nya benar.

  3. mas saya mencoba menambah kecepatan slider pada alamat http://blogtegal.googlecode.com/files/slider.js kemudian aku buka pake notepad dan dah aku rubah nilainya menjadi 8000, terus…bagaimana cara memasukkan kode script itu di template blog saya…??? ditaruh di body atau di css ? mohon pencerahannya…?

  4. @AREMA PASTI JUARA: jika sudah di rubah silahkan simpan dg ber-extensi .js dan upload pada hosting milik agan, setelah itu pada script di atas ganti URL http://blogtegal.googlecode.com/files/slider.js dengan alamat di mana kamu mengupload file tersebut. misal http://namadomain.com/slider-2.js , apakah bisa dimengerti?

Leave Your Comment Here!

You must be logged in to post a comment.