nGe Hank

Tampilkan postingan dengan label artikel. Tampilkan semua postingan

Jumat, 06 Desember 2013

Membuat Widget Artikel Terbaru Dengan Slide di Blog

Bikin Blog Artikel Terbaru memang sudah banyak kita jumpai Tutorialnya di blog lain.

Tapi yang saya akan jelaskan di artikel ini adalah Membuat Artikel Terbaru Dengan Slide seperti pada sidebar saya di sebelah kanan itu.
Terlihat sangat Menarik bukan?

daripada terlalu banyak basa-basi cuma bikin penuh postingan Langsung aja Masuk ke Cara Pemasangannya

Membuat Artikel Terbaru Dengan Slide

1. Pertama Login ke blog
2. Rancangan - Elemen Laman
3. Pilih Tambah Gadget - HTML/JavaScript
4. Lalu Masukan Kode di bawah ini

5. Save

Keterangan:

http://img339.imageshack.us/img339/8822/71411271.jpg Bisa anda ganti dengan alamat gambar anda yang ingin di tampilkan pada Daftar postingan yang tidak memiliki gambar.
http://www.blogger.com/ Ganti dengan Alamat Blog anda

Selamat anda sekarang sudah memiliki Widget Artikel Terbaru Dengan Slide di Blog anda.
Tentunya itu juga akan Membuat Blog anda terlihat semakin menarik.
Anda pun bisa merubah ukuran dan warna agar menyesuaikan pada Template Blog anda dan tenetunya makin mempercantik Tamplian blog anda.

Selengkapnya

Minggu, 03 November 2013

Membuat Related Post atau Artikel Terkait di Sidebar

Untuk membuat artikel terkait atau related posts syarat utamanya adalah postingan Sampeyan harus mempunyai label, karena penampilan otomatis artikel yang berkaitan didasarkan pada label yang sama.

Langkah Cara Membuat Related Post di Sidebar, silahkan ikuti langkah-langkah berikut :

Login ke Blogger.
Pilih Rancangan.
Pilih Edit HTML
Beri tanda centang pada Expand Template Widget.

Letakkan kode berikut diatas </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>

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 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: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>

Simpan template

Keterangan:

Pada yang berwarna biru max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label. Jadi bisa ditampilkan hanya 5, atau bisa juga hingga 15 jika setiap lebel postingan Sampeyan lebih dari 15.

Penempatan Gadget
Sekarang beralihlah ke bagian Rancangan --> Elemen Halaman. Pilih gadget akan ditambahkan. Klik Tambah Gadget. Pilih HTML/JavaScript.

Lalu masukkan kode berikut ini di gadget Sampeyan.

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

Begitulah Tutorial Artikel Terkait atau Related Posts di Sidebar. Ini akan membantu meningkatkan page view blog Sampeyan. Semoga bermanfaat.

Selengkapnya