Tips Pemandu Anak di Search Engine

 Mesin pencari atau search engine menjadi situs yang banyak dipakai anak-anak untuk menjawab keingintahuan mereka.  Tapi kadang search engine menghadirkan informasi yang sebenarnya belum layak diakses anak-anak. Sebenarnya ada search engine khusus anak-anak yang bisa direkomendasikan orangtua.

Bagaimana caranya agar anak-anak bisa aman saat berselancar di dunia maya, terutama ketika menggunakan search engine? Ini dua tips sederhana.

Kenalkan ke Situs Pencari Terkenal

Search engine alias situs pencari terkenal memiliki layanan pencari khusus untuk anak-anak. Sebut saja Yahooligans, Ask for Kids, MSN for Kids atau KidsClick. Mulai biasakan anak-anak mengakses situs-situs itu, sehingga mereka terbiasa dan senang menggunakannya, ketimbang search engine umum yang banyak dipakai orang dewasa. Yakinkan pada mereka situs pencari khusus anak-anak memang sesuai untuk mereka, dan aman dari ancaman predator dunia maya.

Gunakan filter search engine

Manfaatkan fitur penyaring atau filter yang di search engine umum, yaitu SafeSearch pada Google dan Yahoo. Layanan ini bisa memblokir sejumlah situs berbahaya yang tidak sesuai dengan usia anak.

Namun, yang paling efektif dari semua langkah di atas adalah peran orangtua dalam memberi pemahaman ke anak tentang bagaimana berinternet yang sehat. Intinya, orangtua harus tetap mengawasi mereka tanpa harus menjadi “polisi”. 

Biasakan berinternet bersama agar anak tidak merasa bahwa internet adalah sesuatu yang mengerikan, tapi juga bukan sesuatu yang membuat mereka bebas melakukan apa saja.

Read More

MEMBUAT TOMBOL MENU ANIMASI DENGAN JQUERY

Berikut ini gue bakal ngasi sedikit ilmu yang ane ketahui, yaitu membuat menu animasi dengan jquery
#1 Membuat menu dengan HTML

Buat menu yang akan di animasikan

<ul id="topnav">

                <li><a href=”#”>Home</a></li>

                <li><a href=”#”>Profile</a></li>

                <li><a href=”#”>Portofolio</a></li>

                <li><a href=”#”>Guestbook</a></li>

                <li><a href=”#”>Contact</a></li>

</ul>

 

#2. Membuat style dengan CSS

Kemudian masukan style di bawah ini sebagai style untuk menu di css anda.

#3. Animasi JQUERY

Kemudian masukan file jquery.js, download di sini

<script type="text/javascript" src="jquery.js"></script>

 

#4. Kemudian tulis script di bawah ini di tag head

<script type="text/javascript">

$(document).ready(function() {               

                $("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

               

                $("#topnav li").each(function() { //For each list item...

                                var linkText = $(this).find("a").html(); //Find the text inside of the a tag

                                $(this).find("span").show().html(linkText); //Add the text in the span tag

                });

               

                $("#topnav li").hover(function() {            //On hover...

                                $(this).find("span").stop().animate({

                                                marginTop: "-40" //Find the span tag and move it up 40 pixels

                                }, 250);

                } , function() { //On hover out...

                                $(this).find("span").stop().animate({

                                                marginTop: "0" //Move the span back to its original state (0px)

                                }, 250);

                });

               

});

</script>

<style type="text/css">

html {    background: #1d1d1d; }

body {

                margin: 0; padding: 0;

                font: 10px normal Verdana, Arial, Helvetica, sans-serif;

                background: #1d1d1d;

}

h1 {

                font: 4.7em normal Georgia, 'Times New Roman', Times, serif;

                color: #fff;

                margin: 0;

                text-align: center;

                padding: 5px 0;

}

h1 small{

                font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;

                text-transform:uppercase;

                letter-spacing: 1.4em;

                display: block;

                color: #ccc;

}

.container {

                width: 520px;

                height: 330px;

                position: absolute;

                top: 50%; left: 50%;

                margin: -165px 0 0 -210px;

                overflow: hidden;

}

img {border: none;}

ul#topnav {

                margin: 10px 0 20px;

                padding: 0;

                list-style: none;

                font-size: 1.1em;

                clear: both;

                float: left;

                width: 1000px;

}

ul#topnav li{

                margin: 0;

                padding: 0;

                overflow: hidden;

                float: left;

                height:40px;

}

 

ul#topnav a, ul#topnav span {

                padding: 10px 20px;

                float: left;

                text-decoration: none;

                color: #fff;

                text-transform: uppercase;

                clear: both;

                height: 20px;

                line-height: 20px;

                background: #1d1d1d;

}

ul#topnav a {     color: #7bc441; }

ul#topnav span {

                display: none;

}

ul#topnav.v2 span{

                background: url(a_bg.gif) repeat-x left top;

}

ul#topnav.v2 a{

                color: #555;

                background: url(a_bg.gif) repeat-x left bottom;

}

</style>

 Mudah kan ???

DEMO

DOWNLOAD SCRIPT

Read More