?

Catatan

NULL

Tentang Blog Ini×

Blog ini adalah tempat Saya menuangkan hasil-hasil karya Saya sekaligus tempat saya belajar membangun sebuah blog/website dan berharap untuk tetap bisa memberikan yang terbaik kepada pembaca. kom4 (seekor nyamuk kecil yang tak pernah berhenti menyebarkan wabah.!)

Tentang Saya

Salam pembuka dari saya sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Sulawesi.

Berikut adalah data diri saya Dharla Ferdana, Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini. jika ada yang mengaku saya,namun mempunyai data yang berbeda dari yang ada dibawah, maka itu bukanlah saya. berikut data diri saya:

Nama : Muh. Dharla Ferdana Samudra
Email : dharlaferdana@yahoo.co.id
Invite My BBM : PIN : 2779647D

iklan
Bagikan kepada teman!

Membuat recent post fungsi scroll dengan javascript

Mungkin Javascript dan Scroller Box ini bisa menjadi sebuah solusi untuk mengatasi ruwetnya membuat sebuah daftar posting atau recent post. Dengan sekali pasang, maka sampeyan tidak perlu susah-susah untuk mengisi daftar posting secara manual karena javascript recent post ini akan secar otomatis tertambahkan oleh judul posting yang baru ketika sebuah posting diterbitkan. Bingkai scroller box yang cantik tentunya akan semakin membuat tampilan blog bertambah menarik. Lebar scroller didesain sebesar 500px supaya judul yang cukup panjang tidak perlu terpotong hingga daftar teks judul akan terlihat bertumpuk. Cukup dengan menggeser scroller box ke kanan-kiri atau ke atas-bawah, maka semua judul posting akan terlihat dengan amat sempurna. Karena beberapa widget di sidebar blog banyak yang teramat sempit, oleh karena itu scrollernya juga kita buat fleksibel sesuai lebar widget blog sampeyan.

Tentang bisa tidaknya javascript recent post ini untuk dipasang di blog, kiranya tidak perlu kuwatir sebab javascript ini telah melalui uji coba di blog dan hasilnya bisa dikatakan cukup memuaskan.Cara Membuat Javascript Recent Posts dilengkapi Scroller Box :

1. Login : Login ke BloGGeR
2. KLIK link Design (Rancangan).
3. KLIK Add Gadget (Tambah Gadget).
4. KLIK Add Gadget/Tambah Gadget. Tunggu beberapa saat.
5. KLIK HTML/Javascript Copy kode HTML dan Javascript dibawah ini dan pastekan di dalam box.

<style type="text/css">
.daftar_posting {
list-style:none;
margin-left:-40px;
font-family:Droid Serif;
font-size:11px;
color:lime;
text-align:left;
}
.daftar_posting a {
color:yellow;
border-top:1px dotted blue;
border-bottom:1px dotted blue;
background:transparent url(image-1) no-repeat 0 50%;
padding-left:15px;
}
.daftar_posting a:hover {
color:red;
}
</style>
<div style="margin:2px; padding:4px;border:2px solid #888;background:#333;">
<div style="border:2px solid #444;overflow:auto;padding:4px;background:#111;height:250px;">
<div style="width:500px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;

function showrecentposts(json) {
document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
posttitle = posttitle.link(posturl);
if ("content" in entry) {
var postcontent = entry.content.$t;
} else
if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) {
if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) {
if (standardstyling) document.write('<i>');
document.write(postcontent);
if (standardstyling) document.write('</i>');
} else {
if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');
}
}
if (!standardstyling) document.write('</div>');
if (standardstyling) document.write('<br/>');
document.write('</li>');
}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');
}
</script>
<script src="URL BLOG/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>

6. KLIK SAVE/Simpan

Catatan
1. Ganti kode yang bertanda sebelum Kode HTML dan Javascript di pasang : - Image-1 silahkan ganti dengan :

http://i49.tinypic.com/27ziu80/gubhugreyot/images/bgRPli.gif

- URL BLOG dengan URL blog kamu. Misalnya :

http://infonetmu.blogspot.com

2. Apabila ruang untuk teks judul posting kurang lebar, silahkan rubah width:500px; dengan nilai yang lebih besar. Perubahan pada kode ini mungkin hanya perlu dilakukan ketika semua sudah terpasang dan setelah terlihat hasilnya memang sangat diperlukan untuk diperbesar. Lebar 500px sepertinya sudah mencukupi untuk sebuah judul posting.

3. Untuk merubah tinggi scroller, lakukan pada :
- height:250px;

4. Apabila daftar poting terlalu di sebelah kiri (tanda panah menghilang/terpotong), kurangi nilai pada kode :
- margin-left:-40px;
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
iklanBuruan Pasang Iklan Anda Di Sini Dengan Harga Yang Terjangkau.Pajang bisnis online anda di blog http://kom4.blogspot.com/ dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.
Iklan Murah

Sejauh ini belum ada diskusi yang masuk. Mulailah berdiskusi dan temukan teman-teman barumu.

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode <i rel="anchor">http://nama_situs.com</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan kode <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI...</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI...</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
:) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: =p* Klik untuk melihat kode!

Konversi Kode di Sini (Jendela Munculan) Emoticon

Batal

Pasang IklanPasang IklanPasang IklanPasang Iklan

Terakhir Diperbaharui

Ke atas!