Blognya Mastony

menyembunyikan widget / tulisan jQuery fadeIn() fadeOut()

Bagaimanakah cara menuliskan / membuat tulisan , gambar , widget tersembunyi dan terlihat menggunakan script jQuery fadeIn() fadeOut() . . .?

jumpa lagi dengan mastony yang sudah lama gak update dikarenakan sibuk di ofline ,, bailkah pada kesempatan kita kali ini kita akan bahas cara menyembunyikan widget / gambar , tulisan sekalipun yaitu menggunakan script jquery fadeIn() fadeOut() .
oy , pada artikel mastony sebelumnya sudah membahas cara menyembunyikan widget / tulisan / gambar juga namun menggunakan javascript silahkan anda baca disini jika sudah baca mari kita lanjut
contoh :

$("SELECTOR / #").click(function(){$("P").fadeOut();});

adapun beberapa value untuk fadeOut() maupun fadeIn() untuk mengontrol kecepatan element tersebut menghilang atau menampakkan selengkapnya silahkan lihat pada tabel dibawah :

value	description
("slow")	perubahan element akan lambat
("fast")	perubahan element akan cepat
(2000)	sesuaikan perubahan menggunakan milisecond

baiklah kita akan membuat sebuah 3 element div dengan ID div1 , div2 dan div3 ..

fadeOut()

fadeOut("slow")

fadeOut(2000)

nah hasil diatas seperti berikut ini penulisannya ..

<button>HIDE ELEMENT DIV</button>
<div id="div1" style="width:100px;height:100px;background:red;color:white;font-weight:bold;text-align:center;">fadeOut()</div> <div id="div2" style="width:100px;height:100px;background:blue;color:white;font-weight:bold;text-align:center;">fadeOut("slow")</div> <div id="div3" style="width:100px;height:100px;background:green;color:white;font-weight:bold;text-align:center;">fadeOut(2000)</div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(2000); });});

CATATAN : jQuery instal

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

untuk penginstalan script jquery anda bisa meletakkan di widget element blog di pakai langsung juga bisa .
untuk penulisan script jquery

$(document).ready(function(){$("SELECTOR").click(function(){$("SELECTOR") .. ubah disini .. });});

contoh berikutnya seperti berikut :
SHOW HIDE

PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN

atas seperti berikut ini penulisan jquery script nya ..

<span id="show">SHOW </span> <span id="hide">HIDE</span>
<p style="color: green; font-family: courier;">
PILIH / HOVER TULISAN HIDE / SHOW DI ATAS MAKA TULISAN INI AKAN MENGHILANG / MENAMPAKKAN</p>
<script>
$(document).ready(function(){$("#show").hover(function(){$("p").fadeIn();}); $("#hide").hover(function(){$("p").fadeOut();});});
</script>

dan mungkin saya rasa cukup sekian mengenai pembahasan cara menyembunyikan widget / tulisan menggunakan script jQuery semoga bermanfaat untuk sobat ..

Continue Reading ..

Mengatur Jarak Element ( CSS margin , padding )

Bagaimanakah cara Mengatur Jarak Element div , img , p dan lain sebagainya . . ( CSS margin , padding )

Apa Itu Margin ?, dan Apa Itu Padding ,,
margin adalah sebuah property dari css yang berfungsi untuk mengatur jarak Element dengan Element lain Sedangkan Padding property yang berfungsi untuk mengatur jarak content / isi dengan Element itu sendiri atau bisa kita samakan dengan ketebalan Element . Sedikit penjelasan mengenai CSS margin , padding di atas .
baiklah , Tutorial kita kali ini yaitu cara mengatur jarak Element baik itu div , img , p dan lain sebagainya .oy , bagi sobat yang belum baca Artikel sebelumnya silahkan baca disini yaitu Tips Mengatur Letak Element CSS FLOAT , CLEAR atau baca saja nanti setelah menyimak cara mengatur jarak Element .
Adapun beberapa property dan value untuk CSS margin , padding ini . selengkapnya silahkan lihat pada tabel di bawah ini :

PROPERTY	DESCRIPTION
margin	menyesuaikan jarak element dengan element lain
margin-top	menyesuaikan jarak element hanya pada bagian atas element
margin-right	menyesuaikan jarak element hanya pada bagian kanan element
margin-bottom	menyesuaikan jarak element hanya pada bagian bawah element
margin-left	menyesuaikan jarak element hanya pada bagian kiri element
padding	menyesuaikan jarak element dengan isi element
padding-top	menyesuaikan jarak element dengan isi element hanya pada bagian atas content
padding-right	menyesuaikan jarak element dengan isi element hanya pada bagian kanan content
padding-bottom	menyesuaikan jarak element dengan isi element hanya pada bagian bawah content
padding-left	menyesuaikan jarak element dengan isi element hanya pada bagian kiri content

VALUE	KETERANGAN
px	menyesuaikan jarak Element menggunakan pixels
em	menyesuaikan jarak Element menggunakan em
pt	menyesuaikan jarak Element menggunakan pt
cm	menyesuaikan jarak Element menggunakan centi meter

dibawah ini adalah gambar border , content , margin , padding :
GAMBAR

Contoh 1 :

#img {margin:8px 0 8px;}

CSS di atas menyebutkan bahwa jarak element bagian atas dan bawah 8px , sedangkan pada bagian kiri dan kana adalah 0 .
contoh 2 :

#img {margin:8px 8px;}code CSS di atas sama dengan code #img {margin:8px;}
contoh 3: #img {margin:4px 8px 16px 32px;}
code CSS di atas menyebutkan bahwa jarak atas 4px , kanan 8px , bawah 16px , kiri 32px .
Aturan css seperti di atas sama dengan aturan css padding .
click button di bawah ini untuk mengetahui posisi margin dan padding beserta code css nya ,, 

POSISI MARGIN 
 




Source Code



#box img {width:60px;height:60px;padding:0;margin:0;}

POSISI PADDING 
 



contoh di atas hanya beberapa code css saja untuk keseluruhan akan seperty berikut ini :

<style>
#BOX {width:200px;height:200px;margin-top:20px;padding:0;border:1px solid black;position:relative;clear:both;}
#BOX img{width:80px;height:80px;padding:0;margin:0;}
</style>
<div id="BOX">
<img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/>
<img src="https://sites.google.com/site/blognyamastony/background/Chat-bdr-putih.png"/>
</div>
untuk CSS positioning silahkan baca disini yaitu cara mengatur posisi Element (CSS POSITION PROPERTY ) .
dan mungkin saya rasa cukup disini pembahasan mengenai CSS margin padding di cara mengatur jarak Element . . 
Dan semoga Artikelnya bermanfaat untuk sobat ,,,,

Continue Reading ..

Tips mengatur letak Element blog ( CSS Float,Clear )

Bagaimanakah Cara Mengatur Letak Element div , img , p dan lainnya pada Blog ,, ( CSS FLOAT , CLEAR PROPERTY )

Sebetulnya saya masih perlu belajar banyak mengenai CSS ini , Tpi rasanya sangat pusing Alias mumet dengan RATUSAN bahkan RIBUAN Property dan Value pada css ini .Oke!! Topik kita kali ini yaitu Cara menempatkan / mengatur letak suatu Element div , img , p di blog Anda menggunakan property clear dan float . oy,pada artikel sebelumnya mastony sudah membahas mengenai cara mengatur posisi Element ( CSS POSITION PROPERTY ) Silahkan Baca disini Dan untuk property Value selengkapnya silahkan anda lihat pada tabel di bawah ini :

PROPERTY	VALUE	KETERANGAN
float	left	Element akan menempel ke kiri element induk dan Element lainnya berada disebelah kanannya .
	right	Element akan menempel ke kanan element induk dan Element lainnya berada disebelah kirinya
	none	Element akan tidak menempel ke kiri ataupun ke kanan element akan menempel ke atas element induk element lainnya berada di bawahnya
	inherit	Element akan mengikuti aturan css sebelumnya
clear	left	Element Akan Menempel ke kiri Element induk dan Element lain akan selalu berada dibawahnya
	right	Element Akan Menempel ke kanan Element induk dan Element lain akan selalu berada dibawahnya
	both	Element Akan Menempel ke Atas Element induk dan Element lain akan selalu berada dibawahnya
	inherit	Element akan mengikuti aturan css sebelumnya

klick button dibawah ini untuk melihat letak gambar mengikuti aturan CSS float , beserta kode penulisannya ,,

Source Code

#FloatLeft img{width:60px;height:60px;display:block;margin:5px;float:left;}

Float Property

KETERANGAN : code di atas hanya beberapa kode css saja , sedangkan untuk penerapan keseluruhan seperti code dibawah ini:

<style>#FLOAT {margin:5px;padding:0;width:500px;height:400px;border:1px solid black;} #FLOAT img{width:60px;height:60px;display:block;margin:5px;float:left;padding:0;} </style> <div id="FLOAT"> <img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" /> <img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" /> <img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" /> <img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" /> <img src="https://sites.google.com/site/blognyamastony/iconblog/twitter.png" /> </div>

dan saya rasa cukup sekian Tutorial mengenai CSS float , untuk property CLEAR silahkan anda mencobanya sendiri .. dan semoga artikelnya bermanfaat ...

Continue Reading ..

Tips Membuat Popup Window ( javascript )

Tips membuat popup window yaitu menggunakan text javascript ..

sebetulnya saya masih belajar mengenai text javascript ini , namun disini saya akan membagikan tips yaitu cara membuat popup window ketika user menekan navigasi terpilih . yang mastony maksud yaitu menambahkan text javascript kedalam navigasi tersebut .
adapun beberapa dari text javascript yang dapat kita buat popup window misalnya :

javascript Alert .
javascript Prompt Dialog .
javascript Confirm Dialog .
javascript window open Method .

contoh kita akan buat popup window (window open method ) yang linknya mengarah ke http://id-mastony.blogspot.com
seperti berikut ini :

click button diatas untuk membuka popup window ..
nah hasil code diatas seperti berikut ini :

<script>var mywin; function popup_window(){mywin=window.open("http://id-mastony.blogspot.com/","_blank","toolbar=yes,location=yes,menubar=yes,copyhistory=yes,directories=no,status=no,resizable=no,width=500,height=400");
mywin.moveTo(100,100);}</script>
<form>
<input onclick="popup_window()" type="button" value="Open Popup Window1">
</form>

KETERANGAN : menubar=yes , toolbar=yes adalah menu dan toolbar pada browser anda masing - masing history=yes adalah riwayat browser untuk merubah lebar anda rubah pada bagian width=500px dan tinggi height=400px sedangkan untuk merubah posisi window silahkan rubah pada bagian mywin.moveTo(100px,100px) .
contoh 2 seperti berikut ini :

click button diatas untuk membuka popup window ..
Hasil code diatas seperti berikut :

<script>
var mywind; function popup_window2(){mywind=window.open("http://id-mastony.blogspot.com/","_blank","toolbar=no,location=no,menubar=no,copyhistory=no,directories=no,status=no,resizable=no,width=500,height=400"); mywind.moveTo(200,300);}
</script>
<form>
<input onclick="popup_window2()" type="button" value="Open Poup Window2">
</form>

contoh window / jendela kosong dan di isi hanya dengan text / tulisan seperti berikut ini :

<button onclick="open_new()">open new window</button>
<script>function open_new(){var newW=window.open("","","width=400,height=400"); newW.document.write("this is my window ");}</script>

nah gimana ,, saya rasa cukup disini pembahasan mengenai Cara membuat popup window menggunakan text javascript . semoga artikelnya bermanfaat ,,

Continue Reading ..

SELAMAT DATANG !
BLOGNYA MASTONY INI ADALAH WEB TUTORIAL SEPERTI CSS , HTML , JAVASCRIPT , DAN BERBAGI TIPS - TIPS MENARIK LAINNYA .

Belajar CSS
CSS adalah singkatan dari Cascading Style Sheet
css berupa text yang berfungsi mengontrol / menampilkan Element - Element di blog Anda seperti letak , bentuk , warna ( background ) dengan sedemikian rupa yang dapat kita atur sesuai dengan selera kita .
CSS berupa kumpulan - kumpulan kode biasanya terdiri dari Selector , ID ( # ) , class ( . ) , property , function , Value .

Belajar HTML
sedangkan HTML Hyper Text Markup Language
Adalah text yang di gunakan WEB , juga untuk mengextrak dari pada file CSS atau JAVASCRIPT .
HTML tag berupa berupa text - text tertentu untuk yang di susun di halaman web . HTML tag berupa text yang di buka dengan tanda sudut kurung <> dan di tutup dengan sudut kurung juga namun di beri tanda garis miring sebelum element </> .. contoh : <p> disini text P </p>