gAjax RSS Pausing Scroller (hosted)
http://extensions.joomla.org/extensions/social-web/social-display/rss-readers
http://www.pipercomex.com/2013/03/cara-membuat-widget-recent-post-keren.html
Widget recent post adalah widget yang diperlukan agar pengunjung dapat melihat artikel apa saja yang terbaru atau yang sering dibaca oleh pengunjung lainnya. Widget recent post ini hampir sama dengan widget popular post bawaan blogger. Lalu apa kerennya ?
Seperti kita ketahui bahwa widget popular post bawaan blogger hanya bisa kita rubah untuk ditampilkannya gambar, judul artikel dan summary posting. Untuk merubah besar - kecil nya gambar tidak ada option nya. Begitu juga untuk merubah berapa banyak huruf yang akan ditampilkan pada summary post juga tidak bisa.
Widget recent post yang saya sharing disini dapat mengatasi semua kekurangan tersebut.
Diantaranya:
- Ukuran gambar / avatar bisa kita atur sesuai keinginan
- Jumlah karakter huruf isi artikel bisa kita atur sesuai keinginan
- Jumlah komentar yang masuk bisa kita tampilkan
- Jumlah artikel yang ingin kita tampilkan bisa lebih dari 10 artikel
Untuk merubah yang lainnya, silahkan Anda explore sendiri. Jangan takut rusak.
Bagaimana cara membuat widget recent post keren tersebu, ikuti petunjuknya berikut ini.
1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.
2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript
3. Masukkan semua kode dibawah ini:
4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan.
Anda bisa lihat hasilnya sebentar, apabila masih belum cocok bisa Anda modifikasi lagi sesuai keinginan Anda.
Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.
*********
Cara Membuat Scroll Blog Popular Post
Setelah beberapa kali gagal saat menerapkan tutorial mengenaicara membuat scroll blog popular post dari tutorial rekan rekan blogger, akhirnya saya mendapatkan cara yang cukup praktis dan gampang untuk diterapkan di blog saya dan berhasil saya pasang pada widget popular post, widget recent post maupun widget lainnya di blog saya ini.
Yang baru saya tahu ada dua cara untuk membuat scroll atau menambahkan fungsi scroll pada widget, yang pertama yaitu dengan cara menambahkan kode CSS langsung didalam widget html dan yang kedua dengan cara menambahkan kode CSS pada bagian dalam kode template (edit template).
Cara yang pertama sudah saya coba dan berhasil, tetapi hasilnya saya kurang puas, karena bagian tepi scroll nya tidak pas sejajar dengan batas side bar widget bagian luar (padahal pengaturan "width" nya sudah saya set "auto").
Akhirnya saya pakai cara yang kedua, yaitu dengan edit html dan hasilnya bagian tepi scroll dapat sejajar secara otomatis dengan bagian tepi side bar widget.
Selain itu cara yang kedua ini menurut saya sangat praktis untuk diterapkan didalam blog saya, apabila rekan-rekan mau mencoba silahkan dicoba sendiri dan rasakan sensasinya....
Berikut caranya:
- Login ke blogger dengan akun rekans
- Masuk ke halaman Template
- Klik Edit HTML Lalu Lanjutkan
- Cari kode ]]></b:skin>
(gunakan Ctrl+F) - Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
http://feed.mikle.com/support/auto-scroll-feature-for-your-rss-widget/
Auto Scroll Feature
FeedWind RSS Widget Auto-Scroll Feature
The FeedWind RSS widget has an automatic scrolling feature to make it easier for users to navigate your RSS widget. When the HTML button is "On" and autoscrolling disabled, there is a manual/mouse tracking scrollbar automatically added. If you select Auto Scrolling "On", the article in the widget will automatically scroll down. If the HTML tag is "On" the scrollbar will be removed. The widget will auto-scroll to the end of the current list of itesms and then cycles back to the beginning again in an infinite loop.
Movie Credit Style
Now you can select a "Movie Credit" style of auto scroll and choose one of the 3 scrolling speed options: (Slow-Normal-Fast). This is intended to imitate the type of movement typically seen in movie credits which continuously scrolls from top to bottom.
Normal Auto-Scroll Step Speed
The 'Normal' setting is a stepped scroll whereby each item scrolls quickly and stops for the number of seconds set by the user. The longer the feed article or item, the longer this setting needs to be in order to allow the uiser enough time to read the item.
Tip: If you have already embedded a FeedWind widget on your web page, you can enable the auto-scrolling feature by adding the following tag right above "rssmikle_title" in the code:
autoscroll="on";
Below is an example of of how the widget looks and the code used to create it.
| This is the code used to create the widget shown (right) with auto scrolling enabled. The URL can be changed for any RSS URL you like. Note the new autoscroll entry that can be set to "on" or "off" | |
<!-- start feedwind code -->
<script type="text/javascript"> <!-- rssmikle_url="http://androlicious.com/rss/"; rssmikle_frame_width="300"; rssmikle_frame_height="700"; rssmikle_target="_blank"; rssmikle_font="Arial, Helvetica, sans-serif"; rssmikle_font_size="12"; rssmikle_border="on"; rssmikle_css_url=""; autoscroll="on"; scrollstep="5"; mcspeed="Mid"; sort="Rnd"; rssmikle_title="on"; rssmikle_title_sentence="CNN.com - Top Stories"; rssmikle_title_link="http://edition.cnn.com/index.html?eref=edition"; rssmikle_title_bgcolor="#9ACD32"; rssmikle_title_color="#FFFFFF"; rssmikle_title_bgimage="http://"; rssmikle_item_bgcolor="#FFFFFF"; rssmikle_item_bgimage="http://"; rssmikle_item_title_length="55"; rssmikle_item_title_color="#666666"; rssmikle_item_border_bottom="on"; rssmikle_item_description="on"; rssmikle_item_description_length="150"; rssmikle_item_description_color="#666666"; rssmikle_item_date="gl1"; rssmikle_timezone="no"; rssmikle_item_description_tag="on_flexcroll"; rssmikle_item_podcast="off"; //--> </script> <script type="text/javascript" src="http://widget.feed.mikle.com/js/rssmikle.js"></script> <div style="font-size:10px; text-align:right;"> <a href="/" target="_blank" style="color:#CCCCCC;">RSS widget</a> <!--Please display the above link in your web page according to Terms of Service.--> </div> <!-- end feedwind code --> |
No comments:
Post a Comment