Cara Membuat Banner Iklan Slide Keren di Blog

Cara Membuat Banner Iklan Slide Keren di Blog ~ Halloo sobat, selamat berjumpa kembali. Mungkin Sobat penrnah melihat sebuah tampilan slideshow yang diletakkan diatas header, atau sebuah iklan baris, semua itu direkomendasikan agar pengunjung tertarik untuk membuka halaman yang telah ditawarkan oleh pemilik Blog.

Bagi Anda yang ingin memasang kotak penawaran dapat dilakukan dengan memasang kotak penawaran acak, tampilannya sangat menarik karena pada setiap background halaman penawaran memiliki warna yang berbeda-beda. Caranya cukup Anda klik pada jendela halaman, maka halaman akan berpindah.

Demo   CODE

Pada prinsipnya pada halaman penawaran ini menggunkan jQuery, bagi Anda yang tertarik ingin memasangnya di Blog berikut ini langkah-langkahnya :

Silahkan Anda buka Editor Template, kemudian Anda cari kode ]]></b:skin> kemudian Anda salin kode dibawah ini dan pasangkan diatasnya .

.banner {
  width: 250px;
  height: 300px;
  background-color: #3498db;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  cursor: pointer;
}
.banner p {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: 14pt;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0 10px;
  margin-top: 20px;
}

.Slide {
  width: 100%;
  height: 60px;
  background-color: #2980b9;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
}
.Slide h3 {
  padding-top: 6px;
  color: white;
  font-family: 'Ubuntu Condensed', sans-serif;
  text-transform: uppercase;
  font-size: 11pt;
}

.quotation-mark {
  x: 0px;
  y: 0px;
  enable-background: new 0 0 50 50;
  width: 50px;
  height: 70px;
}
.quotation-mark text {
  fill: white;
  font-family: 'TimesNewRomanPS-BoldMT';
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Selanjutnya Anda cari kode </body>, lalu copy kode dibawah ini dan pastekan diatasnya.

<script type='text/javascript'>
var quotes = [
    [
        ' Silahkan masukkan teks Anda disini ',
        ' Silahkan Anda masukkan judul disini '
    ],
    [
         ' Silahkan masukkan teks Anda disini ',
        ' Silahkan Anda masukkan judul disini '
    ],
    [
         ' Silahkan masukkan teks Anda disini ',
        ' Silahkan Anda masukkan judul disini '
    ],
    [
         ' Silahkan masukkan teks Anda disini ',
        ' Silahkan Anda masukkan judul disini '
    ],
    [
         ' Silahkan masukkan teks Anda disini ',
        ' Silahkan Anda masukkan judul disini '
    ]
];
var colors = [
    [
        '#2ecc71',
        '#27ae60'
    ],
    [
        '#1abc9c',
        '#16a085'
    ],
    [
        '#e74c3c',
        '#c0392b'
    ],
    [
        '#9b59b6',
        '#8e44ad'
    ],
    [
        '#66cc66',
        '#17ad49'
    ],
    [
        '#2A7E64',
        '#267359'
    ],
    [
        '#4F82C4',
        '#6289CB'
    ]
];
function randomNum(e) {
    return Math.floor(Math.random() * e.length + 1 - 1);
}
function randomBackgroundColor() {
    var ranNum = randomNum(colors);
    return colors[ranNum];
}
function randomQuote() {
    var ranNum = randomNum(quotes);
    return quotes[ranNum];
}
var banner = document.getElementById('banner');
var bennerText = document.getElementById('quoteText');
var slide = document.getElementById('slide');
var slideText = document.getElementById('slideText');
card.onclick = function () {
    var ranColor = randomBackgroundColor();
    banner.style.backgroundColor = ranColor[0];
    slide.style.backgroundColor = ranColor[1];
    var ranText = randomQuote();
    slideText.innerHTML = ranText[1];
    bannerText.innerHTML = ranText[0];
};
</script>

Selanjutnya pemasangan HTML, Silahkan Anda pasangkan pada tempat yang Anda kehendaki, bisa pada halaman postingan maupun Widget .

<div class="banner" id="banner" style="background-color: #2ecc71;">
      <svg class="quotation-mark unselectable" viewbox="0 0 50 50" xml:space="preserve">
<text font-size="51.4154" transform="matrix(1.2764 0 0 1 8.5929 50.3609)">“</text>
</svg>

<div id="quoteText">
Silahkan Masukkan Teks penawaran awal Anda disini</div>
<div class="slide unselectable" id="slide" style="background-color: #27ae60;">
<h3 id="slideText">
Silahkan Anda masukkan Judul awal penawaran Anda disini</h3>
</div>
</div>

Keren buka, demikian kami sampaikan Cara Membuat Banner Iklan Slide Keren di Blog, terimaksih sudah berkunjung di aak-share.com dan semoga bermanfaat.

Bagikan Artikel ini