Blognya Mastony

Home » All posts

Mengatur posisi element ( CSS position property )

Bagaimanakah cara mengatur letak / posisi element blog , Apa itu property Position pada CSS .. ?

sebetulnya saya juga masih perlu belajar banyak mengenai CSS ini .namun tidak ada salahnya bila mastony memberikan sedikit penjelasan / Tutorial sederhana mengenai Cara mengatur letak / posisi element Div , img , p , dan lainnya dengan property position pada Css .
Atau silahkan baca mengenai Cara mengatur Letak Element yaitu CSS FLOAT , CLEAR PROPERTY
balik lagi pada posisi Element , untuk selengkapnya mengenai value dari property position ini silahkan lihat tabel dibawah :

POSITION	KETERANGAN
Static	posisi normal (default).
Relative	posisi elemen tergantung dari elemen yang lain.
Absolute	posisi elemen berpatokan pada jendela browser.
Fixed	posisi elemen tetap walaupun digeser.

contoh Div dengan position Relative dan Fixed sebagai berikut ini :

POSISI RELATIVE

Sorce Code

div {position:relative;top:200px;left:200px;display:block;}

klik button di atas untuk melihat perubahan posisi dan code css tersebut ,,div
KETERANGAN : LEFT :200px adalah posisi element di geser dari kiri ke kanan , sedangkan TOP 200px posisi element digeser dari atas kebawah . anda juga dapat menambahkan margin ( jarak element dengan element lainnya ) atau padding ( jarak content dengan element ) .

Pilih dan tekan navigasi dibawah untuk melihat posisi element dan juga kode css nya .
Contoh posisi Fixed , relative , absolute

Posisi Relative | Posisi Absolute | Posisi Fixed

Source Code
div{margin:0;padding:0;position:relative;left:0;top:0;display:block;}

nah gimana ,, saya rasa cukup disini penjelasan mengenai cara Mengatur letak / posisi element ( CSS position property ) ini selesai dan semoga artikelnya bermanfaat untuk sobat ...

Continue Reading ..

pasang musik player ( AUDIO TAG )

bagaimanakah cara pasang musik player di blog menggunakan HTML TAG AUDIO .. ?

seperti yang kita ketahui bahwa musik / audio player sudah banyak terpasang di blog atau website milik sahabat .
khususnya pada blog - blog yang menyediakan lagu - lagu mp3 untuk di download . Fungsi dari Musik / Audio player ini yaitu memberikan preview pada file mp3 yang ada di blog website anda . selain itu pengunjung blog / user akan menjadi mudah dan betah dengan adanya musik player tersebut .Nah , hal ini sangat di butuhkan user .. dimana user akan memilih / memutuskan untuk mendownload dari beberapa file mp3 tersebut.
oy , pada artikel mastony sebelumnya yaitu cara pasang lagu di blog silahkan baca disini .
jika sudah kita kembali ke topik utama yaitu cara pasang musik player menggunakan HTML TAG AUDIO ..
contoh dibawah :

ARTIS	keterangan
Another Day - Dream Theater.mp3	ukuran file 11337kb DOWNLOAD NOW

nah hasil musik player di atas seperti berikut ini penulisan HTML TAG

<audio controls><source src="https://sites.google.com/site/blognyamastony/mp3-download/Another%20Day%20-%20Dream%20Theater.mp3" type="audio/mpeg"></audio>

KETERANGAN : SOURCE SRC = lokasi file disimpan . untuk lebih lanjut anda bisa baca disini mengenai penyimpanan file gambar,mp3,mp4,3gp di GOOGLE SITE . atau jika belum baca cara membuat link DOWNLOAD silahkan anda baca disini mengenai cara membuat link download di blog .
saya rasa di pembahasan musik player atau HTML AUDIO TAG ini cukup singkat dan semoga artikelnya bermanfaat ..

Continue Reading ..

Membuat 2 halaman terbuka dengan sekali klik

Bagaimanakah cara membuat window / halaman terbuka hanya dengan satu kali klik menggunakan javascript , , ?

baiklah pada jumpa kita kali ini kita akan membahas cara membuat 2 link / halaman terbuka dengan satu kali klik yaitu menggunakan script javascript . atau anda juga dapat merubah linknya terbuka ketika di hover ( mouse over ) . namun kelemahannya yaitu akan muncul peringatan pada browser di bagian atas kanan . cara ini menggunakan javascript di dalam link tersebut . contoh : kita membuat 2 laman sekaligus dengan satu kali klik seperti di bawah ini .
Cara membuat Navigasi Back Forward

klik tautan / link di atas maka akan membuka 2 halaman sekaligus.
nah maka hasil penulisan javascript dan HTML nya seperti berikut ini :

<a href="http://id-mastony.blogspot.com/2013/04/cara-membuat-navigasi-back-forward.html" onclick="newWindow()">Cara membuat Navigasi Back Forward </a>
<script>function newWindow(){window.open("http://id-mastony.blogspot.com/2013/04/tips-membuat-show-hide-pada-widget-text.html");}</script>

Cara lainnya yaitu menaruh 2 link di dalam javascript sekaligus seperti berikut ini :

nah hasil di atas seperti berikut ini :

<script>function openFb_Tw(){window.open("http://www.facebook.com/"); window.open("http://www.twitter.com/");}</script>
<form><input type="button" value="OPEN FB + TWITTER" onclick="openFb_Tw()">
</form>

onclick=javascript

Lalu bagaimanah cara membuat link terbuka ketika di hover ( mouse over ) . .?

yups ,, anda juga dapat merubah bagaimana link itu dapat terbuka menggunakan click atau di hover .
namun akan muncul peringatan dan itu tergantung pengaturan browser anda masing - masing .

contoh link terbuka ketika di kunjungi pointer mouse seperti berikut ini :

Cara membuat Navigasi Back Forward

mouse over tautan / link di atas maka akan membuka halaman baru
hasil daripada di atas seperti berikut ini penulisan javascript beserta HTML nya .

<a href="javascript"
onmouseover="newWindow()"> Tips Membuat Show Hide pada Widget / Text </a>
<script>function newWindow(){window.open("http://id-mastony.blogspot.com/2013/04/tips-membuat-show-hide-pada-widget-text.html");}</script>

onmouseover=javascript

nah gimana topik kita mengenai membuat 2 halaman terbuka dengan satu kali klik menggunakan javascript keren gk ? , ,
semoga artikelnya berguna . .

Continue Reading ..

Cara membuat Navigasi Back Forward

bagaimanakah cara buat / menuliskan script javascript untuk navigasi back dan forward di blog . . ?

Navigasi Back dan forward adalah bagian dari suatu komponen blog yang berfungsi untuk mempermudah visitor / pengunjung dapat berbalik , kembali ke halaman sebelumnya ( back ). atau sebaliknya visitor / pengunjung dapat balik lagi ke halaman yang sudah di kunjungi sebelumnya (forward ) .
Sebetulnya Navigasi Back Forward ini sama fungsinya dengan navigasi browser milik mozilla , chrome , opera dan lainnya . Dan saya rasa cara membuat/ menuliskan script javascriptnya pun cukup mudah untuk navigasi back forward ini .
oya, Artikel mastony sebelumnya yaitu Cara membuat show hide pada widget , text , gambar blog , silahkan baca disini mengenai Tips membuat show hide pada widget jika sudah baca mari kita lanjutin pembahasan mengenai Cara membuat Navigasi Back Forward .
Berikut ini CONTOH navigasi Back() .

dan hasil button di atas sperti berikut ini scriptnya :

<style>
function goBack(){window.history.back();}</style>

HTML Input :

<input onclick="goBack()" type="button" value="Back"/>

onclick=javascript

sedangkan untuk menuliskan / membuat navigasi forward anda cukup menambahkan script javascript dibawahnya
berikut ini contoh scriptnya :

function goForward(){window.history.forward();}

Hasil untuk Forward :

upss,, ndak ada efek! , klik back dulu baru forward . untuk preview anda hover pada menu plus di pojok kanan bawah blog ini nanti akan muncul navigasi back forward nya .
oke, maka hasil dari keseluruhan script nya seperti di bawah ini dan di latakkan di template tepatnya sebelum kode </head> atau di pake langsung juga bisa .

<style>
function goBack(){window.history.back();}
function goForward(){window.history.forward();}
</style>

menggunakan nomor atau URL ..

contoh :

hasil diatas seperti berikut ini penulisan javascript dan html

<script>function backUrl(){window.history.go(-2);}
</script>
<button type="button" onclick="backUrl()">BACK 2</button>

Lalu bagaimana cara yang menggunakan Link atau gambar . . ?

yups, anda juga bisa menempatkan script tersebut pada sebuah file gambar atau link di blog anda .
penerapan javascript menggunakan link
Contoh yang menggunakan Link

Back

Forward

Penerapan Link dan Gambar

<a href="javascript:goBack()" title="Back"> <img src="http://lokasigambarBack.jpg"/></a> <a href="javascript:goForward()" title="Forward"> <img src="http://lokasigambarForward.jpg"/></a>

dan saya rasa cukup disini pembahasan mengenai Cara membuat Navigasi Back Forward di blog dan semoga artikelnya bermanfaat untuk Anda .

Continue Reading ..