Mecha versi 2.6.3 sudah dirilis!

Widget Artikel Terkait Blogger · 6 dalam 1

Tabel Konten
  1. Tabel Pengaturan 
  • 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/..