Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran

Halo sobat blogger!, pada artikel kali ini Saya mencoba membuatkan tutorial bagaimana membuat gambar pada postingan blog berubah menjadi bulat atau lingkaran ketika kursor diarahkan ke gambar. Langsung saja harap disimak tutorial dibawah ini.

• Pertama-tama tentu kita sudah login terlebih dahulu di blogger.com kemudian buka blog sobat sekalian.
• Kemudian buka tab Template di menu bar sebelah kiri blogger, lalu klik Edit HTML.
• kemudian Search/Cari kode .post-body img  atau .post img menggukanakan tombol CTRL+F.
• Jika sudah ditemukan kode .post-body img  atau .post img selanjutnya letakkan kode dibawah ini dibawah kode .post-body img {...} atau .post img {...} disesuaikan saja.

Script/Kode

.post-body img:hover {

border-radius:1000px;
transition:all 0.3s ease;
}<!--Gunakan ini jika yang ditemukan kode .post-body img-->

.post img:hover {

border-radius:1000px;

transition:all 0.3s ease;

}<!--Gunakan ini jika yang ditemukan kode .post img-->

Penjelasan

• Ukuran border radius bisa disesuaikan dengan keinginan kita, tapi dengan catatan agar bisa membuat gambar menjadi lingkaran penuh ukuran border radius harus setengah atau lebih besar dari lebar (width) dan tinggi (height) dari gambar.
• Gambar yang bisa dibentuk menjadi lingkaran penuh hanya gambar dengan lebar dan tinggi yang sama, jika tidak gambar mungkin berubah bentuk menjadi elips.
• Sobat bisa juga menjadikan perubahan gambar dari bulat menjadi persegi dengan cara meletakkan kode "border-radius: 1000px;" di dalam .post-body img { bisa diletakkan diawal, atau diletakkan setelah semicolon ";" } , kemudian gunakan kode diatas tersebut juga, namun ganti ukuran border radiusnya menjadi 0, contoh : border-radius: 0px;.
• Fungsi kode "transition:all 0.3s ease;" adalah untuk memberikan efek perubahan bentuk yang lebih lembut, "0.3s" disini berarti perubahan dari gambar bulat ke persegi maupun sebaliknya berlangsung selama 0.3 Second/Detik, ukuran ini bisa diganti sesuai keinginan. Kode tersebut juga diletakkan di dalam .post-body img {...}, agar ketika kursor terlepas dari gambar, gambar akan kembali ke bentuk semula dengan efek perubahan yang sama. Lihat contoh dibawah ini.

• Jika sudah meletakkan kode tersebut, selanjutnya klik Simpan Template

Contoh Gambar Postingan Setelah Diberi Kode Diatas

Demikianlah artikel Membuat Gambar Postingan Blog Berubah Menjadi Bulat / Lingkaran ini Saya buat, semoga dapat bermanfaat bagi pembaca dan Sobat Blogger sekalian.

Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius

Hai Sobat Blogger!, pada postingan kali ini Saya membuat tutorial yaitu cara membuat gambar membulat atau membentuk lingkaran. Langsung saja berikut ini cara membuatnya.

Contoh gambar yang tidak menggunakan style border-radius



Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="height: 100px;" />

Penjelasan

"https://www.facebook.com/images/fb_icon_325x325.png" ganti dengan link gambar yang ingin kita gunakan.

Membuat Lingkaran Penuh

Contoh gambar yang menggunakan style border-radius

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 50px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 70px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 90px; height: 180px;" />

Penjelasan

Contoh gambar diatas memiliki tinggi 100px, untuk membuat gambar berbentuk lingkaran penuh harus menggunakan ukuran border-radius setengah atau lebih dari ukuran tinggi (height) atau lebar (width). Maka penulisan style nya : "border-radius : 50px;" jika menggunakan gambar berukuran tinggi dan lebar 100px.

Membuat Lingkaran Tidak Penuh

Script/Kode

<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 40px; height: 100px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 60px; height: 140px;" />
<img src="https://www.facebook.com/images/fb_icon_325x325.png" style="border-radius: 80px; height: 180px;" />

Penjelasan

Gambar tidak membentuk lingkaran penuh karena ukuran border-radius tidak mencapai setengah atau lebih dari ukuran tinggi dan lebar.

Demikianlah artikel Membuat Gambar Membulat / Membentuk Lingkaran Menggunakan Border-Radius ini. Semoga bermanfaat.

Download dan Cara Instal XAMPP Pada Windows

Apa Itu XAMPP?

XAMPP merupakan salah satu aplikasi yang digunakan untuk membangun website dinamis (PHP) di localhost. Secara garis besar XAMPP berfungsi sebagai server yang dapat berdiri sendiri (localhost) walaupun tidak terhubung dengan internet. Sebenarnya banyak software web server lainnya seperti MAMP, LAMP, dan WAMP, namun yang paling mudah digunakan dan dari tampilan atau interface yang paling baik adalah XAMPP.

XAMPP terdiri atas 4 program yaitu Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (Empat sistem operasi apapun), A (Apache), M (MySQL), P (PHP) dan P (Perl). Program ini tersedia dalam GNU General Public License dan bebas, yang bisa didapatkan secara gratis.

Download XAMPP

Untuk menggunakan XAMPP, terlebih dahulu kita perlu mendownload nya disini

Cara Instal XAMPP

• Buka / dobel klik xampp-win32-.....-installer yang sudah didownload tadi.
• Klik Next. Tampilan 1
• Biarkan settingan default, dan klik Next lagi. Tampilan 2
• Pilih lokasi folder penginstalan XAMPP, lalu klik Next lagi. Tampilan 3
• Setelah memilih lokasi folder penginstalan, XAMPP siap diinstal, lalu klik Next lagi. Tampilan 4
• Ketika proses penginstalan sedang berlangsung, biarkan sampai selesai. Tampilan 5
• Setelah selesai, klik Finish untuk memulai menggunakan XAMPP. Tampilan 6
• Setelah XAMPP Control Panel terbuka, jika ingin menggunakan web server saja klik Start pada Apache, jika ingin menggunakan MySQL juga, klik Start pada MySQL. Tampilan 7
• Jika muncul PopUp dari Windows Security Alert seperti ini, klik Allow Access saja. Tampilan 8
• Berikut ini tampilan bahwa XAMPP web server Apache dan MySQL sudah berjalan. Tampilan 9
• Buka Web browser seperti Chrome, Firefox dll, dan ketikkan localhost pada address bar web browser atau klik link https://127.0.0.1 atau https://localhost, maka tampilan XAMPP akan menjadi seperti ini, dan siap digunakan. Tampilan 10

Sekian artikel mengenai Download dan Cara Instal XAMPP Pada Windows. Semoga Bermanfaat.

Membuat Banyak E-Mail (Alias) Dengan Hotmail / Outlook

Kali ini Saya akan menuliskan tutorial, cara membuat banyak e-mail menggunakan email free dari Microsoft yaitu Hotmail/ Outlook. Disini kita dapat membuat banyak alamat email baru (Alias) dengan hanya menggunakan satu akun Hotmail/ Outlook. Dengan dapat membuat banyak e-mail atau alias, tentu kita tidak perlu mendaftar email baru yang memungkinkan harus memiliki nomor hp baru juga. Langsung saja berikut ini cara membuat banyak alias pada Hotmail / Outlook.

1. Buka Outlook.com / Hotmail.com lalu masukkan alamat email dan password. Jika belum memiliki akun daftar disini

2. Setelah masuk ke akun, klik tombol pengaturan di pojok kanan atas, lalu klik Opsi.

3. Setelah masuk ke menu Opsi, klik Buat Alias Outlook.com

4. Lalu akan diberikan pilihan untuk mendapatkan kode konfirmasi, dapat melalui email, sms dan juga panggilan ke nomor hp yang kita daftarkan pada saat mendaftar pada Hotmail / Outlook.com. Disini Saya menggunakan email, masukkan email alternatif yang kita daftarkan pada akun Outlook, lalu klik Kirim Kode.

5. Setelah itu akan diarahkan kehalaman berikut ini, lalu periksalah inbox / kotak masuk pada email yang digunakan untuk menerima kode tadi, dan copy paste kan kode keamanan yang ada. Lalu Kirim.

6. Setelah itu akan masuk ke halaman dengan pertanyaan "Capek menunggu kode keamanan?" seperti ini, abaikan saja, kembali ke Opsi atau klik disini

7. Setelah kembali masuk ke menu Opsi, klik Buat Alias Outlook.com. Lihat

8. Lalu masukkan nama email yang akan kita buat. Pada contoh ini Saya membuat nama email kampredtos. Setelah itu klik Buat nama alias.

9. Setelah itu maka akan muncul halaman yang menyatakan alias / email sedang diproses atau dengan tulisan "Bagus, kami sedang menyetel nama alias baru Anda". Tunggu email notifikasi bahwa email sudah siap digunakan yang akan masuk ke inbox.

10. Untuk mengelola alias / alamat-alamat email yang kita miliki masuk ke menu Opsi kemudian klik Alias: kelola atau pilih yang utama. 

Jika telah logout/ keluar dari akun Outlook.com, kita harus mengulangi tutorial ini untuk membuat banyak email / alias. Untuk mengatasi permintaan konfirmasi kode keamanan saat ini Saya belum tahu caranya.

Demikianlah tutorial Membuat Banyak E-Mail (Alias) Dengan Hotmail / Outlook. Semoga bermanfaat.

Tutorial Colspan & Rowspan Tabel HTML (3)

Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, pada tutorial sebelumnya Tutorial Membuat Tabel Halaman HTML (2) kita belajar membuat Tabel pada halaman HTML, kali ini kita akan kembali membahas tentang tabel, yaitu menggunakan perintah Colspan dan Rowspan.

Colspan dan Rowspan berfungsi untuk menggabungkan kolom, sedangkan Rowspan untuk menggabungkan baris.

Contoh :

1. Pertama buka kembali file index.html.

2. Sisipkan Script berikut ini diantara tag <body> dan </body>.

<!--Tabel ini tidak menggunakan Colspan dan Rowspan-->
<h2>Tabel tidak menggunakan Colspan dan Rowspan</h2>
<table border='1'>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
  <td>Baris 1 Kolom 3</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
</tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
 <td>Baris 3 Kolom 3</td>
</tr>
</table>

<br />
<br />
<!--Tabel ini menggunakan Colspan dan Rowspan-->
<h1>Tabel dengan Colspan dan Rowspan</h1>
<table border='1'>
 <tr>
 <td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
  <td rowspan='3'>Gabungan (Baris 1 Kolom 3)<br />, (Baris 2 Kolom 3)<br />, dan (Baris 3 Kolom 3)</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 </tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
</tr>
</table>

3. Save/Simpan, kemudian coba buka file index.html tersebut.

Maka Tampilan Halaman HTML Pada Browser Seperti Ini :

Penjelasan :

- Perintah Colspan atau Rowspan diletakkan diantara <td dan  > , contoh pada perintah <td colspan='2'> yang artinya elemen tabel yang akan digabungkan ada dua kolom, seperti pada contoh diatas. Elemen Baris 1 Kolom 1 digabungkan dengan Baris 1 Kolom 2.

- Pada script yang sebelumnya berbentuk : 

<tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
  <td>Baris 1 Kolom 3</td>
</tr>

setelah diberi perintah Colspan tentu elemen yang digabungkan harus dihilangkan, yaitu elemen Baris 1 Kolom 2 yang telah di gabungkan dengan Baris 1 Kolom 1 maka perubahan script menjadi seperti ini :
<tr>
    <td colspan='2'>Gabungan (Baris 1 Kolom 1)<br /> dan (Baris 1 Kolom 2)</td>
    <td>Baris 1 Kolom 3</td>
 </tr>

- Hal serupa juga dapat kita gunakan pada perintah Rowspan. 
- Perintah <br /> berfungsi untuk membuat baris baru / enter pada bahasa markup (HTML).

Demikian tutorial ini Saya buat semoga dapat berguna bagi sobat sekalian.

Tutorial Membuat Tabel Halaman HTML (2)

Halo Sobat Blogger, kembali lagi ditutorial Belajar HTML dan CSS, disini kita akan coba membuat tabel yang nantinya akan ditampilkan pada halaman HTML. Pastikan sobat sudah membaca postingan Belajar HTML dan CSS (1) sebelumnya.

1. Pertama buka kembali file index.html dengan Notepad++ atau software lainnya, untuk yang belum memiliki file nya, buka postingan sebelumnya Belajar HTML dan CSS (1).

2. Sisipkan Script berikut ini diantara tag <body> dan </body>.

<table border='1'>
 <tr>

 </tr>

 <tr>

 </tr>

  <tr>

 </tr>
</table>

Penjelasan :

- Untuk membuat tabel perintah/ tag yang digunakan adalah </table> dan jangan lupa menutupnya dengan perintah </table>.

- Script "table border='1'" memiliki arti tabel yang akan kita buat menggunakan border/ bingkai berukuran 1 Pixel, penulisan ukuran pada script HTML bisa di tulis '1' dan bisa juga '1px'. Tebal border dapat diganti sesuai kebutuhan.

- 3 Pasang Tag <tr> dan </tr> memiliki arti, tabel yang akan dibuat terdiri dari 3 baris.

3. Save dokumen index.html, dan coba buka filenya pada web browser, maka tabel tidak muncul pada halaman HTML. Hal ini disebabkan kita belum meletakkan data apapun pada tabel tersebut. Lanjut, sekarang sisipkan script berikut ini diantara 3 Tag <tr> dan </tr>.

<tr>

 <td>Baris 1 Kolom 1</td>
 <td>Baris 1 Kolom 2</td>
 <td>Baris 1 Kolom 3</td>
</tr>

<tr>
 <td>Baris 2 Kolom 1</td>
 <td>Baris 2 Kolom 2</td>
 <td>Baris 2 Kolom 3</td>
</tr>

<tr>
 <td>Baris 3 Kolom 1</td>
 <td>Baris 3 Kolom 2</td>
 <td>Baris 3 Kolom 3</td>
</tr>

Tampilan Pada Web Browser :

Penjelasan :

- Tag <td> dan </td> memiliki arti tabel data, yaitu setiap perintah/ code yang kita tuliskan diantara Tag <td> dan </td> akan masuk kedalam elemen tabel. Untuk menambah tabel data cukup dengan menambahkan Tag <td> dan </td> sebanyak yang dibutuhkan.


Demikian tutorial membuat tabel pada halaman HTML, untuk tutorial berikutnya klik Tutorial Colspan & Rowspan Tabel HTML (3).

Pengenalan HTML & CSS, Membuat Halaman HTML (1)

Halo sobat blogger :D

Kali ini Saya mencoba membuat tutorial HTML dan CSS, sebelum mempelajari adakalanya kita mencari tahu terlebih dahulu apa itu HTML dan CSS.

Pengertian HTML

HTML(Hyper Text Markup Language) adalah salah satu dari bahasa pemrograman yang berbasis Web  yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Pengertian CSS

CSS (Cascading Style Sheets) adalah bahasa pemrograman web yang digunakan untuk mengatur tampilan suatu dokumen HTML. Dalam konteks sebuah website, CSS dapat diartikan sebagai bahasa yang digunakan untuk mengatur tampilan / desain suatu halaman HTML.

Membuat Halaman HTML Sederhana

Pertama-tama siapkan tool/alat tempurnya :

1. Notepad++ (Download), Notepad biasa bawaan windows juga bisa pelajari caranya disini, atau bisa juga Adobe Dreamweaver, dan masih banyak lagi tool/software lainnya yang bisa digunakan, tapi disini ane akan menggunakan Notepad++

2.Web Browser. Mozzila Firefox, Google Chrome, dll.

Setelah peralatan sudah tersedia, sekarang mari kita coba belajar membuat HTML & CSS sederhana

- Buka Notepad++ 

- Klik tab File - New

- Lalu klik tab File - Save As, pada File name tuliskan  index , pada Save as type pilih Hyper Text Markup Language file (html... . Tampilan 1

- Lalu klik tab File - New lagi, kemudian File-Save As, pada File name tuliskan style , pada Save as type pilih Cascade Style Sheets File (*.css). Tampilan 2

- Setelah file index.html dan style.css terbuat, lanjut untuk mengisi file tersebut.

- Didalam setiap perintah pada bahasa pemrograman html selalu diawali tag < > dan diakhiri oleh tag < / >.

- Isi file index html tadi dengan script berikut ini :

<!doctype html>

<html>



</html>

- Diantara perintah <html> dan </html> inilah kita akan meletakkan kode-kode/ script untuk membangun sebuah halaman HTML. Sekarang akan kita coba untuk mengisi perintah didalamnya. Masukkan script ini diantara <html> dan </html>.

<head>
<title> Belajar HTML </title>
</head>

<body>
Ini Halaman HTML
</body>

- Tag <head> dan </head> adalah tag untuk kita meletakkan title / judul dari sebuah halaman website, diantara tag ini juga kita dapat meletakkan perintah/kode CSS, jika ingin menggabungkan perintah CSS didalam halaman HTML.

- Tag <body> dan </body> adalah tag untuk kita meletakkan segala perintah yang akan ditampilkan pada halaman HTML. 

- Save dokumen HTML nya dengan menekan tombol CTRL+S atau File - Save.

- Kemudian buka file index.html yang telah kita buat tadi.

- Agar dokumen style.css (CSS) nya include atau tergabung dengan dokumen HTML, salin / copy kode berikut ini diatas kode </head> :
 <link rel="stylesheet" type="text/css" href="style.css" />

Demikian tutorial ini Saya buat semoga bermanfaat bagi sobat sekalian, untuk tutorial berikutnya klik Tutorial Membuat Tabel Halaman HTML (2).

Cara Membuat Ekstensi File Berbeda Pada Notepad Bawaan Windows

Langsung saja, berikut cara membuat berbagai macam ekstensi file yang berbeda pada notepad bawaan windows.

1. Uncheck / Matikan ceklis "Hide extentions for known file types". Fungsinya agar ekstensi file yang sebelumnya disembunyikan menjadi terlihat.

Caranya :
- Sebelum di uncheck. Lihat tampilan 1

- Klik Start > Control Panel. Lihat tampilan 2

- Klik Apperance and Personalization. Lihat tampilan 3 

- Pada Folder Options, klik Show hidden files and folders. Lihat tampilan 4

- Pada tab View pada Folder Options, di Advance Settings uncheck/ matikan ceklis "Hide extentions for known file types" . Lihat tampilan 5

- Penampakan file-file setelah di uncheck, ekstensi file terlihat. Lihat tampilan 6

2. Klik Start, ketik Notepad pada kolom search, lalu buka Notepad. Lihat tampilan 7

3. Setelah Notepad terbuka, klik tab File - Save As, contoh disini ane akan membuat dokumen HTML, masukkan File Name sesuai keinginan + ".html", maka file name seperti ini "filename.html", lalu pilih Save as type "All Files (*.*)" . Kita juga bisa membuat ekstensi file lainnya seperti PHP (.php) , CSS (.css) dan lain-lain hanya memberikan tambahan ".esktensifileyangdiinginkan" setelah nama file. Lebih jelasnya lihat tampilan 8 dan tampilan 9

Dengan bisa membuat berbagai macam ekstensi, contoh saja jika kita tidak memiliki software bantuan pembuat website seperti dreamweaver, notepad++, dan lain lain, kita tetap dapat mempelajari, merubah, atau membuat suatu halaman html, atau pemrograman php dan css dengan menggunakan Notepad bawaan windows.

Terima kasih telah mampir di artikel ini, mohon maaf bila ada kesalahan pada penulisan atau penyampaian, semoga bermanfaat.