Cara Menciptakan 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 supaya pengunjung tertarik untuk membuka halaman yang telah ditawarkan oleh pemilik Blog.

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 instruksi 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 instruksi </body>, kemudian copy instruksi 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 daerah yang Anda kehendaki, dapat 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.

Share this post