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

abang ichal

weits mantap mantap ... emang deh pintar bikin generatornya... 6 in 1 lagi.

Unknown

Generatornya mantep mas.
Hebat-hebat \o/

Unknown

heumm ternyata sibuk bikin ini sampe lama banget updatenya :D

uki

wah wah wah.....
keren bener widgetnya \o/

Unknown

bener proyek gede ini mah....

Unknown

Muantapzzz kang \o/

Unknown

Tapi kalo labelnya lebih dari satu ga bisa ya kang. Padahal udah naksir berat sama style yang ke-6 :d

Taufik Nurrohman

Nama-nama label posting yang aktif akan masuk ke dalam variabel labelArray, tapi akan diambil satu saja secara acak setiap kali kunjungan.

Unknown

Wah... berarti ga bisa dua atau lebih.?

Unknown

Widget Configuratornya Keren salut buat mas Taufik

ansari jelek

makasih bang; tapi bisa tidak yah artikel terkait di sidebar plus thumbnail. :D

Taufik Nurrohman

Coba ini. Fungsi ini akan menyisipkan markup HTML widget artikel terkait ke “bagian dalam + sebelah atas” elemen yang memiliki ID sidebar

<div style='display:none;'>
<div id='related-post' class='related-post'></div>
</div>
<script>
// Fungsi untuk menyisipkan markup HTML widget artikel terkait
// ke sidebar yang memiliki ID `sidebar`
function insertRelatedPostMarkupToSidebar() {
var sidebarArea = document.getElementById('sidebar'),
relatedPost = document.getElementById('related-post');
if (sidebarArea) sidebarArea.insertBefore(relatedPost, sidebarArea.firstChild);
}
</script>
<script>
var labelArray = [
// ...
];
var relatedPostConfig = {
// ...
widgetStyle: 2,
callBack: function() {
if (window.addEventListener) {
window.addEventListener("DOMContentLoaded", insertRelatedPostMarkupToSidebar, false);
window.addEventListener("load", insertRelatedPostMarkupToSidebar, false);
} else {
if (window.attachEvent) {
window.attachEvent("onload", insertRelatedPostMarkupToSidebar);
} else {
window.onload = insertRelatedPostMarkupToSidebar;
}
}
}
};
</script>
<script src=' ... related-post.min.js'></script>

ansari jelek

sukses, akhirnya bisa juga .. makasih mastah :D

dhanyn10

mas taufik, saya minta ijin posting artikel tentang cara membuat widget daftar isi seperti milik mas.
blog saya http://dhanynurdiansyah.blogspot.com
saya juga bantuan tentang setting thumbnailnya, karena widget daftar isi nya masih belum sempurna..

dhanyn10

perbaikan: "saya juga minta bantuan"

Unknown

Memang gila Tutorialnnya :p \o/

kalao untuk related post berdasarkan label bagaimana yah?

thx sebelumnya

Unknown

org korea bilang Deabak!! (keren) \o/

kang olis

makasih mas, saya pake ya makasih

Anonim

Keren-keren widget related posts nya! Ijin comot script nya ya.. :D

Unknown

blognya keren mas.. salam kenal ya

Titan

kalau jumlah artikel terkait yang ingin ditampilkan lebih kecil dari total artikel dari label tersebut kok malah ga muncul satupun ya mas ? contoh kasusnya jumlah seluruh artikel dari label A ada 6 buah di setting widget saya pilih jumlah 8 karena dari label B dan C artikelnya masing2 ada 10, nah pas saya membuka salah satu artikel dengan label A ga satupun artikel terkait yang muncul tapi kalau artikel dengan label B atau C muncul, ini bug atau cuma saya aja ya mas btw thanks .

Taufik Nurrohman

Sudah diperbaiki. Kalau tetap tidak bisa, bersihkan cache lalu muat ulang.

Titan

makasih mas sudah berhasil

Admin

mas taufik, bisakah kita membuat artikel terkait ini muncul disamping, seperti pada portal kompas atau okezone? dalam bentuk hide dan show, terima kasih. :)

Taufik Nurrohman

Sama seperti jawaban dari pertanyaan ansari ganteng, cuma HTML artikel terkait nantinya akan disisipkan ke dalam widget slide panel, kira-kira seperti ini:

// Fungsi untuk menyisipkan markup HTML widget artikel terkait
// ke widget slide panel yang memiliki ID `slide-panel`
function insertRelatedPostMarkupToSlidePanel() {
var slidePanel = document.getElementById('slide-panel'),
relatedPost = document.getElementById('related-post');
if (slidePanel) slidePanel.insertBefore(relatedPost, null);
}

Admin

terima kasih mas, akan dicoba dulu.

Stiker Jalingkut

// Fungsi untuk menyisipkan markup HTML widget artikel terkait
// ke widget slide panel yang memiliki ID `slide-panel`
function insertRelatedPostMarkupToSlidePanel(insertdocument) {
var slidePanel = document.getElementById('slide-panel'),
relatedPost = document.getElementById('related-post');
if (slidePanel) slidePanel.insertdocument(relatedPost, null);
}

kira2 bisa tampil gak ya sob

Ana Sriwahyuni

wah keren mas tapi kenapa mempengaruhi template yang saya buat ya? sebelum dipasang widget ini, loading blog sesuai settingan yang saya buat tapi setelah terpasang loading blog jadi lambat :(

Yandi Mulyadi

Kepengen deh Css sama JS nya Tampilan komentar ini :p

Unknown

tampilannya bisa di bilang seperti thread comment hack Artisteer masbro, Mas taufik pernah bikin artikelnya kok, ngubek2 aja \o/

Andi AF Studio

makin edan aja kang :D

ikhlaskan saja untuk si plagiat kang, gak usah sewot-sewot lagi ya.. :D

hasil istiqomah dari mabok koding akan menjadikan DTE sebagai blogtutor legendaris :-bd

Sopala Multapa

Patut di apresiasi nih karyanya mas taufik
the best mas

Anonim

Akhirnya, jadi juga. terima kasih mas taufik, Kemaren" saya dah pernah buat, tapi kok tiba" tidak work kenapa ya? oh iya, pada related post ini kok masih ada yang dobel gimana biar ngak ada yang duplikat? terimakasih

Salim

Calon developer Google... \o/

Damar Zaky

mas kok related post nya kayak dynamic gitu yah?, kadang ganti ganti post yang ada didalamnya, kadang jumlahnya berapa tapi malah jadi berapa, padahal didalam post yang sama, setiap saya reload pasti ganti isinya dan jumlahnya, kira kira kenapa yah?

Taufik Nurrohman

Konsepnya memang sepeti widget random post:

1. Mengambil satu nama label secara acak,
2. Mengambil indeks pemulai secara acak dan
3. Menyusun posting yang tampil secara acak.

Tujuannya supaya posting terkait yang tampil bisa lebih beragam, jadi pengunjung bisa terpicu untuk membuka posting lebih banyak lagi…

Unknown

RF mengucapkan selamat Idul Fitri *smile

mf klo ada salah2 kata..

“Ƭαqobbαlαllαhu minnαα ωα minkum
(Semogα Alloh menerimα αmαlku dαn αmαl kαliαn).”

Unknown

mas keren banget.. saya senang sekali mengunjungi blog anda :D

Unknown

Akhirnya saya ketemu juga blog ini. Pertanyaan saya bagaimana caranya agar saya bisa seperti Anda? Terima kasih atas artikel ini karena menambah wawasan saya.

Unknown

permisi mas taufik,,,
kok tempat saya gambarnya nggak muncul ya?
padahal di post nya udah ada gambarnya,,
terimakasih banyak

Taufik Nurrohman

Ubah pengaturan feed posting ke mode Penuh. Masalah pasti teratasi. Kecuali kalau gambar yang ada di posting adalah hasil salin-tempel dari blog lain yang bukan blogspot.

Unknown

udah ke mode penuh, kalau di upload kembali lewat post itu masih bisa nggak ya,, sudah saya coba upload ulang tapi hasilnya tetep aja ,,,,

Unknown

17 September 2013

Ayo dipilih-dipilih....
sayang anak... sayaang anak.... \o/

Unknown

mas Taufik Nurrohman, gmn carax klo disisipkan masuk ke area post? sprti inilah.com

Unknown

koq related postsnya semua no image padahal punya gambar

Anonim

langsung coba ah, thanks gan ;)

Anonim

mas kira kira kalo yang news ticker itu gesernya ke samping gimana mas :)

Taufik Nurrohman

Sepertinya memakai carousel, tapi Saya belum berhasil menemukan ide yang paling mudah untuk ini. Belum mantap.

Anonim

oiya mas saya udah coba ditemplate mas yang ini B1:A - Template Blogger Minimalis Responsif kok artikel terkait malah gak muncul ya :p

padahal di template lain lancar lancar aja :p

Iwan Efendi

Sama, saya juga udah coba, kok gak muncul yah...?

Unknown

apakah bisa related postnya
yang muncul hanya kategori yang bersangkutan dengan kategori postingnya?
misalnya posting "Lorem Ipsum Dolor" berlabel "Ipsum" terus related postnya yang muncul hanya kategori "ipsum"

Hendri

hebat banget agan master yang satu ini kebetulan related post di blog http://hedryiks.blogspot.com gak responsif jadi punya rencana baru sekarang

Unknown

BANG / KANG MAKASIH YA . AKU CARI DIMANA² TERNYATA DISINI THUMBNAIL YANG AKU CARI NIH LIAT BLOG ANE KANG UDAH GUE PASANG

http://seven-pictures.blogspot.com

Yoga Ailala

Lengkap banget sob tuk buat artikel terkaitnya, mantaps!

Anonim

Minta izin untuk share ulang postingan ini widget artikel terkait ini mas? tetapi saya sudah edit JS nya hanya untuk artikel terkait judulnya saja... dan saya juga tidak lupa untuk menambahkan creator JS nya ya Mas Taufik sendiri...

Unknown

gimna cara menambahkan tanggal di bawah judul?

fortunanetworks.com

Salam mas Taufik Nurrohman,
Saya mau pakai Widget; Style no;3 Post Thumbnail with Post Title..
semua aturannya seperti yg mas ajarkan saya udah ikut..Tp mas kenapa gak mau muncul diblog saya ini mas...apa masalahnya ..maaf saya lagi newbie

Ini blog saya ;http://fortunamedia.blogspot.com/

Terimakasih atas bantuannya mas..

Taufik Nurrohman

Uncaught SyntaxError: Unexpected token ILLEGAL (index):7
'Attr.nodeValue' is deprecated. Please use 'value' instead. adsbygoogle.js:32
Invalid App Id: Must be a number or numeric string representing the application id. all.js:56
FB.getLoginStatus() called before calling FB.init(). all.js:56
Resource interpreted as Script but transferred with MIME type text/html: "http://s4.histats.com/stats/0.php?2776898&@f16&@g0&@h2&@i1&@j1412895225527&…0&@q0&@r0&@s501&@tid&@u1024&@vhttp%3A%2F%2Ffortunamedia.blogspot.com%2F&@w". js15.js:1
Uncaught SyntaxError: Unexpected token & (index):1266
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null (index):1292
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5)
Resource interpreted as Script but transferred with MIME type text/plain: "http://log.pinterest.com/?guid=_Lf3ohWVVkot&type=pidget&sub=www&button_coun…%2F%2Ffortunamedia.blogspot.com%2F&callback=PIN_1412895235230.f.callback[1]". pinit_main.js:1

Kamu punya banyak error skrip. Biasanya ini suka ngeblok eksekusi-eksekusi skrip yang lain yang diletakkan di bawahnya.

fortunanetworks.com

Terimakasih masTaufik Nurrohman,
Tapi gimana cara mengatasinya.agar bisa widget tsb muncul diblog saya mas..
maaf merepotkan mas aja nihh..

Widget mas ini di rekomendasikan oleh sahabat blogger IAPD namanya +Rina

Taufik Nurrohman

Dicoba belajar dulu memasang widget ini di tema-tema default Blogger, setidaknya sudah pernah merasakan berhasil dulu, baru setelah itu bisa melangkah ke bagian utak-atik kode.

BSoenyi

Alamaakk.. mantap kali atuh kang..:)
ijin coba ya kang..

Unknown

wah saya terimakasih bangat mas admin.. anda luar biasa...
satu lagi mas saya suka style yang no. 6 kalo misalnya ini diterapkan di daftar isi post otomatis di blog... bisa tidak mas? mohon kalau sudah bisa email kesaya ya mass rekomended banget nih buat di tongkrongin. jadi blog saya terlihat lebih elegan dan tampak profesional banget.. dehhh... seneng banget/..