Nulis-Ilmu.com

Tutorial Elektronika dan Komputer

  • Home
  • Elektronika
  • Komputer
  • Javascript

Cara Menggunakan Google Webmaster Part 1

12 Juni 2015 By Eko Purnomo

Cara Menggunakan Google Webmaster

Google Webmaster adalah sebuah fasilitas yang disediakan oleh Google untuk para pengelola website atau blog yang dikenal dengan sebuatan Webmaster. Google Webmaster bisa digunakan secara gratis dengan syarat hanya dengan memiliki akun Google saja. Melalui Google Webmaster diharapkan para pengelola website atau blog dapat mengelola website secara profesional dan akhirnya menghasilkan website/blog yang sesuai standar kelayakan tentunya.

Didalam Google Webmaster terdapat beberapa tool yang bisa digunakan untuk membangun, memonitor, mengelola termasuk memeriksa kesalahan-kesalahan yang terjadi pada tiap-tiap halaman website atau blog. Kelayakan situs pada Google Webmaster bahkan digunakan sebagai salah satu syarat kelayakan diterima sebagai publisher Google Adsense, yaitu sebuah jaringan periklanan Google yang bekerjasama dengan para blogger.

Membuat Akun Google Webmaster

Sebelum menggunakan Google Webmaster, kita harus mempunyai akun lebih dahulu. Cara membuat akun Google Webmaster cukup mudah asalkan sudah mempunyai akun Google (gmail). Bagi yang belum mempunyai akun Google bisa dilihat caranya disini. Kita bisa membuat beberapa akun Google Webmaster untuk masing-masing blog yang kita miliki. Masing-masing akun Google Webmaster akan terkait dengan parameter dan data pada masing-masing blog tersebut.

Berikut ini cara membuat akun Google Webmaster :

  1. Pastikan sudah mempunyai akun Google, kunjungi alamat Google Webmaster di //www.google.com/webmasters/.
    Halaman Depan Google Webmaster
  2. Klik tombol “Sign in to Search Console” untuk masuk ke halaman dasbor Google Webmaster, gunakan email dan password dari akun Google untuk login.
  3. Buat properti akun Google Webmaster baru dengan mengisi nama website atau blog lalu tekan tombol “Add Property” atau “Tambah Properti“.
    Buat Properti Akun Google Webmaster
  4. Langkah selanjutnya akan dikirim melalui email.

Verifikasi Akun Google Webmaster

Setelah berhasil membuat properti akun Google Webmaster, selanjutnya kita akan melakukan proses verifikasi website atau blog. Langkah verifikasi ini bertujuan untuk memastikan website atau blog yang kita buat propertinya tadi benar-benar blog milik kita dan berada dalam jangkauan pengelolaan kita sebagai Webmaster.

Berikut ini cara verifikasi akun Google Webmaster :

  1. Klik icon roda gerigi disebelah kanan atas, lalu pilih “Verifications Detail“.
    Verifikasi Akun Google Webmaster
  2. Pada halaman verifikasi, klik “Verify using a different method“.
  3. Pilih metode Tag HTML, akan muncul kode verifikasi didalam tag meta seperti berikut ini.
  4. Taruh kode tersebut pada halaman index atau jika pada blogger, taruh pada template dengan cara masuk ke mode edit HTML.
  5. Posisi kode harus berada diantara tag <head>…</head> atau dengan kata lain harus berada setelah tag <head> atau sebelum tag </head>.
  6. Setelah selesai, klik tombol “Verify” atau “Verifikasi“.
Setelah proses verifikasi berhasil, selanjutnya kita bisa mulai menggunakan tool-tool yang ada pada Google Webmaster. Untuk detail cara menggunakan tool-tool pada Google Webmaster insyaAllah akan dijelaskan pada artikel selanjutnya.

Filed Under: Blogging

Cek Keaslian Sebuah Artikel Blog

9 Mei 2015 By Eko Purnomo

Cek Keaslian Sebuah Artikel Blog

Dalam membuat artikel, penting bagi kita untuk menjaga keaslian tulisan kita. Tindakan kopi paste adalah sebuah hal yang tidak terpuji dan jika yang memegang hak cipta tidak berkenan maka persoalan bisa berbuntut panjang. Memang terkadang saat membuat sebuah artikel, kita memerlukan referensi dari berbagai sumber seperti misalnya Wikipedia atau dari blog lainnya. Namun kita tetap tidak diperkenankan melakukan kopi paste secara mentah-mentah terhadap artikel tersebut.

Diantara beberapa artikel yang ada di internet banyak sekali yang membahas tentang persoalan yang sama atau memberikan penjelasan tutorial tentang hal yang sama. Namun jika kita amati bagaiman para penulis tersebut menyampaikan materi melalui tulisan tidaklah sama dan memang tidak mungkin sama. Bagaimanapun dua orang tidak bisa menulis sesuatu yang sama sampai satu artikel. Pasti ada perbedaan dari segi bahasa, redaksi kata, sudut pandang dan cara penyampaian.

Untuk mengecek keaslian sebuah artikel, ada banyak tool yang tersedia di internet. Ada beberapa website yang menyediakan jasa layanan pengecekan keaslian sebuah artikel secara gratis, diantaranya Copyscape, Plagiarisma, Plagium, DupliChecker dan masih banyak yang lainnya. Selain mengecek keaslian sebuah artikel, kita juga bisa mengecek jika artikel kita di kopi paste oleh orang lain. tentunya kita harus yakin bahwa 100% artikel kita merupakan hasil tulisan dan pemikiran sendiri.

Cek Keaslian Artikel dengan Copyscape

Copyscape memberi fasilitas kita untuk mengecek keaslian sebuah artikel blog secara gratis. Sayangnya kita hanya diberi fasilitas tiga kali pengecekan saja, selanjutnya untuk bisa mengecek lebih banyak artikel kita harus mempunyai akun premium yang tentu saja harus diperoleh dengan cara membayar alias tidak gratis. Meski sedikit, fasilitas ini bisa kita pakai untuk mengecek artikel yang kita posting terindikasi kopi paste atau bahkan di kopi paste oleh orang lain.

Kelebihan dari Copyscape adalah kecepatannya dalam menganalisa, bahkan sangat cepat menurut saya. Kemudian untuk menggunakan Copyscape kita tidak perlu registrasi, cukup kunjungi website Copyscape lalu isikan URL artikel blog yang akan di cek kemudian Tekan tombol GO. Jika kuota pengecekan telah tercapai maka pada pengecekan selanjutnya akan ada peringatan seperti berikut ini.

Cek Keaslian Artikel dengan Plagiarisma.net

Plagiarisma.net memberikan layanan pengecekan plagiat (pencurian tulisan) yang bisa dipakai untuk mengecek keaslian sebuah artikel. Plagiarisma.net merupakan alternatif selain Copyscape yang bisa digunakan secara gratis namun juga dibatasi jumlah pengecekan perharinya. Untuk menggunakan fitur premium kita disediakan layanan free trial dengan cara mendaftar lebih dahulu.

Untuk mengecek artikel kita harus mengkopi isi teks pada artikel lalu ditaruh pada textarea yang disediakan oleh Plagiarisma.net. Untuk proses pengecekan kita tinggal klik saja tombol Check Duplicate Content.

Kekurangan dari Plagiarisma.net adalah kita harus menaruh teks (bukan URL) dan lagi waktu pengecekannya relatif lama menurut saya. Untuk teks dengan panjang sekitar 400 dibutuhkan waktu pengecekan lebih dari 1 menit.

Cek Keaslian Artikel dengan Plagium

Plagium menyediakan fasilitas mengecek keaslian artikel seperti Copyscape dan Plagiarisma.net. Dengan Plagium kita bisa mengecek teks (Check Text), mengecek URL (Check URL) dan mengecek file (Check File).

Kita bisa menggunakan layanan Plagium secara gratis namun itu hanya fitur Check Text dan itu pun hanya sekali saja. Untuk menggunakan fitur Check URL dan Check File kita harus mendaftar dan harus memiliki credit point dengan nilai tertentu.

Untuk pengecekan melalui teks caranya seperti pada Plagiarisma.net hanya saja Plagium menampilkan hasilnya dengan lebih cepat menggunakan fitur Quick Search.

Kesimpulan

Menjaga keaslian artikel dan menjaga agar artikel tidak dikopi paste tentu sangat penting dalam dunia blogging. Dan diantara ketiga website diatas, yang paling simpel dan memberikan fasilitas pengecekan gratis terbanyak adalah Copyscape (sampai 3 artikel). Bagi yang tahu alternatif pengecekan yang lainnya silahkan bagikan melalui komentar, tentunya akan sangat membantu apabila memang benar-benar gratis.

Filed Under: Blogging

Cara Menampilkan Kode HTML Pada Artikel

8 Mei 2015 By Eko Purnomo

Cara Menampilkan Kode HTML Pada Artikel

HTML adalah singkatan dari Hypertext Markup Language. HTML adalah kode yang dipakai untuk membuat halaman website atau blog. Saat kita membuat sebuah artikel tentang tutorial yang didalamnya berisi contoh kode HTML maka diperlukan teknik khusus untuk membuat kode HTML bisa tampil pada artikel blog tersebut. Jika tidak maka kode HTML akan dirender oleh browser dan tidak tampil pada halaman postingan.

Untuk menampilkan kode HTML pada blog kita harus membuat karakter pada HTML bebas dari rendering kode HTML pada browser. Istilah ini disebut dengan HTML Escape. Misalnya karakter “<” dan “>” yang dipakai untuk menulis tag HTML seperti <body> akan diproses atau difilter secara otomatis oleh browser. Untuk mengatasi hal itu digunakan karakter pengganti seperti “<” diganti dengan “&lt;” dan “>” diganti dengan “&gt;“. Hal ini juga berlaku ketika kita akan menyisipkan kode PHP dan Javascript pada postingan artikel.

Aturan diatas membuat penulis blog khususnya saya sedikit kesulitan ketika harus menulis banyak kode HTML pada artikel sebagai bagian dari penjelasan sebuah tutorial misalnya. Agar pekerjaan ini menjadi lebih mudah dan bisa dilakukan secara instan, kita bisa menggunakan berbagai tool pemformat HTML Escape yang ada di internet. Kita tinggal kopi saja kode yang akan ditampilkan pada blog kemudian klik tombol dan jadilah kode program kita sudah bebas dari rendering HTML oleh browser.

Cara memformat kode HTML, PHP dan Javascript agar menjadi karakter HTML Escape :

  1. Buka situs yang menyediakan tool untuk format kode agar HTML Escape, misalnya favorit saya di //codeformatter.blogspot.com/.
    Tampilan situs //codeformatter.blogspot.com/
  2. Kopi kode HTML yang akan diformat pada textarea dibawah keterangan “Paste Here Your Source Code”.
  3. Atur beberapa opsi format sesuai dengan yang diinginkan, misalnya kalau saya bisasa ubah setingan “Remove blank lines” menjadi NO agar jeda antar baris program tidak hilang.
  4. Setelah semua siap, klik tombol “Format Source Code” untuk menjalankan proses format kode.
  5. Sistem perangkat lunak pemformat teks ini menggunakan kode javascript jadi saat melakukan proses format kita tidak mengirimkan kode ke server melainkan hanya diproses pada komputer klien (komputer yang kita pakai) saja.
  6. Kode hasil pemformatan akan ditaruh pada textarea dibawah keterangan “Copy Formatted Source Code”.
  7. Silahkan kopi kode tersebut untuk ditaruh pada halaman postingan artikel blog.
  8. Cara menaruh kode hasil format HTML Escape ini adalah dengan mengubah mode editor teks pada halaman Entri Baru menjadi mode HTML dulu baru kemudian dipaste pada artikel.
Untuk mempercantik tampilan kode HTML diatas, bisa dipadukan dengan teknik Cara Menampilkan Source Code Pada Blogspot pada artikel sebelumnya. Dengan demikian kode HTML, PHP dan Javascript pada tutorial yang kita bagikan agar lebih jelas terbaca dan dipahami oleh pengunjung blog yang membutuhkan kode tersebut.

Filed Under: Blogging

Cara Menampilkan Source Code pada Blogspot

7 Mei 2015 By Eko Purnomo

Cara Menampilkan Source Code pada Blogspot

Saat membuat artikel tentang pemrograman, kadang kita perlu menampilkan kode sumber atau yang disebut dengan source code pada halaman blog. Jika kode sumber tersebut kita letakkan secara biasa akan terlihat kurang menarik dan kurang jelas highlight syntax-nya (penekanan tampilan teks pada perintah-perintah program).

Untuk membuat kode program yang kita tampilkan terlihat seperti source code editor kita bisa menggunakan teknik syntax highlighter dari //alexgorbatchev.com. Contoh tampilannya bisa dilihat pada salah satu artikel tentang import data csv dengan php yang disertai source code disini. Dengan teknik ini tampilan source code terlihat berbeda dari konten blog yang lain dan perintah-perintah pada program terlihat dibedakan warnanya.

Ada dua langkah yang harus dilakukan untuk bisa menampilkan source code pada blogspot. Langkah pertama kita setup dulu sistem syntax highlighternya pada template. Dan langkah yang kedua penerapan kode syntax highlighter pada halaman posting.

Berikut ini langkah setup syntax highlighter pada tamplate Blogspot :

  1. Pada dasbor Blogger, Masuk ke menu Template kemudian pilih Edit HTML.
  2. Cari kode </head> dengan cara tekan CTRL+F pada kotak teks editor template lalu ketikan </head> pada teks pencarian. Harap perhatikan, CTRL+F nya bukan pada halaman browsernya lho ya.
  3. Masukkan link javascript Syntax Highlighter, caranya taruh kode berikut ini diatas kode </head>:
     <!--Syntax Highlighter-->  
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script async='async' src='//syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'/>
    <script async='async' src='//syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'/>
    <script async='async' src='//syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'/>
    <script async='async' src='//syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'/>
    <script async='async' src='//syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'/>
    </b:if>
  4. Kode diatas berfungsi untuk menampilkan source code dengan bahasa pemrograman PHP, Javascript, HTML, XML, CSS dan lain-lain. Untuk lebih jelas tentang bahasa pemrograman yang disupport bisa dilihat di situs resmi Syntax Highlighter di //alexgorbatchev.com.
  5. Dengan menerapkan tag <b:if cond=’data:blog.pageType == &quot;item&quot;’> berarti kita hanya menggunakan script saat tampil halaman posting saja. Ini meringankan beban loading blog selain halaman pos.>
  6. Cari kode ]]></b:skin> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik ]]></b:skin>.
  7. Masukkan kode CSS berikut ini diatas kode ]]></b:skin> :
     /*style for syntax highlighter*/  
    .dp-highlighter
    {
    font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
    font-size: 12px;
    line-height: 1.8em;
    background-color: #E7E5DC;
    width: 99%;
    overflow: auto;
    margin: 18px 0 18px 0 !important;
    padding-top: 1px;
    text-align: left;
    /* adds a little border on top when controls are hidden */
    }
    /* clear styles */
    .dp-highlighter ol,
    .dp-highlighter ol li,
    .dp-highlighter ol li span
    {
    margin: 0;
    padding: 0;
    border: none;
    }
    .dp-highlighter a,
    .dp-highlighter a:hover
    {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    }
    .dp-highlighter .bar
    {
    padding-left: 45px;
    }
    .dp-highlighter.collapsed .bar,
    .dp-highlighter.nogutter .bar
    {
    padding-left: 0px;
    }
    .dp-highlighter ol
    {
    list-style: decimal; /* for ie */
    background-color: #fff;
    margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
    padding: 0px;
    color: #5C5C5C;
    }
    .dp-highlighter.nogutter ol,
    .dp-highlighter.nogutter ol li
    {
    list-style: none !important;
    margin-left: 0px !important;
    }
    .dp-highlighter ol li,
    .dp-highlighter .columns div
    {
    list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
    list-style-position: outside !important;
    border-left: 3px solid #6CE26C;
    background-color: #F8F8F8;
    color: #5C5C5C;
    padding: 0 3px 0 10px !important;
    margin: 0 !important;
    line-height: 1.8em;
    }
    .dp-highlighter.nogutter ol li,
    .dp-highlighter.nogutter .columns div
    {
    border: 0;
    }
    .dp-highlighter .columns
    {
    background-color: #F8F8F8;
    color: gray;
    overflow: hidden;
    width: 100%;
    }
    .dp-highlighter .columns div
    {
    padding-bottom: 5px;
    }
    .dp-highlighter ol li.alt
    {
    background-color: #FFF;
    color: inherit;
    }
    .dp-highlighter ol li span
    {
    color: black;
    background-color: inherit;
    }
    /* Adjust some properties when collapsed */
    .dp-highlighter.collapsed ol
    {
    margin: 0px;
    }
    .dp-highlighter.collapsed ol li
    {
    display: none;
    }
    /* Additional modifications when in print-view */
    .dp-highlighter.printing
    {
    border: none;
    }
    .dp-highlighter.printing .tools
    {
    display: none !important;
    }
    .dp-highlighter.printing li
    {
    display: list-item !important;
    }
    /* Styles for the tools */
    .dp-highlighter .tools
    {
    padding: 3px 8px 3px 10px;
    font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: silver;
    background-color: #f8f8f8;
    padding-bottom: 10px;
    border-left: 3px solid #6CE26C;
    }
    .dp-highlighter.nogutter .tools
    {
    border-left: 0;
    }
    .dp-highlighter.collapsed .tools
    {
    border-bottom: 0;
    }
    .dp-highlighter .tools a
    {
    font-size: 9px;
    color: #a0a0a0;
    background-color: inherit;
    text-decoration: none;
    margin-right: 10px;
    }
    .dp-highlighter .tools a:hover
    {
    color: red;
    background-color: inherit;
    text-decoration: underline;
    }
    /* About dialog styles */
    .dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
    .dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
    .dp-about td { padding: 10px; vertical-align: top; }
    .dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
    .dp-about .title { color: red; background-color: inherit; font-weight: bold; }
    .dp-about .para { margin: 0 0 4px 0; }
    .dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
    .dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
    /* Language specific styles */
    .dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
    .dp-highlighter .string { color: blue; background-color: inherit; }
    .dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
    .dp-highlighter .preprocessor { color: gray; background-color: inherit; }
  8. Cari kode </body> pada template dengan kembali menggunakan CTRL+F pada teks editor template lalu ketik </body>.
  9. Taruh kode javascript ini tepat diatas kode </body> :
       <script language='javascript'>  
    dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
    </script>
  10. Proses setup syntax highlighter selesai sampai disini, selanjutnya siap diterapkan pada halaman posting.
Dan berikut ini cara memasang source code pada halaman postingan blog:
  1. Pastikan semua proses setup diatas telah dilakukan dengan benar.
  2. Pada halaman entri baru, klik mode HTML lalu taruh kode berikut ini (contoh untuk menampilkan kode PHP) pada letak source code di postingan.
     <pre class="php" name="code">  
    ...
    </pre>
  3. Taruh source code pada titik-titik diantara tag <pre> dan </pre> seperti contoh berikut ini :
     <pre class="php" name="code">  
    <?php
    echo "Selamat Belajar PHP";
    ?>
    </pre>
  4. Silahkan ganti parameter pada tag class sesuai jenis source code yang akan ditampilkan, misalnya untuk menampilkan kode CSS ganti PHP dengan CSS.
  5. Untuk membuat karakter escape HTML silahkan gunakan beberapa tool yang tersedia di internet seperti pada //codeformatter.blogspot.com.

Filed Under: Blogging

Mencari Ilustrasi Gambar Gratis untuk Blog

5 Mei 2015 By Eko Purnomo

Mencari Ilustrasi Gambar Gratis untuk Blog

Menambahkan ilustrasi gambar pada blog adalah sebuah hal yang penting untuk memberikan gambaran singkat tentang isi artikel kepada pembaca melalui visualisasi gambar. Untuk membuat ilustrasi gambar pada suatu artikel kita bisa membuat sendiri atau mengambilnya dari internet. Jika pilihan kedua yang dilakukan maka kita harus benar-benar memperhatikan hak cipta dari gambar yang kita ambil. Tidak hanya artikel saja yang punya hak cipta, gambar pun demikian.

Untuk mencari gambar yang gratis dan bebas royalti serta bisa digunakan untuk keperluan komersial kita bisa menggunakan jasa beberapa situs penyedia layanan gambar gratis. Kita tidak perlu membeli atau bahkan tidak perlu menaruh link kembali ke situs penyedia gambar yang gratis ini. Ini tentu saja aman digunakan dan blog kita dijamin tidak melanggar hak cipta orang lain. Gambar yang ditawarkan pun kualitasnya lumayan bisa berupa foto atau gambar ilustrasi abstrak.

Berikut ini beberapa situs yang menyediakan gambar gratis yang bisa dimanfaatkan untuk ilustrasi blog. Pastikan kita membaca pembatasan hak cipta pada setiap foto atau gambar sebelum menggunakan seperti harus mencantumkan atribusi dan memberitahu fotografer atau desainer-nya. Patuhi aturan hak cipta dan lisensi common creative yang terkait dengan gambar atau foto yang kita gunakan.

1. Pixabay

gambar-gratis-pixabay

Salah satu situs penyedia foto gratis bebas royalti adalah Pixabay. Ada sekitar 380.000 foto/gambar pada Pixabay setidaknya sampai artikel ini ditulis. Mengutip keterangan dari FAQ Pixabay bahwa kita dapat menyalin, memodifikasi, mendistribusikan dan menggunakan gambar, bahkan untuk tujuan komersial, tanpa meminta izin dan tanpa membayar atribusi.

Namun, konten yang “depicted” masih dapat dilindungi oleh merek dagang, publisitas atau hak privasi. Depicted artinya penggambaran atau object yang digambarkan ulang. Untuk lebih jelas bisa dibaca disini.

2. GettyImages

gambar-gratis-getty-images

Saya tahu situs ini saat membaca berita olah raga pada salah satu situs berita nasional. Saat itu dibagian bawah gambar tertera nama Getty images beserta nama fotografernya. Tag line Getty Images adalah “Stock Photography, Royalty-Free Photos, Video Footage & Music“. Artinya Getty Images menyediakan foto gratis dan bebas royalti yang bisa digunakan untuk keperluan komersial.

Ada dua jenis Royalti pada foto atau gambar di Getty Images, yaitu Rights Managed (RM) dan Royalti Free (RF). Foto dengan tanda RM (Rights Managed) berarti pembatasan penggunaan, seperti pembatasan atas ukuran, penempatan, durasi penggunaan dan distribusi geografis. Kita akan diminta untuk mengirimkan informasi mengenai penggunaan yang diinginkan dari produk, yang akan menentukan ruang lingkup hak penggunaan diberikan.

lisensi-getty-images

Sedangkan foto dengan RF (Royalti Free) berarti produk bebas royalti dan dapat digunakan beberapa kali untuk beberapa proyek tanpa biaya. Namun kita juga bisa membayar untuk foto dengan tanda RF untuk mendapatkan ukuran tertentu dari foto. Kita diberi jatah orang yang berhak menggunakannya maksimal 10. Selanjutnya kita tidak perlu membayar untuk penggunaan berturut produk bebas royalti.

Meski bersifat gratis dan bebas royalti namun mengutip dari salah satu situs berita tadi, tidak ada salahnya jika saat menggunakan foto dari Getty Images kita cantumkan nama Getty Images beserta nama fotografernya. Untuk menggunakan Getty Images ada baiknya silahkan baca dulu informasi lisensinya disini.

3. FreeImages (dulu StockExchange)

gambar-gratis-free-images

Adalah salah satu yang menyediakan stok foto gratis yang cukup banyak yang dikelompokkan dalam beberapa kategori seperti Abstract, Architecture, Business, Computers, Concepts, Food, Nature, Objects, People, Places, Seasonal and Events, Signs, Streets and Cityscapes, Transportation dan World. Saat tulisan ini dirilis, FreeImages telah memiliki stok foto/gambar sejumlah 410.605 buah.

Kita juga bisa memilih melalui kotak pencarian yang disediakan di bagian atas, namun berhubung freeimages ini menggunakan bahasa inggris jadi kata pencariannya harus menggunakan bahasa inggris, misalnya writing, drawing dan sebagainya.

FreeImages merupakan subsider dari Getty Images. Semua gambar yang ditandai denganUntuk menggunakan foto atau gambar dari FreeImages, silahkan baca dulu Term of Use dari FreeImages disini.

Filed Under: Blogging

Membuat Navigasi yang Baik pada Blog

3 Mei 2015 By Eko Purnomo

Membuat Navigasi yang Baik pada Blog

Navigasi blog adalah penunjuk arah bagi pengunjung saat mengakses sebuah blog. Dengan navigasi yang baik diharapkan pengunjung tidak tersesat dan bisa menelusuri isi blog secara mudah. Membuat navigasi blog yang baik menjadi syarat kelayakan sebuah blog selain isi. Bentuk-bentuk navigasi pada blog yang umum adalah menu, label, pencarian, arsip dan tentunya sebuah peta situs.

Masing-masing alat navigasi pada blog bertujuan membantu pengunjung menemukan artikel yang sedang dituju atau yang sedang dicari. Selain kelengkapan navigasi pada blog, letak penempatan navigasi pada blog juga penting. Navigasi blog hendaknya ditaruh pada tempat yang mudah dilihat dan mudah dijangkau seperti disebelah atas atau samping.

Home

Adalah navigasi mutlak yang harus ada pada blog. Tanpa navigasi Home akan membuat pengunjung kesulitan mengakses halaman depan terutama jika pengunjung datang dari mesin pencari. Jika tombol Home tidak ada maka pengunjung harus mengapus ekor link pada URL sampai diperoleh alamat blog saja.

Menu

Adalah bentuk navigasi yang umum ada pada hampir semua blog. Navigasi menu mengelompokkan artikel menjadi beberapa kategori yang dituju melalui link pada menu. Pada blog wordpress, menu bisa langsung disetel terhubung dengan kategori. Namun hal ini berbeda dengan Blogger yang tidak mengenal kategori. Penggunaan menu pada Blogger biasanya disiasati dengan mmanfaatkan link berdasarkan pencarian label (/search/label).

Label atau Tag

Adalah widget yang disediakan blogger untuk menampilkan label yang ada pada blog. Kita mengenal penggunaan istilah label pada blog dengan platform Blogger. Bagi yang terbiasa dengan WordPress, label ini dikenal dengan istilah tag. Penggunaan widget label akan menampilka link yang mengarahkan pengunjung untuk membuka postingan dengan label yang sama saat di klik. Penggunaan widget label bisa bersifat opsional dengan menu.

Pencarian

Adalah alat untuk menelusuri isi sebuah blog secara internal. Navigasi pencarian atau yang sering dikenal dengan Search memfasilitasi pengunjung untuk melakukan pencarian dengan kata kunci tertentu didalam blog. Jadi Navigasi pencarian berbeda dengan mesin pencari seperti Google. Dengan adanya fasilitas pencarian di dalam blog diharapkan pengunjung tidak akan tersesat atau kehilangan materi yang ia cari sehingga akhirnya meninggalkan blog.

Arsip Blog

Adalah alat navigasi yang mengelompokkan artikel berdasarkan waktu posting seperti tahun dan bulan. Arsip blog diibaratkan sebuah arsip surat yang menjadi penanda waktu kapan surat itu diterima atau dikirim. Dengan arsip blog pengunjung akan dengan mudah menemukan postingan pada waktu tertentu.

Peta Situs

Adalah sebuah peta yang berisi keseluruhan artikel yang ada pada blog. Fungsi dari peta situs ini mirip dengan daftar isi pada buku. Peta situs dapat dibuat secara manual namun lebih mudah dan akurat jika dibuat secara otomatis. Dengan peta situs diharapkan pengunjung dapat melihat semua artikel yang telah diterbitkan pada blog berdasarkan label atau kategorinya.

Breadcrumbs

Adalah jalan atau jalur navigasi menuju sebuah artikel. Biasanya jalur navigasi dimulai dari Home kemudian Kategori atau Label baru Alamat artikel. Breadcrumbs mirip dengan jejak folder dan sub folder pada file eksplorer komputer desktop. Dengan breadcrumbs pengunjung akan mengetahui posisi hirarki sebuah artikel didalam blog.

Artikel Terbaru

Adalah widget yang menampilkan postingan terbaru. Jumpah postingan bisa disetel sesuai keinginan kita. Jumlah yang saya anggap wajar adalah 5 sampai 10 artikel. Alat navigasi berupa artikel terbaru ini akan memberitahukan kepada pengunjung tentang artikel yang fresh dan baru diterbitkan pada blog.

Artikel Populer

Fungsi dan penggunaannya mirip dengan widget artikel terbaru namun alat navigasi Artikel Populer mempromosikan beberapa artikel yang paling laris dan banyak dibaca oleh pengunjung. Dengan widget ini diharapkan pengunjung disuguhi artikel yang terbaik dianggap karena banyak dibaca.

Artikel Terkait

Adalah widget yang menawarkan pengunjung untuk membaca artikel yang ada hubungannya dengan artikel yang sedang ia baca. Hubungan ini biasanya diambil karena kesamaan label atau kategori. Dengan alat navigasi ini diharapkan pengunjung dapat informasi lebih tentang hal yang ia cari dari artikel yang terkait dengan artikel yang sedang ia baca.

Itulah beberapa tips membuat navigasi yang baik pada blog. Mungkin tidak harus semua dipasang pada blog namun pilihlah yang sesuai dengan template dan tata letak blog. Kalau bisa, kelengkapan alat navigasi blog ini dijadikan referensi saat mencari template untuk blog.

Filed Under: Blogging

  • « Previous Page
  • 1
  • 2
  • 3
  • 4
  • …
  • 8
  • Next Page »

Kategori

  • Android
  • Blogging
  • CSS
  • Desain
  • Elektronika
  • HTML
  • Internet
  • Javascript
  • Komputer
  • Mikrokontroler
  • PHP
  • Website

Pos-pos Terbaru

  • Rangkaian Adaptor 12 Volt 3 Ampere
  • 10 Aplikasi Transportasi Online Terbaru 2018
  • 3 Cara Screenshot di Laptop Windows
  • Rangkaian Adaptor 12V 35Ampere
  • Komunitas Desainer Kampung Jepara
  • Solder Yang Bagus dan Berkualitas
  • Cara Melewatkan Parameter ke dalam Fungsi pada Bahasa C
  • Parameter Dalam Bahasa C: Formal dan Aktual
  • Prototipe Fungsi dalam Bahasa C
  • Cara Menggunakan Fungsi dalam Bahasa C
  • Home
  • Privacy
  • Disclaimer
  • Kontak

Copyright © 2024 · Nulis-ilmu.com