Cara Membuat QR Code Dengan Android Gratis

Kode QR atau biasanya disebut QR Code singkatan dari "Quick Response Code" adalah bentuk evolusi kode batang dari satu dimensi menjadi dua dimensi.

Penggunaan kode QR sudah sangat lazim di Jepang Hal ini dikarenakan kemampuannya menyimpan data yang lebih besar dari pada kode batang sehingga mampu mengkodekan informasi dalam bahasa Jepang sebab dapat menampung huruf kanji.

Kode QR telah mendapatkan standarisasi internasional dan standarisasi dari Jepang berupa ISO/IEC18004 dan JIS-X-0510 dan telah digunakan secara luas melalui ponsel di Jepang.

Fungsi QR Code

Kode QR berfungsi bagaikan hipertaut fisik yang dapat menyimpan alamat dan URL, nomor telepon, teks, sms dan lain lain yang dapat digunakan pada majalah, surat harian, iklan, pada tanda tanda bus, kartu nama ataupun media lainnya. Atau dengan kata lain sebagai penghubung secara cepat konten daring dan konten luring. Kehadiran kode ini memungkinkan audiens berinteraksi dengan media yang ditempelinya melalui ponsel secara efektif dan efisien. Pengguna juga dapat menghasilkan dan mencetak sendiri kode QR untuk orang lain dengan mengunjungi salah satu dari beberapa ensiklopedia kode QR.

Source: http://id.wikipedia.org/wiki/Kode_QR

Nah, setelah kalian mengerti tentang kode QR beserta fungsinya langsung saja masuk ke langkah pembuatan kode QR (QR Code)

• Unduh aplikasi QR code di sini
• Setelah terunduh, buka aplikasi QR Code
• Pilih bentuk kode QR, saya beri kotak merah yang pertama (saya menggunakan yang pertama)
• Pilih tipe konten kode QR (ada text, url, email, phone, sms, contact, wifi, geolocation) berfungsi untuk menuju ke salah satu konten yang kalian pilih setelah di pindai (scan)
  
  
  

  

  bentuk kode

  
  

  

  pilih tipe konten

   
• Setelah itu tuliskan konten kalian di tempat untuk menulis, sebagai contoh saya menuliskan 4hmad tutorial

  

  tulis sesuai konten yang dipilih, misal email, telepon dll

• Setelah selesai, kalian klik generate
• Selesai, tinggal simpan atau bagikan yang ada pada atas Code QR
  

Nah, itulah cara membuat kode qr sendiri dari android dan gratis tentunya. Sangatlah mudah bukan? ya pastinya.

Sudah ya, cukup segini saja tutorial kali ini, jangan lupa untuk update dan kasih kritik dan saran tentang 4hmad tutorial ini di komentar atau langsung kontak saya yang ada pada halaman about.

Cara Membuat Iklan Mirip Adsense Sumpah mirip banget

Google adsense yaitu salah satu penyedia iklan terbesar, banyak orang orang mendaftarkan adsense, mulai dari blogger pemula hinggan master.

Bahkan ada yang jadi peternak adsense, karena selain ratenya tinggi bila di jual lumayan mahal.

Tapi tidak semua pendaftar adsense akan keterima alias di tolak, ada syarat syaratnya. Syaratnya pun lumayan sulit, kadang juga ada blog yang sudah memenuhi syarat tapi masih mendapat tolakan dari google adsense, dan bikin kecewa.

Nah, bagi kalian yang baru mendapat pesan tolakan dari google adsense jangan sedih karena saya membagikan tutorialnya, Bukan tutorial agar keterima adsense ya, tapi tutorial membuat widget yang mirip dengan adsense.

Emang buat apa membuat widget seperti adsense?

1. Buat partneran
2. Buat internal link juga bisa
3. Buat mengarah ke home
4. Yang paling bagus nih, buat kerjasama backlink (kamu tawarin ke blogger blogger agar pasang iklan di blog kamu dan kamu dapat komisi)

Oke, kalau kalian sudah mengerti maksud dari widget iklan seperti adsense langsung saja masuk ke langkah langkahnya.

• Masuk dashboard blogger
• Masuk ke menu tata letak

  

  tata letak

• Pilih dimana widget yang akan kalian pasang, saran saya di kiri artikel agar mirip seperti adsense

  

  Pilih salah satu, semua juga boleh

• Pilih yang html/javascript

  

  Pilih html/javascript

• Copy script dibawah dan pastekan pada widget html/javascript tadi dan simpan

  

  paste dan simpan

<style>
.gakodejarwo { display:block; background:#eee; margin:20px; }
.gakodejarwo .keluar-jarwo, .gakodejarwo .keluar-jarwo-lengkap { float:right; width:16px; height:15px; cursor:pointer }
.gakodejarwo .keluar-jarwo-lengkap { display:none; margin-top:-15px }
.keluar-jarwo:hover .keluar-jarwo-lengkap,
.info-jarwo:hover .info-jarwo-lengkap
{ display:block!important }
.gakodejarwo .info-jarwo { float:right; width:16px; height:15px }
.gakodejarwo .info-jarwo-lengkap { float:right; width:96px; height:15px; display:none; margin-top:-15px; max-width:100px!important }
.gakodejarwo .buka-jarwo { background:#19abea; color:#fff!important; margin-top:20px!important }
.gakodejarwo .buka-jarwo:hover { background:#1794cb }
.gakodejarwo .hilangkan-jarwo { background:#fff; color:#9E9EA6!important }
.gakodejarwo .hilangkan-jarwo:hover { background:#eee }
.gakodejarwo #tutup-jarwo { display:none; text-align:center; padding:15px 10px; font-size:16px; font-family:arial; margin:30px 0 }
.gakodejarwo .blog { font-family:lusitana,serif; font-weight:bold; color:#222!important }
.gakodejarwo .buka-jarwo, .gakodejarwo .hilangkan-jarwo { display:block; padding:3px; box-shadow:0px 0px 2px rgba(0,0,0,0.12), 0px 1px 3px rgba(0,0,0,0.26) !important; cursor:pointer; margin:0 20px 5px; border-radius:5px; }

/* Slot */
.kotaksedang-jarwo { max-width:300px; height:250px; border:1px solid #eee }
.kotaksedang-jarwo .slot1-jarwo { height:100px; background:#fff; }
.kotaksedang-jarwo .slot1-jarwo .logo1-jarwo { margin:18px 0 0 18px; width:64px; height:64px }
.kotaksedang-jarwo .slot2-jarwo { height:65px; background:rgba(165,39,20,1); }
.kotaksedang-jarwo .slot2-jarwo .judul-jarwo { font-size:16px; font-weight:bold; margin:8px 0 0 15px }
.kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo { margin: 35px 0 0 15px; line-height:1.2 }
.kotaksedang-jarwo .slot3-jarwo { background:rgb(219, 68, 55); height:83px }
.kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo { margin:10px 0 0 15px; color:#e3e3e3!important }
.kotaksedang-jarwo .slot3-jarwo .link-jarwo { margin:60px 0 0 15px; color:#f0b4af!important }
.kotaksedang-jarwo .slot3-jarwo .tombol-jarwo { background:rgba(165,39,20,1); width:52px; height:52px; border-radius:50%; box-shadow:1px 2px 3px 0px rgba(0,0,0,.4); margin:15px 15px 0 0; float:right; position:sticky }
/* Campuran */
.kotaksedang-jarwo .slot2-jarwo .judul-jarwo,
.kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo,
.kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
.kotaksedang-jarwo .slot3-jarwo .link-jarwo
 { color:#fff; font-family:Roboto, Arial, sans-serif; letter-spacing:-0.1px; position:absolute; }
.kotaksedang-jarwo .slot2-jarwo .subjudul-jarwo,
.kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
.kotaksedang-jarwo .slot3-jarwo .link-jarwo
 { position:absolute; font-size:12px; }
.kotaksedang-jarwo .slot3-jarwo .deskripsi-jarwo,
.kotaksedang-jarwo .slot3-jarwo .link-jarwo
 { max-width:200px; }
</style>
<br />
<div class="gakodejarwo kotaksedang-jarwo" id="gakodejarwo">
<div id="buka-jarwo">
<div class="keluar-jarwo">
<a href="https://www.blogger.com/null" onclick="show('tutup-jarwo')">
<img class="keluar-jarwo" src="https://tpc.googlesyndication.com/pagead/images/x_button_blue2.svg" />
<img class="keluar-jarwo-lengkap" src="https://tpc.googlesyndication.com/pagead/images/x_button_dark.svg" title="Sembunyikan Iklan" />
</a></div>
<div class="info-jarwo">
<img class="info-jarwo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdLNcnlud6uyspJoUfU3Tz9um8CWTwBHkMeBcjVMEqhYGXNMff8P24HQi8cY-Sl6FarEUuMbYPBugOGomoLjxuK1vfQGvzu5W1ZVlZDUWuh1zrxEyX4QJ1Iq_j_bM_CBSDT5u0L6nWIEyB/s1600/info.PNG" />
<a href="http://4hmadtutorial.blogspot.com/" target="_blank">
<img class="info-jarwo-lengkap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcyc4XqWvvVdqCxid-rzZJDZ33XFDvVakTyMT0aGuggrP-2MxSgywMcCVs2gySsPrJOR-C9cSTnmDQ1lXy8JJxWUrZ61GJ0f2t72z8KKabU70JtNo71uSh6TgmuOACRbTKpkn8UssdoGEz/s1600/info2-kodejarwo.PNG" title="Iklan ini disediakan oleh google" /></a>
</div>
<div onclick="window.open('http://4hmadtutorial.blogspot.com/','mywindow');" style="cursor: pointer;">
<div class="slot1-jarwo">
<img class="logo1-jarwo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEe2ATT9YQYi449HBhIJxwtDcDmZtFd2qfjC8RC22312YEYCbbNnw93C3i6WuS-lX9E7DBUo66pdVnU5R_NA3ndRfVCzj99eXo87chKC6o5oV-lw5q6R1I7lbNlSH1kByTaRw_ee_RW_Q/s200/4.s.png" />
</div>
<div class="slot2-jarwo">
<a class="judul-jarwo" href="https://www.blogger.com/null">4hmad tutorial</a>
 <a class="subjudul-jarwo" href="https://www.blogger.com/null">Gudannya tutorial</a>
</div>
<div class="slot3-jarwo">
<a class="deskripsi-jarwo" href="https://www.blogger.com/null">4hmad tutorial, situs tutorial | dari blogger.</a>
 <a class="link-jarwo" href="https://www.blogger.com/null">http://4hmadtutorial.blogspot.com/</a>
 <br />
<div class="tombol-jarwo">
<svg height="100%" style="margin-left: 19px; width: 15px;" viewbox="0 0 26 42" width="100%">
   <polyline fill="none" points="6,3 24,21 6,39" stroke-miterlimit="10" stroke-width="5" stroke="rgba(255,255,255,1)"></polyline>
  </svg>
 </div>
</div>
</div>
</div>
<div id="tutup-jarwo">
Ads hidden by <a class="blog" href="https://www.blogger.com/null">google</a> <a class="buka-jarwo" href="https://www.blogger.com/null" onclick="show('buka-jarwo')">Display Ads Again</a>
<a class="hilangkan-jarwo" href="https://www.blogger.com/null" onclick="hide('gakodejarwo')">Close Ads</a></div>
</div>
<script>
function show(e){var t=document.getElementById(e);currentDiv.style.display="none",t.style.display="block",currentDiv=t}var currentDiv=document.getElementById("buka-jarwo");
function hide(target) {
    document.getElementById(target).style.display = 'none';
}
</script>

 Tulisan yang saya warnai merah bisa ganti selera kalian

Selesai, nah itulah cara membuat iklan mirip adsense  jadi buat kalian yang baru ketolak adsense jangan khawatir karena bisa pakai ini, dan jangan menyerah perbaiki blognya untuk daftar adsense lagi.

Bila kalian ahli html/javascript dan css, bisa di oprek lagi.

Terima kasih untuk blog.kodejarwo.com

Source: https://blog.kodejarwo.com/2017/07/adsense-richer-text-ads.html

Cara Scan Network Dengan Netdiscover Di Kali Linux

Pada tutorial kali ini saya akan membagikan Cara Scan Network Dengan Netdiscover Di Kali Linux, fungsinya yaitu melihat pengguna yang aktif di suatu jaringan yang sama, jadi nanti kita bisa me-remot komputer tersebut.

Netdiscover mempunyai dua mode, yaitu mode aktiv dan pasif. Untuk perbedaannya mode aktiv dan mode pasif akan saya jelaskan sekalian langkah langkahnya di bawah.

• Aktive mode

Pada mode aktiv, netdiscover akan mencari semua host dengan informasi yang ada didalam jaringan lokal. Pada mode aktiv ini netdiscover akan mengirim paket ARP, sehingga terdeteksi oleh software yang mempunyai tools pendeteksi oleh terget.

Langkah langkahnya

1. Buka terminal
2. Ketikkan

Netdiscover -r 192.168.1.0/24 -i wlan 0

"-r 192.168.1.0/24" Memberi perintah kepada netdiscover agar mencari ip dari 192.168.1.0 sampai 192.168.1.255 dikarenakan menggunkan subnet mask 24 atau 255.255.255.0.
"-i wlan0" Merupakan adaptor wifi atau kartu jaringan yang digunakan

netdiscover aktive mode

• Passive Mode

Perbedaan dengan mode sebelumnya yaitu aktive mode, namun pada pasive mode ada penambahan perintah -p yang berarti dalam mode passive. Netdiscover hanya mengamati lalu lintas yang terjadi tanpa mengirimkan paket ARP.

Langkah langkah

1. Buka terminal
2. Ketikankan

Netdiscover -r   192.168.1.0/24 -p -i wlan0

"-r 192.168.1.0/24" Memberikan perintah ke netdiscover agar mencari ip dari 192.168.1.0 sampai 192.168.1.255 karna menggunkan subnet mask 24 atau 255.255.255.0.
"-i wlan0" Merupakan adaptor wifi atau kartu jaringan.
"-p" dalam mode passive mode

netdiscover passive mode

Cukup sekian tutorial scan network dengan netdiscover di kali linux semoga bermanfaat untuk siapa saja yang telah mengunjungi dan jangan lupa bagikan dan komen dan tentu saja jangan lupa update agar tidak ketinggalan tutorial lainnya yang pastinya menarik.

Jangan lupa untuk kontak saya lewat instagram / facebook / whatsapp, yang ada pada about.

Cara Download atau Mengambil Foto dinstagram

Pada tutorial kali ini saya memposting Cara Download atau Mengambil Foto dinstagram tanpa ribet. Biasanya bila kita ambil di media sosial gambarnya akan pecah atau tidak jelas tapi dengan cara ini kita bisa ambil dengan hasil high definition (HD).

Oke, tanpa banyak bicara, langsung saja ke tutorial Cara Download atau Mengambil Foto dinstagram tanpa ribet.

Siapkan dulu bahannya, yaitu

• Hp (android) ✔️
• Koneksi internet ✔️
• Aplikasi instasave (download disini)

  

  Download Instasave

Langkah langkahnya:

• Setelah bahan bahan di atas sudah siap, masuk ke aplikasi instasave
• Setelah masuk, klik enable (aktivkan)

  

  enable

  
  

  

  enabled
• Keluar dari aplikasi instasave
• Masuk instagram
• Cari dan pilih foto yang mau di simpan
• Klik titik 3 di pojok kanan atas

  

  klik titik 3

• Pilih salin tautan

  

  salin tautan/copy url

• Selesai

Nah itulah cara download atau mengambil foto dinstagram tanpa ribet dan hd pastinya. Untuk lokasi penyimpanan deafult nya yaitu di:

• Penyimpanan internal/
• Pictures/
• Instasave/

Nah itu lokasi penyimpanan deafult instasave (untuk mengambil foto instagram). Saya rasa segini saja tutorial mendownload atau mengunduh foto di instagram.

Jangan lupa untuk update, komen, dan share tutorial tutorial 4hmad agar lebih bermanfaat.

Cara Mengedit (cara gabung video atau foto) di android

Cara Mengedit (cara gabung video atau foto) di android

Hai, kembali lagi di 4hmad site (4hmad tutorial). Kali ini saya membagikan cara mengedit: menggabungkan video atau foto menjadi satu file

Selain membagi tutorialnya saya juga  menyertakan aplikasinya, aplikasi ini juga sudah mendukung versi pro dan dicari banyak orang tentunya, karena dengan aplikasi ini mereka merasa sangat puas atas fitur fiturnya dan kemudahannya.


Cara pertama

Dengan aplikasi kinemaster yang bisa kalian unduh di sini

Langsung saja menuju langkah langkahnya

• Buka palikasi kinemaster
• Bila sudah terbuka, klik tanda "+" (plus) dan pilih empety project

  

  tanda plus

  
  

  

  empety project
• Setelah itu kalian akan masuk ke projek kosong. Untuk memasukan video kalian pilih media browser, yang berada pada tools bar yang atas

  

  media browser

• Lalu cari video pertama yang mau di gabungkan, bila sudah ketemu tinggal klik saja satu kali

  

  pilih video atau foto

• Setelah itu, klik lagi video ke dua yang ingin kalian gabungkan dan seterusnya, seperti gambar di bawah

  

  seperti diatas

• Video sudah tersambung, kalian tinggal menambahkan efek pada pergantian video, karena bila tidak di beri efek akan terlihat kaku

Cara menambahkan efek di kinemaster

• Klik kotak kecil yang ada di tengah projek

  

  kotak efek

• Lalu kalian pilih efek mana yang mau di tambahkan (deafultnya classic transition)

  

  memberi efek

Bila sudah klik centang pada pojok kanan atas dan lihat hasilnya

Bila kalian terasa kurang dengan efek yang ada di deafult kinemaster, kalian bisa download di store (gambar toko)

• Lalu simpan hasilnya dengan cara
• Klik Bagi / share, yang berada pada sebelah kiri

  

  bagi atau share

• Lalu pilih save video to gallery

  

  save to galery

Cara ke dua

Dengan aplikasi filmorago, untuk filmorago kalian bisa unduh di google, karena file saya sudah hilang

Ok, tanpa basa basi langsung saja

• Buka aplikasi folmorago (bila masih pertama buka akan seperti dibawah)

  

  loading

• Klik buat video baru (+)

  

  new project

• Lalu cari video yang akan kalian gabungkan

  

  pilih video

• Setelah ketemu klik satu kali dan klik satu kali lagi pada video ke dua dan seterusnya
• Kalau sudah klik berikutnya yang ada pada pojok kanan atas
• Selesai, kalian tinggal masukan efek transisi agar tidak terlalu kaku saat pergantian video

Cara menambah efek di filmorago

• Klik transisi, yang berada di tools bar (sebelah kanan)

  

  transisi

• Lalu klik tanda plus (+)

  

  plus

• Setelah itu, kalian pilih preset yang berada di sebelah kiri

  

  preset

• Dan pilih transisi mana yang ingin kalian gunakan
• Lalu klik "OK" dan lihat hasilnya

  

  ok (centang)

kalian bisa unduh efek yang juga pada filmorago, yang bisa kalian unduh bawah preset (titik 3 bertulisan lebih)

• Lalu simpan dengan cara
• Klik simpan yang berada pada pojok kanan atas

  

  save

• Lalu proses akan berjalan

  

  proses penyimpanan

Nah itulah beberapa cara untuk menggabungkan video dengan android, mudahkan? bagikan postingan ini agar lebih bermanfaat.

Cukup segini tutor kali ini dan jangan lupa untuk update, karena masih banyak tutorial tutorial yang belum saya bagikan.

Cara Mengetahui CMS Atau Bahasa Yang Dipakai Suatu Website

Cara Mengetahui CMS Atau Bahasa Yang Dipakai Suatu Website

Cms atau singkatan dari "Content Management System" yaitu suatu alat untuk mempermudah kita mengakses suatu konten. Cms mempunyai banyak macam diantaranya Blogger, Wordpress, Drupal, Joomla, Moodle, Cmsid dn masih banyak lagi.

Pasti ada dari kalian yang bertanya tanya tentang.

Bagaimana cara mengetahui CMS suatu website?

Nah pada kali ini saya memposting cara mengetahui cms atau bahasa yang di gunakan website. Langsung saja masuk ke tutorialnya.

Cara mengetahui cms suatu web

Dengan addons appalyzer, kalian bisa ke store browser dan ketikan wapplyzer atau bisa masuk dengan link di bawah.

Google Chrome: disiniMozilla Firefox: disini

• Setelah itu install
• Selesai

Untuk mengetahui cms suatu website:

• Kalian buka website yang ingin kalian ketahui cmsnya
• Setelah loading selesai, maka wappalyzer akan otomatis mendeteksi cms pada website tersebut
• Tinggal klik ikon wapplyzer yang ada di pojok kanan atas

Selain itu kalian juga bisa mengetahui programing language atau bahasa pemrograman, widget, frame work dan web server dan masih banyak lagi.

Tambahan cara menetahui cms website tersebut adalah wordpress:

• Di komentar ada username, akun, dan website
• Kalian lihat source atau sumbernya dengan cara klik kanan setelah itu sumber halaman atau klik CTRL + U, cari wp-content dengan cara tekan tombol CTRL + F dan ketikkan wp-content. Bila ada berarti itu wordpress

Di gambar atas saya menggunakan website kaskus

Demikian Cara mengetahui atau Cara mengetahui CMS sebuah Website. Jangan lupa untuk Up To Date.

Cara Agar File dalam Google Drive dapat Di Akses Oleh Publik

Kalian pasti pernah saat ingin mendownload atau mengakses file dalam website maupun blog orang lain pada google drive harus meminta akses dulu. Tidak bisa didownload secara langsung, karena harus mendapat perijinan dari admin (pemilik).

Bisa jadi file tersebut hanya bisa diakses oleh orang tertentu saja yang sudah masuk dalam undangan admin.

Nah. Postingan kali ini saya mengshare tutorial tentang Cara Agar File dalam Google Drive Dapat di Download Oleh Publik". Langsung saja masuk ke langkah langkahnya

1. Buka akun google drive kalian (yang berisi file mau di publikkan)
2. Bila sudah masuk ke google drive, klik 2 kali file yang ingin kalian publikkan
3. Nanti akan ada jendela baru, yang ada tulisan download dan titik 3 pada pojok kanan atas

   

   akan seperti ini

4. Klik titik 3 pada pojok kanan atas, setelah itu pilih bagikan

   

   bagikan

5. Nanti akan keluar kotak dialog, bila sudah klik lanjutan

   

   lanjutan

6. Lalu akan keluar kotak dialog lagi, dan pilih ubah

   

   ubah

7. Selanjutnya akan keluar 3 pilihan, seperti di bawah

• Aktif - Publik di web : Dapat di telusuri di mesin pencari google
• Aktif - Siapapun yang memeiliki tautan : dapat di akses orang yang mempunyai link file tersebut.
• Nonaktif - Orang tertentu : hanya dapat di akses oleh kalian dan orang yang kalian undang

pilih yang pertama atau yang kedua

Silahkan kalian pilih yang pertama atau ke dua. Saran saya yang ke dua karena harus punya link dulu. Tapi tergantung kebutuhan juga. Setelah memilih copy dan selesai.

 Cukup sekian tutorial kali ini dan jangan lupa untuk update, bila kalian kurang jelas dengan tulisan saya bisa komen atau hubungi saya.

Cara Membuat Gradient Color Pada Footer Template

Cara Membuat Gradient Color Pada Footer Template

Hai, setelah kemarin saya posting membuat gradient color khususnya pada header, sekarang saya membagikan tutorial membuat gradient pada footer. Saya memakai template milik arlian, untuk template lain bisa menyesuaikan.

Ingat, pastikan jangan sampai menumpuk antara Background utama dengan Background Gradient karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian footer pastikan kalian hapus CSS Background pada footernya dulu. Baru kalian pasang Gradient Color.

Yah, langsung saja terjun ke langkah langkah membuat Gradient color pada header.

Cara Penerapan Gradien Color

• Masuk ke Dashboard Blog
• Setelah itu Klik Template / Tema 
• Klik Edit HTML

Kalian copy script di bawah

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

• Nah dibagian ini cari kode #footer-wrapper / #footer (setiap template berbeda beda), lalu hapus kode Background nya (saya warnai merah) seperti dibawah ini

#footer-wrapper {
 background: #000;  (ganti script yang saya warnai merah dengan script yang telah kalian copy tadi)
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

• Maka akan hasilnya jadi seperti ini (tanpa background). Lihat gambar di bawah agar lebih jelas

#footer-wrapper {
 {background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation:  Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
 @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background- position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%} 100%{background-position:0 50%}}
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

• Jika sudah buat pemanggilan kode terlebih dahulu, misal #footer-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>. Lihat gambar di bawah agar lebih jelas

#footer-wrapper, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Note: tulisan yang saya warnai kuning samakan dengan kode footer, misal #footer-wrapper atau #footer

• Lalu kalian Save / Simpan Template.
• Coba kamu lihat Tampilan nya pasti akan berubah warna
• Selesai

Lihat gambar di bawah agar lebih jelas

langkah 1

la

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #E224C3 dan ganti dengan warna yang kamu inginkan (misal #E73C7E)

Nah itulah cara untuk membuat gradien color di blog. Sampai bertemu di tutorial selanjutnya ya. Bye

Cara Membuat Gradient Color Di Header dengan CSS

Cara Membuat Gradient Color Di Header Dengan CSS

Hai, pada tutorial ini saya membagikan tentang membuat warna warni (gradient) pada template, karena banyak sekali para blogger sekarang menggunakan Gradien Color, terutama di header, footer dan lain lain. Tentu bagi yang belum paham atau awam pasti sulit untuk menerapkan CSS nya. Sebenarnya Gradient Color menggunakan Animation.

CSS yang dimana setiap warna akan berubah tentu saja kodenya mudah di ingat bila sering dipelajari.
Untuk menerapkan Gradient Color pada blog kalian sangatlah mudah, pastikan jangan sampai menumpuk antara Background utama dengan Background warna warni (Gradient), karena nanti Gradien Color tidak akan muncul, karena itu jika ingin memasang dibagian header pastikan kalian hapus CSS Background pada header dulu. Baru kalian pasang Gradient Color.

Yah, langsung saja terjun ke langkah langkah membuat Gradient color pada header.

Cara Penerapan Gradien Color

• Silahkan masuk ke Dashboard Blog
• Setelah itu Klik Template / Tema > Klik Edit HTML
• Kalian copy script di bawah

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

• Nah dibagian ini cari kode #header-wrapper / #header (setiap template berbeda beda), lalu hapus kode Background nya seperti dibawah ini

#header-wrapper {background: #000; Pastekan di sini (ganti script yang saya warnai merah dengan script yang telah kalian copy tadi) max-width: 1000px; margin: 0 auto; position: relative;}

Maka akan hasilnya jadi seperti ini (tanpa background)

#header-wrapper {{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation:  Gradient 15s ease infinite;animation: Gradient 15s ease infinite;} @-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100{background position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%} 100%{background-position:0 50%}}max-width: 1000px; margin: 0 auto; position: relative;}

Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}, Kalian cari <style> atau <b:skin>. Copy script dibawah dan pastekan di bawahnya (<style> atau <b:skin>

#header-container, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);background-size: 400% 400%;-webkit-animation: Gradient 15s ease infinite;-moz-animation: Gradient 15s ease infinite;animation: Gradient 15s ease infinite;}@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100{background-position:0 50%}}@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}

Note: tulisan yang saya warnai merah samakan dengan kode header, misal #header-wrapper atau #header

Lalu kalian Save/Simpan Template.
Coba kamu lihat Tampilan nya pasti akan berubah warna
Selesai


 Keterangan : Pada kode diatas hapus bagian Background yang sudah saya terangkan

Pemanggilan kode

Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kalian tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode yang terahir, yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yah, untuk mengganti warna dengan warna yang kalian inginkan (meracik warna sendiri) silahkan ganti pada bagian kode warna seperti #00000 dan ganti dengan warna yang kamu inginkan (misal #E73C7E)

Nah itulah cara untuk membuat gradien color di blog. Sampai bertemu di tutorial selanjutnya ya. Bye

Source: Kangian.com

Terimakasih untuk kangian.com karena saya sudah diperblehkan merewrite artikelnya.

Cara Membuat Animasi Loading Blogger Keren

Membuat Animasi Loading Blogger bisa dengan menggunakan Gambar Gif maupun Animasi CSS seperti yang saya gunakan ini, mungkin kalian sudah melihat Animasi Loading yang hanya tampil pada saat masuk ke Home (beranda) saja dan bertulisan "Selamat datang" dengan animasi berputar.

Kalian juga bisa loh pakai animasi loading yang sama dengan blog ini dan caranya juga cukup mudah, tidak susah untuk menerapkan scriptnya, jadi langsung saja buat blog kalian menjadi lebih keren dengan tambahan Animasi Loading ini.

Cara Membuat Animasi Loading Blogger

Sebelumnya saya beritahu dulu, sebelum kalian paste di tema (edit html), kalian paste dulu ke notepad. Karena pada blog ini sudah saya kasih sumber saat di copas, setelah di paste di notepad kalian copy lagi scriptnya, jangan sama sumbernya.

• Buka Blogger > Klik Template / Tema > Tambahkan kode dibawah ini sebelum kode </head> or </header>

<style>
#4hmad-tantowi{position:relative;max-width:100%;}
canvas{background-position:center;transition:background 3s;}
canvas:active{background-color:#039BE5;background-size:100%;transition:background 0s;}
#page-loader{width:100%;height:100%;background:#2980b9;color:#2980b9;opacity:.99;position:fixed;top:0;left:0;z-index:9999;}
.loading-wrapper{width:250px;position:fixed;top:40%;left:50%;margin-left:-125px;}
.container,.loader,.tp-loader{position:relative;}
.tp-loader{z-index:10000;}
.tp-loader.spinner{width:30px;height:30px;margin:0 auto 10px;background-color:#fff;box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-box-shadow:0 0 20px 0 rgba(0,0,0,.15);-webkit-animation:tp-rotateplane 1.2s infinite ease-in-out;animation:tp-rotateplane 1.2s infinite ease-in-out;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;}
.loader-job,.loader-name{font-weight:200;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;text-align:center;}
.loader-name{color:#fafafa;opacity:.9;font-size:32px;letter-spacing:-2px;padding-left:2px;padding-right:2px;margin-top:12px;transition:all .4s ease-in-out;}
.loader-job{margin-bottom:40px;margin-top:5px;color:#d8d8d8;font-size:12px;transition:all .4s ease-in-out;}
.loader-left{-webkit-transform:translateX(-40px);-moz-transform:translateX(-40px);-o-transform:translateX(-40px);transform:translateX(-40px);opacity:0;}
.loader-right{-webkit-transform:translateX(40px);-moz-transform:translateX(40px);-o-transform:translateX(40px);transform:translateX(40px);opacity:0;}
.loader-up{-webkit-transform:translateY(-80px);-moz-transform:translateY(-80px);-o-transform:translateY(-80px);transform:translateY(-80px);opacity:0!important;}
.loader-down{-webkit-transform:translateY(80px);-moz-transform:translateY(80px);-o-transform:translateY(80px);transform:translateY(80px);opacity:0;}
.loader-hide{opacity:0;}
.loader{display:inline-block;text-align:center;margin:0 auto;width:30px;height:30px;border:4px solid #Fff;top:50%;animation:loader 2s infinite ease;}
.loader-inner{vertical-align:top;display:inline-block;width:100%;background-color:#fff;animation:loader-inner 2s infinite ease-in;}
.loader-animation{text-align:center;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.footer-social-icons a,.social-icons a{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;color:#fff;}
@keyframes loader{0%{transform:rotate(0);}25%,50%{transform:rotate(180deg);}100%,75%{transform:rotate(360deg);}}
@keyframes loader-inner{0%,100%,25%{height:0%;}50%,75%{height:100%;}}
</style>

• Setelah itu tambahkan kode dibawah ini, letakkan script tepat dibawah <body>

<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>Di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>

Note*tulisan yang saya warnai merah bisa kalian ganti

•  Tambahkan script dibawah ini, taruh diatas kode </body>

<script src='https://rawgit.com/Txmvp/Animation/master/main.js' type='text/javascript'></script>

• Setelah itu simpan
• Selesai

Agar tampilan Loading Blogger hanya tampil di Home tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> pada bagian htmlnya maka hasilnya akan seperti ini

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='4hmad-tantowi'>
<div class='loader-container' id='page-loader'>
<div class='loading-wrapper'>
<div class='loader-animation' id='loader-animation'>
<span class='loader'><span class='loader-inner'></span></span>
</div>
<div class='loader-name' id='loader-name'>
<strong>Selamat datang</strong>
</div>
<strong><p class='loader-job' id='loader-job'>di 4hmad tutorial, mohon tunggu sebentar</p></strong>
</div></div></div>
</b:if>

Tampilan loading hanya akan tampil dibagian Home saja jika menggunakan tag yang ada diatas.

Untuk lebih jelasnya kalian bisa lihat gambar berikut, agar lebih jelas karena jika masih belum paham pasti sulit, dan kode diatas sudah saya coba dibeberapa blog saya dan berhasil bekerja tanpa adanya kendala sama sekali. Jika gambar kurang jelas bisa klik kanan > View Image (Untuk melihat gambar agar jelas)

Yah, itu saja postingan kali ini. Jangan lupa untuk update dan kunjungi tutorial yang lain. Silahkan komen di bawah.

Source : kangiancom