Archive for Oktober 2015

Membuat Random Teks dan Image dengan Javascript

08.07 Add Comment


Kali ini kita akan membuat teks dan image secara random dengan javascript. Image dan teks bisa disisipkan link ke halaman atau situs tertentu. Dengan demikian, image dan teks link random ini bisa digunakan untuk keperluan iklan. Teks dan image akan dirandom dan muncul bergantian ketika halaman dibuka atau pengunjung berpindah halaman.

Kode Javascript ini bisa dipasang di widget sidebar, footer, header atau bahkan bagian dipostingan artikel untuk situs blogspot. Untuk pemasangan kode random image dan teks yang dipasang di postingan artikel silakan baca petunjuknya di sini



<script type="text/javascript">

quotes = [];
desc = [];
quotes[0] = "<a class='iklan' target='_blank' href='http://link#0'><h4><img class='imgiklan' src='http://link-image#0'> Judul-Iklan#0</h4></a>";
desc[0] = "Deskripsi-Iklan#0";
quotes[1] = "<a class='iklan' target='_blank' href='http://link#1'><h4><img class='imgiklan' src='http://link-image#1'> Judul-Iklan#1</h4></a>";
desc[1] = "Deskripsi-Iklan#1";
quotes[2] = "<a class='iklan' target='_blank' href='http://link#2'><h4><img class='imgiklan' src='http://link-image#2'> Judul-Iklan#2</h4></a>";
desc[2] = "Deskripsi-Iklan#2";

index = Math.floor(Math.random() * quotes.length);

document.write(quotes[index]);
document.write(desc[index]);

</script>

Catatan
Tentu saja alamat gambar, deskripsi dan link tujuan harus Anda ganti sesuaikan kebutuhan.
Anda bisa menambahkan gambar, deksripsi dan link sebanyak-banyaknya sesuai dengan kebutuhan

Membuat Slider Banner dengan Bootstrap

07.59 Add Comment


Untuk mempercantik tampilan situs juga untuk menarik perhatian pengunjung situs dibuatlah banner. Banner bisa berisi fitur unggulan situs (produk) atau bisa juga info promo yang sedang gencar disosialisasikan. Banner biasanya statis hanya satu gambar. Apabila ada banyak banner yang ingin ditampilkan di satu tempat maka dijadikanlah slide banner.

Bagi yang menggunakan CMS misalnya Wordpress, tentu sudah teredia banyak pilihan plugin slide banner yang bisa diambil. Namun bagi yang membangun situs dengan mengkoding dari awal, fitur yang ada di Bootstrap bisa jadi salah satu soluli. Ya, Bootstrap menyediakan fitur Carousel, yang bisa dimanfaatkan untuk membuat slide banner.

Pengantar dirasa sudah cukup. Tanpa banyak ba-bi-bu berikut ini adalah skrip membuat slider banner dengan Caraosel Bootstrap. Ganti alamat image dengan yang alamat yang kamu gunakan. 

Image SLider dengan Bootstrap 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>SlideShow Example http://dezulblog.blogspot.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-1.11.3.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      margin: auto;
  }
  </style>
</head>
<body>

<div class="container">

<h1>Slideshow dengan Bootstrap</h1>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
    <li data-target="#myCarausel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarausel" data-slide-to="1"></li>
    <li data-target="#myCarausel" data-slide-to="2"></li>
    <li data-target="#myCarausel" data-slide-to="3"></li>
</ol>

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="img/header-1.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-2.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-3.jpg">
    </div>
    
    <div class="item">
        <img src="img/header-4.jpg">
    </div>      
</div>

<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
    
</div>
</div>

</body>
</html>


Download Kode
Langganan: Postingan (Atom)