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/

    • Beben Koben

      edan mak jang :Q

      • Beben Koben

        pantesan jarang mosting, bikin proyek gede :D

    • 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

      komplit..

    • 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.?

    • dhanyn10

      cara bikin generator seperti iu gimna mas?

    • Panjz mackenzie

      keren om... \o/

    • 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

          sipp.. makasih bang, saya coba dulu :D

        • 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

    • M. Alex Joenaedi

      keren masss,,,,,,,
      terimaksih banyak sudah berbagi

    • Unknown

      Siiiip deh....

    • 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

    • moosatvmp3

      banyak banget :O

    • 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

    • Online

      gimana kalo js untuk style 1 saja? soalnya yang tumbnail ataupun lainnya pasti tidak digunakan

    • 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/..

    Komentar telah ditutup.