Senin, 15 September 2014

Mengganti kotak pencarian dengan Google CSE Asli

Google CSE yang sudah ada di element gadget blogspot tampaknya kurang menarik jika dibandingkan dengan Google CSE dari sumbernya langsung https://www.google.com/cse/. Untuk menggantinya dengan yang asli, Anda harus buat di halaman Google CSE langsung, disitu Anda juga dapat mengubah tema seperti warna, dan menambahkan logo sesuai dengan keinginan.
Begitu juga hasil pencarian dari Google CSE, tersedia pilihan untuk mengubah warna huruf dan border, juga preview hasil perubahan sementara. Jika Anda telah selesai utak atik fitur yang ada, jangan lupa untuk menekan tombol SAVE dan ambil kodenya untuk dipasangkan di gadget HTML blog Anda. Contoh hasil Google CSE ini dapat dilihat di sidebar kanan blog ini.

Selasa, 09 September 2014

Contoh Sharing Interactive Posts di Blogspot/Blogger

Ini adalah contoh tombol Google Sharing Interactive Posts di blog BLOGSPOT/BLOGGER.



Dengan aplikasi Interactive Posts ini dapat meningkatkan konversi klik (CTR) ke situs Anda sebesar 3 kali lipat dibanding dengan sharing biasa di Google Plus (G+). Tutorial cara pasang dan referensinya dapat dibaca di sini.

Bagikan artikel dalam blog ini dengan mengklik tombol "Share" di bawah ini.

Senin, 08 September 2014

Memperbaiki error missing required field "updated" rich snippet blogspot


Cara memperbaiki error missing required field "updated" di Blogspot pada saat menggunakan tool rich snippet sangat mudah.

Masuk di "Template Editor" blog dan cari kode class='published' yang KEDUA. Kemudian tambahkan kata "updated" dalam kode tersebut, jadinya seperti ini class='published updated'



Simpan pekerjaan Anda dan fetch ulang url postingan Anda dengan tool rich snippet untuk melihat apakah pesan error sudah dapat diperbaiki atau belum.

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.