Showing posts with label jquery. Show all posts
Showing posts with label jquery. Show all posts

Sunday, December 18, 2016

Cara Membuat Demo JSFiddle di Blog dengan JQuery

Cara Membuat Demo JSFiddle di Blog dengan JQuery


Cara Membuat Demo JSFiddle di Blog dengan JQuery - Kali ini saya akan menjawab request dari teman saya kemaren , yaitu tentang Cara Membuat Demo JSFiddle di Blog dengan JQuery di blog , sebetulnya banyak sekali tutorial yang dapat anda lakukan untuk membuat demo suatu blog

Cara Membuat Demo JSFiddle di Blog dengan JQuery


Pasti anda penasaran kayak apa demonya , Nih dia demo dari JSFiddle di Blog dengan JQuery di Blog
Nah gimana menggunakan Demo JSFiddle di Blog dengan JQuery ? Mudah sekali Untuk menerapkannya,
Langkah Pertama sobat harus memasang  CSS ini di atas ]]></b:skin> atau </style>

jsfiddle-demo {
display:block;
width:99%;
height:300px;
border:2px solid #bbb;
}

Langkah yang kedua yaitu pasang javasript ini di atas </body>


<script type=text/javascript>
//<![CDATA[
setTimeout(function() {
$(.jsfiddle-demo).each(function() {
$(this).replaceWith(<iframe class="jsfiddle-demo loader" src=" + $(this).data(src) + " allowfullscreen="allowfullscreen"></iframe>);
});
}, 5000);
//]]>
</script>

Namun Bagimana cara penggunaanya ? . Cara anda pemasanganya mudah yaitu
Simpan kode ini pada postingan Anda bagian HTML ( bukan Compose ):

<div class="jsfiddle-demo loader" data-src="URL Hostingan Demo Anda Disini"></div>

Mungkin hanya itu yang dapat saya jawab dari reques teman saya yang tidak mau disebutkan namanya tentang bagaimana Cara Membuat Demo JSFiddle di Blog dengan JQuery . bila anda mengalami kesulitan dalam Membuat Demo JSFiddle di Blog dengan JQuery silahkan berkomrmtar

Go to link Download

Read more »

Monday, November 28, 2016

Cara Membuat Sidemenu Menggunakan HTML CSS JQuery

Cara Membuat Sidemenu Menggunakan HTML CSS JQuery


Pernah melihat tampilan admin wordpress? Dimana posisi menu terletak pada bagian samping, bila di klik menu tersebut baru keluar.

Anda ingin mencobanya? Anda bisa membuatnya menggunakan bahasa scripting sederhana.

Apa saja yang diperlukan untuk membuat program tersebut.
  1. Modul JQuery (bisa dipanggil lewat CDN, bila komputer terhubung langsung dengan jaringan internet atau mendownload modul utamannya disini )
  2. Membuat sebuah file dengan akhiran extensi .html
  3. Membuat sebuah file dengan akhiran extensi .css
  4. Membuat sebuah file dengan akhiran extensi .js

Berikut proses pembuatannya

A. Membuat file HTML-nya

Ketikan script berikut untuk membuat struktur dasar bangunan fondasi file yang akan dibuat


Selanjutnya simpan file dengan nama misalnya index.html


B. Membuat file CSS-nya

Membuat file css bertujuan untuk mengatur tampilan agar rapih & menentukan posisi.

Berikut script css yang dibuat, sekarang saatnya merapihkan struktur utama tadi, agar tidak terlihat berantakan

Misalkan kita buat file namanya style.css


C. Membuat file Js-nya


Membuat File js dengan menggunakan modul dari JQuery bertujuan untuk mengaktikan fungsi tombol menu, sehingga saat tombol menu di klik maka menu akan keluar

Misalkan kita buat file namanya contoh_event_buka.js

Berikut script kodenya.



Langkah selanjutnya adalah memanggil ke dua file tersebut (style.css & contoh_event_buka.js) ke dalam file index.html Sekarang lihat hasilnya di browser internet



Semoga Bermanfaat :D



Go to link Download

Read more »