Jumat, 09 November 2012

Cara membuat blog secara offline / localhost - Windows

Bagaimana cara membuat blog secara offline atau tanpa koneksi internet? Offline di sini artinya membuat blog di localhost. Localhost biasanya dipergunakan bagi para web developer untuk membuat theme, template, atau aplikasi yang nantinya akan dipublikasikan ke internet.

WordPress adalah salah satu CMS blog yang bisa dipergunakan untuk bekerja di localhost, dan XAMPP adalah web server gratis yang berfungsi sebagai mesin untuk menjalankan berbagai macam perangkat lunak seperti Apache HTTP Server, MySQL database, Perl, atau PHP.

Cara membuat blog di localhost menggunakan WordPress di Windows.

  1. Download dan Install XAMPP sesuai dengan OS komputer Anda (Linux, Windows, Mac OS X, Solaris)
  2. Download CMS WordPress
  3. Setelah Anda menginstall XAMPP, melalui browser Anda (Firefox,IE,Chrome,dll), ketik http://localhost/phpmyadmin/ untuk membuat database di phpMyAdmin
  4. Pada box "Create new database", isi nama blog Anda, misalnya "wordpress", lalu klik tombol "Create"
  5. Masuk Windows Explorer Anda, telusuri direktori ini C:\xampp\htdocs
  6. Pada folder htdocs, buat folder baru dan beri nama sesuai dengan nama database Anda, dalam contoh ini adalah "wordpress"
  7. Extract file zip WordPress yang Anda download sebelumnya, dan pindahkan semua isinya ke folder "wordpress" yang baru saja Anda buat C:\xampp\htdocs\wordpress.
  8. Melalui browser Anda lagi, ketikkan http://localhost/wordpress/ dan ikuti semua petunjuk penginstalan WordPress. Pada saat pengistalan blog WordPress, Anda akan diminta mengisi database name dan database password. Database name adalah nama database yang Anda buat, dan passwordnya kosongkan saja.
  9. Selesai.


Kini blog Anda telah jadi dan siap dipergunakan untuk membuat berbagai macam kreasi seputar pengembangan blog. Anda bisa membuat banyak blog selanjutnya dengan dimulai dengan cara no.4 yang telah dijelaskan di atas.

Nonaktifkan klik kanan dengan jQuery


Kode jQuery ini adalah salah satu cara untuk nonaktifkan klik kanan pada halaman web atau blog. Fungsi disable klik kanan dengan jQuery ini bukan hanya untuk melindungi konten kamu dari pencuri konten atau tukang copas (copy paste), akan tetapi berguna juga untuk lebih memfungsikan aplikasi lainnya, seperti penggunaan skrip fancybox atau lightbox.

Kode jQuery untuk nonaktifkan klik kanan seluruh konten web/blog.

<script type="text/javascript">
$(function() {
            $(this).bind("contextmenu", function(e) {
                e.preventDefault();
            });
        });
</script>

Kode jQuery untuk nonaktifkan klik kanan khusus gambar.

<script type="text/javascript">
$(function() {
         $('img').bind('contextmenu', function(e){
    return false;
            }); 
        }); 
</script>

Jangan lupa untuk menyertakan skrip jQuery library versi terbaru di bagian header.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> 

Jumat, 19 Oktober 2012

Form search box halaman error

Form search box dalam halaman error berguna apabila pengunjung situs Anda tidak mendapatkan artikel yang mereka inginkan. Anda dapat menambahkan form search box atau kotak pencarian untuk lebih memudahkan bagi pengunjung untuk mendapatkan artikel.

Berikut kode sederhana cara membuat form search box untuk halaman error di Blogger atau blogspot.

<form method="get" action="/search">
<table width="100%">
<tr>
<td><input type="text" style="width:95%;padding:2px;" value="Cari blog ini.." onfocus="if (this.value == &quot;Cari blog ini..&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari blog ini...&quot;;}" name="q"></td>
<td><input type="submit" Value="Search"></td>
</tr>
</table>
</form>

<form method="get" action="/search">
<table width="100%">
<tr>
<td><input placeholder="Type here..." class="input-text" type="text" value="" onfocus="if (this.value == &quot;&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;&quot;;}" name="q" /></td>
<td width="64px"><input class="search-submit" type="submit" value="Search" /></td>
</tr>
</table>
</form>

Sabtu, 13 Oktober 2012

JavaScript Feed Json Blogger/Blogspot

Berikut ini kode parsing feed json blogspot dengan menggunakan javascript.

<h3>Allpost</h3>
<div id="allpost"></div>
<script>
function allpost(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var dimension = 90;
    var html = ['<ul>'];

    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
      var title = (entry.title.type == 'text') ? entry.title.$t : escape(entry.title.$t);
      var link = (entry['link']) ? entry['link'][4].href : "";
      var summary = (entry.summary.type == 'text') ? entry.summary.$t : escape(entry.summary.$t);
      var thumbnail = (entry.media$thumbnail) ? entry.media$thumbnail.url : "";
      var thumbnails = thumbnail.replace(/s\B\d{3,4}/,'s' + dimension);
      html.push('<li><img style="float:left;margin:0 5px 5px 0" src="',thumbnail,'"><a href="', link, '">', title, '</a><br>',summary,'</li>');
    }
    var linkprev = feed.link[4].href;
    var linknext = feed.link[5].href;
    html.push('',linknext,'<br>',linkprev,'');
    html.push('</ul>');
    document.getElementById("allpost").innerHTML = html.join("");
  }
</script>
<script src="http://www.yourblog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=allpost"></script>

Ganti www.yourblog.blogspot.com dengan url blog Anda.

Senin, 17 September 2012

Cara Membuat Layout Dinamis (jQuery Masonry)

jQuery adalah alat yang ampuh untuk membuat galeri gambar animasi,tooltips, dynamic forms, update real time dan berbagai teknik lain.

Coba Anda lihat situs ini. Galeri gambar tersebut tersusun dengan rapi dan otomatis menempatkan gambar sesuai dengan tinggi dan lebar gambar pada area yang sesuai. Galeri tersebut dibuat dengan jQuery Masonry.

Membuat layout yang dinamis dengan jQuery Masonry gambarannya seperti ini:

Teknik ini menggabungkan plugin jQuery Masonry dan struktur css tepat. Anda bisa menggabungkan jQuery Masonry dengan kode JavaScript lainnya, seperti infinite ajax scroll ataupun skrip transisi.

Cara membuat layout dinamis dengan jQuery Masonry dikembangkan oleh  David DeSandro. Anda bisa mempelajarinya lebih lanjut dari sana.

Membuat website dengan HTML5 Boilerplate

HTML5 Boilerplate adalah template front-end profesional untuk membangun aplikasi web/situs yang cepat, kuat, dan mudah diadaptasi.

Proyek ini merupakan hasil dari pengembangan bertahun-tahun dan gabungan pengetahuan komunitas developer. Ia tidak memaksakan filosofi pembangunan tertentu atau kerangka kerja, sehingga Anda bebas untuk arsitek kode Anda dengan cara yang Anda inginkan.

Dengan template HTML mobile yang friendly , optimasi Google Analytics, dan berbagai puluhan tips dan trik tambahan, website HTML5 Boilerplate cukup banyak diminati para web developer.

Fitur HTML5 Boilerplate 
  • HTML5 ready. Use the new elements with confidence.
  • Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+).
  • Designed with progressive enhancement in mind.
  • Includes Normalize.css for CSS normalizations and common bug fixes.
  • The latest jQuery via CDN, with a local fallback.
  • The latest Modernizr build for feature detection.
  • IE-specific classes for easier cross-browser control.
  • Placeholder CSS Media Queries.
  • Useful CSS helpers.
  • Default print CSS, performance optimized.
  • Protection against any stray console.log causing JavaScript errors in IE6/7.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • Cross-domain Ajax and Flash.
  • Delete-key friendly." Easy to strip out parts you don't need.
  • Extensive inline and accompanying documentation.

Download aplikasinya di sini.

Senin, 13 Agustus 2012

Google Favicon Terbaru. Berubah Lagi!

Google memiliki favicon terbaru lagi. Berubahnya favicon Google ini seperti ikon dari aplikasi mobile Google search untuk Android dan IOS. Ikon yang sama juga digunakan untuk aplikasi Google Search dari Chrome Web Store.

Ini dia gambar favicon terbaru Google


Favicon Google yang lama sejak tahun 2009


Anda bisa melihat sendiri favicon Google yang baru dari browser Anda. Jika tidak ada perubahan, Anda harus membersihkan cache browser Anda terlebih dahulu.

Sabtu, 04 Agustus 2012

Mengubah struktur title post type Blogger

Dengan kode berikut Anda bisa mengubah struktur title di setiap tipe halaman Blogspot tersebut agar SEO (Search Engine Optimization) friendly.

Source : Mengubah title di setiap tipe halaman Blogspot - www.jevuska.com

Ubah link label menjadi search

Bagaimana jika kita ingin mengubah link label blog itu menuju ke halaman search atau halaman pencarian sehingga artikel yang terkait label juga bisa lumayan banyak.

Source : Cara gampang mengubah link label di Blogspot menjadi search - www.jevuska.com

Modifikasi Halaman Error 404 di Blogger

Bagaimana cara agar pengunjung tidak meninggalkan begitu saja blog Anda pada saat melihat halaman error tersebut? Ada beberapa tips cara melakukan modifikasi terhadap halaman "page not found" di blog Anda.

Source : Cara Modifikasi Halaman “page not found” di Blogger - www.jevuska.com

Meta Description Blogspot Dinamis

Kamu bisa cek sendiri dari hasil indeks blog kamu, terutama di blogspot, dengan mengetikkan di search box mesin pencari site:exampledomain.com, apakah kata kunci di title ada juga di snippet dan url kamu?

Source : Cara buat Meta Description Blogspot Seunik Mungkin - www.jevuska.com

Search Box Google CSE di postingan

Elemen terbaru blogspot yaitu element Pages dan element Search Box Google CSE. Jadi kamu bisa buat page di blogspot (max 10 pages) dan menambahkan Search box Google CSE.

Source : Autofill Google CSE dengan Keyword Label Blogspot - www.jevuska.com