Loading ... ... Please wait!

Sabtu, 07 Februari 2009

Fixed Marquee

Mungkin anda sering lihat di tivi, text berjalan pada bagian bawah layar. Di dunia internet kita mengenalnya dengan istilah marquee. Diinspirasi dari layar tivi tersebut saya jadi tertarik membuatnya di MyBlog.

Saya menyebutnya dengan istilah FIXED MARQUEE. Dua kata ini saling bertolak belakang, fixed lebih bermakna statis sedangkan marquee lebih bermakna dinamis. Fixed marquee sebenarnya kombinasi dari script Style Position Fixed dan Marquee Text. Style Position Fixed adalah layar yang diposisikan pada posisi tetap (fixed) pada halaman blog/web, sehingga meskipun di scroll kearah mana saja, layar tersebut tetap pada posisi semula, tidak mengikuti scrolling. Dengan memodifikasi layar menggunakan style position fixed, kita bisa menyisipkan text marquee yang selalu hadir pada layar yang statis. Text Marquee bisa kita isi dengan topik apa saja. Saya lebih tertarik mengisi teks marquee dengan Recent Comment.

Ada sedikit masalah, karena style position fixed hanya support dengan Firefox dan IE versi 7, setelah saya coba dengan IE versi 6 kebawah, style position fixed tidak berfungsi. oleh karena itu saya coba menggunakan pendekatan Style Position Absolute untuk mengantasipasi jika seandanya user/pengunjung blog menggunakan browser dengan sistem operasi IE versi 6 kebawah.

Jika ada yang tertarik menggunakan fixed marquee ini, langkah-langkah membuatnya adalah

1. Buat Gadget/widget baru

Buka account di BLOGGER.COM > TATA LETAK > ELEMEN HALAMAN > TAMBAH GADGET > HTML/JAVASCRIPT
beri judul/title 'Fixed marquee' (atau apa saja, agar mudah mencarinya saat EDIT HTML)

2. Buat script Recent Comment yang di marquee secara horisontal seperti dibawah ini, masukkan ke dalam widget yang baru dibuat

<script>
function gamal(json) {

document.write('<marquee scrolldelay="180" direction="left" onmouseover="this.stop()" width="95%" onmouseout="this.start()">');

for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var author = entry.author[0].name.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

posturll=posturl.split("/");

var x=posturll[5];
var y=x.split(".");
var z=y[0];

var w=z.replace(/-/g," ");

break;

}

}

posttitle = "<b>" + author + "</b>" + "&nbsp;" + w.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

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, "");

document.write(posttitle);

if (showpostdate == true)
document.write('&nbsp;');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('&nbsp;');
document.write('<i>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}
document.write('</i>');
document.write('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;');

}

document.write('</marquee>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://namablog.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=gamal"></script>

3. Ganti Tulisan yang berwarna merah dengan nama blog anda

4. Buat STYLE POSITION FIXED

BUKA TATA LETAK > EDIT HTML >
Klik EDIT pada Toolbar atau tekan tombol CTRL + F, pada kotak box FIND WHAT ketik kata kunci title/judul tadi, pada contoh ini adalah fixed marquee, hasil pencarian kurang lebih seperti ini

<b:widget id='HTML8' locked='false' title='fixed marquee' type='HTML'/>

setelah menemukan script seperti diatas, blok script tersebut kemudian klik EDIT pada Toolbar pilih CUT lalu PASTE persis diatas tag script </body>

setelah meletakkan diatas script </body> buat sedikit modifikasi sehingga menjadi seperti ini

<div id='fixmetoo' style='border:1px solid #000;background-color:#fff;text-align:left;padding:0px;width:99%;font-size:8pt'>
<b:section id='fixm' preferred='no'>

<b:widget id='HTML8' locked='false' title='fixed marquee' type='HTML'/>

</b:section>
</div>

5. Setelah itu letakkan script berikut tepat diatas tag script </head>

<style type="text/css">
#fixmetoo { position: fixed; left: 0px; bottom: 0px; }
div &gt; div#fixmetoo { position: fixed; }
pre.fixit { overflow:auto;border-left:1px dashed #000;border-right:1px dashed #000;padding-left:2px; }
</style>

<!--[if lte IE 6]>
<style type="text/css">
#fixmetoo { position: absolute; left: 0px; bottom: 0px; }
div > div#fixmetoo { position: fixed; }
pre.fixit { overflow:auto;border-left:1px dashed #000;border-right:1px dashed #000;padding-left:2px; }
</style>
<![endif]-->
<!--[if gte IE 5.5]><![if lt IE 7]>
<style type="text/css">

div#fixmetoo {
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( 0 - fixmetoo.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}
</style>
<![endif]><![endif]-->


6. Langkah terakhir adalah kembali ke TATA LETAK > ELEMEN HALAMAN > KLIK EDIT pada widget FIXED MARQUEE, kemudian setelah terbuka jendela POPUP, hapus judul Fixed Marquee, dan biarkan tetap kosong. SAVE dan lihat hasilnya

SEMOGA BERHASIL

Related Posts by Categories



35 comments:

suryaden 0209 mengatakan...
wadouw panjangnya...
Denny mengatakan...
wah,,,ga ngantuk Bos!
- s L i K e R s - mengatakan...
Mantap bos ini, tapi pasti jadi memperberat load blog... :)
SEDONA mengatakan...
Visiting U Back. Good Day :-)
Tonny mengatakan...
nambah ilmu :D :D
IHSAN mengatakan...
MANTAP boss ilmu ini
q coba di blog q yg lain ya?
didin mengatakan...
panjang banget....
iFant mengatakan...
Mohon maaf yach mas, sebenarnya yang ini pernah saya bajak..!!! (Janga di hukum yach mas..???)

Namun karena belum ada tulisan mas yang tak berhubungan, mak tak jadi di publikasikan (dipakainya)

Nam sekarang kayaknya bisa dech....!!

Hatur ThankQ'U...!!!
MARKET VALUE mengatakan...
nice your post.. :) Bali needs to do something.. http://gladyaregita.blogspot.com/ :)
Abdul Gamal mengatakan...
Buat para user, script-script diatas adalah murni script yang saya gunakan untuk kebutuhan blog ini. Jika para user lebih jeli menganalisanya, bisa dan silahkan memodifikasinya lebih sederhana sesuai kebutuhan masing-masing, bahkan menjadi sangat simple pun bisa.

Script diatas bukan hanya untuk di copy paste tapi dianalisa, bagi kawan-kawan yang bisa lebih cerdas memodifikasi lebih bagus, saya sangat respek. Tapi jangan lupa ilmunya di bagi-bagi.

Script diatas hanya 7 kb, isinya hanya logika, sangat-sangat hemat bandwidt, bandingkan dengan 1 gambar yang anda pasang lewat tukaran link, script diatas jauh lebih hemat, jadi jangan takut load jadi berat.
Risti mengatakan...
silaturahmi di minggu pagi yang mendung.
Ide Gokil mengatakan...
berkunjung pagi hari,smg sehat selalu
rumah sakit mengatakan...
makasih banya ilmu nya, semoga sukses selalu
capres2024 mengatakan...
mas kalo pengen belajar script2 gini dimana ya? kursus doang bisa ga ya? n...kalo bole tahu, kursus TI itu mahal ga ya? thanx mas
nv mengatakan...
blognight...mampir biar dibagi ilmunya hehehe
e-je mengatakan...
Mampir sore...
Abdul Gamal mengatakan...
dear, capres2024, saya belajar script HTML dan JAVASCRIPT hanya secara otodidak. Tips yang bagus menurut saya, sering-sering baca tutorial HTML dan JAVASCRIPT, banyak web yang membahas hal tersebut
attayaya mengatakan...
mau coba ahhh
mantap neh
Omadi Jaya mengatakan...
hebat mas... :D

sukses terus deh..
tehrouter mengatakan...
jadi nambah berat loading ndak, pak?
frizzy mengatakan...
Halo sobat, selamat pagi. Hujan dan dingin tak membuatku beku, teteup jalan2 ke tempatmu...

Cheers, frizzy.
boykesn mengatakan...
tak coba dulu mas ya....kayaknya cocok nih dgn blog saya...
trik blog mengatakan...
keren n mantap
sugeng mengatakan...
makasih infonya mas salam kenal aja
Karila Wisudayanti mengatakan...
berkunjung ,mas..
Rinanet mengatakan...
berkunjung mas...
' Li ' mengatakan...
berkunjung sore mas....^^
Investa mengatakan...
Kunjungan Pagi Hari..
Baron mengatakan...
Kunjungan Balik.. Habis ga ada Shoutmix-nya bos
ipay76.blog.com mengatakan...
Thank boss, saya dapat lagi projectnya. sesuai namanya BLOG PROJECT.
imamnic mengatakan...
woooww, scripting sendiri bro.
Salut salut
Sharing memang paling woke
Daulat Tuanku mengatakan...
salam,mas bikin cantik dong blog saya
Seagate mengatakan...
punyaku koq ga bisa ya bang dikasih fixed marquee...error mlu .jadi esmosi nih...padahal sudah ku praktekan seperti yang abang uraikan diatas...
Damaniks mengatakan...
Mas, aku sdh buat sesuai intruksi diatas, tapi gak jalan, bisa liat dulu bos ??
ini alamatku http://damaniks.blogspot.com

thanks b4
judi bola online mengatakan...
Pencerahan sekali...coba ah gan di blog ane...trims ya

Posting Komentar

 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH