Cara Format Flashdisk yang Baik dan Benar

|
Cara Format Flashdisk yang Baik dan Benar - Seeifisien apapun laptop yang digunakan untuk menyimpan file data dan bisa dibawa kemana saja, tentu masih tetap terkendala dengan ukuran ruang penyimpanan dan bentuk yang bisa dikatakan besar dan cukup berat. Oleh karena itu dibutuhkan sebuah media penyimpanan cadangan yang lebih efisien sehingga mudah dibawa kemana saja tanpa terkendala ukuran bentuk dan berat.
Ada banyak pilihan media penyimpanan yang bisa digunakan seperti harddisk eksternal, Micro SD, dan Flashdisk. Namun jika dilihat dari ukuran serta alat tambahan yang harus ada untuk menghubungkan media tersebut ke komputer, Flashdisk masih tetap diunggulkan sebagai media penyimpanan portable saat ini. Hal ini karena flashdisk memiliki bentuk terkecil diantara ketiganya serta tidak membutuhkan alat tambahan lain seperti kabel data untuk harddisk, card reader untuk Micro SD yang digunakan untuk menghubungkannya ke perangkat komputer.

Flashdisk merupakan sebuah perangkat penyimpanan data eksternal yang dihubungkan pada port USB yang mampu menyimpan data dalam berbagai format dan memiliki kapasitas penyimpanan yang cukup besar. Flashdisk dapat menyimpan data secara permanen walaupun aliran listrik pada rangkaian flashdisk diputuskan. Ini terjadi karena didalam flashdisk terdapat sebuah controller dan memori yang mampu menyimpan data secara permanen walaupun aliran listrik yang ada pada flashdisk sudah diputuskan oleh user.

Berikut beberapa kelebihan dan kekurangan perangkat media penyimpanan ( flashdisk )

Kelebihan Flashdisk

  • Flashdisk memiliki ruang penyimpanan yang cukup besar.
  • Flashdisk memiliki ukuran yang sangat kecil, sehingga mudah dibawa kemana saja.
  • Cara penggunaannya sangat sederhana dan mudah tanpa ada alat tambahan untuk menghubungkannya pada komputer atau perangkat lain.
  • Flashdisk memiliki harga yang cukup terjangkau untuk semua kalangan, mulai dari anak sekolahan, kantoran, dan umum.

Kekurangan Flashdisk

  • Mudah hilang, dikarenakan ukurannya yang sangat kecil.
  • Mudah rusak karena penggunaannya yang tidak sesuai dengan prosedur.
  • Mudah terkena virus. Hal ini dapat diatasi dengan beberapa teknik yang bisa anda lakukan untuk melindungi flashdisk anda dari infeksi virus. Silahkan baca artikel berjudul Cara Melindungi Flashdisk Dari Virus sebagai panduannya.
Ketika anda menggunakan flashdisk, ada kalanya anda harus mengecek flashdisk yang dimiliki. Karena seperti media penyimpanan lainnya, flashdisk juga memiliki batasan ukuran ruang penyimpanan. Kapasitas flashdisk yang terlalu penuh terkadang bisa mengakibatkan error ketika flashdisk dibaca oleh komputer. Belum lagi jika flashdisk yang anda miliki terjangkit virus. Jadi untuk menghindari masalah tersebut dan infeksi virus lebih lanjut ke komputer atau laptop, anda harus melakukan format pada flashdisk anda.

Cara Format Flashdisk Lengkap dengan Gambar
Dalam artikel ini, saya akan menjabarkan bagaimana cara memformat flashdisk yang baik dan benar sesuai dengan prosedur yang harus dilakukan. Ada dua cara memformat flashdisk yakni, yang pertama format flashdisk melalui Windows Explorer dan yang kedua melalui Command Prompt (CMD). Alur langkah format flashdisk ini bisa anda lakukan juga pada perangkat media penyimpanan lainnya seperti harddisk eksternal dan micro SD. Windows yang saya gunakan adalah Windows 7. Untuk Windows versi sebelum dan sesudahnya alurnya sama.

Format Flashdisk melalui Windows Explorer
1. Pertama, colokkan flashdisk pada port USB yang ada pada komputer / laptop. Jika belum terbaca, coba colokkan flashdisk pada port USB yang lain.
2. Jika menurut anda ada beberapa data yang terdapat didalam flashdisk masih penting, silahkan pindahkan data tersebut ke harddisk komputer / laptop (backup).
3. Buka Windows Explorer, bisa melalui
klik Start Menu >> klik Computer
klik kanan Start Menu >> pilih Open Windows Explorer
klik logo Folder pada taksbar
4. Arahkan cursor anda pada drive USB flashdisk. Pastikan drive tersebut adalah flashdisk yang ingin anda format.

Format Flashdisk melalui Windows Explorer - Computer

5. Klik kanan pada drive USB tersebut, lalu pilih dan klik Format...

Format Flashdisk melalui Windows Explorer - Computer

6. Akan tampil jendela kecil Format USB Drive. Pilih opsi yang anda inginkan, mulai dari File system, Allocation Unit Size, Volume Label dan Format Options. Untuk lebih jelasnya mengenai opsi ini, silahkan simak penejlasan di bawah gambar.

Format Flashdisk melalui Windows Explorer - Computer

Penjelasan :
a. File System
Secara default pilihan file system terdapat 3 jenis yakni NTFS, FAT, dan exFAT
FAT
File system FAT merupakan file sistem/sistem berkas default dari sebuah storage yang paling kompatibel sistem format di seluruh dunia. anda hampir dapat menjamin bahwa dengan menggunakan format file sistem FAT, anda bisa pasang perangkat anda ke komputer yang menjalankan OS atau hubungkan ke perangkat elektronik atau digital dan memiliki data anda dibaca.
Sistem berkas FAT juga lebih cepat dan memakan banyak ruang pada perangkat USB. Namun, sistem file FAT tidak memiliki built-in keamanan, sehingga siapapun dapat membaca file. FAT32 lebih baik daripada FAT karena memiliki ukuran cluster yang lebih kecil dan karena itu membuang-buang ruang pada disk.

NTFS
Sistem file buatan Microsoft lainnya adalah NTFS. Sisem file NTFS ini dikenalkan pada tahun 1993 saat Windows NT 3.1 baru-barunya diperkenalkan. NTFS sendiri merupakan singkatan dari New Technology File System. Nah, sistem file NTFS sendiri punya desain yang terbilang sederhana, namun kemampuannya itu lebih baik dibandingkan file system FAT.
Kelebihannya, NTFS mampu mengatur kuota volume untuk setiap penggunanya atau bisa disebut dengan Disk Quota. NTFS juga mendukung sistem file yang terenkripsi, sehingga cukup aman ketika anda menyimpan data dalam file system NTFS ini.

exFAT
Sistem file exFAT merupakan jajaran keluarga dari FAT, namun masih lebih baik dari FAT32. Secara teori, exFAT dan FAT32 itu memiliki ciri khas yang sama. Namun, ada perbedaan dalam penggunaannya.
Jika FAT32 itu hanya mampu menampung file dengan ukuran maksimal 4GB maka exFAT merupakan upgrade dari FAT32 yang dapat menjadi pilihan terbaik. Sehingga anda bisa menyimpan data lebih dari 4GB sekali pun, Biasanya, hal ini diterapkan pada flashdisk dan microSD zaman sekarang.
Kelemahan utama ExFAT adalah  tidak kompatibel dengan format file FAT. Hal ini hanya dapat dibaca pada Windows XP dan kemudian (dengan paket layanan diinstal) dan OS X Snow Leopard dan lebih tinggi. Di luar dua sistem operasi, tidak ada sistem lain yang mendukung sistem file exFAT. Jika anda tahu sistem anda akan menggunakan perangkat USB pada mendukung ExFAT, maka itu adalah pilihan terbaik karena manfaat kinerja dan kurangnya pembatasan ukuran.

b. Allocation Unit Size
Allocation Unit Size adalah sebagian kecil ruang yang diberikan ke sistem untuk membantu proses writting pada Flashdisk. Ketentuannya, semakin besar ruang partisi yang dialokasikan, maka semakin baik perfoma sistem dalam membaca file di Flashdisk, begitu pula sebaliknya.
Jadi opsi ini tergantung pada kebutuhan. Jika ingin menyimpan file dengan size besar, maka maksimalkanlah allocation size untuk mendapatkan kinerja yang lebih baik. Jika ingin menyimpan file dalam ukuran sedang ataupun kecil, maka allocation size kecil bisa menjadi opsi. Dalam banyak kasus, biarkan saja opsi ini terpilih secara default.

c. Volume Label
Volume label adalah nama yang akan digunakan oleh Flashdisk, jadi ini bisa diisikan nama apa saja sesuka hati. Tetapi ada beberapa limitasi berdasarkan jenis file system yang dipilih, diantaranya:
  • NTFS, maksimum 32 huruf, akan ditampilkan dengan huruf besar ataupun kecil sesuai dengan ketikan.
  • FAT, maksimum 11 huruf, tidak bisa menggunakan karakter special (* ? . , ; : / \ | + = < > [ ]), semua huruf yang ditampilkan akan menjadi kapital.
d. Format Options
Secara default, opsi Quick Format akan tercentang, ini berarti Flashdisk hanya akan dihapus saja dan tidak akan melakukan deep scan. Sebaliknya jika menghilangkan tanda centang pada opsi tersebut, maka tidak hanya akan melakukan formatting tetapi juga melakukan scanning pada Flashdisk untuk mendiagnosa masalah seperti bad sector, hal ini cukup memakan waktu dibandingkan dengan Quick Format.

7. Jika sudah sesuai, silahkan klik tombol Start untuk memulai proses format.
8. Tampil jendela peringatan bahwa melakukan format terhadap media tersebut akan menghapus semua data yang didalam media penyimpanan. Karena data dalam flashdisk sudah dibackup atau tidak ada data penting dalam flashdisk, Silahkan klik OK untuk melanjutkan proses Formatting.

Format Flashdisk melalui Windows Explorer - Computer

9. Tunggu beberapa saat sampai proses formatting selesai (biasanya tidak membutuhkan waktu lama). Proses formatting selesai akan ditandai dengan munculnya jendela pop up yang berisi informasi bahwa proses formatting telah selesai atau komplit. Silahkan klik OK.

Format Flashdisk melalui Windows Explorer - Computer

10. Anda bisa langsung membuka drive USB flashdisk dan menemukan isi flashdisk anda telah bersih dan siap diisi dengan data-data.

Format Flashdisk melalui Windows Explorer - Computer


Format Flashdisk melalui Command Prompt
Melakukan format flashdisk, selain melalui Windows Explorer anda juga bisa melakukan format flashdisk melalui Command Prompt atau biasa disebut CMD. Format flashdisk melalui CMD ini bisa anda manfaatkan jika flashdisk atau flashdrive anda sedang mengalami masalah dan tidak dapat diakses melalui Windows Explorer. Untuk melakukannya, silahkan ikuti langkah-langkah berikut.

1. Pertama, masukkan flashdisk ke port USB komputer atau laptop.
2. Buka Command Prompt, klik Start Menu >> ketikkan Command Prompt pada kotak pencarian >> klik kanan >> kemudian pilih Run as administrator.

Format Flashdisk melalui Command Prompt - Computer

3. Setelah jendela CMD terbuka, ketikkan diskpart untuk masuk ke dalam utility.

Format Flashdisk melalui Command Prompt - Computer

4. Kemudian ketikkan list disk untuk menampilkan disk yang aktif pada komputer atau laptop.

Format Flashdisk melalui Command Prompt - Computer

5. Perhatikan daftar disk yang tampil. Lihat nomor disk untuk memastikan anda tidak salah memilih, silahkan cek ukuran disk (kapasitas flahdisk). Pada gambar di atas drive flashdisk terletak pada Disk 1.
6. Apabila sudah mengetahui disk flashdisk yang mana, ketikkan perintah select disk #, dimana tanda pagar adalah nomor disk (flashdisk) yang ada pada daftar disk, apakah 0, 1, atau 2. Misal flashdisk ada pada disk 1 maka ketikkan select disk 1.

Format Flashdisk melalui Command Prompt - Computer

7. Selanjutnya ketikkan perintah clean untuk menghapus semua data yang ada didalam disk 1 (flashdisk).

Format Flashdisk melalui Command Prompt - Computer

8. Kemudian ketikkan kembali perintah list disk, untuk menampilkan daftar disk yang aktif. Jika terdapat tanda bintang pada isi kiri Disk, itu berarti disk masih terpilih. Jika tidak maka kamu perlu mengetikan ulang perintah pada langkah nomor 6.

Format Flashdisk melalui Command Prompt - Computer

9. Selanjutnya ketikkan perintah create partition primary.

Format Flashdisk melalui Command Prompt - Computer

10. Lalu ketikkan perintah select partition 1.

Format Flashdisk melalui Command Prompt - Computer

11. Kemudian ketikkan active untuk mengaktifkan partisi yang telah anda buat.

Format Flashdisk melalui Command Prompt - Computer

12. Langkah selanjutnya adalah melakukan formatting dengan format FAT32 dan memberikan nama. Contoh ketikkan perintah format FS=FAT32 label=SAVEME quick. Kamu bisa mengubah tulisan warna merah dengan nama yang anda inginkan untuk nama flashdisk.

Format Flashdisk melalui Command Prompt - Computer

13. Terakhir ketikan perintah assign letter=G untuk memberikan driver letter, anda bisa mengubah tulisan warna merah dengan letter yang anda inginkan.

Format Flashdisk melalui Command Prompt - Computer

14. Jika telah selesai, anda dapat mengakhirinya dengan mengetikkan perintah exit dan menutup jendela command prompt.

Format Flashdisk melalui Command Prompt - Computer

15. Anda dapat melihat hasilnya dengan cara membuka Windows Explorer dengan klik kanan pada drive USB flashdisk, lalu pilih dan klik Properties.

Format Flashdisk melalui Command Prompt - Computer


Demikian tutorial sederhana mengenai memformat flashdisk menggunakan 2 teknik yang bisa anda lakukan pada flashdisk anda. Silahkan anda pilih dari kedua cara diatas untuk melakukan format terhadap media penyimpanan flashdisk anda, Namun saya menyarankan menggunakan cara yang pertama, karena langkah-langkahnya lebih sederhana dan mudah dimengerti untuk diterapkan. Semoga bermanfaat and " Happy Blogging "

Cara Mengubah Format Video dengan Notepad++

|
Cara Mengubah Format Video dengan Notepad++ - Ketika hendak menonton sebuah video terkadang video tersebut tidak bisa diputar atau dimainkan karena media player yang digunakan baik itu di smartphone atau di PC tidak mendukung format video yang akan diputar. Oleh karenanya anda harus bersusah payah melakukan browsing untuk mencari, mendownload, dan meng-install media player yang mendukung format video, agar bisa diputar atau dimainkan di Smartphone maupun di PC.

Apabila anda malas browsing, mendownload media player yang cocok dengan video yang ingin diputar, dan melakukan installasi yang cukup banyak memakan ruang pada harddisk PC atau smartphone, mau tidak mau anda harus meng-convert format video tersebut ke format yang didukung oleh media player pada PC atau smartphone yang dimiliki. Namun untuk men-convert sebuah video baik dengan menggunakan aplikasi convert atau dengan mengunjungi situs penyedia layanan convert secara online, akan membutuhkan waktu yang cukup lama. Misalkan anda akan meng-convert sebuah video secara online. Sebelum melakukan convert video tersebut harus diupload terlebih dahulu untuk selanjutnya masuk ke dalam proses convert. Nah proses upload dan convert inilah yang membutuhkan waktu yang cukup lama. Coba bayangkan jika video yang akan diconvert memiliki ukuran yang cukup besar. Hal ini juga sama dengan convert menggunakan aplikasi convert, karena memiliki proses convert.

Untuk itu pada artikel kali ini, saya akan memberikan sebuah tutorial sederhana bagaimana cara mengubah format sebuah video ke format yang lain menggunakan aplikasi bawaan Windows yakni Notepad++. Cara ini saya peroleh dari hasil nongkrong dengan seorang teman yang berprofesi sebagai seorang programmer. Teman ini bilang, " Ga usah capek-capek nunggu hasil convert, kamu bisa mengubah langsung format video menggunakan Notepad++ ketika akan menyimpan file video pada Notepad++ seperti membuat file js sendiri ". Keesokan harinya, saya pun mencoba untuk memperaktikkan di rumah dan saya pun berhasil mengubah format video ke format yang lain menggunakan Notepad++ dengan waktu cukup kira-kira 5-10 detik.

Jadi mengunakan aplikasi tersebut kita sudah bisa merubah format video tanpa software tambahan. Adapun kelebihan dan kekurangannya, kelebihan menggunakan metode ini yakni jauh lebih cepat, kita tidak perlu menunggu lama untuk proses convert. Sementara untuk kekurangannya yakni tidak bisa dilakukan pada video dengan ukuran video di atas 500mb (saya pernah mencoba video dengan ukuran file sebesar 350mb) dan ukuran serta kualitas tidak dapat diubah jadi menyesuaikan dengan video aslinya. Nah, langsung saja anda ikuti beberapa langkah sederhana berikut ini :

Pertama-tama, pastikan PC / Laptop anda sudah terdapat Notepad++. Jika belum, silahkan kunjungi situs resminya di bawah ini untuk mendapatkannya.

https://notepad-plus-plus.org//
Saya anggap di dalam PC / Laptop anda sudah terdapat Notepad++. Klik kanan pada video yang ingin dirubah formatnya ke format yang lain. Kemudian pilih Edit with Notepad++ (Apabila Edit with Notepad++ tidak tampil, silahkan pilih Open with >> Choose default program... >> klik tombol Browse... >> Ketikkan Notepad++ pada kotak File name, lalu Enter sehingga muncul program Notepad++ >> kemudian klik Notepad++ >> lalu klik Open ).

Cara Mengubah Format Video dengan Notepad++ - Application

Setelah terbuka, silahkan simpan dengan klik File >> lalu pilih Save as... Ganti nama file dengan nama yang anda inginkan dan jangan lupa beri .format di belakang nama file. Misalkan saya ingin mengubah fromat video ke format 3gp, maka penulisannya akan seperti namavideo.3gp >> yang terakhir silahkan klik tombol Save.

Cara Mengubah Format Video dengan Notepad++ - Application


Sekarang anda sudah berhasil mengubah sebuah format video ke format yang anda inginkan, sebagai contoh ke format .3gp seperti gambar berikut.

Cara Mengubah Format Video dengan Notepad++ - Application


Dengan mengubah format video ke format yang anda inginkan dengan waktu yang cukup singkat yakni membutuhkan waktu hanya 5-10 detik, maka anda tidak perlu melakukan convert yang membutuh waktu yang cukup lama (tergantung besar atau kecilnya ukuran file video).

Demikian tutorial sederhana mengenai bagaimana mengubah format video ke format yang lain menggunakan Notepad++. Semoga bermanfaat and " Happy Blogging "

Membuat Menu Navigasi Plus Kotak Pencarian Responsive

|
Cara Membuat Menu Navigasi Plus Kotak Pencarian Responsive Mobile Friendly - Navigasi adalah petunjuk posisi dan arah perjalanan. Di dalam dunia web, navigasi dianggap penting agar user / pengunjung yang sedang berada di dalam halaman tertentu tidak tersesat dan mudah menemukan halaman-halaman lain dalam blog / website.

Apa itu Menu Navigasi Plus Kotak Pencarian Responsive?
Menu Navigasi Plus Kotak Pencarian Responsive (Mobile Friendly) adalah sebuah fasilitas yang diberikan oleh pemilik situs, dimana didalamnya berisi sekumpulan link-link penting yang mengarah ke halaman tertentu dan sebuah kotak pencarian yang digunakan untuk mencari artikel dengan sebuah kata kunci serta memiliki tampilan yang dapat menyesuaikan segala jenis tampilan secara otomatis dengan baik bila di akses melalui berbagai macam perangkat atau biasa disebut mobile friendly.

Menu navigasi ini berbeda dengan menu navigasi yang pernah saya share sebelumnya pada artikel berjudul

Perbedaannya terletak pada bentuk tampilan menu navigasi. Menu navigasi sebelumnya apabila blog yang menggunakannya diakses melalui perangkat dengan ukuran layar yang lebih kecil seperti seluler atau handphone, tampilannya akan tampil amburadul tidak tersusun rapi. Sedangkan menu navigasi plus kotak pencarian responsive mobile friendly yang akan saya share kali ini, tampilannya akan tersusun berbeda dan rapi karena secara otomatis menyesuaikan ukuran layar ketika blog diakses melalui perangkat yang berbeda dan memiliki ukuran layar yang lebih kecil.

Oleh karena itu, pengunjung yang mengakses blog melalui perangkat seluler atau mobile, tampilan menu navigasi website atau blog akan terlihat sempurna dan profesional serta memudahkan para pengunjung memilih halaman tertentu di dalam sebuah blog dalam hal navigasi.

Berikut penampakan Menu Navigasi Plus Kotak Pencarian Responsive (Mobile Friendly) pada perangkat yang berbeda.

Membuat Menu Navigasi Plus Kotak Pencarian Responsive - Tutorial Blogger
Tampilan Dekstop

Membuat Menu Navigasi Plus Kotak Pencarian Responsive - Tutorial Blogger
Tampilan Seluler/Mobile


Bagaimana sob, cukup keren bukan? Apakah anda berminat?
Jika berminat, berikut ini kode CSS, JavaScript, dan HTML serta cara memasang Menu Navigasi dengan Kotak Pencarian Responsive Mobile Friendly.

Pertama-tama pastikan template blog anda sudah terdapat kode di bawah ini. Kode di bawah ini berfungsi untuk menampilkan kode HTML simbol-simbol gambar (font awesome), karena di dalam menu navigasi yang akan kita buat terdapat simbol gambar kaca pembesar yang terletak pada tombol kotak pencarian dan gambar rumah pada home. Jika belum, silahkan copy paste kode di bawah ini tepat di atas kode </head>. Untuk lebih jelasnya, baca artikel berjudul Cara Menggunakan dan Memasang Font Awesome di Blog sebagai panduannya.

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Copy paste kode CSS di bawah ini tepat di atas kode </head>

<style>
/* NAVIGATION MENU */
.toggleMenu {
    display:none;
    background:#555;
    padding:0 15px;
 height:45px;
 line-height:45px;
    color: #fff !important;
}
#nav {
 background:#333;
 text-transform:uppercase;
 height:48px;
 line-height:45px;
    font-family:Arial;
    font-size: 12px;
font-weight:bold;
/text-shadow:1px 1px 2px #000;
-webkit-box-shadow:0 1px 5px #000;-moz-box-shadow:0 1px 5px #000;box-shadow:0 1px 5px #000;
}
.nav-menu2 {
 background:#333;
    list-style: none;
 margin:0 0 0 0;
     *zoom: 1;
 float:left;
}
.nav-menu2:before,
.nav-menu2:after {
    content: &quot; &quot;;
    display: table;
}
.nav-menu2:after {
    clear: both;
}
.nav-menu2 ul {
    list-style: none;
 margin:0 0 0 0;
    width:12em;
}
.nav-menu2 a {
 display:block;
    padding:0 15px;
}
.nav-menu2 li {
    position: relative;
 margin:0 0;
}
.nav-menu2 &gt; li {
    float: left;
}
.nav-menu2 &gt; li &gt; a {
    display: block;
 height:48px;
 line-height:48px;
 color:#fafafc;
}
.nav-menu2 &gt; li &gt; a.active {
 background:#c00;
}
.nav-menu2 &gt; li:hover &gt; a {
 background:#c00;
}
.nav-menu2 li ul {
 background:#fff;
 display:block;
 position:absolute;
 left:0;
 z-index:10;
 visibility:hidden;
 opacity:0;
    -webkit-transition:all .25s ease-out;
       -moz-transition:all .25s ease-out;
        -ms-transition:all .25s ease-out;
         -o-transition:all .25s ease-out;
            transition:all .25s ease-out;
 border: 1px solid #d9d9d9;
 border: 1px solid rgba(217,217,217,1);
 box-shadow:0 0 2px rgba(0,0,0,0.2);
}
.nav-menu2 li li ul {
 left:100%;
 top:-1px;
}
.nav-menu2 &gt; li.hover &gt; ul {
 visibility:visible;
 opacity:10;
}
.nav-menu2 &gt; li &gt; ul:before {
 content:&quot;&quot;;
 width:0px;
 height:0px;
 position:absolute;
 bottom:100%;
 left:20px;
 border-width:8px;
 border-style:solid;
 border-color:transparent transparent #fff transparent;
 display:block;
}
.nav-menu2 li li.hover ul {
 visibility:visible;
 opacity:10;
}
.nav-menu2 li li a {
    display: block;
 color:#333;
    position: relative;
    z-index:100;
 line-height:32px;
}
.nav-menu2 li li a:hover {
 background:#f0f0f0;
}
/.nav-menu2 li li li a {
    background:#fff;
    z-index:20;
 color:#333;
}
.nav-menu2 li .parent:after {
    content: &quot;\f107&quot;;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-left:6px;
}
#search-form {
 background:$(menu.background.color);
 float:right;
 margin:0 0;
 width:230px;
}
#search-form table {
 width:100%;
 margin:0 0 0 0;
}
#search-form td.search-box {
 padding-right:30px;
}
#search-form input#search-box[type=&quot;text&quot;] {
 background:#fff;
 height:36px;
 line-height:36px;
 margin:5px 0 5px 10px;
 padding:0 10px;
 width:99%;
 color:#666;
 border:none;
}
#search-form input#search-button[type=&quot;submit&quot;] {
 font-family: FontAwesome;
 background:#c00;
 color:#fff;
 height:36px;
 line-height:36px;
 margin:5px 5px 5px 0;
 padding:0 12px;
 border:none;
 outline:none;
 transition:all 0.25s;
 -moz-transition:all 0.25s;
 -webkit-transition:all 0.25s;
}

#search-form input#search-button[type=&quot;submit&quot;]:hover{
 background:#222;
 cursor:pointer;
}
#search-form input#search-box[type=&quot;text&quot;]:focus {
 background:#eee;
 outline:none;
}

@media only screen and (max-width:768px){
.nav {
  float:none;
  width:100%;
  max-width:100%
 }
    .active {
        display: block;
    }
 #search-form {
  width:100%;
  margin:0 0 0 0 !important;
 }
 .nav li ul:before {
  display:none;
 }
    .nav &gt; li {
        float: none;
  overflow:hidden;
    }
    .nav ul {
        display: block;
        width: 100%;
  float:none;
    }
 .nav-menu2 li ul {
  background:#eee;
  border:none;
  box-shadow:none;
 }
 .nav-menu2 li li ul {
  background:#f5f5f5;
 }
 .nav-menu2 li li a:hover {
  background:#ddd;
 }
    .nav &gt; li.hover &gt; ul , .nav li li.hover ul {
        position: static;
    }
 #search-form {
  width:100%;
  background:#444;
 }
 #search-form td.search-box {
  padding:0 10px !important;
 }
 #search-form td.search-button {
  padding:0 10px;
  width:1%;
 }
 #search-form input#search-box[type=&quot;text&quot;] {
  margin:0 0 0 0;
 }
 #search-form input#search-button[type=&quot;submit&quot;] {
  margin:0 0 0 0;
 }
}
</style>
<b:if cond='data:blog.isMobile'>
<style type='text/css'>
.mobile .navigation-menu {
 float:none;
 width:auto;
 max-width:728px;
 width:100%;
 padding:0 0 0 0;
 margin:0 0 0 0;
}
/* NAVIGASI */
.mobile #mobile-nav {
 background:#117AC9;
 font-size:13px;
 font-weight:bold;
 color:#fff;
 text-align:center;
 width:auto;
 overflow:hidden;
 margin:0;
 padding:10px 6px;
}
.mobile #mobile-nav span a{
 color:#fff;
 padding:3px 0;
 margin:0
}
.mobile #mobile-nav span a:hover{
 text-decoration:underline;
}
</style>
</b:if>

Selanjutnya temukan kode </body> (gunakan Ctrl+F untuk mempermudah pencarian), setelah ketemu, copy paste kode JavaScript di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()})
;$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
//]]></script>

Kemudian temukan kode </header> (gunakan Ctrl+F untuk mempermudah pencarian), setelah ketemu copy paste kode HTML di bawah ini tepat di bawah kode </header>

<nav id='nav'>
<a class='toggleMenu' href='#'><i class='fa fa-th-list'/> Menu</i></a>
<ul class='nav nav-menu2'>
<li><a class='active' href='#'><i class='fa fa-home'/></i></a></li>
<li><a href='#' title='About'>About</a>
<ul>
<li><a href='#' target='_blank' title='Contact Us'>Contact Us</a></li>
<li><a href='#' target='_blank' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' target='_blank' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' target='_blank' title='Terms Of Service'>Terms Of Service</a></li>
</ul>
</li>
<li><a href='#' title:'Menu1'>Menu1</a>
<ul>
<li><a href='#'>Sub Menu1</a>
<ul>
<li><a href='#' title='Sub Sub Menu1'>Sub Sub Menu1</a></li>
<li><a href='#' title='Sub Sub Menu1'>Sub Sub Menu1</a></li>
</ul></li>
<li><a href='#'>Sub Menu2</a>
<ul>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
<li><a href='#' title='Sub Sub Menu2'>Sub Sub Menu2</a></li>
</ul></li>
<li><a href='#' title='Sub Menu3'>Sub Menu3</a></li>
<li><a href='#' title='Sub Menu4'>Sub Menu4</a></li>
</ul>
</li>
<li><a href='https://harmansh.blogspot.com/p/site.html' title='Sitemap'>Sitemap</a></li>
<li><a href='#' title:'Tools'>Tools</a>
<ul>
<li><a href='https://harmansh.blogspot.com/2018/06/pengertian-fungsi-dan-tag-dasar-html.html' target='_blank' title='Kamus HTML'>Kamus HTML</a></li>
<li><a href='https://harmansh.blogspot.com/2018/09/cara-memasang-tools-kode-warna-di-blog.html' target='_blank' title='HTML Color Code'>HTML Color Code</a></li>
<li><a href='http://www.blogcrowds.com/resources/parse_html.php' target='_blank' rel="nofollow" title='Parse Code HTML'>Parse Code HTML</a></li>
</ul></li>
<li><a href='#' title='Translate'>Translate</a></li>
</ul>
<form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' type='text' value='Search…' vinput=''/></td>
<td class='search-button'><input id='search-button' title='Search' type='submit' value=''/></td></tr></tbody></table></form>
</nav>

Catatn : Silahkan disesuaikan dengan keinginan mulai dari link dan nama yang akan tampil pada menu.

Terakhir, silahkan klik Simpan Tema atau Save Template.

Catatan : Untuk kode HTML, selain memasang kode tersebut ke dalam kode Template, anda juga bisa memasangnya menggunakan Tambahkan gadget melalui menu Tata Letak untuk memudahkan anda dalam hal menambahkan atau mengganti link pada kode HTML. Namun apabila tata letak template anda tidak memiliki kolom Tambahkan gadget di bawah header, silahkan baca artikel berjudul Menambah 1 Kolom Gadget dibawah Header sebagai panduannya.

Dengan memasang menu navigasi plus kotak pencarian responsive mobile friendly pada blog, maka akan membuat blog akan tampil sempurna dan profesional secara otomatis di semua ukuran layar perangkat ketika blog diakses.

Demikian tutorial sederhana mengenai bagaimana cara membuat menu navigasi plus kotak pencarian responsive. Semoga bermanfaat and " Happy Blogging "

Membuat Blog Menjadi Responsive Mobile Friendly

|
Cara Membuat atau Memodifikasi Template Blog Menjadi Responsive Mobile Friendly - Seiring dengan bergulirnya perkembangan zaman, produk-produk teknologi juga ikut berkembang dengan pesat. Penggunaan smartphone, tablet, gadget-gadget yang selalu terkoneksi dengan internet serta mudah untuk dibawa, menjadi tren yang selalu meningkat dari tahun ke tahun. Dengan perkembangan dan meningkatnya penggunaan gadget secara langsung maka akan sangat berpengaruh dalam dunia blogger.

Membuat Blog Menjadi Responsive Mobile Friendly - Tutorial Blogger

Bukan hanya melalui laptop/PC, semua orang dengan mudahnya dapat mengakses internet untuk mencari informasi melalui gadget-gadget canggih yang mereka miliki. Oleh karena itu, sebagai seorang Blogger mau tidak mau harus tunduk dan mengikuti perkembangan yang terjadi agar apa yang anda usahakan melalui blog yang dimiliki, tidak tertinggal dan ditinggalkan oleh pengunjung atau pembaca setia blog.

Cara terbaik dari beberapa metode yang ditawarkan dalam mengantarkan konten-konten blog kepada setiap pengunjung yang mengakses blog melalui perangkat seluler atau mobile adalah penggunaan design template responsive ramah smartphone (Mobile Friendly) ke blog. Tampilan blog yang responsive adalah hal yang sangat penting. Responsive scale menjadi tumpuan bagi sebuah blog agar mendapat predikat "mobile friendly" ketika muncul pada hasil pencarian search engine. Ini berarti blog tersebut dapat dinikmati 100% tanpa kekurangan jika diakses melalui perangkat mobile.

Banyak template responsive gratis maupun berbayar bertebaran di internet. Namun bagaimana jika pemilik blog tidak mau mengganti template yang digunakan dengan template responsive mobile friendly, karena template yang digunakan design tampilannya yang bagus dan sudah terlanjur sayang dengan template tersebut tapi belum mobile friendly atau responsive. Tentu saja jika blog menggunakan template yang belum responsive mobile friendly akan mempengaruhi jumlah visitor blog yang akan semakin berkurang. Sedangkan apabila anda berfikir untuk mengganti template blog dengan template responsive, tapi belum faham cara mengganti template, silahkan baca artikel berjudul Cara Mengganti Template Blog di Blogger

Untuk mengetahui apakah template blog atau website yang digunakan sudah responsive atau belum cek di situs berikut.

https://search.google.com/test/mobile-friendly

Apabila design template favorite yang anda gunakan ternyata belum responsive atau mobile friendly, silahkan simak dan ikuti langkah-langkah berikut dengan seksama.

Pertama yang harus dilakukan, silahkan login ke akun blogger anda, pilih blog yang templatenya belum responsive. Pilih menu Tema atau Template, lalu tekan tombol Backup/Pulihkan yang berada di pojok kanan atas layar. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan edit HTML pada kode template dan anda adalah seorang pelupa.

Jika sudah silahkan tutup dan klik tombol Edit HTML untuk membuka editor kode template. Pastikan pada kode template sudah terdapat kode berikut

<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>

Biasanya kode tersebut terletak diantara kode <head>.......</head>, jika belum ada, copy paste kode tersebut tepat di bawah kode <head>.

Layout Responsive
Langkah selanjutnya yang harus dilakukan adalah menggunakan CSS media query. Dengan media query anda bisa mengatur kolom header, main, footer, atau sidebar tanpa mengubah atau mengedit kode CSS aslinya. Caranya, silahkan tambahkan kode berikut ini di atas kode </head>

<style>
Untuk laptop
@media only screen and (max-width:1024px){
selector/class/id{
property:value
property:value
}
}
Untuk tablet
@media only screen and (max-width:768px){
selector/class/id{
property:value
property:value
}
}
Untuk phablet
@media only screen and (max-width:580px){
selector/class/id{
property:value
property:value
}
}
Untuk Handphone android crappy
@media only screen and (max-width:330px){
selector/class/id{
property:value
property:value
}
}
</style>

Catatan :
- Nilai max-width pada kode media query di atas bisa diubah sesuai dengan target ukuran perangkat.
- Selector/class/id merupakan nama elemen id pada kode template, contoh #outer-wrapper, #main-wrapper, #footer-wrapper, #sidebar-wrapper, .post-body, .post, .breadcrumbs dan lain-lain. Nama elemen id terkadang berbeda-beda tergantung template, jadi silahkan disesuaikan saja dengan kode template anda dan mencobanya satu persatu.
- Property:value merupakan kode CSS yang digunakan untuk merubah nilai lebar tinggi, tampil atau tidak tampil dan sebagainya.

Contoh penerapan :

#outer-wrapper {width:900px;}
#main-wrapper, #sidebar-wrapper {width:510px;margin:0 10px 0 0;float:left;}
@media screen and (max-width:330px){
#outer-wrapper {width:95%;}
#main-wrapper, #sidebar-wrapper {width:100%;margin:0 auto;float:none;}
}
</style>

Penjelasan :
- Jika di resolusi layar di bawah 330px maka outer-wrapper mempunyai lebar 95% dari ukuran layar perangkat hardware. sedangkan jika di atas 330px outer-wrapper mempunyai lebar 900px.
- Jika di resolusi layar di bawah 330px maka main dan sidebar mempunyai lebar 100% atau memenuhi outer-wrapper, margin:0 auto, float:none. sedangkan jika di atas 330px main dan sidebar mempunyai lebar 510px, margin:0 10px 0 0, float:left.
- Mungkin ada yang masih bingung di resolusi pas 330px ukuran lebar outer-wrapper nya 900px atau 95%. Jawabannya adalah 900px. karena media-query mengatur resolusi di bawah 330px.
- Kode margin:0 auto;float:none; digunakan di resolusi kecil supaya menjadi satu kolom. Sedangkan di resolusi besar seperti 800px tidak perlu dipakai.
- Di atas merupakan contoh untuk outer, main, sidebar wrapper sedangkan untuk pengaturan yang lainnya seperti header, menu navigasi, post, comment, footer, dan lain-lain anda atur sendiri sesuai template masing-masing.

Gambar Responsive
Untuk gambar memiliki perbedaan antara gambar responsive dengan gambar tidak responsive. Maka gambar pun harus dimasukkan ke dalam media query agar menjadi responsive. Berikut kode yang harus digunakan agar gambar yang ada pada blog seperti di dalam postingan menjadi responsive.

img{  height:0 auto;   width:0 auto;   max-width:100%  }

Video Responsive
Untuk video responsive, berikut kode yang bisa anda gunakan untuk disisipkan ke dalam media query.

.respmedia { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .respmedia iframe, video, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

Font Responsive
Untuk font ini biasanya terletak pada ukuran font yang terlalu besar jika blog diakses melalui seluler sehingga tampilan font terlihat penuh. Nah anda bisa mengatasi hal ini dengan memasukkan kode seperti contoh di bawah ini tergantung font mana yang ingin diubah ukurannya menjadi lebih kecil apakah :
- body {font: nilai ukuran font;} untuk mengubah ukran font secara keseluruhan
- #hedaer {font: nilai ukuran font;} untuk mengecilkan ukuran judul blog
- .post-body {font: nilai ukuran font atau font-size:nilai ukuran font;} untuk mengecilkan ukuran font postingan
- .post-title {font-size:nilai ukuran font;} untuk mengecilkan ukuran font judul postingan
Semuanya tergantung kode pada kode template blog yang anda miliki.

Sebagai contoh saya ingin mengecilkan ukuran font judul postingan, berikut kode yang saya gunakan untuk saya sisipkan ke kode media queries

.post-title {font-size:1.7em;}

Bagaimana sobat sangat memusingkan kepala bukan? Tetapi kalau anda terus berusaha keras dan terus belajar pasti bisa anda lakukan. Tidak perlu mendalami ilmu CSS terlalu dalam, anda hanya cukup memahaminya dengan mematokkan kode-kode elemen id serta kode CSS yang digunakan di dalam template kesayangan anda. Untuk menghindari hal-hal yang tidak diinginkan gunakan blog lain dengan template yang sama untuk anda melakukan eksperimen.

Dengan memodifikasi atau mengubah template kesayangan anda menjadi template responsive atau mobile friendly, maka blog anda akan terlihat lebih profesional di mata para pengunjung.

Template yang saya gunakan di blog ini merupakan template jadul yang belum mengikuti jaman alias belum mobile friendly atau responsive, sehingga saya harus bersusah payah mencari elemen id template blog saya untuk mengubahnya menjadi responsive. Menu navigasinya pun saya ganti dengan menu navigasi yang responsive mobile friendly. Walau tampilan blog secara keseluruhan blum terlalu soft atau lembut.

Demikian tutorial sederhana walau sebenarnya sangat ribet dan membuat kepala saya pusing dan terkadang saya ingin menyerah, tapi saya harus tetap semangat dan akhirnya berhasil sesuai dengan keinginan walau mungkin hasilnya tidak sesuai di mata para master blogger. Semoga bermanfaat and " Happy Blogging "

Cara Menambahkan Video pada Postingan Blog

|
Cara Mudah Menambahkan atau Memasukkan Video pada Postingan Blog - Ketika membuat sebuah artikel atau postingan pada blog, terkadang seorang pemiliki blog mungkin perlu menambahkan sebuah video ke dalam artikel yang sedang mereka buat selain menambahkan gambar. Hal ini dimaksudkan agar isi dari artikel yang dijabarkan tentunya akan lebih jelas dan lebih mudah dipahami oleh pembaca atau pengunjung.

Baca juga : Cara Menambahkan Gambar di Postingan Blog

Menyertakan video ke dalam postingan saat ini sudah menjadi kebutuhan, terutama blog dengan niche tutorial, yang sering kali membutuhkan bantuan video untuk membantu pembaca dalam menyelesaikan hal-hal tertentu tanpa harus mengalami kebingungan pada saat mengikuti langkah-langkah pada saat membaca artikel. Tidak bisa dipungkiri juga, pembaca lebih memilih menonton video daripada membaca artikel dengan penjelasan panjang lebar untuk memperaktikan sebuah tutorial. Hal inilah yang disadari oleh pihak blogger atau blogspot sehingga memberikan pemilik blog kemudahan dan kebebasan untuk menyertakan video disetiap artikel yang terkait.

Pada saat membuat artikel atau postingan, pihak Blogger atau blogspot menyediakan 3 pilihan metode untuk memasukkan atau menambahkan sebuah video ke dalam artikel/postingan blog, antara lain :

  • Menambahkan video dengan melakukan upload secara langsung dari komputer (Upload).
  • Menambahkan video dengan memasukkan URL video dari media layanan penyedia video dalam hal ini Youtube (From Youtube).
  • Menambahkan video dengan mengambil video dari channel Youtube yang anda kelola (My Youtube videos).
  • Menambahkan video menggunakan metode lain dengan meletakkan kode HTML (di luar 3 pilihan blogger atau blogspot).
Berikut ulasan lengkap dari 4 list di atas cara menambahkan atau memasukkan video ke dalam artikel/postingan.

1. Menambahkan video dengan melakukan upload secara langsung dari komputer (Upload)

Metode Upload merupakan metode yang paling sederhana diantara yang lain yang dapat anda gunakan untuk menambahkan video ke dalam postingan.
Untuk langkah-langkahnya disini anda hanya akan meng-upload video dari media penyimpanan di dalam harddrive komputer atau pc yang anda miliki ke blogger, kemudian menambahkannya ke dalam artikel pada bagian yang anda inginkan.
Namun perlu diperhatikan koneksi yang anda digunakan. Apabila anda menggunakan koneksi paket data dengan kuota yang terbatas, maka sebaiknya anda memilih video yang akan diupload memiliki ukuran file cukup dengan kuota paket data internet anda.
Silahkan ikuti langkah-langkah di bawah ini untuk menambahkan video dengan metode upload dari media penyimpanan komputer atau pc.

  • Silahkan login ke akun blogger yang anda miliki dan menuju menu Postingan.
  • Buat artikel/postingan seperti yang biasa anda lakukan.
  • Pilih area atau tempat di dalam postingan untuk ditambahkan sebuah video, lakukan Enter jika tidak ada area untuk video dan ingin menambahkan video diantara tulisan artikel.
  • Selanjutnya alihkan pandangan anda pada deretan tools seperti gambar berikut. Dan untuk menambahkan video, silahkan klik icon Insert a video.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Tampil jendela Add video yang berisi 3 pilihan metode, silahkan pilih tab metode Upload, lalu klik tombol berwarna biru Pilih video untuk diupload.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Tampil jendela kecil, silahkan cari folder dimana anda menyimpan video, klik pada video lalu klik tombol Open atau klik 2x video tersebut. Tunggu beberapa saat hingga video ter-upload sepenuhnya. Lama tidaknya proses upload tergantung dari besar kecilnya file video yang diupload.
  • Apabila video sudah terupload sepenuhnya, silahkan pilih video lalu tekan tombol Pilih berwarna biru pada bagian bawah.
  • Selesai.
Bagaimana? cukup mudah dan sederhana bukan? Namun keberhasilan menggunakan metode upload ini tergantung dari koneksi internet yang anda gunakan. Jika koneksi internet terputus pada saat proses upload berlangsung, maka anda harus mengulang kembali proses upload tersebut dari awal lagi.

2. Menambahkan video dengan memasukkan URL video dari media layanan penyedia video dalam hal ini Youtube (From Youtube)

Metode memasukkan URL video dari Youtube merupakan metode yang paling cepat dan mudah untuk menambahkan sebuah video ke postingan blog. Dengan menggunakan metode ini anda tidak perlu takut kuota pake data internet anda akan habis, karena disini anda hanya memasukkan URL dari video Youtube pada bagian tertentu dan tidak harus meng-upload video yang cukup menguras kuota paket data internet. Berikut langkah-langkahnya.
  • Silahkan masuk ke dashboard blogger anda dan langsung menuju ke menu Postingan.
  • Buat postingan seperti biasa.
  • Pilih area atau tempat di dalam postingan untuk ditambahkan sebuah video, lakukan Enter jika tidak ada area untuk video dan ingin menambahkan video diantara tulisan artikel.
  • Selanjutnya alihkan pandangan anda pada deretan tools seperti gambar berikut. Dan untuk menambahkan video, silahkan klik icon Insert a video.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Tampil jendela Add video yang berisi 3 pilihan metode, silahkan pilih tab metode From Youtube.
  • Silahkan ketikan kata kunci (keyword) atau URL dari video YouTube yang ingin anda tambahkan ke dalam postingan Anda, kemudian tekan tombol cari (icon kaca pembesar/lup).
  • Setelah muncul video yang diinginkan, silahkan pilih video, kemudian klik tombol Pilih berwarna biru.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Kini video sudah berhasil ditambahkan ke dalam postingan.
3. Menambahkan video dengan mengambil video dari channel Youtube yang anda kelola (My Youtube videos)

Apabila anda merupakan seorang Blogger dan seorang Youtuber yang cukup aktif pada kedua media tersebut (blogger dan youtube dalam satu akun gmail), maka pilihan metode ini dapat anda gunakan untuk memaksimalkan kunjungan dan pendapatan dari kedua media dengan menggabungkanya.

Pada media blog anda akan mendapatkan banyak kunjungan, sedangkan pada channel youtube yang anda miliki juga akan mendapatkan tambahan viewer. Selain itu apabila anda seorang publisher GA, tentu saja anda juga akan mendapatkan banyak kesempatan untuk meraup keuntungan.

  • Silahkan masuk ke dashboard blogger anda dan langsung menuju ke menu Postingan.
  • Buat postingan seperti biasa.
  • Pilih area atau tempat di dalam postingan untuk ditambahkan sebuah video, lakukan Enter jika tidak ada area untuk video dan ingin menambahkan video diantara tulisan artikel.
  • Selanjutnya alihkan pandangan anda pada deretan tools seperti gambar berikut. Dan untuk menambahkan video, silahkan klik icon Insert a video.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Tampil jendela Add video yang berisi 3 pilihan metode, silahkan pilih tab metode My Youtube videos.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Disana akan tampil video-video yang anda miliki pada channel youtube anda. Pada contoh gambar tidak tampil video karena akun gmail saya tidak memiliki channel Youtube.
  • Pilih salah satu video yang akan anda letakkan ke dalam postingan blog. Klik satu kali, lalu tekan tombol Pilih berwarna biru.
Kini video sudah berhasil anda masukkan ke dalam postingan.

4. Menambahkan video menggunakan metode lain dengan meletakkan kode HTML (di luar 3 pilihan blogger atau blogspot)

Metode yang saya paparkan disini adalah bagaimana menambahkan video ke dalam postingan dengan meletakkan kode HTML dari media penyedia video, seperti youtube, Mp4Upload dan lain-lain. Pada umumnya setiap situs penyedia layanan video hosting pasti memiliki sebuah fitur yang memungkinkan pengguna atau pengunjung dalam hal ini blogger untuk menggunakan video yang tersedia untuk digunakan atau dilampirkan ke dalam postingan blog tanpa harus menghilangkan hak cipta dari video tersebut.
Untuk anda yang memiliki blog dengan niche streaming film atau video-video tertentu yang tidak dapat diupload di Youtube atau Blogger karena tidak memiliki kuota yang cukup dan takut melanggar hak cipta dari video, anda dapat menggunakan metode ini.
Sebagai contoh saya akan menggunakan video-video yang tersedia di Youtube untuk digunakan ke dalam postingan blog. Silahkan ikuti langkah-langkah berikut.

  • Silahkan kunjungi situs penyedia layanan hosting video, dalam hal ini Youtube.
  • Cari video yang anda inginkan, lalu putar video tersebut.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Alihkan pandangan anda ke bawah layar video, Klik Share / Bagikan sehingga muncul jendela kecil seperti gambar berikut. Pada bagian Bagikan link, silahkan klik Sematkan
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Akan muncul video yang dipilih beserta kode HTML di sebelah kanan video.
Cara Menambahkan Video pada Postingan Blog - Tutorial Blogger

  • Copy kode HTML tersebut, lalu Paste ke dalam postingan dengan mode HTML.
  • Jika sudah, kemabali lagi ke mode Compose lalu Publikasikan.
Catatan : Terkadang ukuran layar video yang tersedia terlalu kecil dan terlalu besar untuk di letakkan ke dalam postingan. Nah anda bisa mengatur kembali ukuran layar video tersebut dengan mengganti nilai pada kode HTML yang anda dapatkan pada kode tag Width dan Height.

Dengan menambahkan sebuah video yang digunakan untuk menjabarkan isi dari atikel yang anda buat, maka akan memudahkan pembaca atau pengunjung untuk memperaktikan langkah-langkah tutorial yang anda sajikan di dalam artikel atau postingan.

Demikian tutorial sederhana namun jelas dan lengkap mengenai bagaimana cara menambahkan atau memasukkan video ke dalam postingan atau artikel blog. Semoga bermanfaat and " Happy Blogging "

Cara Mengalihkan URL Halaman Error 404 ke Homepage

|
Cara Mengalihkan / Redirect URL Halaman Error 404 ke Homepage - Sudah bukan rahasia lagi URL Halaman error 404 / broken link memang sering terjadi ketika pemilik blog melakukan kesalahan seperti salah mengetikan alamat url dari satu halaman menuju halaman lain dan artikel yang sudah terlanjur dipublikasikan/diposting dan sudah terindeks oleh mesin pencari google, tapi halaman tersebut dihapus oleh pemilik blog, sehingga ketika seorang pengunjung mengunjungi halaman tersebut yang mereka temukan hanyalah halaman error 404 not found. Selain itu bisa juga disebabkan oleh perayapan mesin pencari yang keliru menterjemahkan URL artikel di blog.

Hal ini tentu saja akan menjadi masalah yang cukup signifikan bagi pemilik blog karena jumlah visitor akan turun, Mengapa? Karena dimata para pengunjung / pembaca hal ini akan membuat blog tersebut terkesan kurang baik. Tidak hanya itu halaman error 404 page not found juga berpengaruh dengan SEO sebuah blog, semakin banyak halaman error 404, semakin buruk pula citra blog tersebut pada mesin pencari dan webmaster google search console.

Anda tentunya tidak ingin masalah itu terjadi pada blog yang dimiliki. Untuk mengatasi masalah tersebut yang harus dilakukan adalah menghapus semua halaman rusak / broken link satu persatu pada Google Search Console Webmaster Tools atau meredirect halaman yang rusak ke halaman yang baru di blog melalui pengaturan setelan di dashboard blogger, itupun jika url halaman yang error jumlahnya sedikit, tetapi bagaimana jika jumlahnya banyak pasti akan cukup memakan waktu.

Baca juga :



Atau anda bisa melakukan cara lain yang lebih sederhana yaitu mengalihkan secara otomatis semua halaman yang rusak tersebut menuju homepage, menuju halaman sitemap, atau menuju halaman contact us dan meminta kepada pengunjung untuk melaporkan jika terdapat link yang rusak agar bisa langsung memperbaikinya. Cara mengalihkan semua url halaman error page 404 not found secara otomatis cukup mudah, disini saya akan share 2 cara yang bisa anda lakukan untuk mengatasinya. Silahkan simak langkah-langkah berikut.

Mengalihkan Semua URL Halaman Error 404 ke Homepage melalui Menu Setelan Blogger

1. Masuk ke akun blogger anda
2. Pilih menu Setelan / Setting lalu klik Preferensi penelusuran
3. Pada bagian Kesalahan dan pengalihan klik "Edit" pada opsi Pesan Khusus untuk Halaman Tidak Ditemukan, seperti gambar berikut


Cara Mengalihkan URL Halaman Error 404 ke Homepage - Tutorial Blogger

4. Masukkan script di bawah ini ke dalam kotak

<script type = "text/javascript">
my_redirect = setTimeout(function() {
window.location.href = 'https://harmansh.blogspot.com/';
}, 10);
</script>
Catatan : Ganti URL berwarna merah dengan URL blog anda
5. Terakhir klik tombol Simpan perubahan. Silahkan mencoba untuk membuka dengan mengetikkan URL sembarang, apakah berhasil atau tidak.

Mengalihkan Semua URL Halaman Error 404 ke Homepage melalui Edit HTML Template

1. Masih pada menu akun blogger anda.
2. Pilih menu Tema / Template
3. Tekan tombol Backup / Pulihkan yang terletak di pojok kanan atas untuk membackup full seluruh kode template. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan mengedit kode template
4. Jika sudah, silahkan tutup kembali, kemudian tekan tombol Edit HTML untuk membuka kotak editor kode template
5. Temukan kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; dengan cara klik sekali di dalam kode template, lalu tekan Ctrl+F pada keyboard untuk memunculkan kotak pencarian, kemudian masukkan kode yang dicari
6. Apabila sudah ketemu letakkan kode di bawah ini tepat di atas kode tersebut

<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;<data:blog.homepageUrl/>&quot;;
</script>
</b:if>
7. Terakhir klik Simpan Tema atau Save Template.

Apabila anda ingin mengalihkan URL Halaman Error 404 ke halaman lain, silahkan gunakan kode-kode pilihan di bawah ini sesuai dengan keperluan anda.

<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;URL-HALAMAN-LAIN-DISINI&quot;;
</script>
</b:if>

Catatan : Ganti tulisan URL-HALAMAN-LAIN-DISINI dengan URL halaman yang anda inginkan

Contoh

<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;https://harmansh.blogspot.com/p/site.html/&quot;;
</script>
</b:if>

atau halaman Contact Us

<b:if cond='data:view.isError'>
<script>
window.location.href = &quot;https://harmansh.blogspot.com/p/contact-us.html/&quot;;
</script>
</b:if>

Dengan menggunakan kode pengalihan url halaman error 404 menuju halaman lain yang masih aktif, maka akan mengalihkan tujuan pengunjung ketika pengunjung meng-klik link rusak atau mengetikkan url halaman yang salah ke halaman lain yang diinginkan pemilik blog, sehingga bisa mengurangi resiko memberi harapan palsu ke pengunjung saat mendapatkan link yang sudah tidak aktif atau rusak.

Demikian tutorial sederhana mengenai bagaimana cara mengalihkan URL halaman error 404 ke Homepage. Semoga bermanfaat and " Happy Blogging "

Membuat Halaman Error 404 Not Found di Blog

|
Membuat Halaman Error 404 Not Found di Blog - Memberikan tujuan dan pilihan yang jelas ketika pengunjung berada pada suatu halaman di blog merupakan salah satu hal penting untuk navigasi blog yang baik. Begitu juga dengan halaman error 404 not found.atau dalam bahasa indonesia error 404 halaman tidak ditemukan.
Apa itu halaman error 404 not found?
Halaman error 404 not found adalah sebuah halaman yang berisi pesan Error atau kesalahan dari Hypertext Transfer Protocol (HTTP) yang mengindikasikan bahwa laman/URL yang dituju tidak dapat ditemukan. Hal ini bisa saja terjadi karena beberapa alasan seperti halaman telah dihapus, dan pengunjung salah mengetikkan URL atau mengklik broken link dari website lain.

Untuk blog atau website yang menggunakan blogger atau blogspot sebenarnya sudah disediakan halaman pesan error 404 bawaan blogger, tetapi halaman error 404 bawaan blogger masih sangat sederhana dan kurang informatif, meski pemilik blog sudah mengaturnya pada setelan blogger melalui Setelan >> Preferensi penelusuran >> Pesan khusus untuk halaman tidak ditemukan. Berikut penampakan halaman yang berisi pesan error 404 bawaan blogger.

Membuat Halaman Error 404 Not Found di Blog - Tutorial Blogger


Selain tampilan halaman error 404 bawaan blogger masih sangat sederhana dan kurang informatif. Halaman ini juga tampil pada body postingan layaknya sebuah konten pada halaman dinamis atau halaman statis sehingga menampilkan halaman blog secara utuh mulai dari bagian header, sidebar hingga ke bagian footer blog. Dengan tampilnya halaman error 404 secara utuh, maka hal ini bisa menjadi masalah bagi para publisher GA yang meletakkan unit iklan di luar body posting menggunakan widget pada bagian header, sidebar, maupun footer, karena unit iklan bisa saja tetap muncul pada bagian tersebut ketika pengunjung mendapati halaman pesan error 404 pada blog tersebut. Hal ini bisa menjadi masalah karena Penayang tidak diizinkan untuk menempatkan iklan pada laman berbasis non-konten, seperti laman terima kasih, kesalahan, masuk, atau keluar. Ini adalah laman yang dilihat pengunjung di situs sebelum kemungkinan meninggalkan halaman atau setelah melakukan tindakan tertentu pada blog tersebut. (sumber : Google)

Jadi dengan membuat sebuah Halaman Error 404 yang anda buat sendiri dengan tampilan yang berbeda, anda bisa memberikan informasi yang lebih jelas kepada pengunjung yang mendapati Halaman Error 404 dan memberikan pilihan melakukan pencarian atau mengarahkan pengunjung untuk menuju ke halaman utama blog atau homepage.
Berikut tampilan halaman error 404 not found yang saya share.

Membuat Halaman Error 404 Not Found di Blog - Tutorial Blogger


Baca juga :


Bagaimana sobat? Apakah anda berminat untuk mengaplikasikannya ke blog atau website? Silahkan simak langkah-langkahnya dengan seksama.

Cara Membuat Halaman Error 404 Not Found Keren di Blogspot
Caranya cukup mudah dan sederhana, disini anda hanya akan mencari 2 buah kode tertentu dan meletakkan 2 buah kode yang saya berikan, yakni kode CSS sebagai pembentuk tampilan halaman dan kode HTML untuk mengarahkan pengunjung ke halaman yang dibuat.

1. Pertama-tama silahkan login ke akun blogger anda
2. Tekan tombol Backup / Pulihkan untuk membackup full seluruh kode template. Hal ini dilakukan untuk berjaga-jaga jika terjadi kesalahan saat melakukan mengedit kode template
3. Jika sudah, silahkan tutup kembali, kemudian tekan tombol Edit HTML untuk membuka kotak editor kode template
4. Temukan kode ]]></b:skin> Klik sekali di dalam kode template, lalu tekan Ctrl+F pada keyboard untuk memunculkan kotak pencarian, kemudian masukkan kode yang dicari
5. Apabila sudah ketemu letakkan kode CSS di bawah ini tepat di atas kode ]]></b:skin>

/* error 404 page not found */
#error-page {background-color:#363636;position:fixed!important;text-align:center;top:0;right:0;bottom:0; left:0;z-index:99999;}
#error-page  #search-box {margin: 2% 41%;}#error-inner {margin:5% auto;}
#error-inner .box-404 {width:200px;height:200px;background:#000;color:#fff;font-size:82px;line-height:200px;border-radius:10%;margin:0 auto 20px;position:relative;}
#error-inner .box-404::after {content:&quot; &quot;;width:0;height:0;bottom:-8px;border-color:#21afa4 transparent transparent;}
#error-inner h1 {font-weight: bold;font-size:30px;color:#000;text-transform:uppercase;}
#error-inner p {font-size:15px;color:#000;}
border-style:solid;border-width:9px 9px 0;position:absolute;left:47%;}
.search404 {width: 300px; height: auto; margin: 0 auto 20px;}
input#search-text {height: 27px;width: 250px;padding-left: 10px;color:#9e9e9e;}
Catatan : Anda bisa mengganti warna background, tulisan, serta ukuran pada kode CSS di atas
6. Langkah selanjutnya adalah temukan kode <body>
7. Apabila sudah ketemu, letakkan kode HTML di bawah ini tepat di atas kode <body>

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<div id='error-inner'>
<div class='box-404'>404</div>
<h1>Halaman Tidak Ditemukan !!</h1>
<p>Kemungkinan halaman telah dihapus, atau Anda salah menulis URL</p>
<p>Temukan konten terkait lainnya disini :</p>
<div class='search404'>
<form action='/search' id='cse-search-box' method='get'>
<input id='search-text' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' title='Search' value='Ketik dan enter di sini ...'/>
</form>
</div>
<p>Atau kembali ke halaman utama </p>         
<div id='copyright'>
        <p><a href='/' expr:title='data:blog.title'><data:blog.title/></a> © 2017 - <script>document.write(new Date().getFullYear())</script>. All Rights Reserved</p>
        </div>
</div>
</div>
</b:if>
Catatan : Silahkan ganti kata-kata atau kalimat pada kode HTML di atas dengan kalimat yang anda inginkan
8. Terakhir, klik Simpan Tema atau Save Template. Untuk melihat apakah sudah berhasil atau belum, ketik https://URL-BLOG-ANDA/404

Tujuan utama pembuatan Halaman Error 404 not found ini adalah bagaimana membuat pengunjung tidak segera menekan tombol back atau meninggalkan website kita, tapi kita tawarkan terlebih dahulu link alternatif menuju Homepage dan sebuah kotak pencarian yang sangat berguna apabila pengunjung tetap tidak bisa menemukan apa yang mereka cari.

Demikian tutorial sederhana mengenai bagaimana cara membuat halaman error 404 not found di blogger. Semoga bermanfaat and " Happy Blogging "