Sebelum ini Saya telah membuat widget Galleria versi pertama, kali ini Saya membuat versi yang ke dua dengan dua macam pilihan layout dan konfigurasi yang lebih lengkap.
Masalah besar yang terjadi pada versi pertama adalah dia menampilkan semua feed begitu saja sehingga proses muat widget menjadi begitu lama. Kita tidak memiliki kemampuan untuk memotong proses pemuatan feed kecuali dengan cara menambahkan fitur navigasi. Inilah kabar baiknya:
Integrasi Widget ke Blogger
Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:
Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:
Salin kode di bawah ini kemudian letakkan di dalam formulirnya:
<link rel="stylesheet" type="text/css" href="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/theme/light.min.css"/> <div id="dte-masonry-container"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/jquery.masonry.min.js" type="text/javascript"></script> <script src="http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/js/post.brick.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $('#dte-masonry-container').bloggerMasonry({ // JSON Configuration viewMode: "summary", // Widget mode? "summary" || "thumbnail" homePage: "http://nama_blog.blogspot.com", // Your blog homepage numPosts: 10, // Number of posts to display per request numChars: 270, // Length of summary post squareImage: false, // Set thumbnail mode to square newTabLink: false, // Auto open links in new window/tab? columnWidth: 200, // Width of the image (also will resize the brick item width) subHeaderText: ["Diposting oleh ", "<br>pada "], // `Diposkan oleh FOO pada BAR` monthNames: [ // Month array "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember" ], commentLabel: " ", // Label text after total comments navText: { prev: "Sebelumnya", // Previous navigation label next: "Berikutnya", // Next navigation label disabled: "×", // Disabled navigation label data: ["Halaman ", " dari "] // `Halaman # dari #` }, postCategory: null, // Change to a label name to sort posts by specific label fallbackThumb: "http://hompimpa.googlecode.com/svn/trunk/Blogger-Masonry-Widget/img/meee.png", // Fallback thumbnail for posts without images loadingText: "Loading...", // `Loading...` text for loading indicator loadedText: "Loaded.", // `Loaded.` text for loading indicator infiniteScroll: false, // Enable infinite scroll? bottomTolerance: 30, // Bottom tolerance for the end of page indicator in infinite scroll // Shortcuts for Masonry Plugin Configuration (And Some Local Configuration) masonryConfig: { itemSelector: '.json_post', fadeSpeed: 400, // Speed of thumbnail fading effect resizeSpeed: 1000, // Speed of thumbnail resizing effect isAnimated: false, animateWithTransition: true, // Animate each brick with CSS transition instead of JQuery `.animate()`? animationOptions: { queue: false, duration: 1000, easing: null }, isFitWidth: true, gutterWidth: 0, isRTL: false } }); //]]> </script>
anti kode yang Saya beri tanda dengan URL blog Anda. Klik Simpan dan Terbitkan.
Perigatan : Kode yang Saya garis bawahi adalah JQuery. Jika template Anda sudah dilengkapi dengan JQuery, singkirkan kode tersebut!
Sumber : Dte
By : Me Galaxy
Tidak ada komentar:
Posting Komentar