Articles by "Tips & Triks"

Showing posts with label Tips & Triks. Show all posts

2:14 AM , ,
[left-post]
Cara Pasang Password Artikel Blogger
Memasang password untuk artikel blog sepertinya menarik. Jadi, pengunjung harus memasukkan password yang benar untuk melihat artikel yang kita sembunyikan. Apa yang dapat Anda sembunyikan? Bisa teks, bisa juga gambar. Artikel sejenis ini sudah terbit dua tahun yang lalu. Saya menulis artikel ini lagi karena telah ada versi baru JavaScript yang digunakan. Selain itu juga, baru-baru ini +kampungjasa Incku alias Friska Lee menambahkan saya ke dalam lingkaran G+ nya. Iseng-iseng saya lihat halaman G+ nya dan menemukan artikel Buka-artikel-full-dengan-password, namun sayang hanya demo adapun tutornya belakangan, janji Fiska Lee. Siapa tahu ada yang tidak sabar jadi saya buatkan tutorialnya :)

Lihat DEMO

Bagi Anda yang penasaran ikuti saja tutorial Cara Memasang Password Artikel Blogger berikut ini.

  1. Mula-mula tanam JavaScript berikut dalam <head> template Anda, letakkan saja di atas </head> lalu simpan template.

    <script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script>
  2. Selanjutnya tentu Anda harus menulis artikel seperti biasa. Setelah artikel selesai Anda buat, Cut bagian artikel yang ingin dipasangkan password. Lalu, pergilah ke http://www.vincentcheung.ca/jsencryption/
  3. Dalam kolom Key masukkan password yang Anda kehendaki
  4. Dalam kolom Plain Text, Paste bagian artikel yang telah Anda Cut tadi
  5. Klik tombol Encrypt
  6. Hasil enkripsi dapat Anda lihat pada kolom Chiper Text, abaikan bagian ini.
  7. Beralih ke kolom HTML Code. Nah, isi dalam kolom HTML Code inilah yang Anda Copy-Paste ke dalam postingan menggantikan bagian artikel yang Anda Cut tadi.
Ingat! Terbitkan artikel pada modus HTML editor, bukan Compose.

Selamat belajar!
Read more »

2:13 AM , ,
Elemen-DIV Diam setelah discroll atau Menu Melayang
Banyak situs menerapkan menu sticky, termasuk 'Header' situs yang sedang Anda baca ini. Saya sendiri tidak menemukan padanan kata sticky ini dalam bahasa Indonesia. Saya menyamakan sticky ini dengan melengket atau melekat. Menu melengket diterapkan agar memudahkan pengunjung mengeksplor situs tanpa harus bolak-balik menggulung (scroll) laman. Menu akan tetap lengket meskipun laman digulung jauh ke bawah.
 
Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag </body>.
Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Bagaimana jika saya ingin menu itu muncul hanya setelah discroll? Jika tidak discroll menu tersebut tersembunyi.

Memunculkan/menampilkan Menu setelah discroll

Gunakan jQuery berikut untuk memunculkan/menampilkan menu hanya setelah halaman discroll.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .menu
    var stickyNavTop = $('.menu').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.menu').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

 
Selamat belajar :)
Read more »

2:08 AM , ,
Hover Buka Kotak Elemen ke Bawah
Hari ini saya belajar atau lebih tepatnya meniru elemen yang bila di :hover (hover = melewatkan penunjuk tetikus di atasnya) maka elemen akan membuka ke bawah. Saya tiru perilaku ini dari Bitdefender report. Saya senang melihatnya lalu saya mulai meniru :)

Belum jelas? Bayangkanlah tombol sosial media yang sering kita temukan di sebuah situs, biasanya di sisi kanan atau kiri halaman. Terlihat sebagian dan tersembunyi sebagian, saat di :hover barulah bagian yang tersembunyi itu menyembul keluar.

Saya coba menerapkan perilaku ini dalam postingan blogger.

Saya tunjukkan sebuah contoh agar lebih jelas apa yang saya maksudkan. Lihat demo di bawah ini.

Tidak Bernapas Ketika Minum
Diriwayatkan dari Abu Qatadah r.a. : Rasulullah SAW pernah bersabda, “kapan pun kalian minum air, tidak boleh bernapas di dalam tempat air minum itu. Dan kapan pun kalian pergi ke kamar mandi, tidak boleh menyentuh atau membasuh kelamin dengan tangan kanan”.


Membuat ini tidaklah terlalu sulit. Hanya dibutuhkan sepotong JavaScript (HTML juga CSS pastinya).

Mari kita periksa. Secara berturut-turut CSS, HTML, dan JavaScript, sebagai berikut.

.kotak_isi {
    border:1px solid #cccccc;
    border-radius:5px;
    width:418px;
    margin-top: 9px;
    left:50px;
    position:absolute;
    background:#efefef;
    z-index:999999;
    top:10px;
}
.hijau {
    border-radius:5px;
    background:#9bd344;
    height:40px;
    border:1px solid white;
    width:416px;
    overflow-y:hidden;
    transition:height 0.2s, transform 0.2s;
    -moz-transition: height 0.2s, -moz-transform 0.2s;
    -webkit-transition: height 0.2s, -webkit-transform 0.2s;
    -o-transition: height 0.2s, -o-transform 0.2s;
    //text-shadow: 1px 1px 0px #ccff99;
    filter: dropshadow(color=#ccff99, offx=1, offy=1);
}
.hijau:hover {
}
.hijau .icon {
    background:url(http://3.bp.blogspot.com/-UM-lcL58FFA/U2siZsj8eDI/AAAAAAAAFcI/5sL2RyVXnAY/s1600/stat_green.png) no-repeat;
    position:absolute;
    width:45px;
    height:45px;
    top:-1px;
    left:-20px;
}
.isi_penjelasan {
    color:black;
    font-size:12px;
    line-height:12px;
    padding-top:7px;
    display:block;
    padding-left:35px;
    padding-right: 10px;
    min-height:40px!important;
    margin-bottom:20px;
}
.lanjut {
    padding-top:15px;
}
ul.lanjut li {
    list-style:square;
    margin-left:15px;
    padding-bottom: 5px;
}

<!--drop hover jQuery-->
<div id='peringatan'>
    <div class="kotak_isi">
        <div class="warna hijau">
            <div class="icon"></div>
            <div class="isi_penjelasan">Get the most out of your product. Follow our recommendations to get maximum protection.
                <ul class="lanjut">
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                    <li>Keep your files always up-to-date in a secure online location to be able to retrieve it wherever you go. Go to Safebox and activate the Autosync.</li>
                </ul>
                <br />
            </div>
        </div>
    </div>
</div>

$(document).ready(function () {

    entah = $('#peringatan').find('.warna').height();

    $('#peringatan').find('.warna').mouseenter(function () {
        $(this).css('height', $(this).children('.isi_penjelasan').height())
    })
    $('#peringatan').find('.warna').mouseleave(function () {
        $(this).css('height', entah)
    })

});
Tentu, Anda sudah harus memasang jQuery agar fungsi ini berjalan.


Selamat belajar :)
Read more »
Subscribe to: Posts (Atom)

Contact Form

Name

Email *

Message *

Powered by Blogger.