Hide is Sembunyi Ala Bloglang

Menyembunyikan sesuatu agar tidak terlihat langsung oleh penglihat beragam cara telah dibuat. Spoiler technique salah satunya! Koben juga pernah mensisipkan di dalam postingan teknik serupa, cuman tidak tahu juga ada dimana keberadaannya :D Contoh seperti ini Klik 1x buat melihat secara keseluruhan, klik 2x untuk kembali. Tidak disangka ada wanita cantik, eh salah...cukup besar gambar yg ada ternyata ;))
Kira-kira hasil efek menyembunyikan something macam itu sob. Ada juga dulu Koben pernah berbagi tentang Collapse/Expand [+/-]! Semakin banyak resource, trik, teknik semakin kita bingung dibuatnya :)) Yang benar makin banyak alternatif pilihan, tinggal kreatifitas masing² ;) :) Gaya Koben trik serupa dipasang di blog ini saja ada banyak :D Like it Flying, Beugh!, meletmelettt..., Click to look

dan lain² :P

Mari kita mulai saja apa saja ragam & cara trik menyembunyikan sesuatu di dalam template blog! Yang pertama

Hide something use JavaScript

What is this!!!

Si Bloglang anu Ganteng Kalem Tea...

Masukan secuil JavaScript berikut diatas tagging </body>

<script type='text/javascript'>
//<![CDATA[
    function gonesOn(href) {
        var c = href.nextSibling;
        if (c.style.display == 'none') {
            c.style.display = 'block';
        } else {
            c.style.display = 'none';
        }
        return false;
    }
//]]>
</script>

Cara pemakaian (Harus dalam satu baris penulisan konten yg akan disembunyikan)<a href="javascript:void(0);" onclick="return gonesOn(this);">TITLE HERE</a><div style="display: none;">...CONTENT HERE...</div>

Banyak sekali pokoknya fitur yg seperti itu. Namun yang terpendek menggunakan script yaaa itu caranya. Saya jg tidak pakai yg itu, karena malas ganti ini-itunya :D

Khusus nyembunyiin variabel frame/iFrame, Koben kasih dengan trik jQuery plugin. Seperti berikut caranya.

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

<script type='text/javascript'>
//<![CDATA[
$(function () {
    var iframes;
    if (iframes = $('a.iframe[href*="/"]')) {
        iframes.each(function (index, bk) {
            bk = $(bk);
            bk.data('href', bk.attr('href'))
            bk.attr('href', 'javascript:void(0)').attr('text', bk.data('href').split('')[0]);
            bk.addClass();
            bk.click(function (event) {
                event.preventDefault();
                var iframe = $('<iframe></iframe>', {
                    "src": bk.data('href'),
                    "css": {
                        width: "100%",
                        height: 400
                    }
                });
                var iframeWrapper = $('<div></div>').addClass();
                iframeWrapper.append(iframe);
                bk.replaceWith(iframeWrapper);
            });
        });
    }
});
//]]>
</script>

Script warna merah jangan dipakai lagi bila sudah ada. Letakin script plugin diatas tag </body> Cara memakainya dengan syntax berikut<a class="iframe" href="http://www.bing.com/" title="">BING</a>Ketika link sudah di klik, tidak akan bisa ditutup lagi ;;) =))
Sudah cukup atau masih kurang? Itu sudah saya pilah pillih yg paling sederhana loh buat kamu² :"> Bonus akan Koben kasih masih seputar sembunyiin frame. Mau dipakai atau tidak terserah kalian. Cuma berbagi saja, soalnya sedikit rada unik ini trik :P Sangkin uniknya, cara menuliskan syntax sedikit memerlukan skill ;)

JavaScript Resizable iFrame

<script type='text/javascript'>
//<![CDATA[
function resizeiframe(the_iframe, status) {
var the_iframe_src = the_iframe.src;
the_iframe.className = status;
}
function search(term, lastsearch) {
try { if(top.location.href != window.location.href) { return; } }
catch(e) { return; }
var frames = document.getElementsByTagName("iframe");
for(var i = 0, len = frames.length; i < len; i++) {
var frame = frames[i];
frame.src = encodeURIComponent(frame.src.replace('='+lastsearch,'='+term));
}
}
//]]>
</script>

Sedikit kode CSS, dan masukan diatas kode ]]></b:skin>iframe.on {
width: 500px;
height: 500px;
z-index: 1000;
overflow: auto;
}
iframe.off {
width: 175px;
height: 80px;
margin: 3px;
}Silahkan rubah dan variasikan sesuai dengan kemauan memakai variabel CSS kreasi masing². Default CSS coded like that! Ini dia yg rumitnya :D<iframe class="off" src="http://BLAH-BLEH-BLOH.COM" scrolling="no" frameborder="0" align="center" onmouseover="resizeiframe(this, 'on');" onmouseout="resizeiframe(this, 'off');" bgcolor="transparent" allowtransparency="true"></iframe>DEMO

http://jsbin.com/okutok/

Dynamically Resizing an iFrame by: http://bcmoney-mobiletv.com/blog/2010/07/13/dynamically-resizing-an-iframe/
Happy sembunyiii \m/