Trik memasang random banner di blogger

Trik

Memasang banner di blog memang bukan sesuatu hal/topik pembahasan yang baru melainkan hal yang sudah lama di bahas, banyak para blogger memasang banner dengan tujuan tertentu, seperti periklanan, perujuk link tertentu ataupun sebagai penghasilan sampingan. umumnya banner ini memiliki dimensi yang bervariatif tergantung dari kebutuhan/tujuan tertentu yang disesuaikan dengan keperluannya dan kali ini saya akan berbagi cara memasang banner yang secara acak otomatis berganti simak saja caranya dibawah ini.

Sebelumnya, terlebih dahulu anda sudah mengupload file banner/gambar di hosting anda dan menyimpan linknya untuk di letakkan dalam trik ini, jika belum silahkan di upload terlebih dahulu. kembali ke trik yang di bahas...

Cara memasang Random Banner Untuk Blog Blogger Anda

Untuk melakukan hal ini anda hanya perlu menambahkan kode berikut di ini HTML / JavaScript Widget, ingat letakkan sesuai dengan ukuran banner yang anda pilih, kode di bawah ini adalah contoh untuk banner/gambar berdimensi 468x60 lihat kode yang saya beri warna kuning.

<script language="JavaScript">
images = new Array(3);

images[0] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[1] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[2] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

PERUBAHAN YANG PERLU:

1. Ganti URL LINK TUJUAN dengan link website pengiklan/link tujuan.

2. Ganti URL BANNER/GAMBAR ANDA dengan link Banner/Gambar Pengiklan atau link tujuan

3. Ganti DESCRIPSI LINK dengan beberapa informasi yang berhubungan dengan link banner/gambar yang anda pasang. Deskripsi muncul pada mouse hover. Anda dapat membiarkannya kosong jika Anda inginkan.

Jangan lupa simpan setelah anda memasukkan kode di atas pada widget/gedget blog anda.

Pertanyaan yang sering di ajukan.

01Bisakah trik ini saya gunakan untuk banner/gambar yang berukuran berbeda?

Bisa, banner ukuran/dimensi berapapun bida anda terapkan dalam triki ini dan pengaturannya pun cukup mudah, silahkan cari kode height dan width lalu ubah ukuran dalam dimensi yang anda mau, misal height='60px' width='468px' ini adalah untuk tinggi 60pixel dan 468pixel tinggal anda ganti menjadi height='250px' width='300px' untuk dimensi/ukuran 300x250 pixel, terapkan ini juga pada dimensi/ukuran lain yang anda inginkan, misal 125x125, 728x90 dll. tambahan, kode border='0' adalah untuk memberi garis keliling, ubah nilai 0 menjadi satu jika anda ingin gambar anda memiliki garis keliling berukuran 1pixel.

02Berapa banyak Banner/gambar yang bisa di pasang?

Terserah yang anda inginkan, misal anda punya banner 10 maka yang perlu anda lakukan adalah mengubah variabel 3 new Array(3); menjadi sepuluh new Array(10); dan mengubah fungsi aray sampai nilai 9 dimulai dari 0 - images[0] s/d images[9], Contoh jika anda bingung:

<script language="JavaScript">
images = new Array(10);

images[0] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[1] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[2] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[3] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[4] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[5] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[6] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[7] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[8] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[9] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

Lihat perbedaan di atas dengan kode sebelumnya, dan lakukan hal yang sama jika anda ingin menambahkan banner/gambal menjadi lebih banyak.

03Trik ini menambah beban load blog tidak?

Tentu saja, tapi tidak berdampak begitu buruk karena banner/gambar yang terpilih secara otomatis saja yang di munculkan.

Demikian cuap - cuap dari saya semoga membantu dan berguna untuk anda, jangan lupa berkomentar....

Artikel Terkait

  • Membuat javascript random teks
    Random teks adalah sebuah tulisan atau kutipan tertentu yang di tampilkan secara acara acak ketika halaman telah sepenuhnya di muat, trik random teks ini cocok untuk membuat sebuah kutikan atau tulisan tertentu yang ingin anda tampilkan secara berbeda dan saya menerapkan trik ini pada tips di blog ini. untuk lebih jelasnya silahkan anda klik l…
  • Membuat Responsive pada ADSENSE
    Mengatasi masalah iklan dari google yang tidak responsive adalah satu trik menyesuaikan tampilan blog agar tampil bagus di resolusi berbeda dan hal ini perlu kita lakukan apa lagi bagi sobat yang memasang di blognya. pada awal Agustus 2013, Google Adsense resmi support untuk dukungan iklan dengan Style Responsive. Untuk saat ini memang masih d…
  • CSS widget label cloud blogger
    Memperbagus tampilan widget label blogger dengan css, dengan css ini tampilan widget label akan memiliki warna background berbeda di setiap link label tergantung dari color yang kita terapkan di dalam css. untuk menerapakannya ikuti langkah di bawah ini: 1. Masuk Dasboard Blogger 2. Pilih Template 3. Kemudain Pilih Edit HTML 4. Salin CSS be…
  • Memasang meta viewport
    Membahas responsive memang agak panjang lebar, dan perlu di pelajari satu persatu. untuk itu kali ini saya akan berbagi tentang kegunaan menggunakan meta tag viewport dalam responsive. Dalam Responsive Meta Tag Viewport sangat penting karena meta tag ini berguna untuk menentukan tata letak tampilan Mobile. ketika blog kita di akses lewat Brows…
  • Membuat thumbnail hanya tampil di homepage
    Untuk sahabat yang belum tahu bagaimana menerapkan trik dan cara ini mungkin sering punya pertanyaan, kok bisa ya ketika di halaman beranda/depan/homepage blog image/gambarnya muncul tetapi ketika di halaman posting kok hilang...?, mungkin ini bukan bahasan baru lagi, hanya saja saya menulis ini untuk sobat yang ingin tahu trik dan caranya. ji…
  • Menandai komentar admin dengan css
    Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya. blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang ber…

Tidak ada komentar :

Kode klik emo: :) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT

Back to Top
Loading...