Widget Artikel Terkait Blogger · 6 dalam 1
Tabel Konten
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:
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:
Opsi | Keterangan |
---|---|
widgetStyle | Kode 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. |
homePage | Digunakan untuk menentukan URL blog Anda. Nilai sudah diotomatisasikan melalui elemen <data:blog.homepageUrl/> |
widgetTitle | Markup 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. |
numPosts | Digunakan untuk menentukan jumlah posting yang ingin ditampilkan. |
summaryLength | Digunakan untuk menentukan panjang karakter ringkasan posting. |
titleLength | Digunakan untuk memotong jumlah karakter judul posting sesuai dengan besar angka yang dituliskan. Ubah menjadi "auto" untuk menonaktifkan pemotongan karakter pada judul posting. |
thumbnailSize | Digunakan untuk menentukan lebar/tinggi thumbnail posting yang berbentuk kotak. |
noImage | Isi dengan URL gambar cadangan untuk posting yang tidak memiliki gambar. |
containerId | ID elemen HTML untuk menampung daftar posting yang berhasil terpanggil. |
newTabLink | Ubah nilainya menjadi true untuk membuat tautan-tautan di dalam widget ini membuka di tab/jendela baru secara otomatis ketika diklik. |
moreText | Teks “Baca Selengkapnya”. |
callBack | Fungsi 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 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
Beben Koben
sok tauk ah :P
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?
Beben Koben
banyak² makan tempe ama tahu :D
Sopala Multapa
kacangan dong hehe
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
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:
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).”
Taufik Nurrohman
\m/ \m/ \m/
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
Taufik Nurrohman
⇒ /2011/07/artikel-terkait-dengan-scroll-bar.html
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?
Taufik Nurrohman
Harus ngerombak sendiri mas/mbak.
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
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/..
Taufik Nurrohman
Untuk membuat efek tooltip sebenarnya bisa memanfaatkan widget daftar isi yang ini, tapi harus paham CSS dulu.