Cara Menciptakan Halaman Title On Klik Di Blog

Cara Membuat Halaman Title ON Klik Hallo teman .. berjumpa kembali . Kali ini Aak akan menyebarkan Tips Membuat Halaman Title On klik. Tentunya Sobat sudah mengetahui fungsi pada Title, tidak perlu aku jelaskan kembali ya Sobat sebab sebelumnya aku sudah membahas mengenai Title ialah 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 teman sebab terlihat ibarat navigasi berada dibawah template dan melayang walaupun halaman discroll hingga keatas, dan kalau link tersebut di klik maka akan muncul sebuah halaman . Cara pemasanganya sebagai berikut :

Buka Editor template Anda cari kode ]]></b:skin> dan slain isyarat 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 isyarat </body> , lalu salin isyarat dibawah ini dan pasangkan diatasnya. Apabila pada Template Anda sudah ada isyarat tersebut , Anda dapat 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 isyarat diatas atau diatas isyarat </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 isyarat 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!

Share this post