Friday, November 27, 2009

Update! Artikel Terkait Versi 2.0

Posted by dav On 11:35 PM
Mungkin diantara pembaca setia Blogger Tune-Up ada yang menggunakan fasilitas Artikel Terkait Versi 2.0? Tertanggal 27 Nopember 2009 pembuat dan pengembangan Blogger Related Posts Service melakukan update fasilitasnya dengan menggunakan kunci, hal ini dengan beberapa alasan sebagai berikut (diambil dan diterjemahkan bebas dari blog resmi BPRS):
  • Saya ingin membuat beberapa orang menyimpan duplikat blog dengan template yang sama.
  • Saya ingin mencegah pra-instal template, tidak semua pemilik blog ingin Related Posts.
  • Saya ingin memastikan bahwa Anda memiliki kesempatan untuk membaca Kebijakan Pemblokiran.
Jika blog anda pada bagian artikel terkait menampilkan pesan dibawah ini:
The key is not supplied. Please go to BRPS to obtain one.
If you are reading this, please relay the message to the owner of this blog.
Berarti blog anda membutuhkan kunci untuk mengaktifkan fasilitas Artikel Terkait.

Aktifkan Fasilitas Artikel Terkait

Langkah 1
Silahkan arahkan browser ke situs BPRS
Langkah 2
Masukan alamat blog anda pada kotak "Your blog address:"
Langkah 3
Klik tombol "Get Key and Installation Steps"
Langkah 4
Perhatikan kunci (key) yang diberikan dan copy
Langkah 5
Login ke Blogger
Langkah 6
Masuk ke "Tata Letak - Edit HTML" dan checklist "Expand Template Widget"
Langkah 7
Cari kode dibawah ini:
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
Langkah 8
Modifikasi kode pada langkah 7 dengan menambahkan kunci (warna merah) yang sudah diperoleh hingga menjadi seperti dibawah ini:
<script src='http://brps.appspot.com/brps.js?key=[kunci]' type='text/javascript'/>
Langkah 9
Simpan template dan preview blog...

Jika fasilitas ini masih juga diblok silahkan gabung di forum BPRS dan minta admin untuk membuka fasilitas ini pada blog anda. Semoga berhasil dan happy blogging... :)

Membuat Widget Artikel Terkait (Versi 4.0)

Posted by dav On 10:40 PM
Blogger Tune-Up pernah membahas "Membuat Artikel Terkait" hingga 4 versi, yaitu Versi Klasik, Versi 1.0, Versi 2.0, dan Versi 3.0. Tetapi semuanya ditempatkan dibagian bawah artikel dan akan muncul sesuai dengan kategori pada artikel yang sedang kita buka. Sedangkan kali ini kita akan membuat artikel terkait yang ditempatkan pada sidebar, dan sidebar artikel terkait ini akan ditampilkan jika pengunjung membaca artikel saja, tidak akan tampil pada halaman utama. Sebenarnya tips trik kali ini adalah pengembangan dari artikel terkait Versi 1.0. Untuk demonya silahkan lihat pada blog Program Gratisan.
Widget Artikel Terkait

Langkah Integrasi Widget/Gadget Artikel Terkait pada Sidebar

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan kode JavaScript dibawah ini diatas kode pada langkah 4:
<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>
Langkah 6
Cari kode dibawah 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:loop>
</b:if>
Langkah 7
Tambahkan kode dibawah ini:
<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>
Sehingga menjadi seperti dibawah 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>
<!-- Tambahan Kode-->
<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>
<!--Tambahan Kode-->
</b:loop>
</b:if>
Langkah 8
Simpan template
Langkah 9
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 10
Klik "Tambah Gadget" pada sidebar dengan tipe "HTML/JavaScript"
Langkah 11
Beri judul gadget baru (misal; Artikel Terkait) tersebut dan masukan kode dibawah ini pada konten:
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Langkah 12
Klik "Simpan" gadget, belum selesai sampai disini...
Langkah 13
Masuk ke "Tata Letak - Edit HTML" dan "Expand Template Widget"
Langkah 14
Cari kode sesuai nama Gadget yang telah kita buat pada langkah 11, sebagai contoh pada langkah 11 adalah "Artikel Terkait", dan tambahkan kode (yang diblok) seperti dibawah ini:
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Langkah 15
Simpan template

Keterangan:
  • Perhatikan Langkah 7 pada kode max-results=10, ubah nilai 10 untuk menentukan jumlah posting yang akan ditampilkan
  • Hati-hati pada langkah 14, salah memasukan kode maka akan ada sidebar yang muncul pada saat artikel dibuka saja, dan tidak akan muncul pada halaman utama
Selamat mencoba, semoga berhasil... Happy blogging...:)

Saturday, November 21, 2009

Tulisan Arab pada Blogger

Posted by dav On 10:06 AM
Artikel ini dikhususkan bagi blogger Islam yang ingin menampilkan ayat-ayat Al-Qur'an, Hadist, atau tulisan arab lainnya didalam artikel blog-nya. Hal tersebut tidaklah sulit karena kita hanya membutuhkan sedikit tambahan kode CSS (cascading style sheet) didalam template blog kita agar tulisan arab tersebut dapat ditampilkan didalam artikel blog. Mau mencoba? Silahkan ikuti langkah dibawah ini.
Tulisan Arab pada Blog

Langkah integrasi kode CSS tulisan arab pada template blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan (copy paste) kode CSS dibawah ini diata kode pada langkah 3:
.arabic {
font-family: Traditional Arabic;
font-size: 24px;
direction:rtl;
line-height: 200% ;
font-weight: bold;
}
Langkah 5
Simpan template

Langkah dan contoh integrasi tulisan arab pada artikel blog
<div class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</div>
Hasilnya:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

<p class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</p>
Hasilnya:

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم


<span class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span>
Hasilnya:
بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Keterangan:

  • Ubahlah font-size dan font-weight untuk mengatur ukuran huruf
  • Gunakan kode <span class="arabic"> بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم</span> untuk mencampurnya didalam artikel
Selamat mencoba semoga berhasil... Tinggalkan jejak pada komentar dan Happy Blogging... ;)

Monday, November 16, 2009

Membuat Widget Daftar Isi

Posted by dav On 4:25 AM
Beberapa hari ini Blogger TuneUp standby tanpa artikel-artikel maupun-maupun trik baru, hal ini dikarenakan kesibukan di darat (dunia nyata). Berbagai upaya dilakukan untuk kembali aktif nge-blog tapi nyatanya tetap saja tidak bisa dilakukan. Dalam waktu yang begitu sempit Blogger TuneUp mencoba menyajikan tips dan trik yang sudah lama dibuat tapi baru kali ini bisa di publish. Mudah-mudahan bukan merupakan tips trik basi atau tertinggal jaman.
Tips trik kali ini akan membahas tentang "Membuat Widget Daftar Isi", sedikit berbeda dengan tips trik membuat daftar isi yang pernah dibuat sebelumnya, seperti membuat tabel daftar isi dan membuat daftar isi pada halaman artikel. Kali ini pemasangan daftar isi sangatlah sederhana, hanya cukup menambahkan kode pada gadget/widget HTML, maka dengan otomatis artikel akan disusun sesuai dengan tanggal pembuatan artikel tanpa perlu memasukan judul artikelnya satu persatu. Lebih sederhana, mudah dan otomatis. Mau mencoba???
Membuat Widget Daftar Isi

Membuat Gadget Daftar Isi

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Elemen Halaman"
Langkah 3
"Tambah Gadget" baru dengan type "HTML/JavaScript"
Langkah 4
Tambahkan kode dibawah ini:
<div style="border: 1px solid #000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://URL/daftar_isi.js"></script>
<script style="text/javascript">
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
Langkah 5
Simpan Gadget

Keterangan:
  • border: 1px solid #000 : Ubahlah border sesuai dengan keinginan anda
  • height: 220px : Ubah nilai 220px untuk mengatur tinggi widget daftar isi
  • Jika ingin menampilkan daftar isi sesuai dengan label/kategori tertentu silahkan tambahkan kode /-/Label sehingga menjadi seperti kode dibawah ini (ganti Label dengan kategori yang ingin ditampilkan):

<script src="/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>

Selamat mencoba semoga berhasil... Tinggalkan jejak anda dan Happy Blogging :)