Tuesday, August 28, 2018

Cara Membuat Tulisan Dengan Huruf Putus-Putus

August 28, 2018 kakmufh No comments

Tentu teman-teman tidak asing dengan bentuk huruf diatas.
Ya…., tulisan diatas merupakan tulisan dengan huruf putus-putus atau titik-titik, tulisan ini sering digunakan sebagai materi untuk mengenal dan belajar menulis huruf oleh anak-anak pada Pendidikan Anak Usia Dini (PAUD).
Jika teman-teman tertarik untuk membuatnya, berikut kami berikan langkah-langkah cara membuatnya.

Oke langsung saja!

Berikut cara membuatnya :

1. Download font yang huruf putus-putus yang diinginkan ke komputer.
Berikut ini kami berikan beberapa font huruf putus-putus, teman-teman bisa pilih dan download font mana yang teman-teman sukai.

Trace Font	Neal Font
Jardotty	National First Font Dotted
DotNess	JD LCD Rounded

(Jika ada masalah dengan link downloadnya silahkan tulis komentar dibawah, agar dapat kami bantu secepatnya)

2. Setelah download selesai, silahkan di extract.
Caranya klik kanan pada file/font yang akan di ekstrak, kemudian pilih Ekstrak Here.
(misalnya saya pilih Trace Font dan Neal Font)

Setelah berhasil diekstrak, hasilnya seperti ini.

3. Berikutnya, Install Font tersebut.
Untuk Windows 10, Caranya :
Klik kanan, kemudian pilih instal.

Untuk Windows versi jadul, caranya.
– Masuk Ke Start–>Control Panel –> Fonts,
– Pilih Menu File –> Install New Font …
– Pilih Font yang sudah di download, dengan meng-klik Tombol Select All
– Klik Tombol OK

4. Selesai,

Sekarang waktunya kita coba font baru kita, dengan microsoft word.
Ketikkan tulisan "Saya Suka Roti"

.

Blok/Seleksi teks "Saya Suka Roti", kemudian ubah fontnya menjadi Trace

Berikut hasil ujicoba font tersebut.

Nah mudah kan teman-teman....

Tutorial Cara Membuat PopUp Window Di Postingan Blog

March 15, 2018 kakmufh No comments

Cara membuat PopUp Windows di Postingan Blog
PopUp sering kali digunakan untuk memberikan iklan atau Jendelan munculan yang berfungsi untuk menonjolkan suatu hal yang penting diberikan untuk pengunjung blog atau web.
kali saya ingin berikan Tutorial membuap PopUp Window Blog.

Berikut ini adalah Jenis PopUp Window :
PopUp Window : Automatis Muncul Ketika Blog di buka
PopUp Window : Muncul Ketika di klik
PopUp Window : Muncul Ketika Blog di di tutup ( Close )
PopUp Window : Muncul ketika Mouse Menyorot Link ( MouseOver )
Untuk mengatur Ukuran / Perhatikan :
Widht = Lebar
Height = Tinggi
https://www.google.com/search?q=Tutorial+Membuat+PopUp+Window+di+Postingan+Blog = Ganti dengan link sobat

PopUp Window : Automatis Muncul Ketika Blog di buka

 <script language="JavaScript">  

 // Place this script within <head> section.  

  var goPopX = (screen.width/2)-175;  

  var goPopY = (screen.height/2)-150;  

  var loc = "left="+goPopX+",top="+goPopY;  

  function goPop(){  

 goPopWindow = window.open("https://www.google.com/search?q=Tutorial+Membuat+PopUp+Window+di+Postingan+Blog","Cara Buat PopUp Window","toolbar=yes,width=350,height=300,"+loc);  

 }  

 </script> <!-- New replacement <body> tag --> <body onload="goPop()">

PopUp Window : Muncul Ketika di klik

 <script language="JavaScript">  

    // Place this script within <head> section.  

    var goPopX = (screen.width/2)-175;  

    var goPopY = (screen.height/2)-150;  

    var loc = "left="+goPopX+",top="+goPopY;  

    function goPop(){  

 goPopWindow = window.open("https://www.google.com/search?q=Tutorial+Membuat+PopUp+Window+di+Postingan+Blog","Muncul Setelah di Klik","toolbar=yes,width=350,height=300,"+loc);  

 }  

 </script> <!-- Place within <body> section --> <a href="javascript:goPop()">Click Here</a>

PopUp Window : Muncul Ketika Blog di Close

 <script language="JavaScript">  

    // Place this script within <head> section.  

    var goPopX = (screen.width/2)-175;  

    var goPopY = (screen.height/2)-150;  

    var loc = "left="+goPopX+",top="+goPopY;  

    function goPop(){  

 goPopWindow = window.open("https://www.google.com/search?q=Tutorial+Membuat+PopUp+Window+di+Postingan+Blog","Muncul Setelah Blog di Close","toolbar=yes,width=350,height=300,"+loc);  

 }  

 </script> <!-- New replacement     <body> tag --> <body onunload="goPop()">

PopUp Window : Muncul ketika Mouse Menyorot Link ( MouseOver )

 <script language="JavaScript">  

    // Place this script within <head> section.  

    var goPopX = (screen.width/2)-175;  

    var goPopY = (screen.height/2)-150;  

    var loc = "left="+goPopX+",top="+goPopY;  

    function goPop(){  

 goPopWindow = window.open("https://www.google.com/search?q=Tutorial+Membuat+PopUp+Window+di+Postingan+Blog","Muncul Ketika di Sorot oleh Mouse","toolbar=yes,width=350,height=300,"+loc);  

 }  

</script> <!-- Place within <body> section --> <a href="#" onmouseover="goPop()">MouseOver Here</a>

Terimakasih telah berkunjung ke blog ini, semoga bermanfaat buat sobat blogger
Nantikan lagi Update terbaru dari blog ini ..

CARA MEMBUAT LINK DALAM SATU HALAMAN BLOGGER

March 12, 2018 kakmufh No comments

Ada beberapa poin penting yang perlu diperhatikan untuk membuat link (jump link) atau daftar link pada sebuah blogspot. Sebuah link memerlukan target dan clickable link yang bisa kita gunakan menuju target link tersebut.

Secara teori, membuat link di dalam sebuah halaman hanyalah menghubungkan tag <a href> dengan kondisi tag yang ada. Ya, inilah yang dinamakan jump link. dengan adanya link ini memungkinkan untuk kita berpindah ke halaman lain maupun langsung lompat dalam satu halaman (dalam hal ini alamat url yang sama) dan langsung menuju section yang diinginkan.

Target link pada blogspot

Cara membuat link pada halaman blogspot dapat dilakukan dengan cara: Pilih bagian pada artikel ingin dijadikan sebagai target link, bisa berupa sebuah paragraf, sub judul atau apapun yang kita inginkan.
Ada baiknya target kita masukkan dalam section sub judul. Bisa tag H2, H3 maupun H4. Terserah. Tergantung struktur situs atau blog teman-teman. Jangan ke tag paragraf (p) ya, agar pembaca nanti akan pusing.

Ketika sudah menentukan target, kita berikan identitas dalam bentuk id="nama-link". Nah, properti "nama-link" inilah yang akan menjadi penghubung antara link dan target. Usahakan bikin yang pendek-pendek saja. Kalau bisa, tanpa spasi lebih enak karena biar tidak error.

Contoh Cara membuat link/Jump Link pada halaman Blogspot

Pertama-tama masuk ke dashboard blog terlebih dahulu, dan buat postingan baru dengan klik + New Post.

Kemudian masuk ke bagian HTML editor (bukan compose loh ya...)

Buat tag link tautan, dan Masukkan #nama-link yang diinginkan dalam kode HTML berikut

<a href="#nama-link">link yang bisa di klik</a>

kemudian siapkan target tujuannya, dan sisipkan dengan kode berikut

<div id="”nama-link

”"> 
    

         //nama-link digunakan sebagai target


         //konten apa aja yang kamu suka.

    </div>

Supaya tidak bingung, perhatikan gambar berikut ini ya...

Contoh Cara membuat link/Jump Link pada halaman Blogspot

Jika mau langsung ke bagian lain di halaman yang berbeda, ya tinggal tambahkan id dari properti yang akan kita tuju.
Contoh kodenya seperti di bawah ini.

 <a href="”alamat_halaman.html#nama-link”">link teks</a>

Jump link ini berguna sekali ketika kita membuat artikel panjang yang memiliki rincian penjelasan yang berbeda. Agar pembaca bisa dengan mudah mencari apa yang diinginkan, kita berikan saja jump link untuk mempercepat pencarian informasinya.

Selamat mencoba!

Cara Membuat Tombol Show dan Hide Pada Blogspot

March 11, 2018 kakmufh No comments

Kali ini akan membuat sebuah tombol untuk menampilkan dan menyembunyikan dalam postingan blog, yang biasanya digunakan untuk membuat daftar isi agar tidak memakan ruang dalam postingan blog. Tombol ini mirip pada website kaskus spoiler... yang dapat show dan hide.

Sobat dapat memasukan gambar, teks, link aktif dan daftar isi dalam postingan blog yang dapat di hide atau show sehingga postingan blog terlihat rapih. Jika sobat belum paham cara pemasangan nya baik kita bahas secara lebih detail.

Cara Membuat Tombol Show dan Hide Pada Blogspot

# Langkah 1: Cara Memasang Tombol Show & Hide

Pertama untuk memasang tombol seperti biasa harus masuk terlebih dahulu ke blogger.com kemudian sobat dapat masuk ke dalam dashboard. Kemudian buat halaman atau buat entri baru. Copy & Paste kode tombol Hide dan Show pada mode HTML untuk script dapat dilihat dibawah ini.

 <div><div style="margin: 5px;">  
 <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Spoiler ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>  
 </div>  
 <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">  
 <div style="display: none;">  
 === Isi Spoiler Disini ===  
 </div></div></div></div>

# Langkah 2: Hasil Penerapan Tombol Hide & Show

Hasil pemasangan tombol hide dan show dalam postingan dapat dilihat dibawah ini.

Spoiler ...

Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show

# Langkah 1: Masukan Script Tombol Hide dan Show

Pertama untuk Cara Membuat Daftar Isi Dalam Postingan Blogspot setelah membuat daftar isi kemudian buat tombol hide dan show seperti diatas.

 <div><div style="margin: 5px;">  
 <div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Daftar Isi ... </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>  
 </div>  
 <div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">  
 <div style="display: none;">  
 <ol>   
 <li><a href="#subjudul-1">Cara Membuat Tombol Show dan Hide Pada Blogspot</a></li>  
 <li><a href="#subjudul-2">Cara Memasang Tombol Show &amp; Hide</a></li>  
 <li><a href="#subjudul-3">Hasil Penerapan Tombol Hide &amp; Show</a></li>  
 </ol>  
 </div></div></div></div>

# Langkah 2: Hasil Penerapan Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show

Hasil cara membuat daftar isi hide & show pada blog dapat dilihat dibawah ini.

Daftar Isi ...

Begitulah Cara Membuat Tombol Show dan Hide Pada Blogspot semoga membantu dan bermanfaat bagi kalian. Wassalamualaikum.

Cara Membuat Text Box Area/Kotak Script Di Dalam Postingan Blog Terbaru

March 09, 2018 kakmufh No comments

Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut.

Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Jika teman-teman tertarik untuk membuat text box area atau kotak script yang keren pada artikel postingan di blogspot, teman-teman bisa mencoba Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru berikut ini.

Cara Membuat Kotak Script Di Postingan :
1. Pertama-tama masuk ke dashboard blog terlebih dahulu, dan buat postingan baru dengan klik + New Post untuk membuat artikel baru yang akan ditambahkan kotak script.

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

2. Masuk ke mode HTML view dengan cara klik tanda pencil yang terletak dipojok kiri atas.

3. kemudian pilih HTML view

jika sudah benar, nanti tampilannya akan berubah menjadai seperti ini

4. Setelah itu masukkan kode berikut (masih dalam mode HTML ya) :

 <div style="background-color: white; border: 3px solid rgb(238, 238, 238); padding: 10px; text-align: left;">

Masukkan Kode Script Kalian Disini.

</div>

#Ganti tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak.

Teman-teman bisa melihat hasilnya dengan klik Mode Compose view.
Jika sudah sesuai dengan yang diinginkan klik tombol Publish.

5. Berikut adalah hasil tampilan kotak script biasa tanpa scroll yang telah teman-teman buat..

Masukkan Kode Script Kalian Disini.

6. Jika sobat ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna biru seperti dibawah ini

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;

">

Masukkan Kode Script Kalian Disini.

</div>

#Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya

Setelah dipublish nanti hasilnya kan terlahat seperti berikut ini.

Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba

Sebagai tambahan, Berikut ini ada beberapa pilihan text box / kotak script berbagai macam bentuk dan warna yang bisa teman-teman gunakan agar tampilan blog teman-teman terlihat lebih keren :

<div style="background-color: white; border: 3px double rgb(23, 128, 221); padding: 10px; text-align: left;"> Kode Script Sobat Disini

</div>

 <div style="background-color: #eaeaea; border: 1px solid rgb(68, 68, 68); padding: 10px; text-align: left;">

Kode Script Sobat Disini

</div>

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid rgb(34, 136, 221); border-radius: 10px; padding: 10px; t-align: left;">

Kode Script Sobat Disini

</div>

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed rgb(170, 170, 170); padding: 10px; t-align: left;">

Kode Script Sobat Disini

</div>

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid rgb(153, 153, 153); padding: 10px; t-align: left;">

Kode Script Sobat Disini

</div>  
 <br /><br />

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double rgb(255, 255, 255); padding: 10px; t-align: left;">

Kode Script Sobat Disini

</div>

<div style="background-color: #57aa52; border: 2px dashed rgb(97, 11, 56); padding: 10px; t-align: left;"> Kode Script Sobat Disini

</div>

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset rgb(255, 255, 255); padding: 10px; t-align: left;">

Kode Script Sobat Disini

</div>

<div style="background-color: #82cafa; border: 3px double rgb(95, 32, 14); padding: 10px; text-align: left;"> Kode Script Sobat Disini

</div>

<div style="background-color: #d5839f; border: 2px inset rgb(0, 100, 0); padding: 10px; text-align: left;"> Kode Script Sobat Disini

</div>

<div style="background-color: #c2c2c2; border: 2px dotted rgb(27, 26, 118); padding: 10px; text-align: left;"> Kode Script Sobat Disini

</div>

#Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow seperti pada langkah no 6 di atas.

Nah itulah bagaimana cara membuat kotak script di dalam postingan blog dengan mudah dan cepat.

Silahkan dicoba

Cara menulis kode HTML JavaScript pada posting blog

March 09, 2018 kakmufh No comments

Terkadang pada postingan blog kita ingin menuliskan kode html seperti <b:if> maupun <div>, namun Cara menulis kode HTML JavaScript pada posting blog tentunya sangat susah bagi blogger pemula. Jika ingin menampilkan postingan kode html sesuai dengan apa yang kita tulis, maka perlu adanya cara kusus, karena dengan hanya menuliskan kodenya sebelum di encode maka kode HTML maupun Java Script yang kita paste tersebut akan hilang.

Dengan fasilitas Encode ini menulis kode HTML Java Script di postingan dapat dengan mudah dikerjakan dan kemungkinan besar akan berhasil karena aku sudah mencobanya berkali-kali dan berhasil dan dengan adanya fasilitas ini kita dapat dengan mudah memposting tutorial blogging, terutama bagi Anda yang gemar membuat postingan tutorial yang berhubungan dengan kode HTML maupun Java Script yang harus kita tulis pada posting blog atau website.

Berikut adalah cara menulis kode HTML JavaScript pada postingan blog blogger maupun worpress.

Buka terlebih dahulu blog Codeformatter.
Pastekan kode/script kalian ke kolom Paste Here Your Source Code.
ubah pengaturan Source Code Formatting Options sesuai yang kalian inginkan.
Klik Format Source Code.
Copikan hasil kode yang baru dari kolom Copy Formatted Source Code ke postingan blog kalian. Jangan lupa, kopikan ke mode penulisan HTML, jangan ke mode penulisan Compose.

Untuk lebih jelasnya lihat gambar dibawah ini :

Hasilnya akan terlihat seperti ini:

 <div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

Semoga tutorial ini bermamfaat bagi Anda semua terutama bagi anda yang gemar membuat postingan tutorial dengan HTML / Java Script. Selamat mencoba semoga berhasil.

arsip TK

Categories

This is default featured post 1 title

This is default featured post 2 title

This is default featured post 3 title

This is default featured post 4 title

This is default featured post 5 title

Tuesday, August 28, 2018

Cara Membuat Tulisan Dengan Huruf Putus-Putus

Thursday, March 15, 2018

Tutorial Cara Membuat PopUp Window Di Postingan Blog

PopUp Window : Automatis Muncul Ketika Blog di buka

PopUp Window : Muncul Ketika di klik

PopUp Window : Muncul Ketika Blog di Close

PopUp Window : Muncul ketika Mouse Menyorot Link ( MouseOver )

Monday, March 12, 2018

CARA MEMBUAT LINK DALAM SATU HALAMAN BLOGGER

Target link pada blogspot

Contoh Cara membuat link/Jump Link pada halaman Blogspot

Sunday, March 11, 2018

Cara Membuat Tombol Show dan Hide Pada Blogspot

Cara Membuat Tombol Show dan Hide Pada Blogspot

# Langkah 1: Cara Memasang Tombol Show & Hide

# Langkah 2: Hasil Penerapan Tombol Hide & Show

Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show

# Langkah 1: Masukan Script Tombol Hide dan Show

# Langkah 2: Hasil Penerapan Cara Membuat Daftar Isi Menggunakan Tombol Hide dan Show

Friday, March 9, 2018

Cara Membuat Text Box Area/Kotak Script Di Dalam Postingan Blog Terbaru

Cara menulis kode HTML JavaScript pada posting blog

Share

Labels

Blog Archive