Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Kamis, 26 Mei 2011

Memasang Banner Rotasi dengan Jquery

Kategori : ,
Jquery memang tidak ada habis - habisnya dibahas, seperti air laut di kuras hehehe. Memasang Banner Rotasi dengan Jquery pada template blogspot merupakan cara menghemat tempat. Dengan efek seperti slideshow photo menambah keindahan tersendiri untuk template kamu namun disamping itu trik ini pun akan menambah size atau berat blog kamu tentunya. sekarang kamu berhak memilih, dipasang atau tidak, cekidot Demo!


  • Oketrik blog
  • Free blog
  • Blogger Tutorial


Instalasi pada template blogspot

  1. Login ke blogger
  2. Masuk ke Rancangan >> Elemen halaman
    Rancangan
  3. tambahkan sebuah gadget (Saran : pilih tempat yang strategis untuk memasang iklan)
    tambah gadget
  4. pilih HTML/Javascript, lalu tambahkan kode di bawah ini tepat di dalamnya

    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script class="jsbin" src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script>
    <style>
    #bannerrot {margin: 0; padding:0;}
    #bannerrot ul, #bannerrot ol{list-style:none !important; margin:0 !important; padding:0 !important;}
    ul#bannerimg li img{border: 1px solid #ccc;-moz-border-radius:5px;width:125px;height:125px;padding: 4px !important;margin: 0 !important;}
    ul#bannerimg li a{text-decoration: none !important;}
    </style>
    <div id="bannerrot">
    <ul id="bannerimg">
    <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="TULIS URL GAMBAR DISINI"/></a></li>
    <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://4.bp.blogspot.com/-uA2cWRl9A-U/Td4BG-U5qcI/AAAAAAAAB0k/tf31Crkpt8E/s1600/banner+oketrik.png" /></a></li>
    <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://4.bp.blogspot.com/-bJ7lAxIK6KU/Td4BDSPrZOI/AAAAAAAAB0Y/WNTO4jKRTgo/s1600/images4.jpg" /></a></li>
    <li><a href="TULIS URL DISINI" title="TULIS JUDUL URL DISINI"><img src="http://3.bp.blogspot.com/-yYBmx3x6ArQ/Td4BD-32MvI/AAAAAAAAB0c/eIyua5TgWoE/s1600/images.jpg"/></a></li>
    </ul>
    </div>
    <script>
    $(document).ready(
    function(){
    $('ul#bannerimg').innerfade({
    speed: 1000,
    timeout: 5000,
    type: 'sequence',
    containerheight: '125px'
    });
    });
    </script>

    Keterangan :
    • tulisan yang berwarna biru tersebut dapat kamu ganti
    • kecepatan, ukuran gambar, dan hiasan dalam banner tersebut dapat dirubah sesuai keinginan kamu, tanyakan bila kamu bingung dengan meninggalkan komentar di bawah okey :D
    random post
  5. Simpan dan lihat hasilnya
    simpan

Bagaimana mudah bukan Memasang Banner Rotasi dengan Jquery pada template blogspot? Mungkin itu saja yang bisa saya sampaikan pada kesempatan ini. oiya klo mu bertanya, silahkan tinggalkan pesan di bawah komentar ini.
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

17 Komentar untuk Memasang Banner Rotasi dengan Jquery

sangat bermanfaat...
nyoba dlu gan... TKP goooo.....

oke gan, moga lancar nyobanya

Good info kang, mantap

Wah tak pikir dulu mau masang atau gak. Soalnya bingung mau gambar apa yang dipasang :p

nice INfO sob,,, good blog..

Sobat, saya melayani pembuatan AKUN GOOGLE ADSENSE dengan promo harga 35rb..
yang berminat silahkan hubungi 081909893942. " Paling lama 2 hari akun langsung jadi"

pembayaran transfer via mandiri setelah AKUN anda jadi. terimakasih...
SILAHKAN BAGI YANG BERMINAT.. "sms dengan Nama Sesuai KTP" atau comment order disini

Misi gan, balik lagi ah, hehe :D

blognya keren..
ringan, simple dan sangat menarik
salam kenal kang

@Muhammad Fakhrial Zld >> terima kasih, salam kenal kembali :)

lanjutkan bos...mangtab
Beben Koben si bloglang anu ganteng kalem tea \m/

@Beben >> yo yo yo kang beben anu ganteng tea

kalau ingin menampilkan tulisan di samping banner gimana?

ini yang dari dulu q cari.. makasih gan buat postingannya.. sangat membantu buat bgurangi jumlah gambar.. dtunggu postingan yg lain.. :D

@alphabet > sip terima kasih kembali :)

Kalau di WP bisa juga gak dipake ya mas?
Salam, kenal yo mas. Bagi rekan-rekan yang ingin PASANG IKLAN PREMIUM GRATIS!!! langsung aja kunjungi Warung Iklan dot Teka

follow balik blog ane di google gan
www.deltacyber-404.blogspot.com
thx

kunjungan malam... salam kenal oia gan mau tanya kalau rotasi pada judul posting blogs gimana ya caranya... saya melihat sebuah blogs judul postingnya itu ada efek rotasinya jika judul posting tersebut terkena arah corsur judul postingnya kembali normal, jika tidak terkena corsur judul postingnya tersebut kembali ke bentuk efect rotasi... mohon pencerahannya oia gan sekalian nitip blogs yang masih butuh bimbingan http://brotherrickyxp.blogspot.com/ terimakasih

terima kasih sekali atas tutorialnya, akan langsung coba script ini di blog