Widget Posting Terbaru/Recent Post dengan Gambar Thumbnail dan Tooltip
Widget recent post dengan gambar mini mungkin sudah biasa Anda temukan. Tapi mungkin Anda mau mencoba yang satu ini. Widget recent post dengan thumbnail dan tooltip:
Untuk membuatnya, pertama-tama masuk ke halaman tata letak dengan mengeklik menu Tata Letak:
Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><style scoped="scoped">
#mini-gallery {
width:380px; /* Tentukan lebar yang tepat sesuka hati atau buang saja deklarasi ini */
margin:0 auto;
font:normal normal 11px/normal Verdana,Arial,Sans-Serif;
color:#666;
padding:8px;
background-color:#222;
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
box-shadow:0 1px 3px rgba(0,0,0,.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#mini-gallery h2 {
font:normal normal 14px/normal Impact,"Arial Narrow",Arial,Sans-Serif;
color:#999;
text-shadow:0 1px 0 black;
text-transform:uppercase;
margin:2px;
padding:7px 14px;
background-color:#3c3c3c;
}
#mini-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0;
background:white url('data:image/gif;base64,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') no-repeat 50% 50%;
width:72px;
height:72px;
}
#mini-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0 !important;
padding:0 !important;
background:none !important;
display:none;
}
#mini-gallery .rp-item .rp-child {
position:absolute;
top:95%;
left:95%;
z-index:1000;
width:200px;
background-color:white;
border-top:4px solid #3399ff;
-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);
-moz-box-shadow:0 0 3px rgba(0,0,0,.7);
box-shadow:0 0 3px rgba(0,0,0,.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
}
#mini-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0 0 5px;
color:#2473A8;
}
#mini-gallery .rp-item:hover .hidden {display:block}
</style>
<script>
var widgetTitle = "Artikel Terbaru", // Tentukan judul widget
numPosts = 20, // Tentukan jumlah thumbnail/posting
numChars = 300, // Tentukan jumlah karakter pada deskripsi tooltip
tooltipFadeSpeed = 200, // Tentukan kecepatan efek .fadeIn() saat tooltip tampil
pictureBlank = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // Thumbnail cadangan jika posting yang tampil tidak memiliki gambar
blogUrl = "http://nama_blog.blogspot.com"; // Alamat blogmu
</script>
<script src="//cdn.rawgit.com/tovic/dte-project/123eba4c603413fa3e6a8446da21fcc545df0ee0/rp-mini-gallery.js"></script>
Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda. Tentukan judul widget pada variabel widgetTitle
, tentukan jumlah posting yang ditampilkan (gambar mini) pada variabel numPosts
, tentukan juga jumlah karakter/ringkasan artikel yang akan muncul pada variabel numChars
.
Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, buang kode itu dari widget.
Klik Simpan dan lihat hasilnya.
Labels: Blogger, JavaScript, jQuery, Widget
55 Comments:
Amazing Banget nih, wah kapan2 aku coba nih
makasih mas taufik,
akhirnya di share juga :)
mantap kang.., kapan aq promosiin ke blog aq yaa.., :)
di blog saya ga bisa ...
Makasih sharenya mas. diblog saya nggk bisa kenapa ya mas?
Mantep mas, saya modif-modif dikit :-bd
Di tempatku loading gambarnya gak mau berhenti. Kenapa ya?
@Mivt elRahman Loading gambar hanya akan berhenti setelah seluruh halaman telah selesai termuat. Kemungkinan loading tidak berhenti karena blog Anda terlalu berat dan lama untuk selesai termuat. Lebih baik buat blog dengan kecepatan yang cukup agar widget ini bisa berjalan dengan lancar.
@Angga Bayu Prasetya Kemungkinannya ada dua:
Tooltip Tidak Terlihat/Efeknya Tampak Berantakan
Mungkin itu karena JQuery yang dobel. Coba lepas kode yang Saya beri garis bawah lalu simpan lagi.
Judul Widget Terlihat tapi Thumbnail Tidak Terlihat
Mungkin ada di pengaturan feed: Coba masuk ke menu Setelan ⇒ Lainnya ⇒ Umpan Situs
Pada pilihan Boleh umpan blog? jangan sampai mengambil pilihan Tak satupun. Seminimal-minimalnya "Singkat" atau "Sampai lompat baris".
@Taufik NurrohmanMas Taufik, rahasianya apa sih. Di sini jquery melul isinya tapi loadingnya enteng enteng aja, sedang di tempatku, pasang jquery tiga tempat aja udah lelet.
Trima kasih
@Mivt elRahman Pertanyaan bagus :-bd Mungkin Saya akan membahas ini suatu saat nanti.
Pertama-tama, pastikan bahwa blog Anda tidak terlalu banyak menampilkan posting. Unggah semua gambar pada direktori lokal. Misalnya, jangan mengunggah gambar pada situs Photobucket kemudian mempostingnya pada situs blogspot.
Ke dua, pastikan semua kode pada template Anda bisa mudah dibaca oleh peramban (valid). Pastikan semuanya ditulis dengan benar, dan buatlah nilai error sekecil mungkin. Kompresi CSS, HTML dan JavaScript sebenarnya sama sekali tidak mempengaruhi kecepatan situs, karena peramban bukan hanya "mengunduh data", tapi juga "membaca".
Ke tiga, jangan terlalu banyak menggunakan widget-widget pihak ke tiga. Maksudnya adalah widget yang berasal dari situs lain selain Blogger. Katakanlah widget chatting. Beberapa orang lebih mempertimbangkan ukuran script sebagai penentu kecepatan, tapi sebenarnya bukan itu penentu utama kecepatannya. Transfer data, tentang seberapa lama peramban memanggil data dari situs penyedia aplikasi tersebut juga menentukan. Kesimpulannya adalah, semakin banyak widget pihak ke tiga yang kita tampilkan pada sebuah blog, maka itu akan semakin memperlambat proses muat halaman blog kita. Gambaran mudahnya, jika kita menampilkan widget yang berasal dari sepuluh situs penyedia widget/aplikasi yang berbeda, maka secara tidak langsung, saat kita sedang membuka halaman blog kita, kita sama saja sedang membuka 10 situs sekaligus! :)
@Taufik NurrohmanMakasih banyak Mas udah mau jelasin panjang lebar. Satu lagi nih :) . Widget ini gak jalan di browser opera ya, atau emang di tempatku aja yang ada konflik :)? trims
@Mivt elRahman Alhamdulillah... jalan. Saya memang tidak pernah mengetes widget-widget ini terlalu jauh. Setidaknya kalau widget ini bisa jalan di Internet Explorer, berarti peramban yang lain juga kemungkinan besar bisa haha :D Saya tidak begitu paham. Mungkin karena ini, proses pemuatan di Opera sedikit unik, yaitu justru terjadi setelah "ular-ularannya" berhenti:
http://3.bp.blogspot.com/-X9I31julLeU/T32dD6Qq9DI/AAAAAAAACcI/a8i-F1Fbykk/s1600/opera-test.png
Atau karena konflik JQuery juga bisa. Saya baru mengetes dengan halaman demo Saya :p
gan, di blog sy kok konflik ya jquerynya. kalo pasang widget ini, jquery template sy jadi ga jalan, kalo jquery di widget ini dihapus malah ga tampil. bukubukugratis dot com
@Taopik Kurrohman JQuery-nya masuk tag kondisional ya?
Kalau begitu coba cari tag kondisional yang mengelilingi script ini:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
Lepas tag kondisional tersebut lalu simpan lagi. Dan saat memasang widget ini, kode yang Saya beri garis bawah tidak perlu diikutkan.
Tag kondisional di blogmu seharusnya bentuknya seperti ini:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
...
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js' type='text/javascript'></script>
...
</b:if>
mas cara buat recent post berjalan.
kayak di home blog ini gimna??
@imams061111 Cek posting ini http://www.abu-farhan.com/2009/07/recent-posts-for-blogger-with-thumbnail-and-simple-spy/
Atau mungkin mas mau menggunakan versi Saya di sini: Widget Recent Post dengan Lebih Banyak Pilihan
mas apa widget ini bisa untuk nampilkan posting label terbaru??
terima kasih.
Kalau widget yang ini tidak bisa :'(
yang bisa yang mana ya mas??
Yang ini bisa: Widget Recent Post dengan Preloader
caranya gmn mas??
mas saya mau bertanya , apakah terlalu byk jquery bisa mempengaruhi seo ?
Mas kalau mau nampilin gambar Thumbnail pada artikel yang tidak ada gambar gimana ya? saya udah cari" di browsing ga ketemu.
Contoh:
http://3.bp.blogspot.com/-BjKcbX3bZDA/URLSBLxBVHI/AAAAAAAAAEA/-S1KPmlgumY/s400/zewDsignet+1.jpg
jdi intinya di dlm postingan walapun tdak di menampilkan gambar tetap ada gambar mewakili..!! sperti tutorial di atas jika isinya pos ya cuman text maka ada gambar perwakilan seperti gambar pelangi ..!!
Tergantung jenis snippet postingnya.
cara membedakanya gmna mas?
haha, keren banget ini. Boleh deh dicoba :D
keren n unik nich tampilannya... :-bd
cuma kok ada bbrp yg gak muncul gambarnya ya, padahal di postingan ada tp cm muncul pelangi aja...mungkin bisa bantu, maturnuwun
Waduh keren banget nih, modern banget \o/
sangat membantu, komentar2nya...
terimakasih.
kebetulan saya berada di postingan ini, modem juga lagi lambat..tanya mas gimana caranya membuat halaman beranda/homepage seperti website ini?
⇒ /2012/03/tip-membuat-halaman-muka-blog.html
Terima kasih mas, inii berhasil di blog saya. salam kenal...
makasih berat untuk infonya ...
selaamat sore mas taufik ^_^ Saya mau nanya mengenai widget tooltip ini, bisa nggak tooltip seperti di widget ini di terapkan pada halaman utama blog, tolong di balas ea mas ^_^ ,
Pakai yang ini saja ⇒ /2012/01/update-jquery-toolpik-revision-1.html
selamun aleykum Bro & Sis. thanks for your effort.. I'm a webmaster from Turkey. I tried a template for Blogger at http://proweblabs-ajans.blogspot.com. Also upload js : https://proweblabs-ajans-script1.googlecode.com/svn/trunk/rp-mini-gallery.js. And than opened a module at "Tata Letak" as "GALERI 1" . Insert your codes above, unfortunatelly do not work for me. Must must I do? How can I fix it? Thanks a lot...
Waalaikumsalam. There is no script named rp-mini-gallery.js installed in your template source.
mas kalau dibuat random / acak gitu bisa enggak? :D
⇒ /2013/03/blogger-feed-rotator-plugin.html?showComment=1386639033284#c2238267390577693462
Mas, boleh request tutorial "Cara membuat widget artikel terbaru dengan title tag", tapi tanpa image jadi hanya link + title tag pada link tersebut
Terima kasih sebelumnya
⇒ /2011/07/artikel-terkait-dengan-scroll-bar.html
Bukan artikel terkait mas, tapi artikel terbaru menggunakan title tag pada link nya
Terima kasih sebelum nya
Mungkin ini bisa membantu [url=http://jsfiddle.net/w4hyou/JJBZv/4/]Coba Tautan Ini[/url]
Terima kasih, sangat membantu :)
MiMIN Kalo tooll tip pindah kekiri apa yang mesti di edit cos widget aku adanya di kanan jadi tool tip gak nampak
MiMIN Kalo tooll tip pindah ke KIRI apa yang mesti di edit cos widget aku adanya di KANAN jadi tool tip gak nampak
Tidak tampak? Bukannya malah jadi tampak ya, kalau keadaannya begitu? -_-
Kalau tooltip pindah ke KANAN, apalagi efek fade-in dan fade-out juga tidak tampil, itu artinya ada masalah di luar dari widget ini yang kemudian mempengaruhi widget ini min.
oalah jadi gak bisa nih tool tip di atur suka2 ?
oklah kalo begitu
Ane mau coba dulu....terimaksih mas...
Judul Widget Terlihat tapi Thumbnail Tidak Terlihat, padahal umpan situsnya dah di ubah gimana tuh ?
bro knapa punya gue penjelasannya ditengah, jadi pas disorot sama mouse tuh ga kaya yang di contoh,penjelasanya munculnya ditengah ?
Kalau tooltip tidak mau ikut bergerak dan cuma muncul saja secara kaku berarti itu ada masalah di JQuery. Mungkin konflik, atau karena beda versi, atau karena widget ini sudah tidak mendukung lagi untuk versi JQuery yang sedang kamu pakai.
Thumbnail eksternal, atau karena plugin lazyloader?
ada versi javascript murni?
Untuk widget tidak ada, tapi kalau untuk tooltip-nya saja ada di sini.
Post a Comment
<< Home