Friday 16 August 2013

Widget Artikel Terkait Blogger: 6 dalam 1

,
                                       Contoh tampilan widget artikel terkait Blogger yang paling populer



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}

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}

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();
    }
};
Dan seterusnya. Buat efek-efek baru yang lain sesuka hati melalui opsi callBack.
Catatan: Saat menerapkan beberapa fungsi di atas, mungkin template 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...

        //]]>
    }
};
Read more →
 
Web Analytics