Fendi blogger

Kumpulan Jenis Tag HTML dan Fungsinya

2016-09-27T23:17:00.000-07:00

Tunggu sampai selesai dan jangan lakukan apa pun

💡 Prompt Gemini AI (Pembuat Modul Ajar HTML)

Anda adalah AI Ahli Pemrograman HTML & Desain Modul Ajar Profesional. Tugas Anda mengubah teks Modul Ajar menjadi Single HTML File yang interaktif dan siap diekspor ke MS Word.

🔴 ATURAN KONTEN & PEMISAHAN TABEL (HARGA MATI):
1. COPY-PASTE UTUH: Salin seluruh teks materi 100% tanpa meringkas atau memotong kata!
2. TAMBAHAN TRIVIA OTOMATIS: Anda WAJIB membuat dan menambahkan 1-2 fakta unik/trivia cerdas yang relevan dengan materi bab ini ke dalam kotak "Tahukah Kamu?" (walaupun di teks mentah aslinya tidak ada). Letakkan di antara tabel agar menarik.
3. ATOMISASI BARIS: Setiap poin, indikator, atau langkah kegiatan WAJIB diletakkan di dalam tag <tr> baru yang terpisah. JANGAN ditumpuk di satu sel!
4. TABEL HARUS TERPISAH: Pisahkan setiap Section dan KHUSUSNYA SETIAP PERTEMUAN ke dalam <table> tersendiri.
5. BOLD HANYA PADA LABEL: Cetak tebal (bold) HANYA pada kata utama/label di kolom kiri (contoh: Pengetahuan Awal). JANGAN menambahkan cetak tebal (bold) apa pun pada teks rincian/deskripsi di kolom kanan. Biarkan rinciannya berupa teks biasa.

🎨 ATURAN STRUKTUR HTML (GUNAKAN CLASS INI SAJA):
Gunakan kerangka ini untuk semua tabel konten:
<table class="section-table doc-export">
  <tr class="header-lv1"><td colspan="2">JUDUL UTAMA (Contoh: A. IDENTITAS)</td></tr>
  <tr class="header-lv2"><td colspan="2">Sub-Judul / Topik</td></tr>
  <tr class="header-lv3"><td colspan="2">Judul Kegiatan (Contoh: KEGIATAN INTI)</td></tr>
  <tr class="content-row"><td class="label-col">Label Kiri</td><td>Isi Kanan</td></tr>
  <tr class="content-row"><td colspan="2"><b>Kata Kunci:</b> Penjelasan panjang...</td></tr>
</table>

💡 KHUSUS KOTAK TRIVIA (WAJIB DITAMBAHKAN):
<div class="callout doc-export"><h3>TAHUKAH KAMU?</h3><p>[ISI DENGAN FAKTA UNIK BUATAN ANDA YANG RELEVAN]</p></div>

Khusus Tanda Tangan, gunakan:
<table class="doc-export-ttd" style="width:100%; margin-top:50px; border:none;">...</table>

⚙️ KODE BOILERPLATE WAJIB (JANGAN DIUBAH!):
Gunakan struktur HTML, CSS, dan JS di bawah ini 100% PERSIS. Anda HANYA bertugas mengisi bagian "<!-- ISI KONTEN DISINI -->" dengan teks dari saya.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Modul Ajar</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: #f1f5f9; display: flex; flex-direction: column; align-items: center; padding: 40px 20px; font-family: 'Times New Roman', Times, serif !important; }
p, div, span, td, th, h1, h2, h3 { margin: 0 !important; }
.document-container { background-color: #ffffff; width: 100%; max-width: 1000px; padding: 50px 70px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.title-box { background-color: #1F3864; padding: 15px; text-align: center; border: 1px solid #1F3864; }
.title-box h1 { color: #FFFFFF; font-size: 16pt; font-weight: bold; text-transform: uppercase; }
.subtitle-box-1 { background-color: #2E75B6; padding: 10px; text-align: center; border-left: 1px solid #2E75B6; border-right: 1px solid #2E75B6; }
.subtitle-box-1 h2 { color: #FFFFFF; font-size: 12pt; font-weight: bold; text-transform: uppercase; }
.subtitle-box-2 { background-color: #D6E4F7; padding: 10px; text-align: center; margin-bottom: 30px !important; border-bottom: 1px solid #D6E4F7; border-left: 1px solid #D6E4F7; border-right: 1px solid #D6E4F7; }
.subtitle-box-2 h2 { color: #1F3864; font-size: 12pt; font-weight: bold; text-transform: uppercase; }
.section-table { width: 100%; margin-bottom: 20px !important; border-collapse: collapse; border: 1px solid #2E75B6; }
.section-table th, .section-table td { border: 1px solid #2E75B6; padding: 4px 8px; font-size: 11pt; line-height: 1.15; vertical-align: top; }
.header-lv1 td, .header-lv1 th { background-color: #1F3864 !important; color: white !important; font-size: 12pt !important; text-transform: uppercase; text-align: center !important; font-weight: bold !important; }
.header-lv2 td { background-color: #2E75B6 !important; color: white !important; font-size: 11pt !important; text-align: center !important; font-style: italic !important; font-weight: normal !important; }
.header-lv3 td { background-color: #1F3864 !important; color: white !important; font-size: 11pt !important; text-transform: uppercase; text-align: left !important; font-weight: bold !important; }
.content-row td { color: #000000 !important; text-align: justify; }
.label-col { font-weight: bold; width: 25%; text-align: left !important; }
.callout { background-color: #FFF2CC; padding: 12px 18px; margin-bottom: 20px !important; border-left: 6px solid #C55A11; }
.callout h3 { color: #C55A11; font-size: 12pt; margin-bottom: 5px !important; font-weight: bold; }
.callout p { font-size: 11pt; line-height: 1.15; text-align: justify; color: #000; }
.btn-export { position: fixed; top: 20px; right: 20px; background: #C55A11; color: white; border: none; padding: 12px 25px; border-radius: 5px; cursor: pointer; font-weight: bold; font-family: 'Times New Roman'; font-size: 12pt; z-index: 1000; }
.doc-export-ttd td { border: none !important; text-align: center; }
</style>
</head>
<body>
<button class="btn-export" onclick="exportToWord()">Export to DOCX</button>
<div class="document-container">
    <div class="title-box"><h1>MODUL AJAR</h1></div>
    <div class="subtitle-box-1"><h2>MATA PELAJARAN : [ISI DISINI]</h2></div>
    <div class="subtitle-box-2"><h2>BAB : [ISI DISINI]</h2></div>

    <!-- ISI KONTEN DISINI (GUNAKAN TABEL & CALLOUT SESUAI ATURAN) -->

</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.section-table').forEach(table => {
        let rowCount = 0;
        table.querySelectorAll('tr').forEach(tr => {
            if (tr.classList.contains('header-lv1') || tr.classList.contains('header-lv2') || tr.classList.contains('header-lv3')) {
                rowCount = 0; 
            } else if (tr.classList.contains('content-row')) {
                rowCount++;
                tr.querySelectorAll('td').forEach(td => { td.style.backgroundColor = (rowCount % 2 === 0) ? '#EBF3FB' : '#FFFFFF'; });
            }
        });
    });
});

function exportToWord() {
    var header = "<html xmlns:v='urn:schemas-microsoft-com:vml' xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'>";
    header += "<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:Zoom>100</w:Zoom><w:DoNotOptimizeForBrowser/></w:WordDocument></xml><![endif]-->";
    header += "<style>table { border-collapse: collapse; width: 100%; } p, td, div, span { margin: 0pt !important; mso-margin-top-alt: 0pt; mso-margin-bottom-alt: 0pt; padding: 0; line-height: 1.15; font-family: 'Times New Roman', serif; }</style></head><body>";
    var body = "";
    
    body += "<table width='100%' border='0' cellspacing='0' cellpadding='0' style='border-collapse: collapse; border: none;'>";
    let title1 = document.querySelector('.title-box h1').innerText;
    let title2 = document.querySelector('.subtitle-box-1 h2').innerText;
    let title3 = document.querySelector('.subtitle-box-2 h2').innerText;
    body += `<tr><td bgcolor='#1F3864' style='border: none; text-align:center; padding: 12pt 10pt;'><p style='color:#FFFFFF; font-size:16pt; font-weight:bold; margin:0;'><span style='color:#FFFFFF;'>${title1}</span></p></td></tr>`;
    body += `<tr><td bgcolor='#2E75B6' style='border: none; text-align:center; padding: 8pt 10pt;'><p style='color:#FFFFFF; font-size:12pt; font-weight:bold; margin:0;'><span style='color:#FFFFFF;'>${title2}</span></p></td></tr>`;
    body += `<tr><td bgcolor='#D6E4F7' style='border: none; text-align:center; padding: 8pt 10pt;'><p style='color:#1F3864; font-size:12pt; font-weight:bold; margin:0;'><span style='color:#1F3864;'>${title3}</span></p></td></tr>`;
    body += "</table>";
    body += "<p style='margin: 0pt; font-size: 12pt;'>&nbsp;</p>";

    document.querySelectorAll('.doc-export').forEach(el => {
        let clone = el.cloneNode(true);
        if (clone.tagName === 'TABLE') {
            clone.setAttribute('border', '1'); clone.setAttribute('cellpadding', '4'); clone.setAttribute('cellspacing', '0');
            clone.style.borderCollapse = 'collapse'; clone.style.width = '100%';
            let rowCount = 0;
            clone.querySelectorAll('tr').forEach((tr) => {
                let tds = tr.querySelectorAll('td, th');
                tds.forEach(td => { td.style.border = '1pt solid #2E75B6'; td.style.padding = '4pt 8pt'; td.style.lineHeight = '1.15'; td.setAttribute('valign', 'top'); });
                if (tr.classList.contains('header-lv1')) {
                    rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#1F3864'); td.style.backgroundColor = '#1F3864'; td.style.color = '#FFFFFF'; td.style.fontWeight = 'bold'; td.style.textAlign = 'center'; td.style.textTransform = 'uppercase'; td.style.fontSize = '12pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
                } else if (tr.classList.contains('header-lv2')) {
                    rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#2E75B6'); td.style.backgroundColor = '#2E75B6'; td.style.color = '#FFFFFF'; td.style.fontStyle = 'italic'; td.style.textAlign = 'center'; td.style.fontSize = '11pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
                } else if (tr.classList.contains('header-lv3')) {
                    rowCount = 0; tds.forEach(td => { td.setAttribute('bgcolor', '#1F3864'); td.style.backgroundColor = '#1F3864'; td.style.color = '#FFFFFF'; td.style.fontWeight = 'bold'; td.style.textAlign = 'left'; td.style.textTransform = 'uppercase'; td.style.fontSize = '11pt'; td.innerHTML = `<span style="color: #ffffff;">${td.innerHTML}</span>`; });
                } else if (tr.classList.contains('content-row')) {
                    rowCount++; let bgColor = (rowCount % 2 === 0) ? '#EBF3FB' : '#FFFFFF';
                    tds.forEach((td, idx) => { td.setAttribute('bgcolor', bgColor); td.style.backgroundColor = bgColor; td.style.color = '#000000'; td.style.fontSize = '11pt'; if (tr.querySelector('.label-col') && idx === 0) { td.style.fontWeight = 'bold'; td.setAttribute('width', '25%'); td.style.width = '25%'; } });
                }
            });
            clone.querySelectorAll('*').forEach(child => child.removeAttribute('class')); clone.removeAttribute('class');
        } else if (clone.classList.contains('callout')) {
            let calloutTable = document.createElement('table');
            calloutTable.setAttribute('width', '100%');
            calloutTable.setAttribute('cellpadding', '10');
            calloutTable.setAttribute('cellspacing', '0');
            calloutTable.style.borderCollapse = 'collapse';
            calloutTable.style.width = '100%';
            
            let calloutTr = document.createElement('tr');
            let calloutTd = document.createElement('td');
            calloutTd.setAttribute('bgcolor', '#FFF2CC');
            calloutTd.style.backgroundColor = '#FFF2CC';
            calloutTd.style.border = 'none';
            calloutTd.style.borderLeft = '5pt solid #C55A11';
            calloutTd.style.padding = '8pt 12pt';
            
            let h3 = clone.querySelector('h3');
            let p = clone.querySelector('p');
            calloutTd.innerHTML = `<p style="margin: 0 0 5pt 0; font-size: 12pt; font-weight: bold; color: #C55A11;">${h3 ? h3.innerText : 'TAHUKAH KAMU?'}</p>` + 
                                  `<p style="margin: 0; font-size: 11pt; color: #000000; text-align: justify; line-height: 1.15;">${p ? p.innerHTML : ''}</p>`;
            
            calloutTr.appendChild(calloutTd);
            calloutTable.appendChild(calloutTr);
            clone = calloutTable;
        }
        body += clone.outerHTML + "<p style='margin: 0pt; font-size: 12pt;'>&nbsp;</p>";
    });

    body += document.querySelector('.doc-export-ttd').outerHTML;
    var blob = new Blob(['\ufeff', header + body + "</body></html>"], { type: 'application/msword' });
    var link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = 'Modul_Ajar_Auto.doc'; link.click();
}
</script>
</body>
</html>

Teks Modul Ajarnya: 
[DOKUMEN YANG DIUPLOAD]

Setelah selesai klik tombol expor ke docx di pojok kanan atas
Sesuaikan Warn

Membuat Effect gambar pada HTML dan penjelasannya part 1

2015-07-29T19:40:00.000-07:00

Pada postingan hari ini saya akan membagikan script CSS dan HTML yang digunakan untuk menimbulkan effect pada gambar pada halaman web. Untuk anda yang masih bingung apa itu css dan cara menyisipkannya pada halaman web HTML, baca artikel ini.......... .

Yang saya share ini hanya beberapa saja dari sekian banyak effect gambar pada HTML yang dapat dibuat oleh bahasa pemrogaman CSS. Berikut ini beberapa Effect gambar pada HTML dan penjelasannya part 1 .

Script CSS umum.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #00FF00;
}
.pic {
border: 5px solid #fff;
float: left; height: 250px;
width: 250px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}

Penjelasan sederhana :

#00FF00 merupakan warna dasar background halaman web anda.
5px merupakan tebal border atau bingkai dari gambar tersebut.
height: 250px; dan width: 250px;merupakan ukuran tinggi dan lebar dari bingkai tersebut.

#ganti sesuai selera anda.

Effect gambar membesar(zoom) jika disentuh kursor.

Untuk effect gambar yang pertama ini, cara kerjanya dengan meletakkan kursor pada gambar tersebut lalu gambar itu akan menimbulkan hover(effect) membesar (zoom).

Script CSS :

.zoom img {
height: 250px;
width: 250px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.zoom img:hover {
width: 400px;
height: 400px;
}

Penjelasan :

.grow img {
height: 250px; = sesuaikan dengan tinggi (height) pada Script css umum.
width: 250px; = sesuaikan dengan lebar (width) pada Script css umum.
.grow img:hover {
width: 400px; = Effect saat disentuh kursor (ukuran lebar).
height: 400px; = Effect saat disentuh kursor (ukuran tinggi).

Script HTML :

<div class="zoom pic">
<img src="url/nama gambar">
</div>
Penjelasan :

url/nama gambar = nama gambar yang sudah anda siapkan dalam 1 folder(sertakan ekstensi filenya), ex : zoom.png. Atau alamat url gambar.

Effect gambar mengecil jika disentuh kursor.

Untuk effect gambar yang pertama ini, cara kerjanya dengan meletakkan kursor pada gambar tersebut lalu gambar itu akan menimbulkan hover(effect) Mengecil .

Script CSS :

.kid img { height: 400px;
width: 400px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.kid img:hover {
width: 250px;
height: 250px;
}
Penjelasan :

.grow img {
height: 400px; = Effect sebelum disentuh kursor (ukuran tinggi).
width: 400px; = Effect sebelum disentuh kursor (ukuran lebar).
.grow img:hover {
width: 250px; = Effect saat disentuh kursor (ukuran lebar), (dapat disesuaikan dengan Script CSS umum).
height: 250px; = Effect saat disentuh kursor (ukuran tinggi), (dapat disesuaikan dengan Script CSS umum)..

Script HTML :

<div class="kid pic">
<img src="url/nama gambar">
</div>

Penjelasan :

url/nama gambar = nama gambar yang sudah anda siapkan dalam 1 folder(sertakan ekstensi filenya), ex : zoom.png. Atau alamat url gambar

Pemasangan 3 pilihan widget alexa pada blog

2015-07-25T05:58:00.001-07:00

Alexa sangat tidak asing bagi para kalangan blogger, contohnya saya ^^. Karena alexa dapat menentukan kualitas blog tersebut dengan cara melihat tampilan alexa rank . Semakin kecil alexa rank pada suatu blog, maka akan semakin bagus kualitas pada blog tersebut. Untuk dapat melihat berapa alexa rank pada blog tersebut ada 3 cara yang dapat dilakukan yaitu dengan mencari nama blog pada situs alexa itu sendiri, memasang add ons alexa pada browser lalu mengunjungi blog yang ingin dilihat, dan yang terakhir dengan menggunakan widget alexa yang diletakkan pada blog tersebut. Dalam postingan kali ini saya akan membahas mengenai widget alexa tersebut.

Dalam kurun waktu tertentu situs alexa mengalami perubahan. Dan itu juga berpengaruh terhadap cara membuat widget alexa, dimana dulu para blogger dapat membuat widget alexa dalam web terbut tapi sekarang sudah tidak bisa. Tapi anda tidak perlu cemas bahkan sampai kawatir, karena disini saya menyediakan script widget alexa dan bahkan mempunyai 3 tampilan. Jad anda bisa memilihnya sesuai dengan keinginan anda.

Apabila anda tertarik untuk memasang widget alexa ini, silahkan ikuti step by step pada tutorial memasang 3 pilihan widget alexa pada blog. Sangat mudah kok. Hanya terdiri dari 2 step saja :D

Step 1. Pilih tampilan widget alexa

Di bawah ini ada 3 tampilan widget alexa yang bisa anda gunakan pada blog anda. Pilih sesuai keinginan anda.

<a href="http://www.alexa.com/siteinfo/URL blog anda"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=URL blog anda" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/URL blog anda"><script src="http://xslt.alexa.com/site_stats/js/s/b?url=URL blog anda" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/URL blog anda"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=URL blog anda" type="text/javascript"></script></a>

Catatan :
1. Ubah URL blog anda dengan alamat url blog anda(ex : trickblogfendi.blogspot.com)

Step 2. Cara memasang widget alexa

Buka akun blogger anda.
Klik pada Tab Tata letak, lalu klik add gadget

Cari Gadget HTML/Javascript

Letakkan script alexa yang telah anda pilih pada gadget tersebut.
Simpan, lalu pratinjau untuk melihatnya.

Membuat effect gambar berganti saat disentuh kursor (mouseover)

2015-07-24T06:21:00.001-07:00

Effect gambar berganti adalah satu dari banyak effect gambar yang dibuat dengan menggunakan script HTML. Effect ini dapat bekerja jika diletakkan kursor pada gambar tersebut. Gambar akan berganti menjadi gambar kedua, lalu setelah kursor dijauhkan dari gambar maka gambar akan kembali ke posisi gambar utama.

Membuat effect gambar berganti

Copy script dibawah ini dan letakkan pada blog/file HTML/dll.

<a href="URL web"><img src="Alamat url gambar pertama" onmouseover="this.src='Alamat url gambar kedua '" onmouseout="this.src='Alamat url gambar pertama'" /></a>

Keterangan :

URL web : Ganti dengan alamat web yang ingin dituju. (contoh:trickblogfendi.blogspot.com dan effect.html jika dalam bentuk HTML)
Alamat url gambar pertama : ganti dengan alamat url gambar pertama atau nama gambar dalam 1 folder.
lamat url gambar kedua : ganti dengan alamat url gambar kedua atau nama gambar dalam 1 folder.

Cara memasang widget like box facebook terbaru 2015

2015-07-24T06:04:00.000-07:00

Pada postingan kali ini saya akan membagikan langkah-langkah bagaimana Cara memasang widget like box facebook terbaru 2015. Mengapa saya katakan terbaru 2015. Karena lebih tepatnya tanggal 23 juni 2015 fasilitas Like Box Facebook telah dihilangkan oleh facebook.

Setelah keputusan itu, facebook merekomendasikan untuk menggunakan fasilitas Widget Page plugin yang mempunyai tampilan lebih menarik daripada fasilitas facebook like box. Lalu mengapa saya memberi judul pada Postingan saya dengan nama Memasang widget like box facebook ?. Karena kan agan-agan kan masih pada belum tau, fasilitas apa yang digunakan untuk menggantikan fasilitas Facebook like box tersebut.

Cara kerja untuk Widget Page plugin sama persis dengan Facebook like box, yang berfungsi sebagai widget Fanspage Facebook. Bedanya mungkin hanya pada fasilitas Share pada widget itu. Apabila agan ingin segera memasang widget ini, silahkan ikuti saja langkah-langkah Cara memasang widget like box facebook terbaru 2015 yang sudah saya siapkan dibawah ini. Cukup mudah kok :D. Kalau ada yang bingung atau belum paham, silahkan berkomentar pada tempat yang disediakan.

Membuat facebook like box facebook (Page plugin)

Pertama Silahkan kunjungi https://developers.facebook.com/docs/plugins/page-plugin
Klik pada Tab social plugin >> Page plugin.

Ketikkan Facebook Page URL anda di tempat yang disediakan. (ex : https://www.facebook.com/trickbloggerfendi).

Apabila anda sudah puas dengan tampilan Page plugin anda, silahkan klik Get Code.
Copy bagian no.2 Place the code for your plugin wherever you want the plugin to appear on your page, seperti yang saya tandai pada gambar dibawah ini.

Memasang facebook like box facebook (Page plugin) pada blog

Buka account Blogger anda.
Klik tab Tata letak

Pilih add gadget

Cari gadget HTML/Javascript

Lalu pastekan script yang sudah anda copy tadi pada gadget tersebut, lalu simpan.
Buka tab Template >> Edit HTML.
Backup template anda dulu.
Cari script <body> (Gunakan CTRL+F agar cepat). Jika tidak ada Lihat catatan di bawah.
Lalu pastekan script dibawah ini, dibawah script <body> tersebut.
<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
Simpan Template, lalu lihat pada hasilnya pada blog anda.

Catatan :

Untuk menghilangkan tombol share, anda bisa perkecil ukuran widget tersebut pada web Developer Facebook.
Jika tidak ada script <body> pada template anda. Coba cari script <body, Script tersebut letaknya selalu dibawah script </head> (bisa dicari yang ini dulu, nanti bawahnya adalah script <body>.
Berikan foto sampul pada fanspage anda agar tampilan widgetnya lebih menarik. Seperti pada fanspage blog saya.

Pemasangan widget recent post di blog

2015-07-15T06:46:00.002-07:00

Pada hari ini saya akan memberikan tutorial yang berupa cara mengenai Pemasangan widget recent post di blog.

Apa yang dimaksud recent post ?

Widget recent post ini menampilkan artikel terbaru yang telah dipostingkan. Widget ini digunakan untuk menginformasikan ke visitor atau pengunjung tentang artikel yang baru diposting atau di buat.

Bagaimana cara membuat widget recent post dan memasangnya

Bentuk widget recent post ini terbilang sederhana dan dapat mudah dipasang. Berbeda dengan widget popular post yang saya pasang pada blog saya, yang terlihat mencolok dan berwarna-warni. Baca Membuat tampilan popular post berwarna warni.

Sangat mudah untuk membuat widget recent post dan memasangnya, ikuti saja cara yang saya sampaikan di bawah ini :

Pemasangan widget recent post

Pertama-tama buka akun blogger kamu
Masuk ke menu Tata Letak

Tambahkan gadget

Pilih HTML/Javascript

Masukkan script recent post dibawah ini.
Lihat Catatan dibawah, untuk memasangnya.

<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":"Nama-BLOG/feeds/posts/default"},
"hideHeader":"false","height":"500","count": 8 }</script>
<noscript>Browser anda tidak support Javascript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>

Catatan :

Nama-BLOG, Isikan nama blog anda. tanpa menggunakan "/". (contoh : http://trickblogfendi.blogspot.com).
500, Ini jika anda menginginkan adanya scroll bar pada widget tersebut. Hapus jika tidak ingin adanya scroll bar.
8, Berapa artikel yang ingin ditampilkan.
Jika hanya ingin ditampilkan judulnya saja, ubah 0 menjadi pada padding-top:0px menjadi 10 dan true menjadi none

Apa yang dimaksud backlink dan bagaimana cara kerjanya

2015-06-26T06:21:00.000-07:00

Pengertian backlink ?

Dalam dunia blogger terdapat istilah yang dinamakan dengan Backlink. Apa pengertian Backlink ? Backlink berarti Umpan Balik Link dari blog atau situs web lain yang mengarah pada blog kita. Backlink dapat dijadikan sebagai sarana yang digunakan untuk dapat meningkatkan popularitas suatu Blog. Mengapa demikian ? Karena apabila anda menyebarluaskan URL Link yang mengarah langsung pada blog yang anda miliki, maka blog itu akan menjadi semakin dikenal di dalam dunia internet. Dan apabila blog anda semakin dikenal, maka dapat memperbaiki posisi SERP(letak artikel) pada search engine (google).

Bagaimana cara kerja backlink ?

Cara kerja backlink dengan cara menyebarkan artikel atau blog kita melalui URL yang kita letakkan pada suatu Web agar blog kita semakin dikenal, seperti contoh :

Melalui komentar

Berkomentar pada saat kita memasuki blog lain, dengan meninggalkan URL blog atau URL artikel pada komentar tersebut. Dalam mencari backlink yang berkualitas, sebaiknya anda berkomentar pada blog yang sudah populer atau mempunyai page rank atau alexa rank yang tinggi. Dan juga berkomentarlah sesuai dengan apa yang dibahas pada artikel artikel, jangan seenaknya sendiri karena bisa dianggap SPAM.

Forum online

Mendaftar ke forum diskusi online. Lalu tinggalkan URL blog atau URL artikel pada saat diskusi atau tanya jawab di forum tersebut

Melalui social bookmark.

Dengan cara mensubmit URL artikel kita pada Social bookmark tersebut. Ada banyak sekali social bookmark yang disediakan, tapi sebaiknya anda cari yang social bookmark yang mempunyai page rank tinggi. Karena semakin terkenalnya Social Bookmark tersebut maka juga akan berpengaruh terhadap kualitas backlink yang anda dapatkan.

Melihat pengguna wifi lain dalam jaringan yang sama menggunakan aplikasi

2015-06-21T07:43:00.000-07:00

Untuk postingan kali ini saya akan membahas bagaimana cara melihat pengguna lain dalam jaringan yang sama menggunakan aplikasi. Biasanya hal ini dilakukan untuk iseng-iseng saja, tapi ada juga yang menggunakan hal ini untuk melakukan tindakan yang kurang terpuji seperti memutus jaringan pengguna lain (biasanya menggunakan aplikasi Netcut) . Tapi aplikasi yang saya share kali, bukan ditujukan untuk hal-hal seperti itu. Aplikasi ini hanya bisa digunakan untuk melihat pengguna wifi lain, tetapi sebenarnya aplikasi ini juga dapat digunakan untuk melihat pengguna pada jaringan LAN.

Silahkan download aplikasi ini jika berminat.

Download aplikasi

Untuk penggunaannya silahkan ikuti langkah-langkah ini:

Buka aplikasi (tidak perlu install karena portable)
Lalu klik yang sudah saya tandai di bawah ini.

Lalu anda pilih IP yang muncul (Bukan 127.0.0.1) lalu klik OK
Lalu akan muncul nama-nama komputer disertai IP-nya

3 cara untuk melihat spek suatu komputer atau laptop

2015-06-21T07:34:00.001-07:00

Spek merupakan suatu bagian dalam komputer atau yang biasa kita sebut dengan komponen, tetapi spek mencangkup Nama komponen dan jenisnya secara rinci seperi contoh laptop axioo (system model 5720sr, processor intel pentium, memory 1 gb).

Kemarian saya baru saja posting mengenai 8 cara mempercepat komputer atau laptop dan kali ini saya aka membagikan 3 cara untuk melihat spek suatu komputer atau laptop yang menggunakan aplikasi, atau tool bawaan windows. Untuk lebih jelasnya silahkan baca caranya dibawah ini:

Menggunakan BIOS
BIOS dapat digunakan untuk mengecek spek-spek komputer anda. Disana kita dapat menjumpai jenis motherboard, jenis harddisk, ram, ukuran ram, bahkan ada juga Temperature/suhu. Untuk dapat masuk ke BIOS setiap komputer mempunyai cara-cara tersendiri, tetapi yang sering ditemukan adalah dengan menggunakan F2 dan Del. Biasanya versi BIOS dibedakan menurut jenis motherboard ataupun jenis komputernya.
Menggunakan Tool windows

Tools windows yang saya maksud sekarang adalah dxdiag. Cara menggunakannya anda tinggal search dengan kata kunci dxdiag, atau tekan windows + R, ketik dxdiag, lalu Enter. Disitu anda dapat melihat spek-spek komputer anda seperi System model, BIOS version, processor, memory, Display(VGA) atau Approx. Total memory, dll.
Menggunakan aplikasi
Aplikasi untuk melihat spek komputer anda sangat banyak seperti Speccy dan CPU-Z

Membuat serial number Smadav pro 2015 dengan aplikasi

2015-06-21T06:59:00.004-07:00

Smadav adalah antivirus local yang biasanya ditujukan untuk komputer-komputer spek rendah, tapi tida jarang juga komputer dengan spek tinggi menggunakannya. Antivirus ini mempunyai kelebihan untuk digabungan dengan antivirus internasional seperti Avast, Avira, dan lain-lain. Seperti pada judul artikel ini, Membuat serial number Smadav pro 2015 dengan aplikasi. Pada postingan kali ini saya akan membagikan software generator untuk membuat serial smadav pro yang saya temukan dari suatu web.

Aplikasi ini bisa membantu anda untuk membuat serial number Smadav pro dengan menggunakan nama sesuai dengan keinginan anda. Tetapi sebelum menggunakan aplikasi tersebut, silahkan anda mendownload dulu Antivirus Smadavnya.

Download Smadav 10.1

silahkan klik link berikut untuk mendownload aplikasi generator SN pro smadav:

Download Generator

Membuat kalender PHP keren

2015-06-21T06:50:00.002-07:00

Pada saat ini saya akan memberikan Script PHP, HTML, dan CSS untuk membuat Kalendar PHP keren. Script PHP ini saya dapatkan dari suatu web yang lumayan terkenal, tapi saya edit lagi. Kalendar adalah suatu benda yang digunakan untuk melihat hari dan tanggal. Apabila ingin segera membuatnya Silahkan Download Full datanya di bawah ini.

Download Script PHP kalendar

Apabila tidak ingin mendownload, silahkan ikuti langkah-langkah berikut:

Copy script PHPnya di bawah ini, lalu kasih nama calendar.php
<?php
class Calendar {
public function __construct(){
$this->naviHref = htmlentities($_SERVER['PHP_SELF']);
}
/********************* PROPERTY ********************/
private $dayLabels = array("Mon","Tue","Wed","Thu","Fri","Sat","Sun");
private $currentYear=0;
private $currentMonth=0;
private $currentDay=0;
private $currentDate=null;
private $daysInMonth=0;
private $naviHref= null;
/********************* PUBLIC **********************/
/**
* print out the calendar
*/
public function show() {
$year = null;
$month = null;
if(null==$year&&isset($_GET['year'])){
$year = $_GET['year'];
}else if(null==$year){
$year = date("Y",time());
}
if(null==$month&&isset($_GET['month'])){
$month = $_GET['month'];
}else if(null==$month){
$month = date("m",time());
}
$this->currentYear=$year;
$this->currentMonth=$month;
$this->daysInMonth=$this->_daysInMonth($month,$year);
$content='<div id="calendar">'.
'<div class="box">'.
$this->_createNavi().
'</div>'.
'<div class="box-content">'.
'<ul class="label">'.$this->_createLabels().'</ul>';
$content.='<div class="clear"></div>';
$content.='<ul class="dates">';
$weeksInMonth = $this->_weeksInMonth($month,$year);
// Create weeks in a month
for( $i=0; $i<$weeksInMonth; $i++ ){
//Create days in a week
for($j=1;$j<=7;$j++){
$content.=$this->_showDay($i*7+$j);
}
}
$content.='</ul>';
$content.='<div class="clear"></div>';
$content.='</div>';
$content.='</div>';
return $content;
}
/********************* PRIVATE **********************/
/**
* create the li element for ul
*/
private function _showDay($cellNumber){
if($this->currentDay==0){
$firstDayOfTheWeek = date('N',strtotime($this->currentYear.'-'.$this->currentMonth.'-01'));
if(intval($cellNumber) == intval($firstDayOfTheWeek)){
$this->currentDay=1;
}
}
if( ($this->currentDay!=0)&&($this->currentDay<=$this->daysInMonth) ){
$this->currentDate = date('Y-m-d',strtotime($this->currentYear.'-'.$this->currentMonth.'-'.($this->currentDay)));
$cellContent = $this->currentDay;
$this->currentDay++;
}else{
$this->currentDate =null;
$cellContent=null;
}

return '<li id="li-'.$this->currentDate.'" class="'.($cellNumber%7==1?' start ':($cellNumber%7==0?' end ':' ')).
($cellContent==null?'mask':'').'">'.$cellContent.'</li>';
}
/**
* create navigation
*/
private function _createNavi(){
$nextMonth = $this->currentMonth==12?1:intval($this->currentMonth)+1;
$nextYear = $this->currentMonth==12?intval($this->currentYear)+1:$this->currentYear;
$preMonth = $this->currentMonth==1?12:intval($this->currentMonth)-1;
$preYear = $this->currentMonth==1?intval($this->currentYear)-1:$this->currentYear;
return
'<div class="header">'.
'<a class="prev" href="'.$this->naviHref.'?month='.sprintf('%02d',$preMonth).'&year='.$preYear.'">Prev</a>'.
'<span class="title">'.date('Y M',strtotime($this->currentYear.'-'.$this->currentMonth.'-1')).'</span>'.
'<a class="next" href="'.$this->naviHref.'?month='.sprintf("%02d", $nextMonth).'&year='.$nextYear.'">Next</a>'.
'</div>';
}
/**
* create calendar week labels
*/
private function _createLabels(){
$content='';
foreach($this->dayLabels as $index=>$label){
$content.='<li class="'.($label==6?'end title':'start title').' title">'.$label.'</li>';
}
return $content;
}

/**
* calculate number of weeks in a particular month
*/
private function _weeksInMonth($month=null,$year=null){
if( null==($year) ) {
$year = date("Y",time());
}
if(null==($month)) {
$month = date("m",time());
}
// find number of days in this month
$daysInMonths = $this->_daysInMonth($month,$year);
$numOfweeks = ($daysInMonths%7==0?0:1) + intval($daysInMonths/7);
$monthEndingDay= date('N',strtotime($year.'-'.$month.'-'.$daysInMonths));
$monthStartDay = date('N',strtotime($year.'-'.$month.'-01'));
if($monthEndingDay<$monthStartDay){
$numOfweeks++;
}
return $numOfweeks;
}
/**
* calculate number of days in a particular month
*/
private function _daysInMonth($month=null,$year=null){
if(null==($year))
$year = date("Y",time());
if(null==($month))
$month = date("m",time());
return date('t',strtotime($year.'-'.$month.'-01'));
}
}
Selanjutnya buat Script Css-nya(untuk tampilan), Silahkan copy scriptnya di bawah ini. lalu kasih nama calendar.css
/*******************************Calendar Top Navigation*********************************/
div#calendar{
margin:0px auto;
padding:0px;
width: 602px;
font-family:Helvetica, "Times New Roman", Times, serif;
}
div#calendar div.box{
position:relative;
top:0px;
left:0px;
width:100%;
height:40px;
background-color: green ;
}
div#calendar div.header{
line-height:40px;
vertical-align:middle;
position:absolute;
left:11px;
top:0px;
width:582px;
height:40px;
text-align:center;
}
div#calendar div.header a.prev,div#calendar div.header a.next{
position:absolute;
top:0px;
height: 17px;
display:block;
cursor:pointer;
text-decoration:none;
color:#FFF;
}
div#calendar div.header span.title{
color:#FFF;
font-size:18px;
}

div#calendar div.header a.prev{
left:0px;
}
div#calendar div.header a.next{
right:0px;
}

/*******************************Calendar Content Cells*********************************/
div#calendar div.box-content{
border:1px solid #787878 ;
border-top:none;
}

div#calendar ul.label{
float:left;
margin: 0px;
padding: 0px;
margin-top:5px;
margin-left: 5px;
}
div#calendar ul.label li{
margin:0px;
padding:0px;
margin-right:5px;
float:left;
list-style-type:none;
width:80px;
height:40px;
line-height:40px;
vertical-align:middle;
text-align:center;
color:Green;
font-size: 15px;
background-color: transparent;
}

div#calendar ul.dates{
float:left;
margin: 0px;
padding: 0px;
margin-left: 5px;
margin-bottom: 5px;
}
/** overall width = width+padding-right**/
div#calendar ul.dates li{
margin:0px;
padding:0px;
margin-right:5px;
margin-top: 5px;
line-height:80px;
vertical-align:middle;
float:left;
list-style-type:none;
width:80px;
height:80px;
font-size:25px;
background-color: lightgreen;
color:#000;
text-align:center;
}
:focus{
outline:none;
}
div.clear{
clear:both;
}
Setelah itu Copy script di bawah ini, lalu beri nama index.php
<html>
<head>
<link href="calendar.css" type="text/css" rel="stylesheet" />
</head>
<body>
<?php
include 'calendar.php';
$calendar = new Calendar();
echo $calendar->show();
?>
</body>
</html>

8 cara mempercepat komputer atau laptop yang lambat

2015-06-21T06:39:00.001-07:00

Laptop yang lambat atau yang biasa anda bilang lemot merupakan suatu kendala yang sering dialami oleh komputer atau laptop anda.

Kemarin saya buat artikel mengenai Penyebab koneksi internet bermasalah dan cara mengatasinya dengan aplikasi dan manual. Lalu pada kali ini, saya membagikan 8 cara mempercepat komputer atau laptop yang lambat, jika anda bisa memang membutuhkan cara ini silahkan baca di bawah ini :

Membersihkan semua Icon pada Desktop anda. Semua icon Desktop harus dibersihkan, kecuali yang bersifat tidak dapat dihapus seperti Recycle bin.Anda bisa menghidden-nya.
Membersihkan Recent Document Recent document ialah tempat dimana terdapat shortcut-shorcut yang berisi data masa lampua yang sering anda buka. Cara membersihkannya, pertama anda tampilan file Hidden dengan cara cari Folder option, lalu klik view, selanjutnya anda pilih Show idden files and folder, lalu anda klik apply dan OK.
Jangan meletakkan file-file pada Drive C. Hal itu dapat menjadikan Drive system/C menjadi berat atau penuh Jadi jika anda meletakkan file-file di disk C, sebaiknya anda pindahkan pada drive lain.
Membersihkan sampah registry, uninstall, chace, history, dll menggunakan aplikasi CCleaner. Sebenarnya ada banyak banya aplikasi yang digunakan untuk utilities atau untuk mengoptimalkan komputer anda. Saya menyarankan CCleaner karena bersifat ringan, mempunyai fitur yang lengkap, dan bisa diandalkan.
Menghilangkan/uninstall program-program yang tidak berguna/yang jarang anda gunakan. Hal ini perlu dilakukan untuk memberkan ruang pada drive C (System). Karena apabila drive C ini penuh, maka bisa menyebabkan laptop anda lambat/lemot.
Sesuaikan windows yang cocok untuk laptop anda. Maksudnya windows yang cocok adalah yang sesuai dengan kemampuan laptop anda. Apabila laptop anda mempunyai spek yang rendah, sebaiknya anda menggunakan windows 7 ataupun windows XP.
Mengoptimalkan startup menggunakan MSCONFIG
- Untuk membukanya, klik start >> run >> ketik msconfig >> lalu Enter.
- Setelah itu anda klik bagian Startup, lalu anda hilangkan centang pada program-program yang menurut anda tidak berguna atau jarang anda gunakan dan saya sarankan, jangan hilangkan centang pada drive C:WINDOWS.
- Setelah itu anda apply, lalu klik restart.
- Setelah anda restart, akan ada tampilan yang keluar pada Desktop anda. Lalu anda centang dan klik OK.
Mengoptimalkan Performance windows anda Cara nya,

Klik kanan pada icon komputer lalu klik Properties.
Cari system properties lalu klik
Buka bagian Advance, lalu klik setting.

Lalu anda hilangkan centang pada fitur-fitur yang menurut anda tidak berguna. Seperti contoh di bawah ini:

Itulah 8 cara untuk mempercepat komputer atau laptop yang lambat, jika ada yang inigin anda tanyakan mengenai artikel diatas silahkan komentar di bawah.

Cara menampilkan penghasilan atau earning pada blogger 2015

2015-06-19T08:06:00.002-07:00

Penghasilan atau earning digunakan untuk daftar google adsense yang dapat menghasilkan uang untuk blog anda. Biasanya fasilitas ini tidak tampil saat kita membuka blogger, karena ada beberapa pengaturan yang harus diatur terlebih dahulu untuk menampilkan penghasilan atau earning tersebut pada blogger anda.

Untuk postingan kali ini saya akan membagikan tutorial blog mengenai Cara menampilkan penghasilan atau earning pada blogger 2015. Silahkan ikuti beberapa step dibawah ini untuk dapat menampilkannya.

Pertama-tama masuk ke akun blogger anda.
Selanjutnya buka Setelan (dibawah sendiri).

Klik Bahasa dan pemformatan
Ubah bahasa dari Bahasa Indonesia menjadi bahasa English(Amerika serikat)

Simpan Setelan
Reload page anda.

Tetapi untuk dapat dapat menggunakan Penghasilan tersebut, blog anda harus berumur kurang lebih 3-4 bulan. Setelah itu anda dapat mendaftarkan blog anda pada google andsense. Tetapi google ansense tidak dengan mudah menerima Blog anda.

Penyebab koneksi internet bermasalah dan cara mengatasinya dengan aplikasi dan manual

2015-06-19T07:53:00.001-07:00

Permasalahan atau troubleshooting pada jaringan lan atau wifi biasanya dapat mengakibatkan tidak tersambungnya internet atau jaringan pada komputer/laptop. Hal itu bisa disebakan oleh beberapa faktor diantaranya, DNS not responding/problem, Pengaturan IP yang kurang benar, File host yang error, koneksi yang tiba-tiba terputus, ataupun yang lainnya yang dapat mempengaruhi/menggangu koneksi pada jarngan komputer anda. Pada postingan kali ini saya akan membagikan informasi mengenai Penyebab koneksi internet bermasalah dan cara mengatasinya dengan aplikasi dan manual

Aplikasi repair network connection

Aplikasi ini saya dapat secara tidak sengaja pada file Iso Hiren Boot CD yang saya punya . Aplikasi ini mempunyai banyak pilihan yang dapat anda gunakan untuk memperbaiki koneksi jaringan anda. Dan juga ukuran aplikasi ini pun sangat kecil, karena bersifat portable/tidak perlu diinstall. Oleh karena itu jika anda memang sering mempunyai masalah dengan jaringan anda, silahkan download aja aplikasi ini(gratis).

Download aplikasi

Cara manual perbaiki koneksi jaringan

Dalam memperbaiki koneksi anda, ada beberapa cara yang dapat anda gunakan. Hal ni bisa digunakan bila aplikasi diatas tidak dapat membantu. Dan cara di bawah ini saya pernah mencobanya dan hasilnya ada yang bekerja dan juga ada yang tidak bekerja. Silahkan lakukan cara2 di bawah ini :

Troubleshoot network.
Atau bisa juga mematikan(disable) network adapter yang anda gunakan lalu mengaktifkannya kembali(enable).
Apabila DNS not responding, anda dapat membuka CMD lalu ketikkan ipconfig/flushdns lalu Enter
Cek pada kabel apakah sudah tertancap dengan benar(apabila jaringan LAN), jika kabel LAN sudak rusak silahkan dibuat lagi.
Biasanya jaringan tidak dapat teroneksi apabila tersambung 2 adapter yang aktif. Jadi apabila terkoneksi pada jaringan wifi maka jangan dikoneksikan pada jairngan lan ataupun sebaliknya.
Atur/set kembali IP pada network adapter(LAN), pastikan subnetnya dengan benar dan juga pada network adapter(Wifi), pastikan di-set secara Otomatis.
Restart komputer anda, biasanya hal ini bisa berhasil.

Apabila sudah dilakukan cara diatas dan ternyata masih belum berhasil berarti ada kemungkinan2 lain yang dapat menjadi koneksi internet anda terputus atau bermasalah.:

Server jaringan yang sedang error (Biasanya router jaringan, atau settingan router jaringan yang rusak atau error)
Limited/terbatas (Suatu jaringan pasti mempunyai batas host/pengguna yang tersedia)
Kabel lan bermasalah (Cek dengan cara ping IP router, apabila tidak tersambung maka permasalahannya disitu)
Network adapter anda rusak
Driver network adapter belum ter-install atau belum update.
Ataupun browser anda yang sedang bermasalah(belum update)

cara menggerakkan text pada HTML atau web

2015-06-19T07:22:00.001-07:00

Pada postingan kali ini saya akan membahas bagaimana cara menggerakkan text pada HTML atau web. Biasanya text berjalan ini digunakan untuk sambutan(welcome), Pengumuman, ataupun hiasan pada suatu web.

Bagaimana cara menggerakkan text pada HTML :

1. Dasar :

Menggunakan perintah HTML "MARQUEE" seperti contoh :

<marquee>Cara buat text berjalan</marquee>

Cara buat text berjalan

2. Penambahan hiasan/Style :

Pemberian warna pada area sekitar text :

<marquee bgcolor="#0066FF">Cara buat text berjalan</marquee>

Cara buat text berjalan

Merubah arah gerak :

Kanan : <marquee direction="right" >Cara buat text berjalan</marquee>

Cara buat text berjalan

Kiri : <marquee direction="left" >Cara buat text berjalan</marquee>

Cara buat text berjalan

Atas : <marquee direction="up" >Cara buat text berjalan</marquee>

Cara buat text berjalan

bawah : <marquee direction="down" >Cara buat text berjalan</marquee> Cara buat text berjalan

Disisipi kode lain, seperti tabel :

<table border="10"><tr><td><marquee>Cara buat text berjalan</marquee></td></tr></table>

Cara buat text berjalan

Berbagai macam dan jenis tang disertai fungsi masing masing tang

2015-05-26T07:44:00.001-07:00

Tang Cucut

Bentuk tang ini moncong pipih, panjang, dan berbentuk gergaji. Sebab itu, tang ini dikenal sebagai “tang cucut”.

Berfungsi sebagai penjepit kawat atau kabel. Namun Anda dapat memanfaatkan bagian dalam rahang yang tajam sebagai pemotong kabel. Berbahan besi chrome vanadium dengan gagang plastik lapis karet agar tidak licin. Kelemahannya, gagang plastik mudah pecah.

Tang Kombinasi

Ujung rahang yang bergerigi rapat, untuk menjepit kawat atau kabel. Di tengahnya, bagian yang bergerigi renggang, untuk mengunci mur.

Rahang tajam sebagai pemotong kawat dan kabel. Berbahan besi chrome vanadium. Gagangnya plastik lapis karet, agar tidak licin. Kelemahannya, jika celah antarrahang berkarat akan berakibat macet.

Tang Kakatua

Dikenal sebagai “tang kakatua” karena bentuknya mirip paruh burung kakatua. Fungsinya sebagai pemotong kawat dan kabel.

Tang ini terbuat dari baja dan bergagang lapis karet untuk menjaga agar tak licin ketika digunakan. Kelemahannya, jika tang digunakan untuk memotong bahan yang tebal dan keras dapat menjadi tumpul.

Tang Buaya

Sekilas bentuknya mirip buaya: moncongnya besar, lebar, dan bergerigi. Maka tang ini dikenal dengan sebutan “tang buaya”. Rahangnya yang bergerigi untuk mengunci dan melepas baut. Jika ukuran baut besar, tang dapat diatur sesuai ukuran baut. Carannya, lebarkan kedua tungkai, lalu kunci dengan sekrup pengatur sekaligus pengunci yang ada di ujung atas tungkai. Jika ingin mengubahnya lagi, Anda cukup melepaskan tuas di bagian tungkai bawah.

Kelemahannya, sekrup pengatur dan pengunci agak keras. Ini karena drat mur dan baut terlampau dalam.

Tang Multifungsi

Mirip dengan tang kombinasi: ada rahang sebagai pemotong dan penjepit. Yang beda, tang ini memiliki kelengkapan fungsi lain.

Di gagang tang ini terdapat berbagai macam alat pisau, gergaji, obeng, pembuka tutup botol, dan pembuka tutup makanan kaleng. Jadi, satu tang ini memiliki banyak kegunaan. Kelemahannya, bagian kelengkapan di gagang mudah kendur atau patah.

Tang Sudut

Moncong rahang memiliki sudut kemiringan 45derajat. Ini untuk menjepit kawat dan kabel yang sulit dijangkau, seperti di kolong meja. Berbahan chrome vanadium. Gagangnya dilapis karet.

Kelemahannya, hanya cocok untuk bagian dengan sudut kemiringan 45derajat.

Pengertian, macam macam, dan fungsi masing - masing peripheral

2015-05-26T06:54:00.001-07:00

PENGENALAN Atau PENGERTIAN

Peripheral komputer merupakan peralatan tambahan komputer yang dibutuhkan untuk keperluan – keperluan lain yang masih berhubungan dengan aktifitas komputer sebagai contoh : Printer, Scanner, Modem, dll.

Dalam memulai penggunaan peripheral tersebut ada hal – hal yang harus dilakukan, seperti peng-installan peripheral tersebut agar dapat terkoneksi atau terhubung dengan komputer. Dalam melakukan penginstallan itu kita harus menyediakan Driver Peripheral yang akan digunakan dan juga disertai pemasangan peripheral secara baik dan benar.

MACAM – MACAM

Peripheral mempunyai banyak macam, tetapi pada penjelasan kali ini saya hanya membahas beberapa saja. Berikut ini macamnya :

Printer

Printer adalah suatu alat yang dapat digunakan untuk mencetak keluaran dari proses yang dilakukan oleh komputer baik tulisan maupun grafik/gambar, biasnaya menggunakan media kertas ataupun yang lainnya.

Printer mempunyai 3 jenis :

Printer Dot matrix, ialah printer yang menggunakan semacam pita sebagai alat pencetaknya.
Printer Ink Jet, ialah printer yang menggunakan tinta sebagai alat percetaknya
Printer Laser Jet, ialah printer yang menggunakan serbuk sebagai alat percetaknya

Scanner

Scanner merupakan suatu alat elektronik yang fungsinya mirip dengan mesin fotokopi. Yaitu memindai gambar dan text. Tetapi saat ini jenis peripheral yang satu sudah digabungkan dengan printer (Ink Jet) seperti Printer jenis Brother.

Modem

Modem adalah salah satu perangkat komputer yang digunakan sebagai perantara komputer dengan saluran telphone agar dapat terhubung dengan Internet Service Provider (ISP) dan dapat menjalankan internet.

Modem terdiri atas dua macam, yaitu modem internal dan modem external.

Modem internal yaitu modem yang pasang di dalam motherboard dalam bentuk kartu. Teknik pemasangannya sama seperti kartu – kartu lain pada umumnya.
Modem external adalah yang dapat dipasang dan dilepas sewaktu – waktu. Karena pemasangan modem hanya tinggal menancapkan konektor yang telah disediakan biasanya yang sering digunakan adalah port USB

Perkembangan sistem operasi windows dari awal sampai sekarang tahun 2016

2015-05-24T07:04:00.002-07:00

Sistem operasi yang berbasis Windows, yang sering digunakan pada tahun 2015 ini merupakan suatu perkembangan dari Sistem operasi yang berbasis DOS. Dibawah ini merupakan perkembangan Windows yang dimulai dari Sistem Operasi berbasis DOS :

Q-DOS

Sebuah Tim Paterson dari Seattle Computer menulis QDOS ( Quick and Dirty Operating Sytem ) yang dibuat dari OS terkenal pada masa itu, CP/M. kemudian QDOS dipasarkan oleh Seatle Computer dangan nama 86-DOS karena dirancang untuk prosesor Intel 8086. Kemudian Bill Gates dari perusahaan Windows membeli lisensi QDOS dan menjualnya keberbagai perusahaan computer di seluruh dunia. Dan itu memulai perkembangan system operasi windows

PC DOS

Kemudian pada tahun 1981 sebuah perusahaan yang bernama IBM meluncurkan PC DOS yang dibeli dari Microsoft untuk computer yang berbasis prosesor Intel 8086.

MS DOS

Kemudian ditahun yang sama yakni 1981 perusahaan Microsoft juga meluncurkan OS menggunakan nama MS DOS untuk OS yang dijual diluar perusahaan diluar IBM.

MS DOS 2.0

Pada tahun 1983 perusahan Microsoft mengeluarkan versi terbaru dari MS DOS yakni MS DOS versi 2.0 diluncurkan pada computer PC XT.

Macintosh dan MS DOS

Pada tahun 1984 perusahaan Apple meluncurkan Macintosh , dengan OS yang diturunkan dari BSD UNIX system 1.0 merupakan system operasi pertama yang telah berbasis grafish dan menggunakan mouse. Dengan peluncuran Macintosh oleh Apple, perusahaan Microsoft tidak mau kalah. Microsoft kembali meluncurkan MS DOS dengan versi terbarunya yakni versi 3.0 untuk PC AT yang menggunakan chip Intel 80286 dan mulai mendukung penggunaan hard disk lebih dari 10MB. Setelah beberapa bulan Microsoft kembali membuat versi terbaru dari MS DOS dengan versi 3.1 yang memberikan dukungan untuk jaringan.

Windows 1.0

Seiring berkembangnya zaman, perusahaan Microsoft memperkenalkan Microsoft Windows yang dirilis pada tanggal 20 November 1985. Versi ini memiliki banyak kekurangan dalam beberapa fungsionalitas, sehingga kurang populer di pasaran. Pada awalnya Windows versi 1.0 ini hendaknya dinamakan dengan interface manager. Akan tetapi Rowland Hanson, kepala bagian pemasaran di Microsoft bahwa nama Windows akan lebih memikat konsumen. Windows 1.0 adalah system operasi perluasan kemampuan dari MS DOS dengan tambahan antar muka grafis. Selain itu Windows juga memiliki masalah dan kelemahan yang sama yang dimiliki oleh MS DOS.

MS DOS 3.2

Pada tahun 1986 perusahaan Microsoft kembali meluncurkan MS DOS dengan versi 3.2 yang menambahkan dukungan untuk floppy 3.5 inch 720 KB.

OS/2, MS DOS 3.3, Windows 2.0 dan MINIX

Kemudian pada tahun 1987 IBM kembali melluncurkan OS/2 yang telah berbasis grafis, sebagai calon pengganti PC DOS. Kemudian perusahaan Microsoft meluncurkan 2 sistem operasi yang pertama adalah MS DOS dengan seri 3.3 yang merupakan versi paling popular dari versi sebelumnya. Dan yang kedua adalah Windows versi 2 yang muncul pada tanggal 9 Desember 1987, dan menjadi sedikit lebih popular dibandingkan pendahulunya. Sebagian popularitasnya didapat karena kedekatannya dengan aplikasi grafis buatan Microsoft yakni Microsoft Exel dan Word for Windows.

Windows 2.1

Selanjutnya, dua versi baru dirilis yakni Windows/286 2.1 dan Windows/386 2.1. seperti halnya versi Windows sebelumnya, Windows/286 menggunakan memory modus real, tetapi merupakan versi yang pertama yang mendukung High Memoty Area (HMA). Windows/386 2.1 memiliki kernel yang berjalan pada modus terproteksi dengan emulasi Expanded memory Specifikation (EMS) Standar Lotus Intel Microsoft (LIM), Pendahulu spesifikasi Extended Memory Specification (XMS). Yang kemudian pada akhirnya topologi komputasi di dalam IBM PC. Semua aplikasi Windows dan berbasis DOS saat itu memang berjalan dalam modus real, yang berjalan di atas kernel modus terproteksi dengan menggunakan modus Virtual 8086, yang merupakan fitur baru yang dimiliki oleh Intel 80386.

Windows 3.0

Pada tahun 1990 Microsoft Kembali merilis Microsoft Windows dengan versi 3.0 yang mencapai kesuksesan yang sangat signifikan. Windows 3.0 dapat berjalan pada tiga modus real, modus standar, modus 386 Enhanced, dan kompatibel dengan prosesor-prosesor keluarga Intel dari Intel 8086/8088, 80286, hingga 80386.

OS/2

Pada tahun 1991 seorang mahasiswa Helsinkli bernama Linus Torvalds mengembangkan OS berbasis Unix dari sistem operasi Minix yang diberi nama Linux. Dan Microsoft meluncurkan MS DOS 5.0 dengan penambahan fasilitas fullscreen editor, undelete, unformat dan Qbasic.

Windows 3.1

Microsoft mengembangkan Windows 3.1, yang menawarkan beberapa peningkatan minor terhadap Windows 3.0 (seperti halnya kemampuan untuk menampilkan font TrueType Fonts, yang dikembangkan secara bersama-sama dengan Apple), dan juga terdapat di dalamnya banyak sekali perbaikan terhadap bug dan dukungan terhadap multimedia. Versi 3.1 juga menghilangkan dukungan untuk modus real, sehingga hanya berjalan pada modus terproteksi yang hanya dimiliki oleh mikroprosesor Intel 80286 atau yang lebih tinggi lagi. Microsoft pun pada akhirnya merilis Windows 3.11, yang merupakan versi Windows 3.1 yang mencakup semua tambalan dan perbaikan yang dirilis setelah Windows 3.1 diluncurkan pada tahun 1992.

Kira-kira pada waktu yang sama, Microsoft merilis Microsoft Windows for Workgroups, yang tersedia baik sebagai tambahan untuk Windows 3.1 dan sebagai sebuah versi yang tercakup di dalamnya lingkungan dasar Windows dan tambahan kemampuan jaringan di dalam sebuah paket. Windows for Workgroups mencakup driver jaringan komputer dan stack protokol yang lebih baik, dan juga mendukung jaringan secara peer-to-peer.

Windows 95

Setelah Windows 3.11, Microsoft memulai pengembangan sebuah versi Windows yang berorientasi kepada pengguna yang diberi nama kode Chicago. Chicago didesain agar mmeiliki dukungan terhadap multitasking secara pre-emptive 32-bit seperti halnya yang terdapat di dalam OS/2 dan Windows NT.

Windows NT 4.0

Pada tahun 1996 Windows kembali merilis Windows NT 4.0, sebagai penerus Windows NT 3.0 yang sukses mengancam dominasi Novell Netware dan UNIX dipasaran. Windows NT 4.0 datang dalam 4 versi :

Windows NT 4.0 Workstation
Windows NT 4.0 server
Windows NT 4.0 server, Enterprise Edition
Windows NT 4.0 Terminal Server
Mac OS

Untuk pertama kalinya perusahaan Apple memperkenalkan penggunaan nama Mac OS pada Mac OS 7.6.
Windows 98
Pada 25 Juni 1998, Microsoft merilis sebuah sistem operasi Windows baru, yang dikenal sebagai Windows 98. Windows 98 dianggap sebagai revisi minor terhadap Windows 95, tapi secara umum dilihat jauh lebih stabil dan dapat diandalkan dibandingkan dengan pendahulunya, Windows 95. Windows 98 mencakup banyak driver perangkat keras baru dan dukungan sistem berkas FAT32 yang lebih baik yang mengizinkan partisi untuk memiliki kapasitas lebih besar dari 2 gigabyte, sebuah batasan yang terdapat di dalam Windows 95. Dukungan USB di dalam Windows 98 pun juga jauh lebih baik dibandingkan dengan pendahulunya.
Dengan kehadiran Windows 98 mengundang banyak kontriversi saat Microsoft memasukkan penjelajah web Microsoft Internet Explorer ke dalam sistem operasi dan tidak dapat dicabut, sehingga menjadikan Windows Explorer dan GUI Windows mampu menampilkan direktori seolah-olah halaman web.

Windows 2000

Microsoft merilis Windows 2000 pada 17 Februari 2000, sebuah versi yang sebelumnya dikenal dengan sebutan Windows NT 5.0 atau “NT 5.0″. Versi Windows 2000 ditujukan untuk dua pangsa pasar, yakni pangsa pasar workstation dan juga pangsa pasar server. Meskipun Windows 2000 dapat memperbarui komputer yang sebelumnya menjalankan Windows 98, Windows 2000 tidaklah dianggap sebagai produk yang cocok untuk pengguna rumahan. Alasannya banyak, di antaranya adalah kurangnya device driver untuk banyak perangkat pengguna seperti pemindai (scanner) dan juga pencetak (printer), pada saat dirilis.

Windows ME

Ditahun yang sama pada bulan September setelah Microsoft mengeluarkan Windows 2000, Windows kembali memperkenalkan Windows ME ( Millenium Edition ). Versi ini memperbarui Windows 98 dengan dukungan multimedia dan Internet yang lebih baik. Versi ini juga memasukkan fitur “System Restore,” yang mengizinkan para penggunanya untuk mengembalikan keadaan sistem ke sebuah titik yang dikenal baik-baik saja, pada saat sistem operasi mengalami kegagalan. Versi ini juga memperkenalkan Windows Movie Maker versi pertama.

Windows XP

Pada tahun 2001, Microsoft memperkenalkan Windows XP (yang memiliki nama kode “Whistler” selama pengembangan. Akhirnya, setelah merilis beberapa versi Windows berbasis Windows 9x dan NT, Microsoft berhasil menyatukan kedua jajaran produk tersebut. Windows XP menggunakan kernel Windows NT 5.1, sehingga menjadikan kernel Windows NT yang terkenal dengan kestabilannya memasuki pasar konsumen rumahan, untuk menggantikan produk Windows 9x yang berbasis 16/32-bit yang sudah menua. Dari tahun 2001 sampai dengan tahun 2006 Microsoft mengeluarkan versi-versi terbaru dari Microsoft Windows yang sesuai dengan kegunaan dan fungsinya mulai dari :

Windows XP Home Edition
Windows XP Home Edition N
Windows XP Professional
Windows XP Professional N
Windows XP Media Center Edition (MCE)
Windows XP Tablet PC Edition
Windows XP Embedded
Windows XP Starter Edition
Windows XP Professional x64 Edition
Windows XP 64-bit Edition
Windows Vista

Setelah meraih kesuksesan yang besar dan cukup lama dengan mengeluarkan product-product Windows dengan berbagai versi dati tahun ketahun, Microsoft tidak berhenti begitu saja mengembangkan Windows. Pada tanggal 30 januari 2007 Microsoft kembali meluncurkan Windows Vista. Windows Vista memperkenalkan fitur 3D Desktop dengan Aero Glass, SlideBar, dan Flip 3D. Sayangnya semua keindahan ini harus dibayar mahal dengan kebutuhan spesifikasi komputer yang sangat tinggi

Windows 7

Windows 7 (sebelumnya berkodekan Blackcomb atau Vienna) merupakan versi terbaru Microsoft Windows yang akan menggantikan Windows Vista. Microsoft mengumumkan bahwa pengembangan Windows 7 akan berjalan dalam tiga tahun. Versi klien dari Windows 7 akan dirilis dalam versi 32-bit dan 64-bit walaupun versi servernya (yang akan menggantikan Windows Server 2008) akan dirilis hanya dalam versi 64-bit, yang akan dinamakan Windows Server 2008 R2. Komputer akan memberitahu jika terjadi perubahan pada komputer tersebut. Windows 7 diluncurkan pada tanggal 22 Oktober 2009. Setiap pengguna akan mendapat perlindungan 3 lapis jika ada permintaan mengunduh file dari yang tak dikenal. Windows 7 didesain dengan fitur baru dan peningkatan performa dari Windows Vista

Windows 8

Microsoft secara resmi mengumumkan jadwal perilisan sistem operasi terbaru, Windows 8 pada 26 Oktober 2012, bersamaan dengan peluncuran komputer perdana yang menggunakan Windows 8.

Windows 8 adalah nama dari versi terbaru Microsoft Windows, serangkaian sistem operasi yang diproduksi oleh Microsoft untuk digunakan pada komputer pribadi, termasuk komputer rumah dan bisnis, laptop, netbook, tablet PC, server, dan PC pusat media.[3] Sistem operasi ini menggunakan mikroprosesor ARM selain mikroprosesor x86 tradisional buatan Intel dan AMD. Antarmuka penggunanya diubah agar mampu digunakan pada peralatan layar sentuh selain mouse dan keyboard, sehingga Windows 8 di desain untuk perangkat tablet sentuh.

Windows 8.1

Windows 8.1 merupakan system operasi yang sama atau satu paket dengan sistem operasi Windows 8 dan RT. Pertama kali diperkenalkan dan dirilis sebagai beta publik pada bulan Juni 2013, Windows 8.1 dirilis untuk manufaktur pada tanggal 27 Agustus 2013, dan mencapai ketersediaan umum pada tanggal 17 Oktober 2013, hampir setahun setelah rilis ritel dari pendahulunya. Windows 8.1 tersedia gratis untuk pengguna salinan ritel Windows 8 dan Windows RT melalui Bursa Windows.

Windows 10

merupakan versi dari sistem operasi Microsoft Windows yang mulai perkenalkan pada tanggal 30 September 2014, dan dirilis pada akhir tahun 2015.

Pertama diperkenalkan pada bulan April 2014 pada Konferensi Build, Windows 10 bertujuan untuk mengatasi kekurangan dalam antarmuka pengguna pertama kali diperkenalkan oleh Windows 8 dengan menambahkan mekanik tambahan yang dirancang untuk meningkatkan pengalaman pengguna untuk perangkat yang tidak ada layar sentuh (seperti komputer meja dan laptop),

Cara Konfigurasi Samba pada Ubuntu server 10.04

2015-05-23T06:21:00.003-07:00

Samba merupakan suatu program yang bersifat open source seperti Ubuntu server yang menyediakan suatu layanan berbagi berkas atau file dan bahkan Printer.

Saat ini saya akan membagikan Cara Konfigurasi Samba pada Ubuntu server 10.04

Tonton Video ini untuk penjelasan yang lebih jelas :

Masukan cd master ubuntu

Ketik = apt-cdrom add
Ketik = mount /dev/cdrom /cdrom
Install paket = apt-get install samba

Buat folder untuk sharing = mkdir share
Beri hak akses = chmod 755 share
Konfigurasi samba
untuk anonymous/tanpa harus login

pada bagian # # # Authentication # # #
# security = user diubah jadi security = share
tambahkan tepat di bawah # # # share definitions # # # lihat gambar di bawah :

Untuk security/harus login

pada bagian # # # Authentication # # #
# security = user tetap jadi security = user
tambahkan tepat di bawah # # # share definitions # # #

Path adalah tempat folder yang akan di share
Browseable adalah hak akses untuk memasuki folder yang dishare
Writeable adalah hak akses untuk mengcopy data dari server ubuntu itu, dan mengcopykan data ke server ubuntu tersebut
Guest ok = sama dengan browseable
User: buat user sendiri, bukan root.
Folder: chown nama_folder nama_user (gunakan perintah tersebut untuk menyesuaikan folder dengan user). ex: folder "share" hanya bisa dimasuki oleh user "fendi".

Kemudian simpan = Ctrl X - Y - Enter
Restart = /etc/init.d/smbd restart
Test samba ketik = testparm
Cek di komputer client dengan cara

ketik = "\\IP server" di pencarian explorer windows
atau cari pada Network

Cara Konfigurasi DNS Server pada Ubuntu Server 10.04

2015-05-21T06:48:00.000-07:00

Domain Name System atau yang sering kita sebut dengan DNS adalah sebuah sistem yang menyimpan informasi tentang nama domain dalam bentuk database di dalam sebuah jaringan komputer.

Untuk postingan kali ini saya akan menjelaskan Cara Konfigurasi DNS Server pada Ubuntu Server 10.04

Tonton Video ini untuk lebih jelas :

Masukan cd master ubuntu
- Ketik = apt-cdrom add
- Ketik = mount /dev/cdrom /cdrom
- Install paket = apt-get install bind9

Masuk ke folder = /etc/bind

Konfigurasi file : named.conf.local, db.local, db.127, resolv.conf

konfigurasi named.conf.local lihat gambar di bawah :

fendi.edu adalah nama domain yang anda buat
100.168.192 adalah 3 digit angka pada IP server (IP server tutorial ini adalah 192.168.100.2)
"/etc/bind/db.local" adalah tempat penyimpanan File yang berisi pengaturan nama domain
"/etc/bind/db.127" adalah tempat penyimpanan File yang berisi pengaturan IP domain
konfigurasi db.local lihat gambar di bawah

Serial diisi terserah
Ketik semuanya seperti pada gambar diatas Kecuali IP server yang anda atur pada Interfaces dan Nama domain yang sudah anda Set di file "named.conf.local"
konfigurasi db.127 lihat gambar di bawah

Isi seperti gambar diatas Kecuali nama domain yang telah anda set dan Angka 2(angka terakhir pada alamat IP server yang telah anda atur pada interfaces)
Buat file resolv.conf di folder = /etc, kemudian isi dengan, lihat gambar di bawah :

search .... [nama domain]
nameserver ...[IP domain]
Restart dengan cara /etc/init.d/bind9 restart atau service bind9 restart
- Uji dengan cara :
- ketik nslookup www.domain/domain
- nslookup IP server
- ping www.domain/domain
- ping IP server

Atur DHCP-server dan ganti Domain default pada dhcp-server menjadi sama dengan Domain yang telah dibuat tadi

Buka browser di pc client ,ketik di pencarian IP server atau nama domain

Selesai

Cara membuat form login dan logout php dengan database mysql

2015-05-11T07:33:00.002-07:00

Form Login dan Logout biasanya dibuat untuk sign in atau masuk kedalam suatu lokasi yang bersifat khusus yang tidak semua pengguna bisa masuk ke dalamnya, contoh yang sering kita jumpai yaitu Facebook, twitter, google, dll.

Kali in saya akan membagikan tutorial Cara membuat form login dan logout php dengan database mysql. Script login PHP kali ini harus dikoneksikan pada database (MYsql, PHPmyadmin, dll).

Silahkan ikuti langkah-langkah berikut ini :

Membuat koneksi database dan membuat username serta password login (langkah 5)

Buat database dengan nama "form"
Buat table pada database tersebut dengan nama "login" dan jumlah coloum "2"
Masukkan data-data seperti pada gambar di bawah ini. Lalu klik save
Buka table yang sudah di buat tadi
Klik "SQL >> INSERT" untuk menambah username dan password yang digunakan untuk login di web setelah selesai ("login" untuk username dan " form" untuk password). Perhatikan gambar berikut . Klik "GO"
Lalu cek pada "Browse" dan lihat, apakah username dan password sudah berhasil dibuat

Membuat form login

Pertama-tama buat koneksi ke database "form" yang sudah dibuat
Copy script dibawah ini dan simpan dengan nama "connect.php" :

<?php
$connection = mysql_connect('localhost', 'root', '');
if (!$connection){
die("Database Connection Failed" . mysql_error());
}
$select_db = mysql_select_db('form');
if (!$select_db){
die("Database Selection Failed" . mysql_error());
}

Kata yang bercetak tebal adalah nama database yang sudah dibuat tadi
Kedua buat halaman login
Copy script dibawah ini dan simpan dengan nama "login.php":

<?php //Start the Session
session_start();
require('connect.php');
//3. If the form is submitted or not.
//3.1 If the form is submitted
if (isset($_POST['username']) and isset($_POST['password'])){
//3.1.1 Assigning posted values to variables.
$username = $_POST['username'];
$password = $_POST['password'];
//3.1.2 Checking the values are existing in the database or not
$query = "SELECT * FROM `login` WHERE username='$username' and password='$password'";
$result = mysql_query($query) or die(mysql_error());
$count = mysql_num_rows($result);
//3.1.2 If the posted values are equal to the database values, then session will be created for the user.
if ($count == 1){
$_SESSION['username'] = $username;
}else{
//3.1.3 If the login credentials doesn't match, he will be shown with an error message.
echo "Invalid Login Credentials.";
}
}
//3.1.4 if the user is logged in Greets the user with message
if (isset($_SESSION['username'])){
$username = $_SESSION['username'];
echo "Hai " . $username . "
";
echo "This is the Members Area
";
echo "<a href='logout.php'>Logout</a>";
}else{
//3.2 When the user visits the page first time, simple login form will be displayed.
?>
<!DOCTYPE html>
<head>
<style type="text/css">
.register-form{
width: 400px;
margin: 0 auto;
text-align: center;
padding: 10px;
color: #fff;
background : orange;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.register-btn{
width: 70px;
margin: 0 auto;
text-align: center;
padding: 10px;
color: #fff;
cursor:pointer;
background : orange;
border-radius: 10px;
}
</style>
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="register-form">
<?php
if(isset($msg) & !empty($msg)){
echo $msg;
}
?>
<h1>Login</h1>
<form action="" method="POST">
<p><label>User Name : </label>
<input id="username" type="text" name="username" placeholder="username" /></p>
<p><label>Password   : </label>
<input id="password" type="password" name="password" placeholder="password" /></p>
<input class="register-btn" type="submit" name="submit" value="Login" />
</form>
</div>
<?php } ?>
</body>
</html>

Kata yang dicetak tebal itu adalah nama tabel yang sudah dibuat tadi
Buat halaman logout
Copy script dibawah ini lalu kasih nama "logout.php" :

<?php
session_start();
unset($_SESSION['username']);
?>
<center>
<h2>Silahkan klik <b><a href="login.php">login</a></b> untuk login kembali
</h2>
</center>

Cek pada browser anda, lalu masukkan username dan password yang telah dibuat pada database tadi.
Untuk membuat username dan password lagi, silahkan ikuti proses nomor 5 pada saat membuat koneksi database
Klik gambar untuk memperjelas

Cara Konfigurasi dan Setting DHCP server pada linux ubuntu 10.04

2015-05-11T06:59:00.001-07:00

DHCP merupakan sebuah Protokol yang digunakan untuk memberikan IP secara otomatis kepada client pada suatu jaringan. Untuk dapat melakukan hal ini, suatu jaringan harus mensettingnya secara benar.

Saat ini saya akan berbagi pengetahuan mengenai Cara konfigurasi dan Setting DHCP server pada linux ubuntu 10.04.

Tonton Video ini untuk lebih jelas :

Masuk sebagai root
Install paket (jangan lupa memasukkan cd master)

apt-cdrom add
mount /dev/cdrom /cdrom
apt-get install dhcp3-server

Ketik “nano /etc/dhcp3/dhcpd.conf” untuk memulai konfigurasi DHCP
Mulai konfigurasi (Nb : hapus tanda “#” dibawah “# A slightly….” Sampai batas kotak yang saya tandai di gambar berikut :

Hasil konfigurasi beserta keterangannya
Restart dengan cara mengetik perintah “/etc/init.d/dhcp3-server restart”
Cek pada Client dengan cara :

Buka pengaturan LAN
Setting IP LAN menjadi Automatic (otomatis)

Cek, apakah Client sudah mendapat IP dari server ubuntu tersebut atau belum ??
Kalau belum berhasil, matikan Firewall, Disable lalu Enable-kan Client.

Selesai .

Cara Setting Interfaces pada linux Ubuntu 10.04

2015-05-11T06:24:00.002-07:00

Internet Protocol Addres atau yang sering disebut IP Address merupakan suatu deretan angka biner antara 32 bit sampai 128 bit yang dipakai sebagai alamat identifikasi untuk tiap komputer dalam suatu jaringan dan menjadi suatu identitas jaringan komputer tersebut.

Karena apabila pemberian IP address yang kurang benar pasti akan terjadi trouble seperti IP conflig, tidak dapat menyambung internet, dan ada banyak yang lainnya.

Pada postingan kali ini saya akan membagikan sedikit ilmu yang dapat saya terima dari sekolah mengenai Cara Setting Interfaces pada linux Ubuntu 10.04.

Tonton Video ini untuk lebih jelas :

Masuk sebagai root
Ketik “nano /etc/network/interfaces” untuk memulai konfigurasi IP
Mulai konfigurasi
Hasil konfigurasi (Nb : jika belum ada yang saya tandai di kotak tersebut, maka buat sendiri saja seperti pada gambar ^_^)

Restart dengan cara mengetik perintah “/etc/init.d/networking restart”
Ketik perintah “ifconfig” untuk mengecek berhasil tidaknya konfigurasi yang telah anda lakukan. (seperti pada gambar berikut)

Untuk melihat berhasil tidaknya, melalui client ikuti langkah – langkah berikut

Matikan “Firewall” (wajib)
Buka “CMD” atau “command promt”
Ketik “ping (IP address server/ubuntu)”
Hasilnya harus seperti pada kotak merah di bawah ini :

Selesai.

Cara Setting dan konfigurasi FTP menggunakan aplikasi XAMP

2015-05-09T06:59:00.000-07:00

FTP atau yang disebut File Transfer Protocol merupakan sebuah protokol Internet yang berjalan di dalam lapisan aplikasi yang merupakan standar untuk pengiriman berkas (file) komputer antar mesin-mesin dalam sebuah Antar jaringan. Biasanya protokol ini digunakan untuk mengundah data dari suatu server di dalam suatu jaringan.

Saat ini saya akan membagikan Bagaimana Cara Setting dan konfigurasi FTP menggunakan aplikasi XAMP

Buka “XAMPP Control Panel” pada START >> XAMPP>> XAMPP Control Panel
Install“Module FileZilla” dengan meng-klik tanda silang yang berada disebelah FileZilla
Klik “Start” untuk menjalankan FTP pada FileZilla
Klik “admin” untuk `men-setting FTP pada FileZilla
Tambahkan user/pengguna dan folder yang akan dishare dengan cara :

Klik “edit >> users” untuk memulai penyetingan

Klik “Add” untuk menambah User
Lalu klik “Shared folder >> add” untuk menshare folder kepada User telah dibuat tadi.
Berikan “Hak access folder dan file” dengan mengklik beberapa pilihan yangtelah disediakan
Klik OK

Uji pada client dengan cara :

Buka “Browser”
Ketikkan “ftp://.....[alamat ipserver/localhost].....”
Enter

Selesai.

Cara setting dhcp server pada windows menggunakan aplikasi (alax.info dhcp server)

2015-02-18T05:23:00.001-08:00

DHCP(Dinamyc Host Configuration Protocol) merupakan sebuah layanan yang secara otomatis memberikan nomor IP kepada komputer yang memintanya(Client). Komputer yang memberikan nomor IP inilah yang disebut sebagai DHCP Server, sedangkan komputer yang melakukan request disebut DHCP Client.

Itulah pengertian dari DHCP, DHCP server, dan DHCP Client. Biasanya protokol itu digunakan pada suatu perusahaan, warnet, fasilitas wifi ataupun yang lainnya. Pada postingan kal ini saya akan membagikan tutorial mengenai Cara setting dhcp server pada windows menggunakan aplikasi (alax.info dhcp server)

Berikut ini langkah2 nya

Download dulu aplikasinya
Klik link ini untuk download aplikasinya
(DOWNLOAD)
Atur IP pada PC server sesuaikan dengan kebutuhan
Atur IP pada PC Client menjadi otomatis
Buka file installasi pertama (START >> alax.info>>DHCP Server>>Configure DHCP server)

Jadikan Application Mode, lalu pilih manual
OK
Buka file installasi pertama (START >> alax.info>>DHCP Server>> DHCP server (biasanya sudah muncul pada “STARTUP” )
Hidupkan DHCP server dengan mengklik ENABLE
Cek pada komputer Client
(Biasanya komputer client harus direstart atau di Disable lalu Dienable lagi adapternya, agar IP dhcp yang diberikan server bisa masuk atau terkoneksikan ke komputer client
Selamat mencoba ^_^

Fendi blogger

Kumpulan Jenis Tag HTML dan Fungsinya

Membuat Effect gambar pada HTML dan penjelasannya part 1

Script CSS umum.

Penjelasan sederhana :

Effect gambar membesar(zoom) jika disentuh kursor.

Script CSS :

Script HTML :

Effect gambar mengecil jika disentuh kursor.

Script CSS :

Script HTML :

Pemasangan 3 pilihan widget alexa pada blog

Step 1. Pilih tampilan widget alexa

Step 2. Cara memasang widget alexa

Membuat effect gambar berganti saat disentuh kursor (mouseover)

Membuat effect gambar berganti

Cara memasang widget like box facebook terbaru 2015

Membuat facebook like box facebook (Page plugin)

Memasang facebook like box facebook (Page plugin) pada blog

Catatan :

Pemasangan widget recent post di blog

Pemasangan widget recent post

Catatan :

Apa yang dimaksud backlink dan bagaimana cara kerjanya

Melihat pengguna wifi lain dalam jaringan yang sama menggunakan aplikasi

Download aplikasi

3 cara untuk melihat spek suatu komputer atau laptop

Membuat serial number Smadav pro 2015 dengan aplikasi

Download Smadav 10.1

Download Generator

Membuat kalender PHP keren

Download Script PHP kalendar

8 cara mempercepat komputer atau laptop yang lambat

Cara menampilkan penghasilan atau earning pada blogger 2015

Penyebab koneksi internet bermasalah dan cara mengatasinya dengan aplikasi dan manual

Aplikasi repair network connection

Download aplikasi

Cara manual perbaiki koneksi jaringan

cara menggerakkan text pada HTML atau web

Bagaimana cara menggerakkan text pada HTML :

1. Dasar :

2. Penambahan hiasan/Style :

Berbagai macam dan jenis tang disertai fungsi masing masing tang

Pengertian, macam macam, dan fungsi masing - masing peripheral

Perkembangan sistem operasi windows dari awal sampai sekarang tahun 2016

Cara Konfigurasi Samba pada Ubuntu server 10.04

Cara Konfigurasi DNS Server pada Ubuntu Server 10.04

Cara membuat form login dan logout php dengan database mysql

Membuat koneksi database dan membuat username serta password login (langkah 5)

Membuat form login

Cara Konfigurasi dan Setting DHCP server pada linux ubuntu 10.04

Cara Setting Interfaces pada linux Ubuntu 10.04

Cara Setting dan konfigurasi FTP menggunakan aplikasi XAMP

Cara setting dhcp server pada windows menggunakan aplikasi (alax.info dhcp server)