Mecha versi 2.6.4 sudah dirilis!

Widget Artikel Terkait Blogger · 6 dalam 1

Tabel Konten
  1. Tabel Pengaturan 
  2. Menerapkan Fungsi callBack Widget 
    1. Contoh 1: Membuat Efek Transisi Hover pada Tooltip 
    2. Contoh 2: Membuat Efek Sliding pada Tabir Judul 
    3. Contoh 3: Membuat Efek News Ticker 
Contoh tampilan widget artikel terkait Blogger yang paling populer
Contoh-contoh tampilan widget. Klik untuk memperbesar gambar.

Saat ini terdiri dari 6 jenis tampilan yang bisa Anda sesuaikan sendiri. Widget ini merupakan pengembangan dari konsep random post ringan yang pernah Saya tuliskan di sini. Hanya saja, karena pemanggilan feed posting difilter melalui label posting yang spesifik, maka widget random post ini sekarang bisa dijadikan sebagai widget artikel terkait (random post dengan sortir label otomatis berdasarkan posting).

Widget-widget artikel terkait yang lama kurang bersahabat menurut Saya, sehingga Saya membuatnya lagi secara pribadi. Dan untuk menyingkat jumlah posting, maka model-model widget artikel terkait yang sudah populer kini telah Saya gabungkan menjadi satu kesatuan. Tujuan utamanya tetap. Mencoba untuk menampilkan posting-posting lama dengan jarak waktu penerbitan yang tidak terbatas namun dengan tenaga sesedikit mungkin:

Buka Generator Widget Kode Sumber

Klik tombol Preview & Get Code! Di situ nanti Anda akan mendapatkan kode CSS dan XML template. Masuk ke halaman editor HTML template kemudian letakkan kode CSS yang dihasilkan di atas kode ]]></b:skin>. Kode XML bisa Anda letakkan di mana saja di dalam elemen <b:includable id='post' var='post'/>, tapi Saya sarankan untuk meletakkan kode tersebut di atas kode ini karena posisinya yang mudah ditemukan dan lebih minim resiko:

<div class='post-footer'>

Tabel Pengaturan 

Pengaturannya tidak banyak, dan karena Saya sudah membuat generatornya, jadi Anda sebenarnya tidak perlu lagi menyentuh variabel-variabel di dalam widget ini secara langsung. Tabel ini Saya buat untuk kepentingan dokumentasi saja:

OpsiKeterangan
widgetStyleKode model widget artikel terkait berupa angka. Mengubah nilai variabel ini akan mengubah markup HTML widget, sehingga kode CSS harus disesuaikan ulang. Lebih baik gunakan generator.
homePageDigunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/>
widgetTitleMarkup HTML untuk judul/kepala widget. Bisa digunakan untuk menyisipkan kode HTML lain juga jika mau. Kode tersebut nantinya akan tampil di atas daftar item posting di dalam widget.
numPostsDigunakan untuk menentukan jumlah posting yang ingin ditampilkan.
summaryLengthDigunakan untuk menentukan panjang karakter ringkasan posting.
titleLengthDigunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting.
thumbnailSizeDigunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak.
noImageIsi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar.
containerIdID elemen HTML untuk menampung daftar posting yang berhasil terpanggil.
newTabLinkUbah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik.
moreTextTeks “Baca Selengkapnya”.
callBackFungsi tambahan yang akan bekerja setelah daftar posting termuat ke dalam kontainer widget. Lihat penjelasannya di bawah.

Menerapkan Fungsi callBack Widget 

Opsi ini berfungsi untuk menciptakan perilaku tambahan pada widget. Fungsi ini akan bekerja setelah widget berhasil dimuat. Cocok digunakan untuk menambahkan efek-efek khusus. Dasar penerapannya adalah seperti ini. Kode di bawah ini akan menampilkan pesan peringatan bahwa widget telah berhasil termuat jika widget berhasil termuat:

var relatedPostConfig = {
    callBack: function() {
        alert('Widget successfully loaded.');
    }
};

Contoh 1: Membuat Efek Transisi Hover pada Tooltip 

Set tampilan widget menjadi artikel terkait dengan tooltip, kemudian buat fungsi jQuery seperti ini:

var relatedPostConfig = {
    ...
    widgetStyle: 4,
    containerId: "random-post",
    callBack: function() {
        $('#' + this.containerId + ' li').hover(function() {
            $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
                marginBottom: -5,
                opacity: "show"
            }, 400);
        }, function() {
            $('.related-post-item-tooltip', this).animate({
                marginBottom: 10,
                opacity: "hide"
            }, 200);
        }).find('.related-post-item-tooltip').css('margin-bottom', 10);
    }
};

Hapus efek :focus dan :hover pada CSS:

.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}

Lihat Demo

Contoh 2: Membuat Efek Sliding pada Tabir Judul 

Set tampilan widget menjadi artikel terkait dengan tabir tooltip:

var relatedPostConfig = {
    ...
    widgetStyle: 5,
    titleLength: 50,
    thumbnailSize: 130,
    containerId: "random-post",
    callBack: function() {
        $('#' + this.containerId + ' li').hover(function() {
            $('.related-post-item-tooltip', this).filter(':not(:animated)').animate({
                marginTop: "50%"
            }, 400);
        }, function() {
            $('.related-post-item-tooltip', this).animate({
                marginTop: "100%"
            }, 200);
        }).find('.related-post-item-tooltip').css('margin-top', '100%');
    }
};

Hapus deklarasi display:none pada selektor tooltip widget, hapus juga efek :focus dan :hover pada CSS:

.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;display:none;}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

Lihat Demo

Contoh 3: Membuat Efek News Ticker 

Set tampilan widget menjadi artikel terkait tipe thumbnail dan summary:

var relatedPostConfig = {
    ...
    numPosts: 10,
    widgetStyle: 2,
    containerId: "random-post",
    callBack: function() {
        var $container = $('#' + this.containerId + ' > ul'),
            $list = $container.find('li'),
            innerHeight = $list.first().height(),
            outerHeight = $list.first().outerHeight(true);
        // Container & list height setup
        $container.css({
            "height": outerHeight * $list.length / 2,
            "overflow": "hidden"
        });
        $list.css({
            "height": innerHeight,
            "overflow": "hidden"
        });
        // Animation
        function newsTicker() {
            window.setTimeout(function() {
                $container.find('li:last').stop().animate({
                    opacity: 0
                }, 1000, function() {
                    $(this).hide().prependTo($container).slideDown(1000, function() {
                        $(this).stop().animate({
                            opacity: 1
                        }, 1000, newsTicker);
                    });
                });
            }, 3000);
        } newsTicker();
    }
};

Lihat Demo

Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.

Catatan: Saat menerapkan beberapa fungsi di atas, mungkin templat Anda nanti menjadi tidak bisa disimpan. Cobalah untuk mengelilingi fungsi callBack dengan komentar CDATA seperti ini:

var relatedPostConfig = {
    callBack: function() {
        //<![CDATA[

        Tuliskan fungsi di sini...

        //]]>
    }
};

Atau baca posting ini sebagai referensi tambahan.

123 Komentar

Unknown

ohh ya mas saya udah pasang artikel terkain yang style 6 ko berantakan ya mas gak berurutan sesuai tanggal saya post .. blog saya buat Anime streaming dan download mas.

Jadi related artikel nya harus nya gini mas
episode 1
episode 2
episode 3
episode 4
episode 5
gitu dan seterusnya, :)

hehe maaf mas taufik jadi nambahin kerjaan ke mas.
kalo berkenan kirim ke email saya ya mas bila ada pembaruan versi hehe.

Taufik Nurrohman

Widget ini memang sudah dirancang seperti itu. Untuk menonaktifkan fitur pengacak urutan posting, lihat pada baris 44 di dalam kode sumber. Ganti bagian ini:

entry = shu(json.feed.entry)

dengan ini:

entry = json.feed.entry

Iwan Efendi

Akhirnya berhasil juga saya terapkan di B1. :D

Iwan Efendi

Mas, mau tanya nih. Apa resiko kalau gak mau disahve namun kita close paksa aja halaman yang tidak mau kita save itu. Namun kodenya tetap berfungsi dengan normal mas.

Taufik Nurrohman

Resikonya adalah kamu tidak akan pernah tahu alasan mengapa kodenya tetap berfungsi dengan normal meskipun kita close paksa aja halaman yang tidak mau kita save itu.

Iwan Efendi

Wah, pemikirannya mantap bener mas, oke2. Terima kasih mas.. Masih belajar nih mas.. :)

AndresDM

Thanks oyu brother :) :-bd :-bd :-bd

Greetings from Colombia :)

Unknown

saya sudah coba,tapi kok tidak work ya gan?

hehe

Widget can't load if URL has m=0 / m=1 (mobile)
Already disable mobile but still won't show because blogspot force m=0/m=1 link on smartphone

Taufik Nurrohman

Change this line:

homePage: &quot;<data:blog.homepageUrl/>&quot;,

with this:

homePage: &quot;<data:blog.homepageUrl/>&quot;.replace(/\/?\?m=\d+/, &#39;&#39;),

or just do it manually:

homePage: &quot;http://blog_name.blogspot.com&quot;,

hehe

Thx
Worked like a charm

Trung Tue

Taufik Nurrohman,

- How to Increase thumbnail resolution for this widget?
I used this code: http://paste2.org/_kgk3vZBy

But it does not work.

- How to showing this widget in all posts (Homepage-Label-Archive-Items)?
I tried to remove:
&
But it's only showing in first post (in homepage)!

Demo: http://newagecd.blogspot.com/

How to fix these problems?
Thanks.

Taufik Nurrohman

How to increase thumbnail resolution for this widget?

The widget generator should be able to handle that task for you. Just increase the Thumbnail Size field value.

How to showing this widget in all posts (Homepage-Label-Archive-Item)?
I tried to remove:

But it's only showing in first post (in homepage)!

It should only visible in the post page. If you want it to be visible in any page types, you can remove the conditional tag block. But then you will run into some problems because the container ID are all the same. That’s why the feed data will be injected only to the first container. To overcome this, you can make the container ID becomes unique by utilizing the post ID.

Replace this and this:

<div id='related-post' class='related-post'/>
containerId: &quot;related-post&quot;

with this and this:

<div expr:id='&quot;related-post-&quot; + data:post.id' class='related-post'/>
containerId: &quot;related-post-<data:post.id/>&quot;

Trung Tue

@Taufik Nurrohman:
Thanks for your help!
I replaced but it is not showing!
Test here: http://newagecd.blogspot.com/

Taufik Nurrohman

You still haven’t do anything as I instructed.

Trung Tue

Thanks!
I did as instructed, but it's only showing in first post (in homepage)!
http://i1166.photobucket.com/albums/q605/newagecd/IMusic/ScreenShot00032_zpssgrde5e7.png
Test: http://newagecd.blogspot.com/

Taufik Nurrohman

I mean, this…

Replace this and this:

<div id='related-post' class='related-post'/>
containerId: &quot;related-post&quot;

with this and this:

<div expr:id='&quot;related-post-&quot; + data:post.id' class='related-post'/>
containerId: &quot;related-post-<data:post.id/>&quot;

Trung Tue

Thanks!
I did, but has some post isn't showing this widget!
Test: http://newagecd.blogspot.com/

Invite you to see : Related Post of Linkwithin, it's showing in all page types. Test here: http://vnltue.blogspot.com/

hehe

Uhm , the related post seems dead?
Its not showing anymore

hehe

Sorry ! Fixed.
Had to replace new url code http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js

hehe

Now its broke..

Taufik Nurrohman

How about now? Broken what?

Yo Kaze

Well , sometime related post is showing the post and sometime not. Maybe because the label has 1 post only but I did include a label that were included for all post
Example label: Post1<--(all post included) , Post2 <--(New label which has 1 post)

I assumed it should show related post under Post1 but It is not showing at all.

hehe

I think I found the problem
I don't know which part it is.

I have a label called " Label # " and all the post under Label # is using Japanese post title.
Therefore , I'm not sure if Related post cannot read Label # or the Japanese post title

Unknown

saya mau tanya apakah bisa memunculkan 2 widget artikel dengan Related Post Style yang berbeda di dalam posting??
saya sudah mencoba mencopy "XML & JavaScript" dengan id dan style berbeda namun yang muncul cuman 1 ._.
terima kasih

Admin

tidak bisa, karena jsnya sama, kecuali anda mengubah jsnya atau dengan metode ini.

http://themes.ladiesmail.us/2015/04/26.Konsep-Artikel-Terkait-Dengan-Gambar-Berbeda.html

Unknown

mas saya pake template tapi ane lupa download di mn tapi fitur related posnya make script dari sini, pertanyaan ane gmn ya mas ngubah protokol di related post menjadi https , padahal blog ane udah tak set pake https tapi di related post masih tetep http

Unknown

trima kasih saya awam dalam hal ini, tapi penjelasanya mudah di mengerti. :-bc

Anonymous

itu code generator nya sama link source code 404 not found gan, mohon di perbaiki

OPMLoverz

generator widget sama kode sumber link eror gan :v

Taufik Nurrohman

Lagi susah nyari hostingan gratis (selain DropBox) yang maintainable mas. Yang bisa bikin folder secara terstruktur, bukan cuma asal unggah terus jadi URL. Daftar salinannya sudah ada kok, di DropBox sama GitHub.

User

kok pas saya nyoba nambahin overflow-x:auto nggak bisa? Saya pengen ngebuat nya kayak: https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp

you

Mau tanya mas.. ketika diterapkan di blog saya tidak berfungsi, tetapi ketika tag label ini dihapus <i rel="code"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if></i> script berfungsi.

Taufik Nurrohman

Pernah nulis nama label yang di dalamnya ada tanda petiknya nggak mas?

you

seingat saya ga pernah mas.. soalnya dulu sebelum ganti template script bekerja, tetapi setelah diganti template jadi tidak bekerja.. www.infokmoe.id kalau mas nya mau cek. terima kasih mas

you

Tambahan. Itu pun berfungsi ketika saya merubah sedikit scriptnya var labelArray = [];var relatedPostConfig={homePage: "http://www.infokmoe.id/",widgetTitle:"<span><i class='fa fa-rss' aria-hidden='true'> </i> Lainnya</span>",numPosts: 10,titleLength: "auto",containerId: "related-post",newTabLink:true,widgetStyle:1};
dan var randomRelatedIndex, showRelatedPost;
(function(q, l, p) {
var b = {
widgetTitle: "<h4>Artikel Terkait:</h4>",
homePage: "http://www.infokmoe.id/",
numPosts: 7,
titleLength: "auto",
callBack: function() {}
},
c;
for (c in relatedPostConfig) b[c] = "undefined" == relatedPostConfig[c] ? b[c] : relatedPostConfig[c];
var h = function(a) {
var b = l.createElement("script");
b.type = "text/javascript";
b.src = a;
p.appendChild(b)
},
m = function(a) {
var b = a.length,
d, c;
if (0 === b) return !1;
for (; --b;) d = Math.floor(Math.random() * (b + 1)), c = a[b], a[b] = a[d], a[d] = c;
return a
},
f = "object" == typeof labelArray && 0 < labelArray.length ? "/-/" + m(labelArray)[0] : "";
randomRelatedIndex = function(a) {
a = a.feed.openSearch$totalResults.$t - b.numPosts;
a = 0 < a ? a : 1;
a = Math.floor(Math.random() * (a - 1 + 1)) + 1;
h(b.homePage.replace(/\/$/, "") + "/feeds/posts/summary" + f + "?alt=json-in-script&orderby=updated&start-index=" + a + "&max-results=" + b.numPosts + "&callback=showRelatedPost")
};
showRelatedPost = function(a) {
var c = document.getElementById(b.containerId);
a = m(a.feed.entry);
var d = b.widgetTitle + "<ul>",
h = b.newTabLink ? ' target="_blank"' : "",
f, g, n;
if (c) {
for (var e = 0; e < b.numPosts && e != a.length; e++) {
g = a[e].title.$t;
n = "auto" !== b.titleLength && b.titleLength < g.length ? g.substring(0, b.titleLength) + "&hellip;" : g;
for (var k = 0, l = a[e].link.length; k < l; k++) f = "alternate" == a[e].link[k].rel ? a[e].link[k].href : "#";
d += '<li><a title="' + g + '" href="' + f + '"' + h + ">" + n + "</a></li>"
}
c.innerHTML = d + '</ul><span class="section"></span>';
b.callBack()
}
};
h(b.homePage + "/feeds/posts/summary" + f + "?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")
})(window, document, document.getElementsByTagName("head")[0]);

Unknown

mas mau nanya nih..., untuk memperbaiki kualitas gambar thumbnail di script bawah ini gmn mas, makasih...



<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script>
<script type='text/javascript'>
//<![CDATA[
function rcentbytag(e){document.write('<ul class="recent-by-tag">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.content.$t;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if(a!=-1&&b!=-1&&c!=-1&&d!=""){l=d}else l="//2.bp.blogspot.com/-giova1ZCh-A/Uzq6L8QTJNI/AAAAAAAAAJc/USXictTq_xs/s70-c/KM+Icon.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Januari";y[2]="Februari";y[3]="Maret";y[4]="April";y[5]="Mei";y[6]="Juni";y[7]="Juli";y[8]="Agustus";y[9]="September";y[10]="Oktober";y[11]="November";y[12]="Desember";document.write('<li>');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_blank" title="'+r+'"><img class="rct-thumb" alt="'+r+'" src="'+l+'"/></a>');document.write('<div class="post-item2">');document.write('<h2><a href="'+i+'" title="'+r+'" rel="nofollow">'+r+'</a></h2></div>');document.write('<br>');var x="";var T=0;if(showpostdate==true){x='<span class="showdates">'+x+g+" "+y[parseInt(m,10)]+" "+v+"</span>";T=1}document.write(x);document.write("</li>");if(t!=numposts-1)document.write("")}document.write("</ul>")}
//]]>
</script>

DRCreative

mas kenapa kadang scriptnya ngga berfungsi di beberapa postingan ya ?

Miras Tampan

untuk menentukan vertikal dan horizantalnya bagaimana yah?