Membuat Profil Menu Efek Slot Tab

Membuat Profil Menu Efek Slot Tab - Membuat profil menu seperti ini akan sangat membantu buat Anda yang gemar memberikan info "BIO DATA" atau profil artis yang akan Anda publikasikan di blog, misalnya saja saat ini Anda ingin membahas perjalanan karir seorang artis yang fenomenal saat ini, sudah pasti postingan Anda sedikit banyaknya akan membahas tentang profil mereka, dari nama lengkap, tanggal dan tempat lahir dan sebagainya. Namun 1 profil yang Anda tuliskan akan termuat dalam 1 postingan. Karenanya, info-info yang menarik seperti ini, sudah saya rangkum dalam tampilan menu navigasi dengan efek slot tab seperti ini:




DEMO SHOW


Tidak hanya 1 profil dalam 1 pembahasan postingan, disini sudah saya buatkan 3 profil segaligus akan tampil dalam 1 postingan blog, sehingga 1 postingan akan menampilkan 3 pembahasan profil yang telah saya desain dengan efek slot-tab sebagai tombol pilihan item seperti gambar berikut:

Referensi URL - Membuat Label Blogger Accordion Efek Tabulasi


Buat sahabat pecinta SAHABAT BLOGGER 77 yang ingin Membuat Profil Menu Efek Slot Tab seperti ini, berikut beberapa elemen code yang harus kita letakkan pada formulir postingan mode tulis HTML sebagai berikut:


TAHAP PENERAPAN ELEMENT KE POSTINGAN
1.1 CSS Element

<style type="text/css">
//* profile navigation menu slot tabs design
referensi url: http://sahabatblogger77.blogspot.com/
modified: by. devy indriyani
date: august 22, 2014
type: script-jQuery (slottab)
*/
a {text-decoration: none;}
h3 {margin: 0 0 10px 0;}
.tabs {list-style:none;overflow:hidden;padding-left:1px;}
.tabs li {display: inline;}
.tabs li a {
  display:block;
  float:left;
  padding:4px 8px;
  color:black;
  border:1px solid #ccc;
  background:#eee;
  margin:0 35px 0 -35px;}

.tabs li a.current {
  background:#b4b;
  position:relative;
  top:2px;
  z-index:2;
  color:#fff;}

.box-wrapper {
  box-shadow:0 0 5px #fff;
  padding:20px;
  background:white;
  border:1px solid #ccc;
  margin:-7px 0 0 0;
  height:212px;
  position:relative;}

.current {z-index: 100;}
.col-one, .col-two {margin-right:10px;}
.col-one, .col-two, .col-three {
  width:30%;
  float:left;
  position:relative;
  top:350px;}

.content-box {
  overflow:hidden;
  position:absolute;
  top:20px;
  left:25px;
  width:700px;
  height:230px;}
</style>

1.2 Script jQuery

Default template blogger belum menggunakan script-jQuery seperti ini. Coba perhatikan template Anda, jika sudah menggunakan jQuery dengan jenis yang sama, abaikan saja script yang sudah saya beri warna MERAH namun jika belum, Copy script di bawah ini saat Anda akan menempatkannya pada postingan seperti ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var columnReadyCounter = 0;
function ifReadyThenReset() {
 columnReadyCounter++;
 if (columnReadyCounter == 3) {
  $(".col").not(".current .col").css("top", 350);
  columnReadyCounter = 0;
 }
};
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/slotTap-navigation.js"></script>

1.3 HTML Markup

Silahkan Anda edit terlebih dahulu kode teks yang saya beri warna Biru, dan sesuaikan dengan pembahasan profil postingan Anda.
- Warna Orange ganti dengan gambar profil.
- Warna Hijau ganti dengan content bahasan Anda.
- Jika sudah OK, publikasikan Artikel.

<div id="slot-machine-tabs">
     <ul class="tabs">
       <li><a href="#one">Agnes Monica</a></li>
       <li><a href="#two">Aura Kasih</a></li>
       <li><a href="#three">Nikita Willy</a></li>
     </ul>
        <div class="box-wrapper">
          <div id="one" class="content-box">
   <div class="col-one col">
<img src="google-image/agnes.jpg" alt=".." />
  </div>
     <div class="col-two col">
      <h3>Agnes Monica</h3>
       <p>
          <!!..Your Teks..!!>
       </p>
     </div>
     <div class="col-three col">
       <p>
          <!!..Your Teks..!!>
       </p>
     </div>
          </div>//ending class='content-box'

          <div id="two" class="content-box">
   <div class="col-one col">
<img src="google-image/aura-kasih.jpg" alt=".." />
   </div>
      <div class="col-two col">
       <h3>Aura Kasih</h3>
        <p>
          <!!..Your Teks..!!>
        </p>
      </div>
      <div class="col-three col">
        <p>
          <!!..Your Teks..!!>
        </p>
     </div>
          </div>

          <div id="three" class="content-box">
   <div class="col-one col">
<img src="google-image/nikita-willy.jpg" alt=".." />
   </div>
      <div class="col-two col">
       <h3>Nikita Willy</h3>
        <p>
          <!!..Your Teks..!!>
        </p>
      </div>
      <div class="col-three col">
        <p>
          <!!..Your Teks..!!>
        </p>
     </div>
          </div>
        </div><!!..ending class='box-wrapper'..!!>
</div><!!..ending id='slot-machine-tabs'..!!>

Anda bisa berinovasi dengan menyediakan konten lain disana, misalnya saja ingin membahas seputar resep makanan dan cara membuatnya. Bagaimana, cukup menarik bukan..? hehe..

Selamat bersenang-senang, semoga bermanfaat.!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Profil Menu Efek Slot Tab
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/08/membuat-profil-menu-efek-slot-tab.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77