Selasa, 22 Maret 2011

Cara Membuat Artikel Terkait (Related Post) Di Blogspot

pengertian Related Post atau Artikel Terkait adalah posting atau artikel yang berhubungan dengan artikel lainnya berdasarkan atas kesamaan nama kategori atau label postingan, tetapi artikel tersebut tidak selalu sama topiknya, bisa juga membahas tentang hal lain, tetapi masih mempunyai relevansi dengan tujuan artikel tersebut, misalnya yang sedang anda baca sekarang adalah artikel dengan judul Cara Membuat Artikel Terkait (Related Post) Di Blogspot, kemudian terkait dengan artikel lain yang berjudul Cara Mengganti Header Blog pada Blogger, disini kesamaannya adalah artikel tersebut sama-sama membahas tentang blog.

Oleh karena itu jika hendak memasukan kategori atau label pada postingan sebaiknya betul-betul diperhatikan apakah postingan tersebut mempunyai relevansi dengan postingan lainnya atau tidak, apabila tidak sebaiknya dibuatkan kategori atau label baru saja, tujuannya supaya pembaca blog kita tidak kecewa.

OK, sekarang kita mulai mengulas tentang Cara Pasang Artikel Terkait (Related Post) pada Blogspot, silahkan ikuti langkah-langkah di bawah ini :

  1. Login ke account blogger Anda.
  2. Pilih menu Tata Letak/Layout » Edit HTML.
  3. Beri tanda centang pada tulisan Expand Widget Templates.
  4. Copy-paste script berikut di atas kode </head>:

    <script type="text/javascript">
    //<![CDATA[
    var relatedTitles = new Array();
    var relatedTitlesNum = 0;
    var relatedUrls = new Array();
    function related_results_labels(json) {
    for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    relatedUrls[relatedTitlesNum] = entry.link[k].href;
    relatedTitlesNum++;
    break;
    }
    }
    }
    }
    function removeRelatedDuplicates() {
    var tmp = new Array(0);
    var tmp2 = new Array(0);
    for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
    tmp.length += 1;
    tmp[tmp.length - 1] = relatedUrls[i];
    tmp2.length += 1;
    tmp2[tmp2.length - 1] = relatedTitles[i];
    }
    }
    relatedTitles = tmp2;
    relatedUrls = tmp;
    }
    function contains(a, e) {
    for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
    return false;
    }
    function printRelatedLabels() {
    var r = Math.floor((relatedTitles.length - 1) * Math.random());
    var i = 0;
    document.write('<ul>');
    while (i < relatedTitles.length && i < 20) {
    document.write('<li><a href="' + relatedUrls[r] + '">' +
    relatedTitles[r] + '</a></li>');
    if (r < relatedTitles.length - 1) {
    r++;
    } else {
    r = 0;
    }
    i++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
  5. Kemudian cari kode berikut:

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
    </b:loop>
    </b:if>
  6. Setelah itu tambahkan kode berwarna merah di antara kode yang berwarna biru hingga menjadi seperti di bawah ini:

    <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>


    <b:if cond='data:blog.pageType == "item"'>
    <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
    </b:if>

    </b:loop>
    </b:if>
  7. Kemudian letakkan kode berwarna merah di bawah kode ini: </b:loop></b:if>, contohnya seperti di bawah ini:

    </b:loop>
    </b:if>


    <b:if cond='data:blog.pageType == "item"'>
    <h4>Artikel Terkait</h4>
    <script type="text/javascript">
    removeRelatedDuplicates();
    printRelatedLabels();
    </script>
    </b:if>
  8. Simpan Template, Selesai.

Cara Setting Blog Menjadi Dofollow

ebelum saya memulai berbagi Cara Setting Blog Menjadi Dofollow, ijinkan saya berbagi mengenai pengertian Nofollow dan Dofollow yaitu sebagai berikut:
  • Nofollow artinya link yang anda masukkan pada saat anda memberikan komentar disebuah blog tidak akan ditelusuri lebih lanjut oleh mesin pencari dalam artian anda tidak akan mendapatkan backlink dari blog tersebut, sementara kita tahu bahwa backlink merupakan salah satu unsur penting dalam peningkatan page ranking.
  • Sedangkan Dofollow memiliki arti yang sebaliknya, dalam artian anda akan mendapatkan backlink dari komentar yang anda berikan pada sebuah blog, yah anggaplah sebagai hadiah dari sipemilik blog kepada anda karena sudah bersedia memberikan komentar yang berkualitas di blognya.
Secara default setting komentar sebuah blog adalah nofollow, tapi anda dapat merubahnya menjadi dofollow. Sebagai contoh blog ini www.seby-antoe.com dan blog saya ini www.serba-tersedia.co.cc sudah disetting untuk komentarnya menjadi Dofollow. Jadi bila anda memberikan komentar pada blog tersebut, link anda akan ditelusuri lebih lanjut oleh mesin pencari atau anda akan mendapatkan backlink dari blog ini. Anggaplah ini sebagai hadiah kecil dan penghargaan untuk anda yang sudah bersedia mampir dan memberikan komentar berkualitas pada blog-blog di atas.

Baiklah saya rasa sudah cukup penjelasan mengenai Nofollow dan Dofollow, sekarang mari melanjutkan ke Cara Setting Blog Menjadi Dofollow, sebagai berikut:
  1. Login ke Blogspot Anda, kemudian klik menu Rancangan/Layout masuk ke tab Edit HTML, jangan lupa untuk memberi tanda contreng pada kotak disebelah tulisan Expand Widget Templates;
  2. Cari kode HTML yang menyusun komentar di blog anda, kira-kira kodenya seperti ini:
    <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
  3. Langkah selanjutnya hapus tulisan yang bercetak tebal sehingga kode HTML blog anda menjadi seperti di bawah ini:
    <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
  4. Save Template, selesai.
Untuk mengetahui apakah blog anda sudah Dofollow atau belum, Anda bisa melakukan pengecekan dengan cara klik kanan di halaman blog dan klik view page source. Jika anda masih menemukan tulisan rel='nofollow' berarti blog anda belum Dofollow.

Cara Melakukan Edit HTML Pada Template Blogspot

lasan pertama menulis posting ini adalah semata-mata untuk catatan dan sebagai pengingat diri Saya sendiri ketika hendak melakukan Edit HTML pada Template, karena sebagai blogger pemula Saya masih sering ngotak-atik Template untuk menambah fitur/widget Blog, sedangkan alasan kedua adalah Saya yakin masih ada diantara blogger pemula yang membutuhkan tutorial ini terutama yang benar-benar baru membuat blog.

Berdasarkan hasil observasi (ha ha ha…..) ke beberapa tutorial yang dibuat oleh blogger senior dan sesuai pengalaman pribadi ternyata Cara Melakukan Edit HTML Pada Template Blogspot yang benar adalah sebagai berikut:

  1. Kunjungi blogspot.com untuk ke halaman Login seperti pada gambar di bawah ini:
  2. Masukan Email dan Password lalu klik Masuk untuk menuju ke Dashboard, seperti gambar di bawah ini:
  3. Klik Rancangan agar menuju ke halaman berikutnya, seperti dalam gambar di bawah ini:
  4. Pilih dan klik Edit HTML untuk ke halaman Edit HTML, seperti gambar di bawah ini:
  5. Sebelum mulai mengedit, menambah atau menghapus kode HTML pada Template, sebaiknya terlebih dahulu Download Template Lengkap dan simpan filenya untuk mengantisifasi jika terjadi kegagalan, maka hasil file Template tadi bisa digunakan untuk merestore atau mengembalikan kondisi template pada posisi sebelumnya. Selanjutnya beri tanda centang pada kotak Expand Template Widget, seperti contoh pada gambar di atas.
  6. Cara mudah untuk mengedit kode HTML pada Template, silahkan perhatikan pada gambar di bawah ini:
  7. Untuk memudahkan pencarian kode HTML yang akan diedit, gunakan tombol Find, caranya seperti pada gambar di atas (lihat tanda panah No.1) atau tekan Ctrl + F dari keyboard Komputer, lalu masukan kode yang akan dicari ke dalam kotak Find (lihat No.2 di gambar) kemudian Enter/Next (lihat tanda panah No.3), jika kode yang dicari tersebut terdapat di Template, maka kode tersebut akan tampil beda (lihat pada panah No.4).
  8. Selanjutnya sudah bisa mulai mengotak-atik kode-kode HTML tersebut dan setelah selesai sebaiknya jangan di Save Template dulu, tapi klik Pratinjau untuk melihat hasil pengeditannya, apakah berhasil atau gagal? Jika gagal gunakan tab Bersihkan Edit untuk mengembalikan kode ke posisi awal dan silahkan coba lagi cara-cara di atas sampai berhasil, lalu Simpan Template, sebagaimana contoh pada gambar di bawah ini:
Demikianlah tutorial sederhana ini, semoga bermanfaat untuk kita semua, Amin!!!.

= = = = = = = => Selamat Berkreasi, Semoga Sukses!!! <= = = = = = = =

Cara Menyembunyikan Judul Widget di Blogspot

Beberapa waktu lalu Blogger mengeluarkan kebijakan baru, dimana setiap menambah/membuat widget di sidebar blogspot harus menyertakan judul alias pada kotak judul tidak boleh dikosongkan dan jika dikosongkan maka akan keluar pesan error.

Nah jika Anda tidak menginginkan judul widget tampil di sidebar blog, caranya cukup mudah dan setidaknya ada 2 (dua) cara untuk menyembunyikan atau menghilangkan judul widget tersebut.

Berikut ini 2 (dua) Cara Menyembunyikan Judul Widget di Blogspot yaitu:
  1. Menghapus Kode Perintah yang berfungsi untuk menampilkan judul widget;
  2. Membuat/Menambah Kode CSS agar judul widget tidak ditampilkan;

Cara Menghapus Kode Perintah yang berfungsi untuk menampilkan judul widget, sebagai berikut:
  1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget;
  2. Cari Judul Widget yang akan disembunyikan, misalnya "LINK BANNER SAHABAT", lalu perhatikan kode-kode yang menyertainya, contohnya seperti ini:
    <b:widget id='HTML4' locked='false' title='LINK BANNER SAHABAT' type='HTML'>
    <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
  3. Hapuslah kode yang ini: <h2 class='title'><data:title/></h2>;
  4. Simpan/Save Template, selesai.

Jika Anda tidak ingin menghapus kode perintah, maka Anda bisa menggunakan cara kedua yaitu Membuat/Menambah Kode Css, sebagai berikut:
  1. Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotak Expand Template Widget;
  2. Cari Widget ID untuk judul widget yang akan disembunyikan, misalnya Widget ID untuk "LINK BANNER SAHABAT" ini adalah HTML4. Coba perhatikan sekali lagi struktur kode di bawah ini:
    <b:widget id=' HTML4' locked='false' title='LINK BANNER SAHABAT'
  3. Selanjutnya cari kode ]]></b:skin>, lalu diatasnya tambahkan Kode Css seperti ini:
    #HTML4 .title {display:none}

    Keterangan:
    Jika Anda ingin menyembunyikan judul widget lebih dari satu, Anda tinggal menambahkan Widget ID dari judul widget dimaksud di depan kode .title {display:none} dipisahkan dengan koma (,) contohnya seperti ini:
    #HTML4 .title, #HTML5 .title, #HTML6 .title {display:none}
  4. Simpan/Save Template, selesai dan lihat hasilnya.

Demikianlah tutorial Cara Menyembunyikan Judul Widget di Blogspot, semoga bermanfaat.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Cara Pasang Readmore Otomatis

Fungsi Readmore/baca selengkapnya pada posting adalah untuk menghemat halaman depan website/blog agar tidak terlalu panjang, selain itu juga dapat merangsang pengunjung untuk membaca salah satu posting di halaman depan website/blog tersebut.

Nah jika berkeinginan untuk pasang readmore otomatis pada blogspot Anda, silahkan ikuti langkah-langkahnya sebagai berikut:

Sebelum memulai memasang readmore otomatis pada blogspot/blogger Anda, ada baiknya perhatikan hal-hal sebagai berikut :
  1. Download dan simpan template Anda terlebih dahulu, karena jika pemasangan gagal anda masih bisa mengembalikan blog anda seperti semula;
  2. Jangan lupa untuk memberi tanda centang pada tulisan Expand widget template;
  3. Untuk memudahkan pencarian code, gunakan tombol Find, caranya pada browser Anda klik pada menu Edit lalu pilih Find atau melalui keyboard komputer Anda, tekan Ctrl + F, lalu copy paste code yang mau dicari ke dalam kotak Find lalu Enter/Next;
  4. Ini yang paling penting, apabila sebelumnya Anda sudah menggunakan Readmore versi lama, maka hapus dulu codenya.

Adapun langkah-langkah Cara Pasang Readmore Otomatis adalah sebagai berikut:
  1. Login ke Account Blogger Anda;
  2. Masuk ke halaman Edit HTML, lalu diatas kode </head> letakkan script di bawah ini:
    <script type='text/javascript'>
    var thumbnail_mode = "float" ;
    summary_noimg = 250;
    summary_img = 250;
    img_thumb_height = 120;
    img_thumb_width = 120;

    </script>

    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }

    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = summary_img;
    }

    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>
  3. Cari dan ganti kode <data:post.body/> dengan semua kode dibawah ini:
    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READMORE - <data:post.title/></a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    Keterangan:

    Biasanya kode: <data:post.body/> berada di bawah kode: <div class='post-body'>, maka untuk memudahkan pencarian kode tersebut gunakan tombol Find seperti penjelasan di atas.
  4. Simpan/Save Template, selesai.