Updates from April, 2010 Toggle Comment Threads | Pintasan Keyboard

  • qmey90 12:35 pm on April 12, 2010 Permalink | Balas  

    Membuat Back To Top Dengan jQuery di Blog 


    Hy semuanya… sekarang anda harus baca tips ini dengan baik karena cara membuat back to top kali ini menggunakan jQuery. Di trik lama, gerak back to top yang dihasilkan sangat cepat dan langsung menuju ke atas. Lain halnya dengan jika kita memberi sedikit sentuhan scipt jQuery. Gerak yang dihasilkan akan lebih perlahan dan lembut.

    Berikut Cara Membuat Smoothscroll Go to Top

    1. Login ke akun Blogger anda

    2. Pilih Layout > Edit HTML

    3. Cari kode </head>, lalu paste kode berikut di atasnya:

    <!– SCROLLING BACK-TO-TOP –>
    <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&#8217; type=’text/javascript’/> <!– jika di template anda sudah terdapat script jQuery 1.3.2, maka anda tidak perlu lagi menambahkan kode ini –>
    <script type=’text/javascript’>
    $(function(){
    $('a[href*=#top]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    &amp;&amp; location.hostname == this.hostname) {
    var $target = $(this.hash);
    $target = $target.length &amp;&amp; $target || $('[name=' + this.hash.slice(1) +']');
    if ($target.length) {
    var targetOffset = $target.offset().top;
    $('html,body').animate({scrollTop: targetOffset}, 1000);
    return false;
    }
    }
    });
    });
    </script>
    <!– SCROLLING BACK-TO-TOP END –>

    4. Cari kode <body>, lalu masukkan atribut id=’top’ ke dalam tag <body>, maka hasilnya akan seperti <body id=’top’>

    5. Selanjutnya, cari kode </body> dan paste kode berikut di atasnya:

    <div id=’gotop’>
    <a href=’#top’ title=’Go to Top’>
    <img src=’http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/s400/arrow1-blue-32.png&#8217; style=’right:20px;bottom:20px;position:fixed’/>
    </a>
    </div>

    Keterangan:
    http://4.bp.blogspot.com/_Z_KyM3IvEFQ/S2bGsbtW-vI/AAAAAAAABCA/sXmxVJTXnvI/s40&#8230; > url gambar
    – right:20px; bottom:20px; > posisi gambar pada template adalah 20 pixel dari bawah dan kanan.

    info: untuk gambar / tombolnya bisa anda download disini.

    6. Terakhir, klik Save Template.

    Sedikit pemberitahuan, untuk kedepannya saya masih akan menyediakan tips tentang fungsi jQuery untuk Blogger. Jadi jangan lupa untuk berlangganan dengan Selalu Ada Untukmu | http://www.aku-disini-untukmu.co.cc, ok?

     
  • qmey90 12:28 pm on April 12, 2010 Permalink | Balas  

    Membuat Chatbox Hidden 


    Hidden Chatbox adalah sebuah tempat menyimpan atau meletakkan widget chatbox (Shoutmix, Shoutbox, dll) yang bisa bersembunyi. Sembunyi disini pastinya bukan berarti hilang, kabur, atau lari dari kejaran polisi (emangnya Nooordin M. Top apa?!), tapi sengaja kita sembunyikan untuk menghemat ruang blog. Sudah hampir sebulan saya tidak memasang widget shoutmix, itu karena banyak widget lain yang lebih penting darinya untuk ditampilkan. Tapi setelah belajar dan paham, saya menggunakan trik Hidden Chatbox ini untuk memasang shoutmix sehingga blog saya tidak terlihat sesak lagi(walau sebenarnya masih sesak banget, hehehehe….). Anda juga mau memasang shoutmix dengan trik ini? Baca baik-baik ya…

    Trik Hidden Chatbox ini terbagi menjadi 2 pilihan, yaitu LEFT-Hidden Chatbox dan RIGHT-Hidden Chatbox. Kalau yang saya pakai di blog ini adalah RIGHT-Hidden Chatbox. Berikut kodenya:

    LEFT-Hidden Chatbox

    <!– left hidden chatbox byhttp://www.aku-disini-untukmu.co.cc  START –>
    <style>
    #hcl {
    position:fixed;
    top:100px;
    left:0px;
    z-index:+1000;
    }
    * html #hcl {position:relative;}
    .hcltab {
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url(‘http://3.bp.blogspot.com/_Z_KyM3IvEFQ/S2Evq5hIpUI/AAAAAAAABAM/3qo6ScKImhw/s400/cbred-LEFT.png&#8217😉 no-repeat;
    }
    .hclcontent {
    float:left;
    border:2px solid #790909;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type=”text/javascript”>
    function showHidehcl(){
    var hcl = document.getElementById(“hcl”);
    var w = hcl.offsetWidth;
    hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
    hcl.opened = !hcl.opened;
    }
    function movehcl(x0, xf){
    var hcl = document.getElementById(“hcl”);
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcl.style.left = x.toString() + “px”;
    if(x0!=xf){setTimeout(“movehcl(“+x+”, “+xf+”)”, 10);}
    }
    </script>
    <div id=”hcl”>
    <div class=”hclcontent”>

    <!– KODE SHOUTMIX ANDA DISINI –>

    <br />
    <div class=”hc-credit”>
    <span style=”float:left”>
    <!– THIS CREDIT MUST STAY INTACT FOR LEGAL USE –>
    <a href=”http://www.aku-disini-untukmu.co.cc” target=”_blank”>
    Get this widget!
    </a>
    </span>
    <span style=”float:right”>
    <a href=”javascript:showHidehcl()”>
    [close]
    </a>
    </span>
    </div>
    </div>
    <div class=”hcltab” onclick=”showHidehcl()”> </div>

    </div>
    <script type=”text/javascript”>
    var hcl = document.getElementById(“hcl”);
    hcl.style.left = (30-hcl.offsetWidth).toString() + “px”;
    </script>
    <!– left hidden chatbox by http://www.aku-disini-untukmu.co.cc END –>

    RIGHT-Hidden Chatbox

    <!– right hidden chatbox by http://www.aku-disini-untukmu.co.cc START –>
    <style>
    #hcr {
    position:fixed;
    top:100px;
    z-index:+1000;
    }
    * html #hcr {position:relative;}
    .hcrtab {
    height:100px;
    width:30px;
    float:left;
    cursor:pointer;
    background:url(‘http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png&#8217😉 no-repeat;
    }
    .hcrcontent {
    float:left;
    border:2px solid #003e82;
    background:#f3f6f7;
    padding:10px;
    }
    .hc-credit {font-size:9px}
    .hc-credit a {text-decoration:none}
    </style>
    <script type=”text/javascript”>
    function showHidehcr(){
    var hcr = document.getElementById(“hcr”);
    var w = hcr.offsetWidth;
    hcr.opened ? movehcr(0, 30-w) : movehcr(20-w, 0);
    hcr.opened = !hcr.opened;
    }
    function movehcr(x0, xf){
    var hcr = document.getElementById(“hcr”);
    var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    hcr.style.right = x.toString() + “px”;
    if(x0!=xf){setTimeout(“movehcr(“+x+”, “+xf+”)”, 10);}
    }
    </script>
    <div id=”hcr”>
    <div class=”hcrtab” onclick=”showHidehcr()”> </div>
    <div class=”hcrcontent”>

    <!– KODE SHOUTMIX ANDA DISINI –>

    <br />
    <div class=”hc-credit”>
    <span style=”float:left”>
    <!– THIS CREDIT MUST STAY INTACT FOR LEGAL USE –>
    <a href=”http://www.aku-disini-untukmu.co.cc&#8221; target=”_blank”>
    Get this widget!
    </a>
    </span>
    <span style=”float:right”>
    <a href=”javascript:showHidehcr()”>
    [close]
    </a>
    </span>
    </div>
    </div>
    </div>
    <script type=”text/javascript”>
    var hcr = document.getElementById(“hcr”);
    hcr.style.right = (30-hcr.offsetWidth).toString() + “px”;
    </script>
    <!– right hidden chatbox by http://http://www.aku-disini-untukmu.co.cc END –>

    Keterangan:

    #hcr {
    position:fixed;
    top:100px; /* Menunjukkan bahwa jarak tab dari atas adalah sejauh 100px. Bisa anda ganti dengan bottom:100px yang berarti jarak tab dari bawah menjadi sejauh 100px */
    z-index:+1000;
    }

    .hcrtab {
    height:100px; /* tinggi tab pembuka hidden chatbox */
    width:30px; /* tinggi tab pembuka hidden chatbox */
    float:left;
    cursor:pointer;
    background:url(‘http://2.bp.blogspot.com/_Z_KyM3IvEFQ/S2EvgsgQ7nI/AAAAAAAAA_k/gq8QRLZcHFs/s400/cbblue.png&#8217😉 no-repeat; /* gambar yang dijadikan sebagai tab pembuka hidden chatbox */
    }

    .hcrcontent {
    float:left;
    border:2px solid #003e82; /* warna dan ukuran border hidden chatbox */
    background:#f3f6f7; /* warna background hidden chatbox (tidak perlu diganti jika anda mengedit kode lain pada style) */
    padding:10px;
    }

    Berikut beberapa gambar tab pembuka hidden chatbox dan kode warna html untuk border yang serasi:

    cbred-LEFTcbred
    Kode warna border: #790909
    cbyellow-LEFTcbyellow
    Kode warna border: #aca500
    cbgreen-LEFTcbgreen
    Kode warna border: #008232
    cbblue-LEFTcbblue
    Kode warna border: #003e82
    cbblue-2-LEFTcbblue-2
    Kode warna border: #0079a0

    Nha, sekarang kit pasang kode itu di blog. Udah tahu caranya kan? Itu, pilih Layout > Page Elements > HTML/Javascript, lalu masukkan kode Hidden Chatbox disana.

    Note: Trik hidden ini bisa juga anda gunakan untuk memasang widget lain, jadi trik ini tidak khusus untuk memasang shoutmix. Anda tinggal berkreasi dengan kode-kode yang bisa bikin kepala jadi botak itu, hahahahahaha…!

     

    Rizky Meyansyah Johan

     
c
Compose new post
j
Next post/Next comment
k
Previous post/Previous comment
r
Balas
e
Sunting
o
Show/Hide comments
t
Pergi ke atas
l
Go to login
h
Show/Hide help
shift + esc
Batal
%d blogger menyukai ini: