Hello Sobat, selamat datang di Tugasku4u.com, dipostingan Kali ini saya tidak akan memposting tugas-tugas saya melainkan membagikan Tutorial Blogger. Disini Saya akan memposting Bagaimana cara memasang slideshow postingan di sidebar atau lebih tepatnya cara memasang slideshow artikel terbaru di blog. Slideshow ini berguna untuk menarik minat pengunjung untuk mengklik postingan kita juga sekaligus mempercantik Blog kita. Untuk yang sudah tidak sabar ingin mencobanya silahkan lakukan langkah-langkah berikut ini!
Cara Memasang Slideshow Artikel Terbaru Di Blog :
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi.
1. Login ke akun blog Anda
2. Pilih Tata Letak
3. Kemudian Klik Tambahkan Gadget
4. Pilih HTML/javascript
5. Copy Kode di bawah ini dan pastekan di HTML/javascript tadi.
<style type="text/css">
#rp_plus_img{height:385px;overflow:hidden;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;border-radius: 10px;background:#ffffff}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;border-radius: 10px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
#rp_plus_img{height:385px;overflow:hidden;padding:2px 3px 3px 2px;background:transparant}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:solid 1px #ccc; margin:0;height:82px;padding:5px; list-style:none;border-radius: 10px;background:#ffffff}
#rp_plus_img li:hover{background-color: #EFFBEF;}
#rp_plus_img a{color:#d90000;font-weight:bold}
#rp_plus_img .news-title{display:block;font-weight:400 !important;margin-bottom:3px;font-size:11px;}
#rp_plus_img img{float:left;margin-right:10px;padding:4px;border:solid 1px #ccc;width:65px; height:65px;border-radius: 10px}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tugasku4u.googlecode.com/files/Slideshow-artikel-terbaru-New-2013.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 40;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
#ffffff; Warna background
#EFFBEF; Warna background saat disorot kursor
#d90000; Warna Judul Postingan
Untuk memilih warna lain, silahkan lihat disini : Daftar kode warna HTML
var numposts = 20; Jumlah postingan yang akan di tampilkan
var numchars = 40; Jumlah character/huruf yang akan di tampilkan
6. Simpan/save !!! Selesai... Untuk yang belum terlalu mengerti atau ada yang ingin ditanyakan silahkan komentar saja diblog ini.
Semoga postingan Tutorial ini bisa bermanfaat bagi teman-teman blogger semua...
Baca juga Cara alami menurunkan alexa rank dengan cepat. Cara ini bisa dibilang sangat sederhana tapi sangat ampuh untuk menurunkan alexa rank dengan cepat.
Tolong bantu saya klik Tombol Vote ini...
8:44 AM |
61
komentar
|
61 komentar
siip lah, mantap boss, terima kasih sudah berbagi. Salam Nusantara.
Balasterima kasih bung! bagus sekalski!
Balaswah.. boleh ni di coba...!! thx infonya..
BalasN template blognya bagus.. ajarkan cara bikinnya dong..
Ini cuman template downloadtan gan...
Balasmakasih bos ijin copas;
Balastapi gimana bos biar semua postingan ikut masuk,,,yang saya punya cuma beberapa postingan aja?
sebelumnya makasih
Lihat keterangannya di atas gan, disitu ada Var Numposts = 20.
BalasAnda boleh menggantinya sesuka Anda seberapa banyak postingan yang ingin dimasukkan.
makasih bos udah bisa,,ajari cara bikinya dong,,,hehe makasih
Balasudah saya coba mas, tapi waktu saya klik gambar slide shownya ke luar ke blog ini: Situs nuweblog-gif.1p.com yang Anda kunjungi saat ini tidak aktif atau terjadi kesalahan ketik
Balasmantap gan info nya
Balasbtw saya mau follow blog nya, kasih menu add friend nya dong gan biar kita bisa berteman dan sharing :D
btw udah saya bantu ya gan info di menu footer nya :P, mari kita saling bantu hehe..
Hehehee... terima kasih gan sdh mau kunjungan balik.
Balaskalau untuk berteman dan sharing, di Google+ ajha gan biar mudah....
ijin copas bang tq atas artikelnya
BalasTerimakasih info tutorialnya, berguna untuk blog organisasi yang saya buat, semoga jadi amal jariyah..aminnnn
BalasSilahkan gan...
BalasAmiiinnn....
BalasTerima kasih bro atas tutorial atau artikelnya , sangat bermanfaat sekali.
BalasThx gan .. atas info nya (y)
BalasThank infony gan,,,,,salam kenal
BalasMohon maaf gan, ada kesalahan teknis sedikit.
Balassaya udah betulin... Silahkan di coba ulang.... ^_^
tata letak x dmna hehehh
BalasWaduhh... kok gak tau sih, pasti kalau para blogger tau....
BalasSelamat mencoba.... ^_^
gan, kalo postingan yang ga ada gambarnya kan di slideshow ada gambar 'X' , bisa diganti ga?
BalasTidak bisa gan... itu sudah bawaan dari scriptnya.
Balasokk,.. i like it gunn., :)
Balasgan ini punya saya udh si coba cuman artikenlnya ada di laman 1 doang kalo mau munculin artikel lewat laman yg udh ada gmna yaa gann thanks
BalasMaksudnya gan ??? ane bingung...
Balasgini lohh gan artikelnya saya ada di halaman 1 saja saya mau munculun artikelnya yg ada di halaman yg lain trs ngasih judul slideshownya gmn ??? yaa makasih
BalasUntuk menampilkan slideshow berbeda tiap halaman bisa gan, tapi rumit kalau di jelasin disini....
BalasTerus untuk ngasih judul pada slideshownya itu tidak ada caranya, karena saya liat pada saat penulisan, Agan tidak memberikan judul pada artikel agan... jadi kedepannya pada saat menulis artikel di isi juga kolom judul artikelnya...
Terimakasih, sudah berhasil dipasang di blog kami, langsung bisa!! Good job!! semoga berkah ya..
BalasGan kalo ngebuat widget slide show gambar dengan tombol navigasi gmn?
BalasKurang tahu juga gan kalau yang seperti itu... :)
BalasJangan lupa kunjungi blog saya gan
Balas:D
makasih mas tutorialnya, sudah saya terapkan di blog saya dan berhasil
Balaskalo misalnya dari template itu sendiri sudah tersedia slideshow postingannya....nah cara agar postingan pada blog itu bisa tampil di slide show template gimana ya gan???
BalasKurang tahu juga gan... mending pake yang diatas ajha... lebih simpel.
Balassetelah aku coba sih oke gan, ship. tp ko slideshow untuk foto yg sudah ada sebelumnya malah jadi ga bisa ke buka ya. kira2 pengaruh di mana ya?
Balasterimakasih.
Itu karena pada postingan tersebut tidak ada fotonya gan...
Balasajib mas artikelnya
Balasmakasih gan.. mantap ilmux.. blog saya makin ciamik jdx :D (y)
Balasgan nanya,.. biar ketika link nya di klik terus masuk ke tab baru gmn yak?
Balasada code yg perlu ditambahankan kah?
Ada gan, hubungi saja saya lewat email ini tugasku4u@gmail.com atau masuk di menu contact di atas..!!!
Balasmenggunakan desain widget ini untuk widget yang lain caranya gimana?
BalasMaaf gan, saya bingung dengan pertanyaan agan...
Balasterimakasih slide nya soib, semoga bermanfaat yang ngasih ilmu semoga di tambah lagi ilmunya
Balasterima kasih tutorialnya... :-)
BalasAku masih bingun,itu copynya di konten kan? mohon dibantu.. makasih~
BalasCopy kode di atas di HTML/Javascript...!!!
Balasketika saya coba kok numchars nya ada yang keluar ada yang nggak tu kenapa ya? makasih..
BalasItu karena kelebihan numchars gan... coba kurangi numcharsnya !!!
Balasmakasi...kerennn
Balashahahahahaha
BalasAgan ketahuan baru ganti Privacy Policy
pas ana baca artikel agan Tips Cara Membuat Privacy Policy Pada Blog
liat Privacy Policy bahasa inggris nggak sengaja ana reload blog agan eh menakjubkan berubah bahasanya jadi indo :D
Hehehe... Anda sangat beruntung. selamat Anda dapat pertamanya... :D
Balasmas kalau ngga pake gambar gimana caranya?
BalasTidak bisa gan, itu sudah disetting menggunakan gambar...
BalasGan, ko kan udah muncul, tapi anak anaknya menubar jadi gk mau muncul itu kenapa gan??
BalasMaksudnya??
Balasmantap ,makasih gan
Balasfont nya kecil itu ngerubahnya gmana ya gan?
BalasUbah font-size: 11px
BalasTerimakasih Sekali Postingannya..langsung saya terapkan di Mediaku
Balaskeren tutorialnya sudah saya coba gan.. ijin copas
BalasWah makasih ilmunya, minta izin dipraktekan ya, saya dah lama cari-cari ilmu ini
BalasKomentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.