Pokok Ke

Postingan sebelumnya saya pernah mengetengahkan cara membuat tabber tab atau tab view dengan bantuan JQuery part 1. Namun tabber tab tersebut memiliki beberapa keterbatasan, diantaranya tidak dapat menambahkan beberapa widget umum seperti arsip blog, label, kecuali dengan memasukkan link Widget Blogger yang saya sebutkan tadi dengan cara manual. Sedangkan tabber tab dengan JQuery part 2 ini, kita dapat menembahkan fitur atau widget tadi dengan mudah, cukup dengan mendrag/ memindahkan widget kesidebar.

Sedang kegunaan tabber tab ini sangat membantu menghemat ruang sidebar blog anda. Karena sobat dapat memberikan fitur lebih pada wilayah tunggal sidebar tidak terbatas sekedar recent post, recent comment, random posts, tapi juga label/ kategori, daftar link, profil dan banyak lagi.

Nah tertarik ingin membuat tabber tab dengan JQuery part 2 ini? Silahkan ikuti tutorial berikut:

 

1. Setelah sig in pada account blogger anda>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab  ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab  ul li:last-child {
    border-bottom:none;
}
.widget-tab  ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab  ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content  ul li a:hover {
    color:#a59c83;
}
.tab-content  ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF url(http://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;       
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

 

Cataan CSS diatas masih bisa anda modifikasi lagi sesuaikan dengan blog anda. Untuk mengganti warna silahkan lihat tabel kode warna disini. Image lain yang bisa sobat gunakan  
3. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js type=text/javascript/>

Catatan: Bagi anda yang pernah menambahkan atau ditemplate anda sudah terdapat script JQuery maka langkah kedua abaikan saja,

4. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src=http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bloggertabv1.0-min.js.txt></script>

Catatan: Tab dari kode diatas terdiri dari 3 tab. Untuk menyesuaikan jumlah tab dengan keinginan sobat, silahkan ganti angka 2 dengan jumlah tab yang sobat inginkan, awal tab dimulai dengan angka 0. Sedangkan sidebarname adalah sidebar id.

5. Selanjutnya cari kode HTML berikut:

<div id=sidebar-wrapper>
<b:section class=sidebar id=sidebar preferred=yes>

Sekarang ganti tulisan berwarna merah dengan sidebar id dari tabber tab, yaitu sidebar 1

6. Selesai.

Sekarang anda bisa menambahkan widget yang diinginkan pada bagian elemen halaman, pastikan setiap widget memiliki nama. Kemudian drag ke sidebar. Simpan dan simpan lihat hasilnya diblog anda.

Resource: Blogger Tuts

Ingin mencoba membuat tabber tab full widget tanpa menggunakan JQuery seperti screen shoot dibawah ini, bisa lihat disini

Atau tab view sederhana seperti screen shoot dibawah ini lihat disini.

 

Trik ini disubmit oleh Ayub Sambara, pemenang The Battle of Wikumagic June 2010. Lanjutan dari "Foundation of Card Magic Part 1"


Doubel lift adalah teknik mengambil 2 kartu tapi seolah-olah telihat hanya satu kartu. Kali ini saya mengajarkan dengan menggunakan metode yang sering saya pakai yaitu mencongkel dari belakang.
Teknik :
 Lakukan mechanics grip
 Congkel 2 kartu dari bagian belakang kartu namun buatlah seolah-olah anda sedang merapikan kartu.
 Break dengan kelingking anda.
 Balik kartu dengan tangan kanan, ujung jari telunjuk berada diatas kartu dan ujung jari jempol berada dibawah kartu.
 Perlihatkan kartu dan balik kembali.




Glimpsing adalah metode mengintip salah satu kartu. Disini saya mengajarkan cara mengintip kartu teratas.
Teknik :
 Berikan kartu kepada orang yang kita ajak bermain untuk memeriksanya dan suruh dia untuk mengocok kartu.
 Saat kartu dikembalikan pegang kartu dengan gambar menghadap anda.
 Saat itu juga geser sedikit kartu terbawah dengan menggunakan jari tengah, manis, dan telunjuk kemudian lihat dan hafalkan kartunya. (saat melakukannya ajak penonton untuk berkomunikasi katakan, “ini kartunya sudah kamu cek dan ga ada rekayasa yaaa…..” )




In jog control adalah teknik mengocok kartu tanpa merubah posisi kartu teratas. Sebagai contoh kartu teratas adalah As sekop (kartu saya balik supaya lebih mudah anda pahami)
Teknik :
 Kocok kartu dari samping.
 Sebelum kekocokan kedua beri batasan dengan satu katu agak sedikit dilebihkan, kemudian kocok terus sampai selasai.
 Rapikan kartu dan langsung lakukan thumb break melalui kartu yang agak sedikti dilebihkan tadi dan kocok sekali lagi kartu sampai kartu teratas ( As sekop ) kembali.




Forcing adalah salah satu teknik memaksa penonton secara diam-diam untuk memilih kartu yang sudah kita ketahui nilainya.
Teknik 1 :
 Dalam hal ini anda sudah tahu nilai kartu teratas.
 Lakukan swing cut kemudian double lift
 Rapikan kartu dan tarik bagian depan dari bawah keatas, suruh penonton mengatakan stop dimana saja.
 Kemudian dengan jempol angkat kartu yang sudah anda break tadi.
 Berikan kepada penonton.
Contoh kartu teratas adalah As sekop dan kartu saya balik untuk memudahkan anda.




Untuk teknik forcing lainya teman-teman bisa lihat di blog wikumagic atau di ebook Apology mas wiku. Teknik forcing yang mas wiku berikan sangat bagus untuk teman-teman kombinasikan dengan teknik-teknik yang sudah saya berikan diatas. Jika teman-teman sudah lancar teknik-teknik tersebut maka teman-teman bisa menciptakan ribuan trik sesuai keinginan teman-teman, Seperti kata mas wiku dalam ebook Apologynya.
Saat Performance usahakan posisi kartu rendah atau dibawah perut anda dan usahakan penonton ada didepan anda. Karena posisi seperti ini akan melindungi manipulasi-manipulasi yang anda lakukan pada kartu seperti break dll. Jika penonton anda jauh lebih tinggi dari anda maka anda tidak perlu agak membungkuk karena sudut pandangnya yang jauh diatas anda sudah bisa melindungi manipulasi anda, namun jika menonton jauh lebih rendah mau tak mau kalian harus membungkuk untuk memposisikan kartu dibawah perut anda.


Nama : Ayub sambara (panggil aja ayub)
Tgl lhir :………….1989
Hoby : Main musik dan sulap
Pekerjaan : Mahasiswa Keperawatan SI Santo Paulus Banjarmasin
Fb : Ayoeb Mon Deo
Blog : wwwayoebcool.blogspot.com (bukan blog sulap tapi blog untuk pengetahuan)


Jika anda menyukai artikel ini, mohon kunjungi link sponsor di bawah untuk mendukung kelangsungan blog Wikumagic