Cara Membuat Float Widget (dan Headline News)

Kalian lihat bagian bawah blog ini? Ada widget yang melayang. Yaitu recent update marquee, headline news, dan menu. Tetapi, coba anda klik menu Tools dibawah. Apa yang terjadi?

Widget akan bermunculan. Mulai dari shoutbox, jam, mesin pencari, dll.

Bagaimana cara membuatnya? Ah, gampang...

Pertama-tama Login ke Blogger, lalu klik Rancangan > Elemen Halaman. Lalu klik Tambah Gadget pada bagian footer, lalu pilih HTML/Javascript. Kenapa footer? Karena script ini nggak bakalan jalan di IE, maka diletakkan di footer supaya yang memakai IE akan melihat widget ini pada bagian footer.

Lalu copy-paste kode berikut pada bagian isi.

<style type="text/css">
/*styles*/
#newsticker, #widgetcontainer{
background:#ffffff;
font-family:Arial, Tahoma, Verdana;
font-size:12px;
color:#000000;
}
#newsticker a, #widgetcontainer a{
color:#2E2EFE;
text-decoration:none;
}
#newsticker a:hover, #widgetcontainer a:hover{
color:#0B0B61;
text-decoration:underline;
}
#newsticker {
background-color:#ffffff;
bottom:0;
left:50px;
position:fixed;
text-align:left;
width:900px;
z-index:10000;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
}
#leftticker{
float:left;
}
#rightticker{
float:right;
}
#tickermenu{
margin-bottom:10px;
}
#recentticker{
margin-top:10px;
}
#widgetcontainer{
width:700px;
z-index:5000;
position:fixed;
bottom:50px;
left:150px;
padding:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-radius-topleft:10px;
-webkit-border-radius-topright:10px;
height:auto;
padding-bottom:10px;
border-bottom:solid 1px #CCCCCC;
visibility:hidden;
}
#widgetcontainer b.judul{
font-family:Arial;
color:blue;
font-size:12px;
}
#containerleft{
float:left;
width:200px;
padding-right:10px;
}
#containercenter{
float:left;
padding-right:10px;
padding-left:0px;
}
#containerright{
float:right;
}
#containeratas{
clear:both;
width:100%;
margin-bottom:10px;
}
#containerclose{
float:right;
}
#creditwidget{
clear:both;
float:right;
text-align:right;
margin-top:10px;
}
</style>
<script type='text/javascript'>
function showLucky(root){
var feed = root.feed;
var entries = feed.entry || [];
var entry = feed.entry[0];
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == "alternate") {
window.location = entry.link[j].href + "#random";
}
}
}

function fetchLuck(luck){
script = document.createElement('script');
script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
function readLucky(root){
var feed = root.feed;
var total = parseInt(feed.openSearch$totalResults.$t,10);
var luckyNumber = Math.floor(Math.random()*total);
luckyNumber++;
fetchLuck(luckyNumber);
}
function feelingLucky(){
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/feeds/posts/summary?max-results=0&alt=json-in-script&callback=readLucky';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
<!-- Bagian widget2 -->
<div id='widgetcontainer'>
<div id='containeratas'>
<span id='containerclose'>
<a href="#nogo" onclick="javascript:document.getElementById('widgetcontainer').style.visibility='hidden';" title="Sembunyikan widget-widget ini."><img src="http://i49.tinypic.com/n5g8yg.png" /></a></span>
</div>
<div id='containerleft'>
<b class="judul">Widget 1</b>
<!-- Isi bagian kiri -->
</div>
<div id='containercenter'>
<b class="judul">Widget 2</b>
<!-- Isi bagian tengah -->
</div>
<div id='containerright'>
<b class="judul">Widget 3</b>
<!-- Isi bagian kanan -->
</div>
</div>
<!-- Bagian melayang -->
<div id='newsticker'>
<div id='tickermenu'>
<span id="leftticker"><b>Last Update &#9660;</b> | <b>Recent News &#9658;</b> | <marquee direction="left" width="460px" scrollamount="4">Selamat datang di <a href="http://gudangilmu.emeref.co.cc">Gudang ilmu</a>. Disini anda bisa mendapatkan berbagai ilmu. Blog ini akan diupdate Insya Allah minimal 1 minggu sekali. Silakan tekan tombol <b>Tools</b> disamping untuk memunculkan widget seperti shoutbox, mesin pencari, dll. Untuk menutupnya, klik tombol silang dibagian pojok kanan atas bagian widget-widget. Untuk membukanya kembali anda tinggal mengeklik tombol <b>Tools</b> lagi.</marquee></span> <span id="rightticker">| <a href="javascript:feelingLucky();" title="Klik untuk menampilkan postingan acak.">Postingan Acak...</a> | <a href="#nogo" onclick="javascript:document.getElementById('widgetcontainer').style.visibility='visible';" title="Klik ini untuk memunculkan berbagai widget seperti mesin pencari, shoutbox, dll.">Tools</a> | <a href="#" title="Naik kembali ke atas.">Go to Top</a> | <a href="http://gudangilmu.emeref.co.cc" title="Back to home.">Home</a></span></div><br />
<!-- Bagian recent update marquee -->
<script style="text/javascript" src="http://digitalgupshup.110mb.com/DigitalGupshup_scrolling_blogger_posts.js"> </script><script style="text/javascript">var nMaxPosts = 25; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="<font color='red' face='arial' style='font-size:12px;'><a href='http://gudangilmu.emeref.co.cc' style='color:red;font-family:arial;font-size:12px;'><b>(MRF)</b></a></font>"; </script> <script style="text/javascript" src="http://muhammadrizkifadillah.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script><br />
<div id='creditwidget'>
<!-- bagian credit. Boleh dihapus boleh tidak -->
<a href="http://gudangilmu.emeref.co.cc">Gudang Ilmu</a> by <a href="http://www.emeref.co.cc">Muhammad Rizki Fadillah</a>, No Copyright, 2009-2010 | Float Widget by <a href="http://gudangilmu.emeref.co.cc">Muhammad Rizki Fadillah</a> | Powered by <a href="http://blogger.com">Blogger</a>. <a href="http://www.gudangilmu.emeref.co.cc/2010/08/cara-membuat-float-widget-dan-headline.html#"><small>[Pasang widget ini di blog anda]</small></a>
</div>
</div>

Ada beberapa hal yang harus diperhatikan:

1. Yang berwarna kuning silakan diisi dengan widget anda.

2. <b class="judul">Widget 1</b> adalah format untuk membuat judul widget.

3. http://gudangilmu.emeref.co.cc: setiap URL tersebut yang dicetak tebal ganti dengan url blog anda (jika tidak dicetak tebal tidak usah).

4. http://muhammadrizkifadillah.blogspot.com/feeds/posts/default ganti dengan URL feed blog anda. Atau bagian http://muhammadrizkifadillah.blogspot.com ganti saja dengan URL blog anda.

5. Yang berwarna merah adalah pesan marquee. Ganti sesuai dengan keinginan anda.

6. Yang berwarna biru muda adalah style pemisah antar postingan pada bagian feed marquee. Seperti punya saya misalnya, bertuliskan (MRF) dengan warna merah dan font Arial 12 piksel. Ganti sesuai selera.

7. Yang berwarna hijau ganti dengan keinginan kalian.

Kalau sudah, klik Simpan.

Selesai... Semoga bermanfaat dan hep e nais dey hehehe, maksudnya have a nice day!