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