Alfibay: HTML

Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Senin, 01 Oktober 2018

Cara Memberi Komentar di HTML, CSS, PHP dan JavaScript

alfibay Blog , HTML

Cara Memberi Komentar di HTML, CSS, PHP dan JavaScript

Memberi Komentar di HTML

Penulisan komentar di HTML yaitu dengan tanda baca seperti ini:

Memberi Komentar di CSS

Penulisan komentar pada CSS yaitu menggunakan tanda baca seperti ini:
/* ISI KOMENTAR CSS */

Memberi Komentar di PHP

Penulisan komentar di PHP yaitu ada 3 cara, yaitu sebagai berikut :

Pertama adalah garis miring dua "//" :

// komentar ini digunakan untuk penulisan dalam satu baris

Kedua tanda pagar "#"

# pagar juga digunakan dalam penulisan satu baris

Ketiga yaitu dengan tanda garis miring dan bintang "/* ... */

/*
tanda garis miring dan bintang
digunakan untuk menulis komentar
dalam beberapa baris, atau lebih dari satu baris
*/

Memberi Komentar di JavaScript

Penulisan komentar di JavaScript sama seperti di PHP, yaitu dengan tanda garis miring dan bintang "/* ... */, dan garis miring dua "//"

/*
garis miring dan bintang
untuk lebih dari satu baris
*/

// tanda garis miring dua untuk memberi komentar dalam satu baris

Baca selengkapnya »

Senin, 25 Juni 2018

HTML Dasar Part 5 : Menampilkan Gambar Pada Website

alfibay HTML , Komputer

HTML DASAR PART 5
MENAMPILKAN GAMBAR PADA WEBSITE

Seperti biasa, sebelum belajar alangkah baiknya berdo'a terlebih dahulu.

Kali ini kita sudah memasuki pembelajaran ke 5 (lima) atau Part-5 HTML dasar. Sebelumnya kita sudah belajar di Part-4 tentang Hyperlink. Di Part 5 ini kita akan belajar memasukkan atau menampilkan gambar pada halaman website kita.

Untuk menampilkan gambar pada website, kita memerlukan tag <img> yang berfungsi untuk menginput atau menampilkan gambar, didalam tag <img> terdapat banyak attribute seperti src, alt, height, width, dan lain sebagainya. Disini kita hanya akan mempelajari attribute src, alt, height dan width.

Attribute scr berfungsi sebagai pemanggil gambar ke halaman web yang kita buat.
Attribute alt berfungsi sebagai inisial dari gambar tersebut, jika gambar tidak dapat ditampilkan dihalaman web mungkin karena koneksi internet yang kurang bagus, atau user menonaktifkan gambar pada browser yang digunakan, maka fungsi alt yang akan muncul menggantikan gambar yang tidak muncul tersebut.
Attribute height atau dalam bahasa Indonesia adalah tinggi, berfungsi untuk mnegatur tinggi gambar.
Attribute width atau dalam bahasa Indonesia adalah lebar, berfungsi untuk mnegatur lebar gambar.

Oke untuk lebih jelasnya mari kita praktekkan saja.

1. Siapkan file latihan.html yang sebelumnya pernah dibuat

2. Buka file latihan.html, kemudian tambahkan tag <img> serta attribute scr dibawah tag <a> untuk menginput gambar pada halaman web

Taruh seperti kode dibawah ini :

<html>
<head>
<title> Web Ku </title>
</head>

<body>

<h1> Website Keren </h1>
<h2> Belajar HTML </h2>

<p> Selamat datang di website ku </p>

<a href="https://google.com"> GOOGLE </a>
<a href="https://segeranat.blogspot.com"> SEGERAN PUNYA </a>

<img src="logo.png">

</body>
</html>

3. Silahkan save atau simpan dengan menekan tombol Ctrl+S pada keyboard

4. Buka latihan.html gunakan browser yang anda gunakan

5. Maka hasilnya seperti ini :

**format gambar tidak harus menggunakan .png, bisa juga menggunakan .jpg, .gif, dan lain sebagainya
**Untuk contoh diatas posisi gambar masih dalam satu folder dengan file latihan.html, jika posisi gambar berada dilain folder dari latihan.html, anda bisa mengikuti tutorial dibawah ini

6. Buka lagi latihan.html, silahkan tambahkan nama folder gambar tersebut seperti ini :

7. Silahkan refresh browser yang anda gunakan, jika hasilnya tidak ada perubahan maka kode yang anda buat itu benar

8. Sekarang buka lagi latihan.html, kali ini kita akan menambahkan attribute alt

9. Silahkan tulis attribute alt="Belajar Koding" disamping disamping kanan attribute src="folder gambar/logo.png". Untuk lebih jelasnya seperti ini :

10. Seperti biasa save terlebih dahulu dengan menekan tombol Ctrl+S pada keyboard

11. Refresh browser yang anda gunakan

**Seperti yang sudah dijelaskan diatas, teks dari attribute alt bisa muncul jika ada masalah pada browser, seperti koneksi internet yang kurang baik atau memang karena kesengajaan user menonaktifkan gambar pada browser yang digunakannya

12. Langkah selanjutnya yaitu mengatur tinggi dan lebar pada gambar menggunakan attribute height dan width, silahkan buka kembali latihan.html

13. Tambahkan attribute height="100" width="100" disamping kanan attribute alt="Belajar Koding". Untuk lebih jelasnya seperti ini :

**Untuk tinggi dan lebar gambar tidak harus seperti tutorial ini, anda bisa mengatur dengan sesuka anda
**Disini saya menggunakan ukuruan gambar dengan ukuran aslinya 200px x 200px, dan saya mengaturnya dengan ukuran 100px x 100px, maka hasilnya akan lebih kecil

14. Silahkan save seperti biasa

15. Kemudian refresh browser yang anda gunakan, maka hasil dari gambar akan berbeda dengan gambar sebelumnya

Oke cukup sampai disini dulu pembelajaran kita di Part-5 ini tentang menampilkan gambar pada website.

Rangkuman :

Cara menampilkan gambar pada website yaitu menggunakan tag <img>

Tag <img> tidak mempunyai tag penutup

Cara menyisipkan gambarnya yaitu menggunakan attributen src

Jika gambar tidak dapat ditanpilkan, maka gunakan attribut alt atau alternatif yang menampilkan teks

Untuk mengatur tinggi dan lebar yaitu menggunakan attrubute height dan width

Sekian pembelajaran HTML dasar di Part-5 ini tentang menampilkan gambar pada website, semoga bermanfaat dan ikuti terus pembelajaran dan tutorial berikutnya.

Jangan lupa berdo'a setelah belajar

HTML Part 6 >>>

Baca selengkapnya »

Sabtu, 09 Juni 2018

HTML Dasar Part 4 : Mengenal Hyperlink

alfibay HTML , Komputer

HTML Dasar Part 4 : Mengenal Hyperlink

Seperti biasa, sebelum memulai belajar alangkah baiknya membaca do'a terlebih dahulu

Kali ini kita sudah berada di Part-4 HTML dasar. Sebelumnya kita sudah belajar di part-3 tentang Tag Heading dan Tag Paragraf, dan untuk di part-4 ini kita akan belajar tentang Tag Hyperlink.

Hyperlink sendiri berfungsi untuk membuka halaman lain pada HTML.

Dalam hyperlink sendiri membutuhkan tag <a></a>, di dalam tag pembuka <a> akan diisi attribute, contoh seperti ini <a href="nilai"> Nama <a/>, pada contoh ini href merupakan attributenya, dan "nilai" merupakan link yang akan kita buka, sedangkan Nama yang berada di antara tag pembuka dan penutup merupakan teks yang akan menuju link tersebut. Oke biar gak pusing atau bingung, mari praktekkan seperti biasa.

1. Buka file latihan.html ke text editor (bagi yang belum mengerti, bisa mempelajari part-1 sampai part-3)

2. Silahkan buat code seperti dibawah ini pada text editor yang anda gunakan

<html>

<head>

</head>

<body>

<h1> Website Keren </h1>

<p> Selamat datang di website ku </p>

<a href="https://google.com"> GOOGLE </a>

</body>

</html>

3. Seperti biasa save terlebih dahulu sebelum mencobanya di browser, cukup menekan tombol Ctrl+S untuk menyimpannya.

4. Sekarang bukalah latihan.html menggunakan browser, maka hasilnya akan seperti ini :

5. Coba anda klik teks GOOGLE, pasti browser akan otomatis menuju ke link Google

**Penjelasan : Kita fokus ke <a href="https://google.com"> GOOGLE </a>. Pada tag <a> berisi sebuah attribute yaitu href, attribute href berfungsi untuk membuat sebuh link yanng akan dituju. "https://google.com" adalah link yang dituju, sedangkan GOOGLE yang merupakan isi dari tag pembuka <a> dan tag penutup </a> yaitu teks yang nantinya jika diklik akan menuju ke alamat atau link https://google.com.

6. Oke kita balik lagi ke teks editornya, silahkan buat lagi kode seperti dibawah ini :

<html>

<head>

</head>

<body>

<h1> Website Keren </h1>

<h2> Belajar HTML </h2>

<p> Selamat datang di website ku </p>

<a href="https://google.com"> GOOGLE </a>

<a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a>

</body>

</html>

7. Tekan tombol Ctrl+S untuk menyimpan file

8. Refresh browser yang anda gunakan, maka tampilannya akan seperti ini :

9. Silahkan klik teks SEGERAN PUNYA, maka akan mengarah ke halaman baru atau ke tab baru pada browser

**Penjelasan : Sebelumnya kita sudah belajar pada poin nomor 1 sampai 5 yaitu membuka link pada halaman web, di poin 6 juga masih sama yaitu membuka link pada halaman web, tapi ada perbedaannya, perbedaannya yaitu jika pada nomor 1-5 itu hanya membuka link pada satu halaman saja, tapi pada nomor 6 jika teks yang berisi link tersebut diklik, maka akan menuju kehalaman atau ke tab berikutnya pada browser.

**Kita fokus ke <a href="https://segeranat.blogspot.com" target="_blank"> SEGERAN PUNYA </a>, coba perhatikan didalam tag <a> terdapat 2 (dua) attribute yaitu href dan target. Untuk penjelasan href sama seperti pada nomor 5, attribute target yang mempunyai nilai "_blank" yaitu berfungsi untuk membuka link pada tab yang berbeda

Cukup sampai disini terlebih dahulu

Rangkuman :

Tag Hyperlink <a></a> yaitu tag yang digunakan untuk membuat sebuah teks yang nantinya jika diklik akan menuju link tersebut. didalam tag <a> terdapat attribute href yang berfungsi untuk menginput link tersebut, pada contoh diatas menggunakan webnya Google dan Segeran Punya,tadak hanya untuk webnya Googel atau Segeran Punya saja, href juga bisa atau berlaku untuk semua link, bisa seperti facebook, twitter, dan lain sebagainya. Dan tambahan untuk attribute. Untuk link yang secara otomatis pindah tab bisa ditambahkan attribute terget= dengan nilai "_blank".

Oke sekian pembelajaran di Part-4 ini tentang Hyperlink pada HTML. Semoga bermanfaat, dan tambahkan terus ilmunya di part-part selanjutnya.

Do'a sesudah belajar

HTML Part 5 >>>

Baca selengkapnya »

Jumat, 08 Juni 2018

HTML Dasar Part 3 : Mengenal Heading dan Paragraf

alfibay HTML , Komputer

HTML Dasar Part 3 : Mengenal Heading dan Paragraf

Seperti biasa sebelum memulai belajar alangkah baiknya berdo'a terlebih dahulu.

Ok kali ini kita sudah masuk kepembelajaran selanjutnya yaitu di Part-3 yang akan membahas tentang Tag Heading dan Tag Paragraf.

Apa sih Tag Heading?

Tag Heading yaitu tag yang digunakan untuk membuat judul pada website.

Apa sih Tag Paragraf?

Tag Paragraf yaitu tag yang digunakan untuk membuat paragraf pada website.

Ok untuk lebih jelasnya mari kita praktekkan, dan setelah kita praktekkan baru kita bisa mendapat kesimpulan dari Tag Heading dan Tag Paragraf.

Ikuti langkah-langkahnya :

1. Jika yang sudah mempunyai atau mengikuti tutorial sebelum-sebelumnya, bisa langsung buka file latihan.html yang telah dibuat pada pembelajaran part 1 dan part 2, tetapi jika yang ingin langsung belajar di part 3 ini silahkan tulis koding dibawah ini menggunakan text editor dan menyimpannya dengan format latihan.html, dan bagi yang sudah memiliki latihan.html cukup hanya menambahkan tag-tag pada bagian tag body.

**Direkomendasikan untuk mempelajari part-part sebelumnya.

<html>

<head>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

</body>

</html>

2. Seperti biasa jika akan mencoba atau melihatnya pada browser, jangan lupa save terlebih dahulu kode tersebut

3. Kemudian klik 2 kali pada file latihan.html, dan otomatis browser akan terbuka, maka hasilnya akan seperti ini :

**Penjelasan : Semakin kecil nilai dari tag heading, maka akan semakin besar teks yang akan muncul, dan sebaliknya jika semakin besar nilai dari tag heading, maka akan semakin kecil teks yang akan muncul

** Tag heading terdiri dari 6 (enam) tingkatan, yaitu <h1>, <h2> <h3>, <h4>, <h5>, dan <h6>

4. Selanjutnya buat tag paragraf, buat kode seperti dibawah ini :

<html>

<head>

</head>

<body>

<h1> Heading 1 </h1>

<h2> Heading 2 </h2>

<h3> Heading 3 </h3>

<h4> Heading 4 </h4>

<h5> Heading 5 </h5>

<h6> Heading 6 </h6>

<p> Selamat datang di website ku </p>

</body>

</html>

5. Kemudian refrash browser yang anda gunakan, maka hasilnya akan seperti ini :

**Penjelasan : pada Tag paragraf ini, teksnya sudah tidak terlihat tebal (bold) lagi seperti pada Tag Heading.

Bersambung....

Rangkuman :

Tag Heading adalah tag yang digunakan untuk membuat sebuah judul pada sebuah halaman web dan teksnya sendiri berukuran dan lebih tebal dari teks biasa. Tag Heading terdiri dari 6 (enam) tingkatan, yaitu <h1>, <h2> <h3>, <h4>, <h5>, dan <h6> dimana semakin kecil nilai dari tag heading, maka akan semakin besar teks yang akan muncul, dan sebaliknya jika semakin besar nilai dari tag heading, maka akan semakin kecil teks yang akan muncul. Biasanya <h1> hanya digunakan satu kali dalam sebuah halaman web, yaitu sebagai judul utama, <h2> sampai <h6> bisa digunakan beberapa kali sebagai sub judul.
Tag paragraf adalah tag yang digunakan untuk memulai suatu paragraf baru.

Ok sekian pembelajaran pada part 3 tentang tag heading dan tag paragraf, semoga bermanfaat 😎

Berdo'a selesai belajar.

Untuk pembelajaran selanjutnya bisa dilihat di Part 4

HTML Part 4 >>>

Baca selengkapnya »

Rabu, 06 Juni 2018

HTML Dasar Part 2 : Mengenal Tag HTML

alfibay HTML , Komputer

HTML Dasar Part 2 : Mengenal Tag HTML

Seperti biasa, sebelum memulai pembelajaran alangkah baiknya berdo'a terlebih dahulu

Di part kedua ini segeranat.blogspot.com membarikan pembelajaran tentang tag pada HTML.

Aturan-aturan yang ada di HTML:

HTML terdiri dari elemen-elemen, elemen sendiri terdiri dari <tag pembuka> lalu konten atau isinya, kemudian ditutup dengan <tag penutup>, dan ada juga tag yang tidak menggunakan tag penutup.

Semua file HTML dibungkus oleh tag <html>.
Untuk lebih jelasnya mari kita praktekkan.

1. Buka file latihan.html yang di part 1 sudah dijelaskan

2. Klik kanan pada file latihan.html, pilih Open With Notepad jika menggunakan OS Windows, dan Text Editor jika menggunakan Linux, atau bisa juga menggunakan text editor lainnya
3. Buatlah koding seperti dibawah ini pada text editor yang anda gunakan :

4. Tekan tombol Ctrl+S pada keyboard untuk menyimpan file
5. Kemudian buka latihan.html menggunakan browser, maka tab bar akan berubah menjadi Web Ku, yang merupakan isi dari tag title
**penjelasan : tag <head> yaitu berisi informasi tentang website yang kita buat, seperti judul website
**penjelasan : tag <title> merupakan tag yang digunakan untuk membuat judul dari sebuah halaman web

6. Kemudian buatlah koding seperti dibawah ini pada text editor yang anda gunakan :

<html>
<head>
        <title> Web Ku </title>
    </head>

    <body>
      Selamat Datang
    </body>
</html>

7. Tekan tombol Ctrl+S pada keyboard untuk menyimpan file
8. Buka lagi browsernya, dan pastikan sudah berada pada latihan.html
9. Selanjutnya refresh browsernya, bisa dengan menekan tombol F5 pada keyboard, maka hasilnya akan seperti ini :

**Penjelasan :Tag <body> merupakan tag yang digunakan untuk membuat tubuh dari sebuah halaman dan untuk menampilkan isi dukumen HTML

Rangkuman >>>

Jadi didalam HTML terdiri dari elemen-elemen, apa itu elemen?
Elemen pada HTML adalah susunan dari tag pembuka sampai tag penutup, elemen html didefinisikan oleh tag pembuka, lalu dilanjutkan oleh konten dan di akhiri oleh tag penutup.
Tag HTML umumnya selalu berpasangan seperti <title> dan </title>, yang dimana tag pertama <title> yaitu tag pembuka dan tag kedua </title> adalah tag penutup, serta teks diantara kedua tag tersebut disebut isi elemen, contohnya seperti <title> Web ku </title> dimana Web Ku merupakan isi elemen.

Ok sekian pembelajaran di part 2 tentang perkenalan dengan HTML.
Jangan lupa ikuti pembelajaran-pembelajaran selanjutnya di part 3

Berdo'a setelah belajar :)

HTML Part 3 >>>

Baca selengkapnya »

Belajar HTML dari dasar - Part 1

alfibay HTML , Komputer

Belajar HTML dari dasar - Part 1

Sebelum belajar alangkah baiknya membaca do'a

Penjelasan singakat tentang HTML

Hypertext Markup Language atau di singkat HTML adalah sebuah bahasa markah atau markup language dalam bahasa Inggris yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penelusuran web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan wujud yang terintegerasi.

JIka masih belum mengerti dengan poenjelasan diatas, HTML merupakan bahasa markup pada internet khususnya web yang berupa kode dan simbol, dan HTML sendiri mempunyai fungsi dalam pembuatan sebuah website.

Software/aplikasi yang harus disiapkan :

1. Text Editor
    a. Text Editor (pada linux)
    b. Notepad (pada windows)
    c. dan lain-lain, masih banyak lagi
Silahkan pilih salah satu saja text editornya, karena pada dasarnya mempunyai fungsi yang sama.

2. Browser
    a. Internet Explorer (IE)
    b. Chrome
    c. dan lain-lain
Silahkan pilih salah satu browser saja karena pada dasarnya mempunyai fungsi yang sama.
    `
Membuat file HTML pertama

Langkah-langkah :

Buka Text Editornya
Jika Text Editor sudah terbuka, kemudian arahkah kursor kebagian menu, lalu klik File dan pilih Save As
Pilih folder untuk menaruh atau menyimpan file yang dibuat ini, dan beri nama latihan.html (** Untuk nama bisa disesuaikan, asal format pada filnya yaitu .html, contoh : home.html, kontak.html dan lain sebagainya, sesuai keinginan anda)
Kemudian klik Save
Buatlah tulisan "LATIHAN" pada text editor, kemudian tekan tombol Ctrl+S untuk menyimpan file
Buka file latihan.html pada folder
Klik dua kali pada file latihan.html untuk membuka pada browser, jika tidak terbuka pada browser, maka klik kanan pada file latihan.html, kemudian pilih Open With, pilih misal Mozilla Firefox, maka hasilnya akan seperti ini :

Ok untuk latihan pertama cukup sampai disini dulu, semoga bermanfaat. Dan jangan lupa nantikan part Selanjutnya.
Part ke 2 akan segera hadir...
Sebelum belajar sudah membaca doa, selesai belajar juga harus membaca do'a

HTML Part 2 >>>

Baca selengkapnya »

Senin, 02 April 2018

Buat Tombol Back To Top Efek Bounce

alfibay HTML , script

Berikut cara membuat tombol back to top pada website, sanggup di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML.
saat kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.

Kode CSS nya:
#Back-to-top {
    text-align: center;
    z-index: 9999;
    position: center;
    bottom: 70px;
    cursor: pointer;
    display: none;
    opacity: 0.7;
    }
#Back-to-top:hover {
    opacity: 1;
    }

Pasang script ini di dalam setelah </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>

Letakkan kode html ini di body

<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMk4xETKpqOMexP_6PVD9dij6sYVWyQvmBZDaBnQ9GeTQTeJOqg035qgrSWnlFHLuI2vgZekjglo5cpg4vxI-e4cz6yrGIH0cU1FMJ7eOrj5t7Dmq6VbRwy19bmxSi3BSxXdE3RNvOYKt/s128/backtotop.png'/>
</div>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {
    if($(this).scrollTop()>400) {
        $('#Back-to-top').fadeIn();
        }
    else { $('#Back-to-top').fadeOut();}
    });
    $('#Back-to-top').click(function() {
        $('body,html')
        .animate({scrollTop:0},300)
        .animate({scrollTop:40},200)
        .animate({scrollTop:0},130)
        .animate({scrollTop:15},100)
        .animate({scrollTop:0},70);
        });
});
</script>

Sumber http://www.tips-trick.com

Baca selengkapnya »

Minggu, 01 April 2018

Buat Tombol Back To Top Efek Bounce

alfibay HTML , script

Berikut cara membuat tombol back to top pada website, sanggup di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML.
ketika kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.

Kode CSS nya:
#Back-to-top {
    text-align: center;
    z-index: 9999;
    position: center;
    bottom: 70px;
    cursor: pointer;
    display: none;
    opacity: 0.7;
    }
#Back-to-top:hover {
    opacity: 1;
    }

Pasang script ini di dalam sehabis </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>

Letakkan aba-aba html ini di body

<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlMk4xETKpqOMexP_6PVD9dij6sYVWyQvmBZDaBnQ9GeTQTeJOqg035qgrSWnlFHLuI2vgZekjglo5cpg4vxI-e4cz6yrGIH0cU1FMJ7eOrj5t7Dmq6VbRwy19bmxSi3BSxXdE3RNvOYKt/s128/backtotop.png'/>
</div>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {
    if($(this).scrollTop()>400) {
        $('#Back-to-top').fadeIn();
        }
    else { $('#Back-to-top').fadeOut();}
    });
    $('#Back-to-top').click(function() {
        $('body,html')
        .animate({scrollTop:0},300)
        .animate({scrollTop:40},200)
        .animate({scrollTop:0},130)
        .animate({scrollTop:15},100)
        .animate({scrollTop:0},70);
        });
});
</script>

Sumber http://www.tips-trick.com

Baca selengkapnya »

Selasa, 09 Januari 2018

Membuat Bullet and Numbering (Daftar Isi) di HTML

alfibay HTML ,

Bullet and Numbering mungkin tidak abstrak lagi ditelinga anda yang biasa memakai Microsoft Word. Format yang biasa digunakan untuk menciptakan daftar isi atau list ini bisa juga di gunakan di halaman website/blog. Penggunaanya cukup sederhana, anda hanya perlu mengenal Tag Ordered List (OL) ialah daftar yang berupa angka atau huruf abjad. Sedang untuk menciptakan daftar yang berupa Bullet memakai Tag Unordered List (UL). Berikut contoh penggunaanya :

1. Contoh Penggunaan Ordered List (Daftar Numbering)

<ol>
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya

Halaman Utama
Profil
Galery
Kontak Kami

Secara default akan muncul modelnya 1,2,3.....dst, tetapi anda bisa juga menciptakan Daftarnya dengan Type yang lain, ialah dengan menambahkan Attribut Type, sebagai contoh :

<ol type="A">
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya

Halaman Utama
Profil
Galery
Kontak Kami

Adapun Type - type yang lainya sebagai berikut :

---------------------------------------------------------
Type     Fungsi
---------------------------------------------------------
A        Untuk menciptakan daftar urut "A, B, C, D...........dst."
a        Untuk menciptakan daftar urut "a, b, c, d...........dst."
I        Untuk menciptakan daftar urut "I, II, III,...........dst."
i        Untuk menciptakan daftar urut "i, ii, iii,...........dst."
----------------------------------------------------------

Jika ingin memulai bukan dari angka pertama maka tambahkan attribut Start = 3, berarti dimulai dari angka 3.

2. Contoh Penggunaan Unordered List (Daftar Bullet)

<ul>
<li>Halaman Utama
<li>Profil
<li>Galery
<li>Kontak Kami
</ol>

Hasilnya

Halaman Utama
Profil
Galery
Kontak Kami

Adapun Type - type yang lainya sebagai berikut :

Circle

Square

Disc

Keterangan :
UL = Unordered List (Daftar Bullet)
OL = Ordered List (Daftar Numbering)
Li = List Item (Bagian dari Ordered / Unordered List)

Sumber http://www.tips-trick.com

Baca selengkapnya »

Sabtu, 06 Januari 2018

Spasi, Tab dan Enter Terbaca di Browser

alfibay HTML ,

Dalam dokumen HTML penitikberatan tombol Enter,Tab dan Spasi tidak besar lengan berkuasa pada halaman website. Jadi Percuma saja kalau dikala ngedit HTML anda memakai Spasi sebanyak apapun hasil yang terbaca di halaman website hanya 1 spasi, begitu juga penggunaan Tab dan Enter tidak akan besar lengan berkuasa pada tampilan halaman website. Tetapi jikalau anda ingin menambahkan Spasi, Tab atau Enter pada Web/Blog anda maka gunakan tag <pre> isi </pre>, Data yang ada di dalam tag <pre> akan terbaca di halaman website sama persis ibarat yang kita tuliskan. Cobalah Latihan Berikut :

<pre>
Daftar Nama Blogger Pekalongan

-------------------------------------------------------
NAMA               Alamat
-------------------------------------------------------
Nur Fakhrus Salis  Landungsari - Pekalongan
Roof-x             Cepoko Kuning - Batang
Andi Priyanto      Tirto - Pekalongan
Hendy Hidayat      Keputran - Pekalongan
Hisyam             Slamaran - Pekalongan
Sutoro             Sugih Waras - Pekalongan
--------------------------------------------------------

</pre>

Keterangan :
Dengan memakai Tag <pre> ............. </pre> maka penggunaan Tab, Spasi dan Enter besar lengan berkuasa pada Tampilan di Browser.

Sumber http://www.tips-trick.com

Baca selengkapnya »

Jumat, 29 Desember 2017

Mengatur Jarak Spasi, Baris, dan Paragraf di HTML

alfibay HTML ,

Jika anda memakai Microsoft Word sangat gampang sekali mengatur jarak Spasi, Baris dan Paragraf yaitu hanya dengan klik dan drag, Tetapi di HTML anda harus mengerti aba-aba - aba-aba berikut :

  yaitu aba-aba untuk memberi jarak spasi antar karakter
<br> yaitu tag untuk memberi jarak spasi antar baris
<p> yaitu tag untuk menciptakan paragraf

<br> dan <p> adalah tag tunggal alasannya tag tersebut berdiri sendiri tanpa tag penutup. Tag <p> mempunyai attribut, salah satunya yaitu align yaitu attribut yang berguna untuk perataan text pada paragraf. Penempatan attribut berada didalam tag, Untuk lebih jelasnya perhatian dan ikuti langkah berikut :
1. Buka Notepad
2. Ketikkan aba-aba berikut :

<html>
<head><title> Jarak Spasi, Baris dan Paragraf di HTML</title></head>
<body>
<p align="center">Saya yaitu orang pekalongan asli, lahir di kelurahan landungsari Rt.02 Rw.01 Kecamatan Pekalongan TImur. Lebih tepatnya rumah saya Gg. 1c yaitu depan Terminal Lama Pekalongan, Siapa yang mau mampir silahkan hubungi saya dulu coz saya jarang dirumah...hehehehhe..
<p align="right">Sebagai Pemuda yang selalu bersemangat untuk maju maka saya selalu mengasah kemampuan dengan hal - hal yang bermanfaat, bukan sekedar kongkow - kongkow yang gak jelas. Walau di daerah saya Kental dengan dunia Hitam, Premanisme, Judi, Miras dll tapi saya yaitu anak yang baik hati dan tidak sombong...(karena gak ada yang bisa di sombongin....Hiks)
<p align="left">Hidup dan dibesarkan bukan ditempat berlimang harta tetapi dengan penuh kasih sayang dan Keluarga yang memiliki tingkat Religius Lumayan lah, walau abang preman terminal.....wekekekkeke
</body>
</html>

3. Simpan dengan nama jarak.html
4. Buka Browser anda kemudian Pilih File - Open - jarak.html
5. Lihat Hasilnya, kemudian pahami ndiri ya.... klo belum paham Call With Me.
6. Selamat Mencoba

Sumber http://www.tips-trick.com

Baca selengkapnya »

Senin, 25 Desember 2017

HTML Gak serumit yang di Bayangkan

alfibay HTML ,

Ada yang bilang "Kalo mencar ilmu HTML itu susah, rumit banget harus ngapalin kode - kode, bikin secuil teks dan gambar tapi kodenya seabreg"... Gw Jawab: "Ngapain juga lu susah - susah hidup, kalo harus cari duit cari makan cari pasangan cari temen cari cari cari..... dan paling final cari penyakit aja lu....hehehe". Kan kini ada Blog yang super instan, yang semua bisa pakai, tanpa orang harus membangun sebuah website tanpa harus tau kode - kode HTML. Tapi menurutku ada baiknya anda juga mengerti wacana HTML walaupun anda sudah terbiasa dengan yang instan. Struktur HTML bekerjsama sangat simple, referensi :

<html>
<head>
<title>Judul Sebuah Website</title>
</head>
<body>
Ini Isi dari sebuah Website artinya semua yang tampil dihalaman website yaitu yang berada didalam tag body.
</body>
</html>

Ok, kembali saya jelaskan secara detail. Sebuah Website kita ibaratkan Seorang Manusia, yang memiliki Kepala, Batang Tubuh dan anggota badan yang lainya. Begitu juga di dalam HTML yang memiliki Kepala yang tugasnya diberikan pada <head> dan ditutup dengan </head>, kemudian untuk Batang Tubuh tugasnya jatuh kepada <body> dan ditutup dengan </body>. jadi Seluruh tampilan website yang terlihat bekerjsama didalam tag <body> yang ditutup dengan </body>. Tapi jangan lupa Struktur HTML selalu dibuka dengan <html> dan ditutup dengan </html>.
Tag - tag yang saya sebutkan diatas yaitu Tag berpasangan, artinya Tag tersebut memiliki Tag Pembuka dan Tag Penutup. Setelah kita mengenal tag berpasangan, maka kita juga harus mengenal tag Tunggal artinya tag tersebut berdiri sendiri tanpa adanya penutup. Kemudian untuk melengkapi tugasnya Tag memiliki bala proteksi yang namanya Attribut. Untuk lebih jelasnya nanti akan saya jelaskan dengan latihan, sementara ngenal dulu lah gpp.... Kata Pepatah "Tak Kenal Maka Tak Sayang"..... Hehehehe.

Sumber http://www.tips-trick.com

Baca selengkapnya »

Selasa, 12 Desember 2017

Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile

alfibay Blogging , HTML

Kali ini kita akan menciptakan share button. Padahal kemarin kita sudah menciptakan share button yang tak kalah bagusnya. Tapi tidak problem mungkin yang kemarin kurang bagus,jadi buat yng baru.Share button ini bekerjsama hampir mirip seakan-akan share button yang saya bagikan kemarin yang membedakan yakni share button ini lebih ringan dan lebih kecil serta ramah SEO.

Yang pastinya share button ini tidak akan berpengaruh terhadap kecepatan loading blog sobat. Jika loading blog anda cepat maka sesudah memasang share button ini loading blog akan masih akan tetap cepat. Jika loading blog anda lambat maka sesudah memasang share button ini akan tetap lambat. 😄

Kali ini kita akan menciptakan share button Cara Membuat Share Button [Facebook,Twitter,Google+] Untuk Mobile

Share button ini berukuran mini serta support untuk mobile device. Jadi jangan khawatir jikalau pengunjung anda kebanyakan memakai mobile,mereka maih bisa membagikan artikel anda. Untuk lebih lengkapnya,berikut Fitur yang terdapat dalam share button ini :

Responsive
Seo Friendly
+ ada counternya
dll.

Lalu bagaimana cara memasangnya di blog,untuk memasangnya cukup gampang ikuti saja langkah dibawah ini.

Cara Membuat Share Button Sederhana dan Seo Friendly

#1. Buka blogger ,Template ➞ Edit HTML

#2. Salin kode berikut kemudian pastekan diatas kode </body>

<script src="http://share.donreach.com/buttons.js"></script>

#3. Salin kode berikut dan pastekan dimana share button ingin ditampilkan. Biasanya ditampilkan dibawah artikel jadi letakkan kode <data:post.body/>

Karena kode <data:post.body/> bisa anda temukan lebih dari satu ditemplate blog,oleh alasannya yaitu itu maka silakan pilih kode <data:post.body/> yang paling selesai anda temukan atau coba cocokan satu per satu.

<div class="don-share" data-bubbles="right" data-limit="3">   <div class="don-share-total"></div>   <div class="don-share-facebook"></div>   <div class="don-share-twitter"></div>   <div class="don-share-google"></div>   <div class="don-share-linkedin"></div>   <div class="don-share-pinterest"></div>   <div class="don-share-tumblr"></div>   <div class="don-share-vk"></div> </div> <script type="text/javascript">    (function() {     var dr = document.createElement('script');     dr.type = 'text/javascript'; dr.async = true;     dr.src = '//share.donreach.com/buttons.js';     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);   })(); </script>

Ganti kode yang berwarna merah dengan jumlah ikon sosial media yang ingin anda tampilkan.

Lalu simpan template.

Sekarang coba anda buka blog sahabat kemudian lihat hasilnya. Gimana keren dan sederhana buka. Itulah tutorial yang bisa saya bagikan. Semoga membantu dan bermanfaat.

Sumber http://www.tips-trick.com

Baca selengkapnya »

Sabtu, 09 Desember 2017

Cara Membuat Kotak Berlangganan Dibawah Artikel Seperti Evo Magz

alfibay Blogging , CSS

Memasang Subcription Box Seperti Di Evo Magz Blog - Kotak berlangganan yang sering juga disebut subcription box adalah kotak yang berfungsi sebagai media bagi pengunjung blog yang ingin mengetahui dan berlangganan artikel terbaru di blog kita. Dalam kotak berlangganan biasanya juga berisi pesan acuan biar pengunjung mau berlangganan artikel melalui email.

Kotak berlangganan atau subscription box ini bisa kalian letakkan dibawah artikel atau juga disidebar dan footer lantaran adalah memang subsription box ini responsive design serta fungsi aslinya yang terletak dibawah artikel.

Kotak berlangganan yang akan kita buat ini saya ambil dari template Evo Magz,pasti tahu kan template Evo Magz. Walaupun subcription box pada template buatan Mas Sugeng tersebut berada dibawah artikel tapi anda bisa meletakkannya di sidebar lantaran adalah responsive. Bagaimana penampakan subcription boxnya? Dibawah adalah penampakannya ↴

Cara Membuat Kotak Berlangganan Evo Magz

Langkah 1

Silakan buka blogger, Template pilih Edit HTML

Langkah 2

Lalu salin isyarat dibawah ini kemudian letakkan diatas isyarat ]]></b:skin>

/* SUBSCRIBER BOX */ .berlangganan-box {  border-top: 1px solid #f0f0f0;  border-bottom: 1px solid #f0f0f0;  padding: 15px;  margin:0 -15px 15px;  text-align:center; } .berlangganan-box input.email-address[type="text"] {  width:60%;  padding:10px;  border:1px solid #ddd;  text-align:center;  border-radius: 4px;  outline:none; } .berlangganan-box input.submit-email[type="submit"] {  transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;  padding:10px 15px;  background:#07ACEC;  border-radius: 3px;  color:#fff;  border:none;  font-weight:bold;  outline:none; } .berlangganan-box input.submit-email[type="submit"]:hover {  background:#0D9AD0;  cursor:pointer; } .berlangganan-box input.email-address[type="text"]:focus {  background: #f9f2a5; }

Lalu simpan template

Langkah 3
Salin isyarat dibawah ini kemudian letakkan dimana subcription box ingin ditampilkan,bisa di sidebar/footer atau dibawah artikel.

<!-- Box berlangganan --> <div class='berlangganan-box'><form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=anggasave&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>    <p>Silakan berlangganan Untuk Mendapatkan Film Terbaru :</p><p><input class='email-address' name='email' placeholder='Your email address...' type='text'/></p><input name='uri' type='hidden' value='anggasave'/>    <input name='loc' type='hidden' value='en_US'/>    <p><input class='submit-email' type='submit' value='Subscribe'/></p>    </form>   </div>

Ganti isyarat yang berwarna merah dengan url/id feedburner blog anda.

Sekarang coba lihat blog sobat. Apakah kotak berlangganan sudah tampil di blog anda. Cukup sekian tutorial cara menciptakan subcription box. Semoga membantu dan bermanfaat.

Sumber http://www.tips-trick.com

Baca selengkapnya »

Rabu, 06 Desember 2017

Cara Memasang Sosial Share Button Dengan Counter Dibawah Postingan

alfibay Blogging , HTML

Membuat Share Button dengan Counter - Tombol membuatkan atau share button ialah widget yang mempunyai kegunaan untuk memudahkan dalam membuatkan artikel. Share button ini biasanya terhubung dengan media sosial yang dipakai untuk media dalam membagikan artikel.

Share button yang bagikan ini bisa tampil di semua device,alias responsive. Sehingga anda tidak perlu mencari tutorial menciptakan share button lain khusus untuk mobile. Bukan hanya responsive ,share button ini juga dilengkapi dengan counter/penghitung. Counter ini akan menghitung berapa kali artikel yang sudah di share jadi anda bisa tahu jumlah share yang ada.

Berikut penampakan share button yang akan saya bagikan.👇👇👇

Tombol membuatkan atau share button ialah widget yang mempunyai kegunaan untuk memudahkan dalam Cara Memasang Sosial Share Button Dengan Counter Dibawah Postingan

Bagaimana? Tertarik untuk menciptakan share buttonnya,langsung saja berikut langkah-langkah :

Membuat Share Button dengan Counter

1. Buka blogger ,Template ➞ Edit HTML

Baca juga : Cara Membuat Share Button Sederhana dan Ringan [Seo Friendly]

2. Salin isyarat berikut kemudian letakkan diatas isyarat </body>

<script src="http://share.donreach.com/buttons.js"></script>

3. Salin isyarat berikut dan letakkan dimana share button ingin ditampilkan. Biasanya ditampilkan dibawah artikel jadi letakkan isyarat <data:post.body/>

Karena kode <data:post.body/> bisa anda temukan lebih dari satu ditemplate blog,oleh alasannya yaitu ialah itu maka silakan pilih isyarat <data:post.body/> yang paling final anda temukan atau coba cocokan satu per satu.

<div class="don-share" data-bubbles="right" data-limit="3">   <div class="don-share-total"></div>   <div class="don-share-facebook"></div>   <div class="don-share-twitter"></div>   <div class="don-share-google"></div>   <div class="don-share-linkedin"></div>   <div class="don-share-pinterest"></div>   <div class="don-share-tumblr"></div>   <div class="don-share-stumbleupon"></div>   <div class="don-share-reddit"></div>   <div class="don-share-buffer"></div>   <div class="don-share-xing"></div>   <div class="don-share-pocket"></div> </div> <script type="text/javascript">    (function() {     var dr = document.createElement('script');     dr.type = 'text/javascript'; dr.async = true;     dr.src = '//share.donreach.com/buttons.js';     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dr);   })(); </script>

Lalu simpan template.

Selesai share button sudah dipasang di blog sobat. Ganti isyarat yang berwarna merah dengan jumlah sosial media yang ingin anda tampilkan. Itulah tutorial cara menciptakan share button responsive dengan counter,semoga bermanfaat.

Sumber http://www.tips-trick.com

Baca selengkapnya »

Senin, 05 Desember 2016

Cara Mudah Membuat Garis Horizontal pada Postingan atau Artikel di Blog

alfibay Blog , HTML

Cara Membuat Garis Horizontal pada Postingan atau Artikel di Blog

Pada kesempatan kali ini saya akan memberikan trik bagaimana cara membuat garis horizontal pada postingan atau artikel di blog. Garis horizontal ini biasanya digunakan untuk membuat batas tertentu di dalam postingan blog.

Terkadang memang membingung bagi blogger yang belum tau cara membuat garis horizontal ini karena fitur - fitur yang ada pada menu blog sangat terbatas, jadi untuk para blogger harus tau juga kode - kode scriptnya agar dapat mempermudah dalam membuat postingan - postingan atau artikel pada blog. Untuk mempelajari kode - kode script tersebut dapat di pelajari dengan buku - buku tutorial yang terkait, bisa kursus, atau juga minta teman ataupun guru untuk mengajarkan kita kode - kode script tersebut, tapi bagi anda yang tidak mempunyai biaya lebih untuk membeli buku ataupun kursus, dan malas juga untuk bertanya kepada taman ataupun guru, tapi anda jangan khawatir dengan kondisi - kondisi itu, kini dunia semakin canggiih suatu hal apapun hampir semuanya bisa di akses di internet, dan internetpun biayanya relatif terjangkau/murah.

Terus bagaimana bisa belajar kode - kode tersebut, tenang, di internet sudah banyak situs - situs yang menyediakan atau memberikan pembelajaran tentang kode - kode tersebut seperti pada blog yang anda kunjungi ini, tapi untuk di postingan ini saya hanya memberikan cara membuat garis horizontal saja, hanya saran saya jangan malas untuk bertanya, dengan bertanya wawasan anda akan bertambah.

Ok langsung saja kita simak dan praktekkan bagaimana cara membuat garis horizontal pada postingan blog.

Baca juga : Cara membuat komentar facebook di blog

Oh iya sebelum masuk ke TKP lebih baik anda perhatikan apakah yang anda maksud seperti garis dibawah ini?

Jika "ya" maka lanjutkan, tapi jika "bukan" maka tetap harus lanjutkan 😀 hitung - hitung penambah ilmu saja 😅

Ok langsung meluncur ke TKP

Kode garis horizontal yaitu :

<hr color ='blue' width='555px'/>

penjelasan :

- Untuk mewarnai garis horizontal tersebut anda bisa menggantinya degan warna yang anda butuhkan, dengan cara mengganti tulisan "blue" menjadi warna lain, contoh : red, yellow, black dan lain sebagainya.

- Untuk mengatur lebar garis horizontal tersebut anda bisa mengaturnya dengan cara mengganti angka 555 tersebut dengan angka (lebar) yang anda butuhkan.

Mungkin hanya itu, sekian dari saya.

baca jiga : Cara membuat kotak kode script pada blog

Jika ada yang kurang paham silahkan tinggalkan jejak dikomentar

Baca selengkapnya »

Jumat, 11 November 2016

CARA MEMBUAT KOLOM KOMENTAR FACEBOOK DI BLOG

alfibay Blog , HTML

CARA MEMBUAT KOLOM KOMENTAR FACEBOOK DI BLOG

Facebook merupakan salah satu media sosial yang paling populer dan terus mendominasi, kepopuleran facebook terus bertambah dari tahun ke tahun. Kepopuleran facebook ini karena facebook terus upgrade diri mulai dari tampilan, interface, fitur-fitur yang disediakan, dan lain sebagainya. Ditahun 2018 ini, pengguna facebook naik hampir 15 persen dengan jumlah pengguna lebih dari 2,17 miliar dibandingkan dengan tahun sebelumnya.

Oke kali ini kita akan memanfaatkan fitur dari facebook, disini saya akan memanfaatkan kolom komentar facebook di blog.

Agar blog menjadi cantik dan menarik rasanya kurang kalau blog kita tidak bisa mencantumkan komentar dari akun facebook, bahkan dari pengunjung blog yang tidak mempunyai akun google (gmail) akan kesulitan berkomentar di blog kita apabila blog kita hanya menyediakan komentar via akun google tanpa ada komentar via facebook.

Pasti banyak pertanyaan kenapa harus komen via facebook?

Sebenarnya "tidak harus", karena membuat kolom komentar facebook hanyalah jalan lain untuk berkomentar, dan juga sebagai sarana bagi mereka yang ingin berkomentar dengan akun facebook, mungkin dengan kendala tidak mempunyai akun google.

ok, langsung saja inilah cara membuat kolom komentar facebook di blog :

1. Pastinya anda harus login ke blog anda

2. Pada Dasbor blog anda, masuk ke Template

3. Klik Edit HTML

4. Cari kode <div class='comments' id='comments'> (cara mudahnya dengan tekan Ctrl+F pada keybooard)

5. Biasanya akan ada 2 kode yang sama, tapi anda pilih yang pertama

6. Copy kode script di bawah ini, dan kemudian pastekan tepat di bawah kode <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANSPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

7. Kemudian cari tulisan IDFANSPAGEFACEBOOK
8. Ganti tulisan IDFANSPAGEFACEBOOK dengan Nomor ID Fans page facebook anda, caranya :

Login akun facebook anda
Kemudian pilih halaman facebook anda

Pilih Tentang dan akan muncul INFO HALAMAN

Lalu lihat paling bawah, disitu ada ID Halaman Facebook anda

9. Selanjutnya ganti tulisan IDFANSPAGEFACEBOOK dengan ID Halaman Facebook anda

nb:

pastinya anda harus punya hamalan atau fans page facebook terlebih dahulu
jika kode <div class='comments' id='comments'> ada 2 (dua), maka lebih diutamakan kode yang atas
jika kode <div class='comments' id='comments'> yang atas tidak bisa maka bisa menggukanan kode <div class='comments' id='comments'> yang bawah
ID Halaman facebook / ID Fans page facebook biasanya berbentuk angka / nomor

SELESAI...

Mudah bukan???

Oke sekian tutorial yang dapat saya berikan, semoga bermanfaat
Terima Kasih

Baca selengkapnya »

Senin, 01 Oktober 2018

Cara Memberi Komentar di HTML, CSS, PHP dan JavaScript

Memberi Komentar di HTML

Memberi Komentar di CSS

Memberi Komentar di PHP

Memberi Komentar di JavaScript

Senin, 25 Juni 2018

HTML DASAR PART 5MENAMPILKAN GAMBAR PADA WEBSITE

Sabtu, 09 Juni 2018

HTML Dasar Part 4 : Mengenal Hyperlink

Rangkuman :

Jumat, 08 Juni 2018

HTML Dasar Part 3 : Mengenal Heading dan Paragraf

Apa sih Tag Heading?

Apa sih Tag Paragraf?

Ikuti langkah-langkahnya :

Rangkuman :

Rabu, 06 Juni 2018

HTML Dasar Part 2 : Mengenal Tag HTML

Belajar HTML dari dasar - Part 1

Software/aplikasi yang harus disiapkan :

Senin, 02 April 2018

Minggu, 01 April 2018

Selasa, 09 Januari 2018

Sabtu, 06 Januari 2018

Jumat, 29 Desember 2017

Senin, 25 Desember 2017

Selasa, 12 Desember 2017

Cara Membuat Share Button Sederhana dan Seo Friendly

Sabtu, 09 Desember 2017

Cara Membuat Kotak Berlangganan Evo Magz

Rabu, 06 Desember 2017

Membuat Share Button dengan Counter

Senin, 05 Desember 2016

Jumat, 11 November 2016

CARA MEMBUAT KOLOM KOMENTAR FACEBOOK DI BLOG

ok, langsung saja inilah cara membuat kolom komentar facebook di blog :

Follow Us

Facebook

Cari Blog Ini

Mengenai Saya

Recent

Featured

Subscribe Us

Blog Archive

Recent Post

Tags

Recent Comments

HTML DASAR PART 5
MENAMPILKAN GAMBAR PADA WEBSITE