BLOG WOWTELOTENAN

Read More

Selasa, 13 September 2016

Cara membuat navigasi menu responsif (mobile friendly) di blog blogspot

Author:  |   |  1 Comment | 

NAVIGASI menu responsive adalah navigasi link halaman (page link) atau daftar tautan blog yang tampilannya menyesuaikan (adaptif/responsif) dengan device atau gadget yang digunakan user.

Menu responsive bagian dari trend desain template blog terpopuler.

Daftar menu blog yang biasanya ada di bawah header ini sangat user friendly dan disukai Google. Mesin pencari terpopuler di dunia ini "selalu" berpihak pada user atau pembaca.

Kode-kode tentang cara membuat menu responsif ini diambil dari My Blogger Tricks yang sudah diterapkan di template Johny Wuss Responsive dan New Max Mag.

Cara Membuat Menu Responsive: Tahapan

  1. Template > Edit HTML
  2. Cari kode seperti di bawah ini, di bawah kode <head>, di bagian atas template:

    3. <b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

  3. Ganti dengan kode di bawah ini. Jika kodenya sudah seperti di bawah ini, ya... gak usah diganti, biarkan saja:

    4. <meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>

    4. Copy & Paste kode di bawah ini tepat di atas kode ]]</b:skin>

    /*-----Responsive Menu ----*/ body {margin: 0px;} #menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:1024px} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;} #menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;} #menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out; background: #5FC6EB;} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;} #menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none; text-shadow: none;border-bottom: 1px dashed #31AFDB;} #menu ul.menus a{color: #FFF;line-height: 35px;} #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out; transition: all .1s ease-in-out;} @media screen and (max-width: 800px){ #menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} } Customization:

    Untuk mengganti warna background menu, ubah kode warna ini: #50B7DC

    Ganti warna background "hover", ubah: #5FC6EB

    Lihat Daftar Kode Warna HTML

  4. Copas kode di bawah ini tepat di bawah kode <body>
    5. Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!

    <nav id='menu'>
    <input type='checkbox'/>
    <label>&#8801;<span>Navigasi&#160;Menu</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Drop Down <font
    size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    <li><a href='#'>Tab 4</a></li>
    <li><a href='#'>Tab 5</a></li>
    <li><a href='#'>Tab 6</a></li>
    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font
    size='1'>&#9660;</font></a>
    <ul class='menus'>
    <li><a href='#'>Tab 1</a></li>
    <li><a href='#'>Tab 2</a></li>
    <li><a href='#'>Tab 3</a></li>
    </ul>
    </li>
    <li><a href='#'>Advertise</a></li>
    </ul>
    </nav>

  5. Save Template and you are all done!!!

Selamat, navigasi menu responsive di blog Anda sudah muncul!.

Cara Mendaftarkan Blog ke Google

Author:  |   |  No Comments | 

Setelah membuat blog di blogger ada banyak hal yang harus kita lakukan agar blog yang baru kita buat terindex dan tampil di search engine google dan mendapatkan posisi teratas di search engine. Hal yang paling dasar yang harus kita lakukan tersebut adalah mendaftarkan blog ke google webmaster tools. Mengapa harus mendaftarkan blog ke google? jawabannya adalah agar robot google akan segera mengenal blog yang baru kita buat sehingga meng-crawl seluruh isi yang ada di blog untuk di tampilkan di search engine khususnya google.

Berikut ini akan saya jelaskan cara mendaftarkan blog ke google, namun sebelumnya perlu saya sampaikan kepada Anda bahwa, jika blog Anda berisi curhatan keseharian Anda yang tidak ingin orang membacanya, mendaftarkan blog ke google tidaklah penting.

Mendaftarkan Blog ke Google

Perhatikan dan simak baik-baik tutorial cara mendaftarkan blog ke google berikut ini:

  1. Silahkan klik link ini www.google.com/addurl
  2. Pada kotak URL, silahkan masukkan alamat blog Anda, misal : http://wowtelo.blogspot.com/
  3. Masukkan kode Capca lalu klik Sumbit Request

Langkah selanjutnya mengambil kode verifikasi untuk dipasang keblog dari google webmaste tool, caranya perhatikan penjelasan berikut ini.

  1. Buka google webmaster tools
  2. Kemudian klik tab "Manage site/Kelola situs"
  3. Lalu klik "tambahkan atau hapus pengguna"
  4. Disebelah kanan alamat email Anda terdapat opsi "Owner site/pemilik", klik opsi tersebut, selanjutnya klik "laman verifikasi pemilik".
  5. Lalu pilih "Verifikasi dengan menggunakan metode yang berbeda" (opsi ini berada di atas)
    6. Pada halaman ini terdapat 4 pilihan verifikasi blog diantaranya yaitu menggunakan :

    1. Tag HTML
    2. Google Analytic
    3. Penyedia nama domain
    4. Unggahan file HTML

    Pilih pada opsi pertama, yaitu "Tag HTML" Anda Akan diberikan Tag atau Kode verifikasi, seperti dibawah ini

    <meta content='-iJyyrSihtLtY4-5qfMuVmzEuEirUond6clrMoSimTc' name='google-site-verification'/>

  6. Langkah berikutnya silahkan Login/masuk pada blog anda, kemudian dalam halaman Template, pilih tab "Edit Html". Kemudian masukan dan simpan meta name verifikasi yang tadi kita copy dibawah atau setelah tag : <title><data:blog.pageTitle/>
    7. (gunakan ctrl+f atau bisa juga menggunakan F3 untuk mempermudah pencarian kode tersebut biasanya kode tag tersebut berada paling atas)

    Setelah selesai klik tombol "Save Template/Simpan Perubahan".

  7. Kembali ke halaman google webmaster tool, kemudian klik tombol Verify, untuk memferifikasi pendaftaran blog.
  8. Jika berhasil dan terverifikasi maka akan ada pemberitahuan bahwa website atau blog yang anda daftarkan telah terverifikasi, kemudian klik lanjutkan.

Saran saya lakukan juga verifikasi blog dengan google analytic agar status kepemilikan blog menjadi lebih kuat. Sampai tahap ini blog Anda sudah terdaftar ke data base google dan akan segera di crawl oleh robot google... [by DD]

Senin, 12 September 2016

Cara mudah membuat responsive template default Blogger

Author:  |   |  No Comments | 

Seperti kita ketahui bahwa template default yang disediakan Blogger belum responsive, template bawaan Blogger masih menggunakan versi mobile untuk device-device kecil. Sedangkan Google sendiri yang notabene merupakan si empunya Blogger menganjurkan untuk menggunakan template yang responsive.

Nah bagi Anda yang menggunakan template default Blogger, saya kini akan share cara mudah membuat responsive template default Blogger. Hanya perlu beberapa langkah mudah yang saya yakin Anda bisa melakukannya. Silahkan ikuti langkah-langkahnya di bawah ini.

  1. Langkah Pertama

    2. Nonaktifkan navbar Blogger, silahkan masuk ke layout atau tata letak kemudian edit gadget Navbar. Pilih option OFF untuk menonaktifkan navbar.

  2. Langkah Kedua

    3. Membuat gambar postingan menjadi reponsive. Silahkan cari kode di bawah ini.

    .post-body img, .post-body .tr-caption-container { padding: $(image.border.large.size); }

    Kemudian silahkan ganti kode di atas dengan kode di bawah ini

    .post-body img, .post-body .tr-caption-container {
    padding: 0;
    width:auto;
    max-width:100%;
    height:auto;
    }

  3. Langkah Ketiga

    4. Silahkan cari kode di bawah ini

    <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>

    Kemudian ganti dengan kode di bawah ini

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

    Langkah Keempat

    Silahkan simpan kode di bawah ini di atas kode </head>

    <style type='text/css'> @media screen and (max-width:1024px){ body,.content-outer, .content-fauxcolumn-outer, .region-inner {width: 100%!important;min-width:100%!important;padding:0!important} body .navbar {height: 0!important;} .footer-inner {padding: 30px 0px!important;} } @media screen and (max-width: 603px){ .main-inner .columns {padding-right: 0!important;} .main-inner .column-right-outer {width: 100%!important;margin-right: 0!important;} } </style>

Selesai...sekarang template default Blogger yang Anda gunakan sudah responsive, mudah bukan? [DD]

Kamis, 01 September 2016

Cara cepat mengganti kata pada dokumen microsoft word - replace word

Author:  |   |  No Comments | 

Pada saat mengetik pada lembar kerja dokumen di ms word, kita akan dihadapkan pada ribuan kata yang tersusun menjadi satu sehingga membentuk kalimat-kalimat yang sangat panjang yang menyusun sebuah paragraf. Sehingga pada saat kita ingin mengganti kata pada lembar kerja tersebut menjadi kata yang baru maka kita harus mencari satu persatu kata kemudian menggatinya. Sekarang yang menjadi masalah bagaimana jika jumlah kata yang dirubah berjumlah ratusan? haruskah kita menetliti satu per satu kata dan mengganti kata tersebut?

Dengan postingan ini mungkin bisa membantu permasalahan seperti diatas atau yang terjadi pada penulis. Penulis dapat dengan cepat menggati semua kata yang ada pada lembar kerja ms word hanya dengan beberapa waktu, sehingga pekerjaan anda akan terselesaikan lebih cepat.

Cara cepat menggati kata yang ada pada lembar kerja ms word penulis dapat menggunakan fungsi find and replace sehingga pekerjaan tersebut tidak memakan waktu dan dapat dikerjakan dengan cepat. Untuk menggunakan fungsi find and replace ikuti langkah berikut:

  1. Buka lembar kerja ms word yang akan dirubah
  2. Selanjutnya pada menu HOME pilih FIND pada group editing. Atau jika ingin menggunakan cara pintas dari keyboard penulis bisa menggunakan tombol shortcup dari keyboard yaitu dengan menekan tombol CTRL + F.

  3. Selanjutnya akan muncul jendela FIND AND REPLACE
  4. Klik menu REPLACE untuk mencari kata yang akan dirubah.
  5. Pada kolom FIND WHAT masukan kata yang akan dirubah

  6. Pada kolom REPLACE WITH masukan kata yang akan digunakan untuk mengganti kata sebelumnya.
  7. Klik REPLACE ALL

Catatan:

  1. Ketika penulis menekan REPLACE ALL maka secara otomatis kata akan diganti dengan kata yang baru
  2. Akan ada peringatan jumlah kata yang dirubah dalam dokumen tersebut

Cara mempercepat print dokumen di microsoft word

Author:  |   |  No Comments | 

Cara mengatur pengaturan di ms word agar mempercepat proses print dokumen di microsoft word dapat dilakukan dengan men-setting pengaturan printer yang ada pada word option. Pada saat melakukan pekerjaan mencetak dokumen dengan file ms word maka kita akan juga tergantung dari jenis printer yang digunakan. Jenis printer yang digunakan juga akan mempengaruhi cepat atau tidaknya proses percetakan. Jika kita menggunakan printer jenis laserjet maka proses percetakan akan lebih cepat dibandingkan dengan jika kita menggunakan printer jenis tinta.

Akan tetapi jika kita ingin mencetak dokumen dengan lebih cepat dari yang biasanya, ada dua hal yang harus disetting yaitu pengturan pada printer dan pengaturan pada microsoft office word itu sendiri. Untuk mempercepat dengan mengatur pengaturan pada printer, kita dapat mengubah print quality menjadi fast.

Selain itu kita juga harus mengatur pengaturan pada word optionnya agar proses cetakan lebih cepat. Untuk lebih jelasnya ikuti langkah-langkah berikut:

  1. Setelah anda membuka dokumen anda
  2. Klik office button pada pojok kiri atas kemudian pilih WORD OPTION
  3. Setelah muncul jendela WORD OPTION pilih menu ADVANCE, kemudia pada panel sebelah kanan scroll ke bawah sampai anda menemukan kolom PRINT.

  4. Selanjutnya hilangkan tanda PRINT IN BACKGROUND
  5. Jika sudah selesai klik OK

Cara membuat dokumen menjadi read only di microsoft word 2007 - Fungsi Mark as Final

Author:  |   |  No Comments | 

Mark as Final adalah tool yang ada pada microsoft word yang memungkinkan data atau dokumen pada lembar kerja ms word bersifat read only. Mark as final berarti dokumen tersebut sudah dalam keadaan final sehingga dokumen tersebut tidak dapat diedit lagi dan dokumen tersebut hanya bisa dibaca saja.

Mark as final biasanya digunakan oleh seseorang untuk mematenkan hasil tulisannya agar tidak diedit oleh orang lain. Ketika kita membuat sebuah karya tulis dan hasil tersebut dirasa sudah final maka alangkah baiknya kita menggunakan mark as final agar dokumen tersebut tidak berubah-ubah lagi sehingga keaslian tulisan akan lebih terjaga.

Untuk menggunakan fungsi mark as final pada microsoft word 2007, ikuti langkah berikut;

  1. Buka lembar kerja ms word anda yang akan dipatenkan
  2. Selanjutnya klik Office Button
  3. Maka akan muncul popup menu, kemudian pilih Prepare
  4. Pada menu Prepare, pilih menu Mark As Final pada menu bagian kanan.

  5. Selanjutnya akan muncul pesan peringatan yang berbunyi " This document will be marked as final and then saved "

  6. Kemudian klik OK
Dengan cara ini dokumen yang sudah dipastikan final tidak akan bisa diedit kembali, sehingga dokumen tersebut hanya bisa dibaca saja.

Untuk mengembalikan format dari dokumen anda, ulangi langkah yang pertama sehingga dokumen anda akan kembali seperti biasa.

Semoga artikel ini bisa bermanfaat ...

Cara Mengetahui Kode Verifikasi Google WEBMASTER Tools

Author:  |   |  No Comments | 

Kode Verifikasi Google Webmaster biasanya digunakan agar Blog / Web Kita mudah dicari di Search Engine google. Setiap Blog yang didaftarkan melalui Blogspot biasanya mempunyai Kode Verifikasi Google Webmaster walaupun tanpa didaftarkan di Google Webmaster. Kode ini biasanya disisipkan sebagai meta tag di bagian template blog. Untuk Web / Blog yang tidak didaftarkan melalui blogspot, dapat didaftarkan untuk mendapatkan Kode Verifikasi Google Webmaster, lihat cara mendapatkannya ditulisan saya selanjutnya.

Lalu jika blog tersebut sudah memiliki Kode Verifikasi dari google webmaster bagaimana caranya kita tahu kode tersebut, dan bagaimana kita menyisipkannya di template blog kita? Berikut saya jelaskan cara mengetahuinya beserta cara menyisipkannya di template blog.

  1. Login terlebih dahulu menggunakan akun google anda
  2. Masuk ke halaman ini https://www.google.com/webmasters/verification/home?hl=endi halaman tersebut berisi web / blog yang telah terdaftar di google webmaster
  3. Klik verification details disamping blog yang dimaksud

  4. klik Verify using a different method

  5. Pilih HTML tag, copy kode yang muncul. Kemudian Klik tombol Verify di bagian bawah.

  6. Masuk ke dashboard blog anda, pilih Template
  7. Edit HTML, chek Expand Template Widget
  8. Cari kode <b:skin><![CDATA[ untuk mempermudah pencarian, tekan ctrl+F
  9. Pastekan kode verifikasi google webmaster yang anda copy tadi pas diatas kode <b:skin><![CDATA[
  10. Simpan Template Anda

Sekarang kode verifikasi google webmaster anda telah tersisipkan di blog anda, maka insyaALLAH artikel-artikel blog anda akan lebih mudah ditemukan melalui Google Search Engine.

Popular Posts