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 Selanjutnya...

Font Style Setting

Suatu saat saya ke warnet dekat rumah, kebetulan hari itu lagi naas, entah StarOne yang biasa saya gunakan untuk dial up internet lagi error, dku 5 nya yang tak nyambung atau handphone flexi yang jadi modem nya yang rusak.

Di warnet, seperti biasa setiap pagi saya buka internet, baca-baca berita penting di media indonesia atau sctv.co.id, habis itu baru buka blog. Ketika membuka blog (BLOG PROJECT), saya agak sedikit kaget, betul-betul hari itu naas lagi lagi menimpa. Blog yang sehari-harinya saya buat di laptop pribadi, ternyata di komputer lain justru terlihat aneh, huruf-hurufnya jadi besar-besar dan menyebabkan blog menjadi tidak balance dan tampak berantakan, tak tersusun rapi seperti di laptop saya. Saya coba-coba pindah tempat, di tempat lain malah bagus. Beberapa hari kemudian seorang kawan yang sempat membuka blog saya kirim sms, dia bilang di komputernya, blog saya hurufnya malah kecil-kecil sehingga sulit terbaca.

Karena penasaran coba-coba saya telusuri sendiri masalahnya, dan akhirnya saya ketemukan 2 problem utama pada css stylesheet nya yaitu:
1. Setting Posisi [suatu saat nanti akan dibahas secara detil]
2. Setting style font

Setelah masalahnya teratasi, tetap saja saya tak yakin, soalnya setting baik Posisi maupun Font pada Server Side kadang tidak match dengan setting pada computer client. Apalagi jika jenis browsernya berbeda, contohnya antara Internet explorer dengan Mozilla firefox. Jangan kaget ketika anda membuat blog anda di browser IE, malah berantakan saat dibuka di FireFox

FONT STYLE SETTING adalah solusi yang saya gunakan untuk mengatasinya. Dengan meletakkan FONT STYLE SETTING pada layout halaman, memberikan kemudian bagi pengunjung untuk mengatur sendiri ukuran huruf dari postingan tanpa mengubah setting pada server side, FONT STYLE SETTING ini hanya bersifat temporary karena di set pada Computer Client.

Jika anda juga tertarik untuk memanfaatkan fasilitas ini berikut ini adalah tag-tag htmlnya

Seperti biasa buka account anda di blogger.com, buka TATA LETAK > TAMBAH GADGET > TAMBAH JAVASCRIPT/HTML kemudian copy script berikut ini

<script>
function go1(){
if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value

}
}

function go2(){
if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value

}
}
</script>
<form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
</select>
</form>

Jika Anda tahu berapa ukuran default blog anda, bisa menyelipkan tag "selected" pada option select, begitu juga type huruf

misalnya
<option value="12px" selected/>12
<option value="Trebuchet Ms"/>Trebuchet Ms

kemudian Save
semoga berhasil
Selanjutnya...