Teknologi Industri: Tutorial HTML

Tampilkan postingan dengan label Tutorial HTML. Tampilkan semua postingan

Jumat, 03 Januari 2020

MEMBUAT GAMBAR BERPUTAR KETIKA MOUSE DIARAHKAN DENGAN CSS

1/03/2020 Belajar Pemrograman, CSS, Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tips Dan Trik, Tutorial Blog, Tutorial HTML, Tutorial PHP No comments

Langsung aja yaa... Berikut kode CSS nya untuk membuat gambar atau foto diblog maupun website berputar ketika mouse diarahkan :

img:hover {
-o-transform:scale(1.2) rotate(360deg) translate(0px);
-moz-transform:scale(1.2) rotate(360deg) translate(0px);
-webkit-transform:scale(1.2) rotate(360deg) translate(0px);
-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease ;
}

Khusus untuk pengguna Blogger silhakan paste kan kode berikut sebelum kode
]]>< /b:skin>

.post img:hover {
-o-transform:scale(1.2) rotate(360deg) translate(0px);
-moz-transform:scale(1.2) rotate(360deg) translate(0px);
-webkit-transform:scale(1.2) rotate(360deg) translate(0px);
-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
-webkit-transition:all 1.5s ease ;
}

Hasilnya kira-kira seperti ini :

Terima kasih sudah menyempatkan diri untuk berkunjung, sekali lagi untuk kritik dan saran silahkan di komentar yaa.... :)

MEMBUAT MENU DROPDOWN SEDERHANA DENGAN CSS

1/03/2020 Belajar Pemrograman, CSS, Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tips Dan Trik, Tutorial Blog, Tutorial HTML, Tutorial PHP No comments

OK Fren... Langsung Aja yaa, Ketikkan kode berikut untuk Menunya :

<ul>
<li><a href="https://technoindustri.blogspot.com/">Beranda</a></li>
<li>

Kategori

<ul class="dropdown">
<li><a href="#">- Chord Gitar</a></li>
<li><a href="#">- Seputar Musik</a></li>
<li><a href="#">- Teknologi Dan Industri</a></li>
<li><a href="#">- Tips Dan Trik</a></li>
<li><a href="#">- Tutorial</a></li>
</ul>
</li>
<li>

Layanan

<ul class="dropdown">
<li><a href="https://solusiteknikindo.com/">- Servis Ac Dan Elektronik</a></li>
<li><a href="https://technoindustri.blogspot.com/">- Servis Mesin Industri</a></li>
<li><a href="https://technoindustri.blogspot.com/">- Web Designer</a></li>
<li><a href="https://technoindustri.blogspot.com/">- Retrofit Mesin CNC</a></li>
<li><a href="https://technoindustri.blogspot.com/">- Teknisi FreeLance</a></li>
<li><a href="https://technoindustri.blogspot.com/">- Instalasi Listrik</a></li>
</ul>
</li>
<li>

Pemrograman

<ul class="dropdown">
<li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Bahasa Arduino</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Bahasa C</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- CSS</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- HTML</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- Javascript</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- JQuery</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Web%20Programer">- PHP</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Ladder Programer</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Machine%20Programer">- Visual Basic</a></li>
</ul>
</li>
<li>

Download

<ul class="dropdown">
<li><a href="https://technoindustri.blogspot.com/search/label/Download%2020Mp3">- Download Mp3</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/RPP%2020Dan%2020SILABUS">- Dowload Ebook</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/RPP%2020Dan%2020SILABUS">- RPP Dan Silabus</a></li>
<li><a href="https://technoindustri.blogspot.com/search/label/Software">- Download Software</a></li>
</ul>
</li>
<li><a href="#">About me</a></li>
</ul>
</div>

Untuk mempercantik tampilannya silahkan gunaa kode CSS berikut :

/*Top level items ---------------------------------------*/
#cssmenu >ul>li>span, #cssmenu >ul>li>a
{
font-size:18px;
color:inherit;
text-decoration:none;
padding:10px 10px;
font-weight:400;
text-transform:uppercase;
letter-spacing:2px;
display:block;
position:relative;
transition:all 0.3s;
vertical-align : bottom ;
}

#cssmenu li:hover > span, #cssmenu li:hover > a
{
color:#FFFFFF;
background-color:#77A6F7;
cursor : pointer ;
border-radius : 3px ;
}

/*Sub level items ---------------------------------------*/
#cssmenu .dropdown
{
text-align:left; left:0;
letter-spacing:1px;
font-size : 13px ;
color: #222222;
background-color:#FFFFFF;
border:none; position:absolute;
box-shadow: 0 2px 8px #CDCDCD ;
display:none; opacity:0; cursor:pointer;
}

#cssmenu .dropdown li
{
display: block;
border-bottom : 0px #cdcdcd inset ;
}

#cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3
{
font-size:13px;
font-weight:400;
font-family:inherit;
margin:0;
padding:8px 10px;
display:block;
color:inherit;
text-decoration:none;
}

#cssmenu .clm h3 {
font-size:20px; font-weight:700;
}

#cssmenu .sub-item
{
background-color:#FFFFFF;
position:relative; transition:all 0.3s;
}

#cssmenu .dropdown li:hover
{
color:#FFFFFF;
background-color:#77A6F7;
cursor : pointer ;
}

#cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a
{
color:#FFFFFF;
background-color:#77A6F7;
cursor : pointer ;
}

#cssmenu .clm a:hover
{
color:#000000; transition:color 0.2s;
}

#cssmenu .dropdown.right0
{
left:auto;right:0;
}

#cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%20;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%20; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%20; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#000000; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:5px; transform:rotate(135deg);margin-top:-10px;margin-left:5px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%20;margin-top:-7px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation{ from {opacity: 0; transform:translate3d(-16%20, 0, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s ease 0.5s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s ease 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s ease 0.16666666666666666s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s ease 0.25s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s ease 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s ease 0.4166666666666667s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}

Maka hasilnya akan tampak seperti berikut :

Ok Fren, demikian tutorial kali ini semoga bermanfaat buat fren-fren sekalian, jangan lupa kritik dan saran ya melalui komentar dan Kalo Mau copas silahkan aja tapi mohon sertakan link sumber.
Terima Kasih

Cara Memeriksa Page Rank Website

4/05/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Software, Tips Dan Trik, Tutorial Blog, Tutorial HTML, Tutorial PHP No comments

Periksa HALAMAN RANK halaman situs Web Dengan Sekejab.

Untuk memeriksa PageRank dari sebuah situs web, halaman web atau nama domain, silahkan masukkan URL dari situs web, halaman web atau nama domain pada form di bawah ini dan klik "Periksa PR".

Check Page Rank of your Web site pages instantly:

Masukkan url yang akan di cek page rank nya, kemudian klik tombol "Check PR".

Okay,,, Sekian dulu ya.....!

Sumber : Google

Belajar Dasar HTML : Kode Warna HTML

2/22/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tutorial Blog, Tutorial HTML No comments

#000000	#300007	#300000	#300700
#0F0F0F	#60001F	#600000	#601F00
#272727	#900037	#900000	#903700
#3F3F3F	#C0004F	#C00000	#C04F00
#575757	#F00067	F00000	#F06700
#6F6F6F	#FF007F	FF0000	#FF7F00
#878787	#FF3097	#FF3030	#FF9730
#9F9F9F	#FF60AF	#FF6060	#FFAF60
#B7B7B7	#FF90C7	#FF9090	#FFC790
#CFCFCF	#FFC0DF	#FFC0C0	#FFDFC0
#E7E7E7	#FFF0F7	#FFF0F0	#FFF7F0

#003007	#003000	#073000	#303000
#00601F	#006000	#1F6000	#606000
#009037	#009000	#379000	#909000
#00C04F	#00C000	#4FC000	#C0C000
#00F067	#00F000	#67F000	#F0F000
#00FF7F	#00FF00	#7FFF00	#FFFF00
#30FF97	#30FF30	#97FF30	#FFFF30
#60FFaF	#60FF60	#aFFF60	#FFFF60
#90FFC7	#90FF90	#C7FF90	#FFFF90
#C0FFdF	#C0FFC0	#dFFFC0	#FFFFC0
#F0FFF7	#F0FFF0	#F7FFF0	#FFFFF0

#070030	#000030	#000730	#003030
#1F0060	#000060	#001F60	#006060
#370090	#000090	#003790	#009090
#4F00C0	#0000C0	#004FC0	#00C0C0
#6700F0	#0000F0	#0067F0	#00F0F0
#7F00FF	#0000FF	#007FFF	#00FFFF
#9730FF	#3030FF	#3097FF	#30FFFF
#aF60FF	#6060FF	#60aFFF	#60FFFF
#C790FF	#9090FF	#90C7FF	#90FFFF
#dFC0FF	#C0C0FF	#C0dFFF	#C0FFFF
#F7F0FF	#F0F0FF	#F0F7FF	#F0FFFF

Belajar Dasar HTML : Membuat Textarea HTML

2/13/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tutorial Blog, Tutorial HTML No comments

Cara Membuat Textarea Di HTML.

Ketikkan Kode Berikut :

Maka Hasilnya Akan Seperti Dibawah Ini :

Penjelasan :
- cols : Mengatur lebar kotak.
- rows : Mengatur tinggi kotak.

Belajar Dasar HTML : Membuat tabel Dengan Marge Cell di HTML

2/13/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tutorial Blog, Tutorial HTML No comments

Cara Membuat Tabel dengan Marge Cell Di HTML.

Ketikkan Kode Berikut :

Maka Hasilnya Akan Seperti Dibawah Ini :

Baris 1 dan 2 kolom 1	Baris 1 kolom 2,3 dan 4
Baris 1 dan 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3	Baris 2 kolom 4
Baris 3 kolom 1	Baris 3 kolom 2	Baris 3 kolom 3	Baris 3 kolom 4

Penjelasan :
- border : mengatur tebal garis tabel.
- cellpadding : mengatur jarak antara garis dengan konten didalamnya.
- bgcolor : mengatur warna latar belakang.
- colspan : menggabungkan antara kolom.
- rowspan : menggabungkan antara baris.

Belajar Dasar HTML : Membuat Tabel

2/13/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tutorial Blog, Tutorial HTML No comments

Cara Membuat Tabel DI HTML.

Ketikkan Kode Berikut :

Maka Hasilnya Akan Seperti Dibawah Ini :

Baris 1 kolom 1	Baris 1 kolom 2	Baris 1 kolom 3
Baris 2 kolom 1	Baris 2 kolom 2	Baris 2 kolom 3
Baris 3 kolom 1	Baris 3 kolom 2	Baris 3 kolom 3

Penjelasan :
- border : mengatur tebal garis tabel.
- cellpadding : mengatur jarak antara garis dengan konten didalamnya.
- bgcolor : mengatur warna latar belakang.

Belajar Dasar HTML : Membuat Unorder List/Order List.

2/12/2014 Harley Afandi Daulay, Harley Daoelay, Harley Daulay, Tutorial Blog, Tutorial HTML No comments

Cara Membuat Unorder List Dan Order List

Ketikkan Kode berikut :
<ul>
<li>Aku sedang belajar HTML</li>
<li>Aku Sedang Belajar</li>
<li>Aku Masih Bingung</li>
<li>Bantu Aku Dong</li>
</ul>