Cara Membuat Halaman Title On Klik di Blog

Cara Membuat Halaman Title ON Klik ~ Hallo sobat .. berjumpa kembali . Kali ini Aak akan berbagi Tips Membuat Halaman Title On klik. Tentunya Sobat sudah mengetahui fungsi pada Title, tidak perlu saya jelaskan kembali ya Sobat karena sebelumnya saya sudah membahas mengenai Title yaitu Membuat ALT dan Title Tag Otomatis Pada Gambar dan juga Title Tooltip Link dengan CSS.

Demo   CODE

Pada dasarnya pembuatan title pada gambar hanya menambahkan title , untuk title satu ini sangat berbeda ya sobat karena terlihat seperti navigasi berada dibawah template dan melayang walaupun halaman discroll sampai keatas, dan jika link tersebut di klik maka akan muncul sebuah halaman . Cara pemasanganya sebagai berikut :

Buka Editor template Anda cari kode ]]></b:skin> dan slain kode dibawah ini pasangkan diatasnya.

/*Expanding Tittle*/
.tiles {
  position: fixed;
  z-index: 5;
  bottom: 0;
  display: flex;
  width: 100%;
}
.tiles__tile {
  flex: 1;
  padding: 20px;
  transition: all .25s ease-out;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.tiles__tile.active:nth-child(1) {
  background: tomato;
}
.tiles__tile.active:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile.active:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile.active:nth-child(4) {
  background: crimson;
}
.tiles__tile:hover:nth-child(1) {
  background: tomato;
}
.tiles__tile:hover:nth-child(2) {
  background: deepskyblue;
}
.tiles__tile:hover:nth-child(3) {
  background: lightseagreen;
}
.tiles__tile:hover:nth-child(4) {
  background: crimson;
}

.content {
  z-index: 10;
  height: 100vh;
  position: fixed;
  top: 0;
}
.content__item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 12vw;
  -webkit-transform: scale(0);
  transition: all 0.65s cubic-bezier(0.23, 1, 0.32, 1);
}
.content__item.active {
  -webkit-transform: scale(1);
}
.content__item.active .content-wrap {
  -webkit-transform: scale(1);
  opacity: 1;
}
.content__item:nth-child(1) {
  -webkit-transform-origin: 0% 100%;
  background: tomato;
}
.content__item:nth-child(2) {
  -webkit-transform-origin: 33% 100%;
  background: deepskyblue;
}
.content__item:nth-child(3) {
  -webkit-transform-origin: 66% 100%;
  background: lightseagreen;
}
.content__item:nth-child(4) {
  -webkit-transform-origin: 100% 100%;
  background: crimson;
}
.content__item .content-wrap {
  -webkit-transform: scale(0.7);
  opacity: 0;
  transition: all 0.8s 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------- */
.stuff {
  margin: 6vw;
  max-width: 768px;
}

h2 {
  font-weight: 300;
}

h3 {
  font-size: 48px;
}

p {
  font-weight: 300;
  font-size: 24px;
}

Selanjutnya Anda cari kode </body> , kemudian salin kode dibawah ini dan pasangkan diatasnya. Apabila pada Template Anda sudah ada kode tersebut , Anda bisa melewati tangkah tersebut.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>

Masih pada Kode </body> , silahkan Anda copy Javascript dibawah ini dan pasangkan dibawah kode diatas atau diatas kode </body>.

<script type="text/javascript">
//<![CDATA[
var tileBtn = $('li.tiles__tile');
var allContent = $('li.content__item');
var contentWrap = $('.content-wrap');
tileBtn.on('click touchstart', function () {
    var self = $(this);
    var match = self.attr('data-tile');
    var allContent = $('li.content__item');
    var content = $('li#' + match);
    self.toggleClass('active');
    content.toggleClass('active');
    contentWrap.css({ 'transition-delay': '.35s' });
    return false;
});
$(window).on('click touchstart', function () {
    if (allContent.hasClass('active') && tileBtn.hasClass('active')) {
        allContent.removeClass('active');
        setTimeout(function () {
            tileBtn.removeClass('active');
        }, 400);
        contentWrap.css({ 'transition-delay': '.0s' });
    }
});
//]]>
</script>

Selanjutnya Anda pasangkan kode dibawah ini di atas </body>

<div class="stuff">
</div>
<ul class="tiles">
<li class="tiles__tile" data-tile="1">
<h2>
One</h2>
</li>
<li class="tiles__tile" data-tile="2">
<h2>
Two</h2>
</li>
<li class="tiles__tile" data-tile="3">
<h2>
Three</h2>
</li>
<li class="tiles__tile" data-tile="4">
<h2>
Four</h2>
</li>
</ul>

<ul class="content">
<li class="content__item" id="1">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
      <h3>
Apples</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et reprehenderit nostrum nisi aliquam nemo non fugit, minus, ex ullam vel minima libero, eius labore. Veritatis odit blanditiis quidem amet accusantium.
</div>
</li>
<li class="content__item" id="2">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
      <h3>
Bananas</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae impedit aperiam nemo quos fuga illum porro doloribus quisquam quidem reprehenderit, hic tempora, illo id provident aliquam quo officia ea voluptatum.
</div>
</li>
<li class="content__item" id="3">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
      <h3>
Cucumbers</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias nam nesciunt maiores. Nesciunt explicabo ea deserunt facere sunt, autem, reiciendis nobis, velit accusantium laudantium quis non ratione aspernatur. Eum, doloribus?
</div>
</li>
<li class="content__item" id="4">
<div class="content-wrap" style="-webkit-transition: 0s; transition: 0s;">
      <h3>
Spinach</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi velit iure expedita quis, blanditiis. Consectetur incidunt distinctio dolor ullam beatae cum maiores quas pariatur amet, temporibus ad commodi dolorem provident.
</div>
</li>
</ul>

Terimakasih sudah berkunjung di aak-share.com dan Semoga bermanfaat!

Bagikan Artikel ini