22.8.14
10
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:

Menu profile pictures


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 >>
= TERIMA KASIH =

10 komentar

  1. coba bisa update sendiri ya mba..seperti recent post atau related post..atau rekomendasi artikel

    ada salam dari Agnes..!, kasian agnes mba.. kenapa di demo..!, :>)

    BalasHapus
  2. beliau sudah memberikan ijin mas, kalau memberikan informasi yang benar tidak apa-apa ditampilkan dalam demo, hehe..

    sepertinya blogger tidak secanggih itu mas, biasanya info yang sudah terjadi baru bisa di update, sehingga informasinya bisa kita tuliskan, berbeda dengan widget blog seperti recent atau related post, untuk menampilkannya secara update auto, tetap saja kita memberikan link URL untuk di update artikelnya bukan.?

    BalasHapus
  3. efek slot begini bisa menghemat space ya mba. jadinya ga terlalu banyak widget yang manjang ke bawah

    BalasHapus
    Balasan
    1. benar mbak, karena salah satu faktor yang memberatkan blog terbuka adalah gambar,terlebih gambar tersebut belum di parse, sudah bisa dibayangkan akan terasa lama menunggu artikel terbuka jika memuat gambar yang banyak.

      makanya saya buatkan tutorial seperti ini, buat sahabat yang menginplementasikan hobbinya dalam dunia artis atau resep-resep makanan.

      Hapus
  4. tampilan yang sangat menarik apa lagi dengan slot tab bisa menghemat space, yang bikin saya suka banget tampilan yang rapih.

    BalasHapus
  5. ada saja inovasi dari mbak Devy (p)

    BalasHapus
    Balasan
    1. hanya sekedar berbagi kok kang, barangkali ada yang tertarik,
      hehe...

      Hapus
  6. Demonya kok ada 2 mbak, itu cssnya buat yg atas apa bawah soalnya warna tabnya berbeda. Itu benar Nikita 29 Juni mbak? Jodoh berarti sama saya =)) (k)

    BalasHapus
    Balasan
    1. demo yang mana ada 2 ya mas, kalau masalah background tab itu penyesuaian saja, silahkan gunakan background tab yang mas suka, pnegaturan CSS pada baris ini:

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

      jadi kode-kode diatas bukan untuk permanent, sehingga mas bisa edit sesuka hati untuk mendapatkan hasil yang berbeda.jadi bukan demo yang ada 2, hehe

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK