Hasil Cari Google Custom Search di Halaman Baru

Berawal dari pertanyaan salah seorang sahabat blogger 'bagaimana membuat hasil cari di blog ini terbuka di halaman baru?' akhirnya saya terapkan trik ini untuk mempermudah pengunjung dan mungkin Anda juga ingin mencobanya. Pembuatannya sama dengan ketika kita membuat link terbuka di jendela baru (Bagi yang belum membuat Google Custom Search, silahkan baca: Memasang Mesin Pencari ala Google di Blog)

Link Terbuka di Jendela Baru
Ketika Anda ingin membuat link terbuka di Jendela baru, maka Anda harus menambahkan kode di bagian HTML.

Kode link biasa:
<a href="alamattujuan.html">anchor link</a>
Kode Link Terbuka di Jendela Baru:
<a href="alamattujuan.html" target="_blank">anchor link</a>

Yang berwarna merah adalah tambahannya. Ana bisa juga mengganti target="_blank" dengan target="new" namun target="_blank" lebih dianjurkan.

Penerapan Untuk Google Custom Search
Berikut adalah contoh kode widget Google Custom Search (Bagi yang belum membuatnya silahkan Anda buat dengan baca: Memasang Mesin Pencari ala Google di Blog)

Berikut adalah contoh gadget cari Google Custom Search blog ini:
<form id="cse-search-box" action="http://www.masdoyok.co.cc/2008/12/hasil-pencarian-mas-doyok.html" target="_blank">
  <div>
    <input value="007737737555262419625:5hrz_kthoju" name="cx" type="hidden" />
    <input value="FORID:11" name="cof" type="hidden" />
    <input value="UTF-8" name="ie" type="hidden" />
    <input name="q" size="30" type="text" />
    <input value="klik ini atau enter untuk hasil cari" name="sa" type="submit" />
 
</div></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&lang=id" type="text/javascript"></script>

Yang berwarna merah adalah tambahannya. Silahkan tambahkan juga di kode gadget google custom search Anda. Sekarang, coba Anda ketikkan keyword 'followers' di search blog ini, dan otomatis halaman hasil cari tampil di tab baru. Selamat pagi dan semoga bermanfaat....

Read More......

Membuat Related Post / Artikel Terkait di Sidebar

Ini salah satu tutorial paling banyak di request. Bagaimana cara membuat artikel terkait atau related posts di sidebar. Di blog ini, muncul setelah Anda msuk ke salah satu postingan pada gadget berjudul, Silahkan Anda Baca. Nah, tutorial ini berbeda dari cara membuat artikel terkait di bawah postingan (Baca: Membuat Artikel Yang Berkaitan). Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Anda harus mempunyai label (Baca: Pentingnya Label dan Permasalahannya) karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Instalasi Script
1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Template Widget
5. Letakkan kode berwarna biru berikut di atas </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>

6. 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 != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>

Ganti dengan

<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 != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 7, atau bisa juga hingga 15 jika postingan Anda memiliki lebih dari satu label.

7. Simpan Template Anda.

Penempatan Gadget
Sekarang beralihlah ke bagian Tata Letak. Pilih dimana gadget akan ditambahkan. Klik Add Gadget. Pilih HTML/JavaScript.

Lalu masukkan kode berikut ini di gadget Anda.


<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Nah, begitulah rangkaian tutorial menambahkan artikel terkait atau related posts di sidebar Anda. Ini akan membantu meningkatkan page view blog Anda. Semoga bermanfaat. Mengalami kesulitan untuk tutorial lain? Request saja...

Read More......

Ganti Font Blog - Pilih Font Cantik di Google Font Directory

Apa lagi yang baru dari Google? Kini Google menambah beberapa jenis font lagi untuk penggunaan standart yang bisa kita pilih untuk digunakan di blog kita. Jika sebelumnya Anda hanya berkutat dengan Times New Roman, Arial, Courier, Georgia, Helvetica, Trebuchet atau Verdana, kini Anda akan memiliki lebih banyak lagi pilihan. Ada 18 pilihan baru yang akan memuaskan Anda.

Instalasi Font
1. Silahkan pergi ke Google Font Directory
2.Akan ada banyak pilihan font. Silahkan klik jenis Font yang Anda inginkan.

3. Akan muncul contoh penggunaan font berbagai ukuran.

4. Silahkan klik pada tab menu, Get The Code

5. Letakkan kode yang Anda dapatkan di atas </head>
Misal Anda pilih Lobster, Kodenya adalah
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
Lalu simpan template. Jika gagal, silahkan tambahkan slash sebelum penutup (perhatikan yang berwarna merah di bawah ini)

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

6. Simpan Template

Penggunaaan Jenis Font
Sekarang silahkan Anda atur css jenis font pada template Anda. Kode css diawali dengan font-family:
Misal untuk merubah jenis font pada blockquote:
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
}

Perhatikan yang berwarna merah, silahkan ganti dengan font yang Anda inginkan. Misalnya lobster. Sehingga kodenya menjadi:
.post blockquote {
background:#f5f8fa url(http://eosmate.googlepages.com/blockquoteku2.png) no-repeat scroll 0 0;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Lobster;
}

Jika Anda hanya ingin menggunakannya pada bagian postingan Anda dan hanya untuk beberapa karakter saja, silahkan gunakan kode berikut ini. Pilih metode posting Edit HTML bukan Compose.

<span style="font-family: Lobster;  font-size: 20px;">Teks Anda Disini</span>

Contohnya seperti berikut ini:

Mas Doyok Blog Tips

Browser Compatibility
Font ini di standartkan untuk web, jadi tidak tergantung font yang terinstall di komputer Anda. Namun Font ini hanya compatble di:
- Google Chrome: version 4.249.4+
- Mozilla Firefox: version: 3.5+
- Apple Safari: version 3.1+
- Internet Explorer: version 6+

Semoga info ini berguna dan semoga Anda bisa mempercantik blog Anda.

Read More......

Membuat Semua Postingan Otomatis Bergaya Kolom dengan CSS

Setelah posting sebelumnya mengenai membuat postingan bergaya kolom (Baca: Cara Membuat Postingan Dua Kolom di Blogger/Blogspot) dilanjutkan dengan trik memanfaatkan microsoft word (Baca: Membuat Postingan Berkolom atau Tabel Mudah Dengan Bantuan Ms Word), sekarang saya kembali menanggapi berbagai pertanyaan dari sahabat blogger seperti, "Bagaimana cara membuatnya otomatis untuk semua postingan kita?". Kali ini akan saya jawab tuntas, dan seperti saya perkirakan akan ada yang menyenggol lewat komentar ada cara mudah membuat postingan berkolom menggunakan css3. Nah, mungkin banyak yang bertanya, untuk apa saya posting ke tiga cara tersebut? jawabannya adalah karena ada plus minusnya masing-masing. Mari kita bahas lebih jauh.

Cara Manual... dan Memanfaatkan Ms. Word...
Pengisian kode akan menyusahkan beberapa orang yang malas berkode ria. Namun, sebaliknya ini akan memudahkan dalam penyesuaian dengan template bagi orang yang suka coding, seperti atur ukuran lebar per kolom dan jaraknya. Sama halnya dengan memanfaatklan microsoft word. Kode yang dihasilkan akan sama dengan pembuatan tabel manual. Banyak juga yang beralasan tidak ingin menyibukkan memasukkan code setiap mereka posting. Tapi satu lagi kelebihan yakni model kolom ini tidak bermasalah di semua browser termasuk IE.

Dengan CSS 3
Dengan trik menambahkan kode css 3 jauh lebih prosedural dan lebih mudah. Ini jgua bisa diterapkan otomatis untuk semua postingan. Hanya saja seperti mode rounded, efek ini belum diterima Internet Explorer.

Lepas dari semua itu, untuk memnuhi juga banyaknya email masuk mengenai permintaan membahas CSS 3, saya akan memulainya dengan postingan berkolom. Kode yang digunakan adalah...

-moz-column-count: 3;

-moz-column-gap: 1em;

-moz-column-rule: 1px solid black;

(untuk firefox dan universal)

-webkit-column-count: 3;

-webkit-column-gap: 1em;

-webkit-column-rule: 1px solid black;

(untuk safari)

Semua Postingan...
Mari kita terapkan kode diatas. Jika Anda ingin menerapkannya di semua postingan maka Anda harus perhatikan soal gambar. Ukuran gambar tidak boleh lebih lebar dari lebar per kolom karena jika lebih lebar maka akan bertumpuk dengan kolom. Untuk membuatnya otomatis di tiap postingan Anda

1. Login blogger
2. Tata Letak
3. Edit HTML
4. Cari kode

.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;

.................

............................
  }

5. Tambahkan kode css multi column tadi ke bagian itu sehingga menjadi seperti ini
.post {
  margin:.5em 0 1.5em;
  border-bottom:1px dotted $bordercolor;
  padding-bottom:1.5em;

-moz-column-count: 3;

-moz-column-gap: 1em;

-moz-column-rule: 1px solid black;

-webkit-column-count: 3;

-webkit-column-gap: 1em;

-webkit-column-rule: 1px solid black;

  }

6. Simpan template Anda

Ingin hanya pada bagian tertentu...
JikaAnda ingin hanya pada bagian tertentu, silahkan Anda tambahkan kode berikut ini di atas ]]></b:skin>

#postingankolom {
-moz-column-count: 2;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
}

Pada column-count ganti dengan jumlah kolom yang diinginkan. Lebar area postingan otomatis akan dibagi berdasarkan angka tersebut. Column-gap untuk jarak dan column-rule untuk pengaturan garis tengah. Jika sudah silahkan simpan template Anda. Lalu untuk aplikasikan effectnya silahkan gunakan kode HTML berikut. Gunakan mode pengeposan edit HTML.

<div id="postingankolom">
letakkan tulisan Anda disini
</div>

Contohnya Adalah Sebagai Berikut

Karena sebuah hajat aku bersama 5 orang kerabatku pergi bersama. Dengan 3 buah sepeda motor kami memulai perjalan kami. Aku berada paling belakang karena aku paling muda. Perjalanan ini semula tampak biasa saja karena aku telah hafal jalan-jalan ini, jalan beraspal yang sedari dulu sering aku lewati. Rasanya aku bahkan dapat membayangkannya walau harus memejamkan mata. Namun ternyata tujuan kami lebih dari perkiraanku. Melewati jalan yang sama sekali belum pernah aku lihat. Semakin sepi dan semakin sepi. Pemandangan semakin alami dengan pegununggan indah di kiri dan sungai kecil yang mengalir biasa di kanan. Aku harus membagi benar konsentrasi mengendarai sepeda motor di jalan yang berkelok dan menikmati keindahan tersebut.

Silahkan mencoba trik ini dan semoga mas doyok memberikan sesuatu yang bermanfaat setiap harinya....

Read More......