CHANNEL 9: ITech

Showing posts with label ITech. Show all posts

Tuesday, April 16, 2019

CARA MEMBUAT WIDGET TULISAN BERUBAH

Pada sebuah blog atau website terkadang kita melihat tulisan yang berubah-ubah entah itu tayangan iklan dari pihak lain atau hanya sekedar menunjukan deskripsi singkat blog itu sendiri, bagi para blogger pemula mungkin akan bertanya-tanya bagaimana cara membuatnya, nah kali ini saya akan berbagi cara untuk membuat widget tersebut caranya cukup mudah.

langkah pertama silahkan anda copy script berikut ini :

<p>

C-9

</p>

<ul>

<li>CREATIVE </li>

<li>EDUCATIVE </li>

<li>INNOVATIVE </li>

<li>INSPIRATIVE </li>

</ul>

</div>

</div></div>

#content1 {

width: 100%;

text-transform: uppercase;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

font-size: 45px;

line-height: 40px;

color: rgba(0, 0, 0, 0.5);

overflow: hidden

}

#content1 .visible {

font-weight: 700;

overflow: hidden;

height: 40px;

padding: 0 40px

}

#content1 .visible:after,

#content1 .visible:before {

position: absolute;

top: -5px;

color: rgba(0, 0, 0, 0.1);

font-size: 42px;

-webkit-animation: 2s linear 0s normal none infinite opacity;

animation: 2s linear 0s normal none infinite opacity

}

#content1 p {

font-weight: 300;

display: inline;

float: left;

margin: 0;

font-family: Bungee Inline;

color: #eee;

}

#content1 ul {

margin-top: 0;

padding-left: 100px;

text-align: left;

list-style: none;

-webkit-animation: 15s linear 1s normal none infinite change;

animation: 15s linear 1s normal none infinite change

}

#content1 ul li {

line-height: 40px;

margin: 0;

list-style-type:none;

padding:0;

font-family:Ruda;

color:#fff;

}

@-webkit-keyframes opacity {

0%, 100% {

opacity: 0

}

50% {

opacity: 1

}

@keyframes opacity {

0%, 100% {

opacity: 0

}

50% {

opacity: 1

}

@-webkit-keyframes change {

0%, 12%, 100% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

17%,

29% {

-webkit-transform: translateY(-25%);

transform: translateY(-25%)

}

34%,

46% {

-webkit-transform: translateY(-50%);

transform: translateY(-50%)

}

51%,

63% {

-webkit-transform: translateY(-75%);

transform: translateY(-75%)

}

68%,

80% {

-webkit-transform: translateY(-50%);

transform: translateY(-50%)

}

85%,

97% {

-webkit-transform: translateY(-25%);

transform: translateY(-25%)

}

@keyframes change {

0%, 12%, 100% {

-webkit-transform: translateY(0);

transform: translateY(0)

}

17%,

29% {

-webkit-transform: translateY(-25%);

transform: translateY(-25%)

}

34%,

46% {

-webkit-transform: translateY(-50%);

transform: translateY(-50%)

}

51%,

63% {

-webkit-transform: translateY(-75%);

transform: translateY(-75%)

}

68%,

80% {

-webkit-transform: translateY(-50%);

transform: translateY(-50%)

}

85%,

97% {

-webkit-transform: translateY(-25%);

transform: translateY(-25%)

}

@media screen and (max-width: 800px) {

#content1 {

display: "6"

}

</style>

</div>

</div></div>

Selanjutnya masuk ke blog anda lalu pilih menu Tata Letak atau Layuot lalu tambahkan widget selanjutnya pilih widget html javascript paste kode diatas yang sudah anda copy, untuk judul biarkan kosong, ganti tulisan yang berwarna merah sesuai selera anda lalu klik save, tempatkan widget tersebut tepat diatas atau dibawah postingan jika anda melakukannya dengan benar hasilnya akan terlihat seperti dibawah ini :

DEMO

Bagaimana mudah bukan ? selamat mencoba, demikian tutorial dari saya semoga bermanfaat buat kita semua.

Terimakasih.
Wawan St

Sunday, April 14, 2019

Cara Mudah Membuat Menu Tab Dengan Dropdown Menu Pada Blog Tanpa Edit html

Pada kesempatan kali ini saya akan berbagi cara untuk membuat tab menu dengan menu dropdown pada blog tanpa edit html, selain untuk mempercantik tampilan blog tab menu juga berfungsi untuk memudahkan pengunjung mencari isi blog. menu tab dengan dropdown mrnu adalah jika pada salah satu menu disentuh dengan cursor maka akan tampil menu lainnya yang berjajar kebawah, untuk melihatnnya silahkan anda klik tombol DEMO dibawah.

DEMO

Langkah pertama untuk membuat Dropdown Menu adalah silahkan Copy script berikut ini :

<style type="text/css">
#black{background:-webkit-gradient(linear, left top, left bottom, from(#0e7eef), to(#0e7eef)); width:1100px; height:32px; color:#0e7eef; margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana; border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;border-left:1px solid #333}
#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}
#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}
#nav{margin:0; padding:0;}
#nav ul{float:left; list-style:none; margin:0; padding:0;}
#nav li{border-left:1px solid #fff;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;}
#nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;}
#nav li a:hover, #nav li a:active{background:#0e7eef; color:#fff; padding:9px 15px 9px; text-decoration:none;}
#nav li li a, #nav li li a:link, #nav li li a:visited{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfJOVOOKcECNsBk2D96YayQkUdJd5V5QKuLWNCzUlMoXltI6UlvyWSvFKsmu3ZOWdGoTSP-ldOd2VYSujfd6tdAXPOMT0Mt6CsA_kVcRVPc3iZc1_FOmuEHxRLIK8ahyphenhypheniRFKuHr-NA4xz/); width:150px; color:#e5e3e3; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #151f23; border-left:px solid #151f23; border-right:2px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px #888;
-webkit-box-shadow:1px 1px 10px #888;
-webkit-border-radius: 6px;}
#nav li li a:hover, #nav li li a:active{background:#0e7eef; color:#fff; padding:3px 10px;}
#nav li{float:left; padding:0;}
#nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;}
#nav li ul a{width:140px;}
#nav li ul ul{margin:-24px 0 0 170px;}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;}
#nav li:hover, #nav li.sfhover{position:static;}
#searchbox{padding:0; margin:0;}
#search input{background:#fff; color:#000; float:left ;margin:5px 0 0 10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd; font:normal 11px arial, verdana, Times New Roman;}
#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0 3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid #666; border-top:1px solid #666; border-right:2px solid #111; border-bottom:2px solid #111;}
#top{background:#0e7eef; margin:10px auto 0; padding:10px; width:918px; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;}
#top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;}
#top a:hover{color:#cc0000; text-decoration: underline;}
#top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;}
.topleft {width: 304px; float: left; margin: 0; padding:0;}
.topleft img a, .topleft img {border:1px solid #ccc; margin: 0; padding: 1px;}
.topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;}
</style>
<div id='outer'>

<div id='black'>

<div id='navbarmenuleft'>

<ul id='nav'>

<li><a href='http://wanschannel9.blogspot.com/'>Home</a></li>

<li><a href='#'>BSE SISWA SD</a>
<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas I'>SD Kelas I</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas II'>SD Kelas II</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas III'>SD Kelas III</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas IV'>SD Kelas IV</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas V'>SD Kelas V</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SD Kelas VI'>SD Kelas VI</a></li>
</ul><li/>

<li><a href='#'>BSE SISWA SMP</a>

<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SMP Kelas VII'>SMP Kelas VII</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/SMP Kelas VIII'>SMP Kelas VIII</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SMP Kelas IX'>SMP Kelas IX</a></li>
</ul></li>

<li><a href='#'>BSE SISWA SMU - SMK</a>

<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SMU-SMK Kelas X'>SMU-SMK Kelas X</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/SMU-SMK Kelas XI'>SMU-SMK Kelas XI</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/SMU-SMK Kelas XII'>SMU-SMK Kelas XII</a></li>
</ul></li>
<li><a href='#'>BSE GURU SD</a>
<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas I'>Guru SD Kelas I</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas II'>Guru SD Kelas II</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas III'>Guru SD Kelas III</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas IV'>Guru SD Kelas IV</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas V'>Guru SD Kelas V</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SD Kelas VI'>Guru SD Kelas VI</a></li>
</ul><li/>
<li><a href='#'>BSE GURU SMP</a>

<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SMP Kelas VII'>Guru SMP Kelas VII</a></li>

<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SMP Kelas VIII'>Guru SMP Kelas VIII</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SMP Kelas IX'>Guru SMP Kelas IX</a></li>
</ul></li>
<li><a href='#'>BSE Guru SMU - SMK</a>
<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Cara Download'>Cara Download</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SMU - SMK Kelas X'>Guru SMU - SMK Kelas X</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Guru SMU - SMK Kelas XI'>Guru SMU - SMK Kelas XI</a></li>
<li><a href=http://wanschannel9.blogspot.com/search/label/Guru SMU - SMK Kelas XII'>Guru SMU - SMK Kelas XII</a></li>
<ul></ul></ul></li>
<li><a href='#'>Extra</a>
<ul>
<li><a href='http://wanschannel9.blogspot.com/search/label/Iptek'>Iptek</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/ITech'>ITech</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Tips'>Tips</a></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Intermezzo'>Intermezzo</a></li>
</ul></li>
<li><a href='http://wanschannel9.blogspot.com/search/label/Tentang Saya'>Tentang Saya</a><li>
<li><a href='http://wanschannel9.blogspot.com/search/label/TOS'>TOS</a><li>
<ul>
<ul>
<li><a href='#'>Contoh 1</a></li></ul>

<ul>

<li><a href='#'>A</a></li>

<li><a href='#'>B</a></li>

<li><a href='#'>C</a></li>

<li><a href='#'>D</a></li>

<li><a href='#'>E</a></li>

</ul>

<li><a href='#'>Contoh 2</a>

<ul>

<li><a href='#'>A</a></li>

<li><a href='#'>B</a></li>

</ul></li>

<li><a href='#'>Contoh 3</a>
<ul>

<li><a href='#'>A</a></li>

<li><a href='#'>B</a></li>

<li><a href='#'>C</a></li>

<li><a href='#'>D</a></li>

<li><a href='#'>E</a></li>

<li><a href='#'>F</a></li>

<li><a href='#'>G</a></li>
</ul></li>

<li><a href='#'>Contoh 4</a>

<ul>

<li><a href='#'>A</a></li>

Selanjutnya masuk atau login pada blog anda, setelah masuk silahkan klik menu Layout atau Tata Letak lihat gambar dibawah :

Lalu klik add gadget atau tambahkan gadget setelah tampil menu berikut :

Lalu klik html/javascript seperti gambar berikut :

Paste script yang sudah anda copy setelah muncul halaman seperti pada gambar berikut :

selanjutnya klik save dan anda tinggal melihat hasilnya, jika anda melakukannya dengan benar tampilannya akan seperti blog saya.
untuk menggunakannya pada blog anda silahkan ganti tulisan yang sudah saya warnai.

Warna merah : Ganti dengan url blog anda
Warna hijau : Ganti dengan judul menu sesuai dengan isi blog anda.
Warna kuning : ganti dengan tag atau labels sesuai blog anda.
Warna biru : samakan dengan labels

Tulisan yang berwarna merah berfungsi sebagai url blog, tulisan warna hijau berfungsi sebagai menu tab, tulisan yang berwana biru berfungsi sebagai sub judul pada menu dropdown dan tulisan yang berwarna kuning berfungsi sebagai label postingan untuk mengarahkan pengunjung pada halaman yang dia pilih.

demikian tutorial dari saya semoga bermanfaat.

Terimakasih

Wednesday, March 13, 2019

Penyimpanan Online Gratis Yang Patut Dilirik

MEGA "MEGA Encrypted Global Acces" menawarkan penyimpanan online gratis dengan kapasitas 50 GB pada saat anda mendaftar, MEGA ini tidak jauh berbeda dengan penyimpanan online lainnya seperti Google Drive, yang menjadi perbedaan adalah jumlah kuota yang diberikan, MEGA akan memberikan kuota penyimpanan online gratis sebesar 50 GB secara otomatis pada saat anda melakukan pendaftaran dan anda juga akan diberi tambahan kuota sebanyak 20 GB setelah kita mendaftar dan menginstal aplikasi, untuk registrasi silahkan klik :

DISINI

Selanjutnya ikuti petunjuk yang diberikan.

Terimakasih.

Tuesday, February 26, 2019

Transfer File Cepat Dan Mudah Dengan Koneksi Wifi

Trasfer file dari Android ke PC atau sebaliknya tanpa ribet harus menggunakan kabel data, yaitu dengan menggunakan koneksi wifi, langkah pertama yang harus anda lakukan adalah instal Airdroid di perangkat Android dan PC anda, untuk instal Airdroid di perangkat android, anda tinggal masuk ke playstore lalu pasang Airdroid di perangkat anda.

Langkah selanjutnya buka browser di PC anda lalu masuk ke airdroid.com atau KLIK DISINI

maka anda akan dibawa ke halaman seperti ini

Selanjutnya klik menu sign up untuk mendaftar maka anda akan diarahkan ke halaman berikut

Isi form dengan lengkap klik next dan ikuti langkah selanjutnya. Ada dua cara untuk menggunakan Airdroid yaitu menggunakan airdroid web atau dengan mendownload dan menginstal Airdroid app di perangkat PC anda.

Anda tinggal memilih cara mana yang anda sukai menggunakan Airdroid web atau dengan instal Airdroid app. Tapi menurut saya lebih gampang dengan menginstal Airdroid, setelah mnyelesaikan langkah pendaftaran anda tinggal login, tapi sebelumnya jalankan dulu Airdroid di perangkat android anda, sebagai contoh disini saya menggunakan Airdroid app yang terinstal di PC, setelah anda login anda akan diarahkan ke halaman seperti ini.

Untuk transfer file klik panah 2 arah atau lihat gambar.

Lalu anda akan mendapatkan halaman seperti ini.

Untuk transfer file dari PC ke android klik panah ke atas atau upload, anda bisa upload file atau folder lihat gambar.

Untuk transfer file dari android ke PC buka folder yang berisi file yang akan di transfer, pilih file yang akan di transfer lalu klik panah ke bawah atau download, lihat gambar.

Bagaimana mudah bukan ? selain untuk alat transfer file Airdroid juga dapat digunakan untuk mengirim dan menerima pesan pada PC melalui nomor hp yang terpasang di perangkat android anda dengan catatan aplikasi di kedua perangkat tetap terhubung.

Untuk download KLIK DISINI

Untuk registrasi KLIK DISINI

Sekian dulu tutorial dari saya, semoga bermanfaat, jangan lupa subscribe channel 9 untuk berita konten terbaru.

Terimakasih.

Salam Blogging

Wednesday, February 13, 2019

Software Video Editing Yang Wajib Dicoba

Bigasoft Total Video Converter 5 adalah software video converter yang menurut penulis cukup mumpuni, karena selain dapat mengkonversi video ke berbagai format, software ini juga mampu memberikan efect seperti membuat watermark, memotong dan menggabungkan beberapa video menjadi satu, juga mampu menghilangkan audio pada video, ini adalah beberapa screen shoot Bigasoft Total Video Converter 5

Untuk penggunaanya anda bisa ikuti petunjuk pada software

Untuk mendapatkan software silahkan klik DISINI

Terimakasih semoga bermanfaat.

Salam Blogging