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!

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya

Tips-Trik

• [Wordpress] Menambah Tombol Share Ke Plurk
• Mengakali Fitur Puncak Plurk
• Mempopulerkan postingan via Puncak Plurk
• Blogwalking: Jika Punya 2 atau Lebih Blog?
• Tak Punya Ide? Tulis Tutorial Kacangan!
• Untuk Apa Sih Tautan Judul Itu?
• Tutorial Blog Copas? Itu Sudah Biasa!
• Modifikasi (Tampilan) Label ala WordPress
• Cara Menampilkan Statistik Blog (Widget Blogger)
• Cara Memasang Postingan Terpopuler di Blog
• Bagaimana Cara Menjadi Blogger yang Ditunggu-tunggu?
• Cara Membuat Signature dibawah Komentar Admin
• Saya Hiatus???
• Cara Membuat Daftar Emot yang Bisa Dibuka-Tutup (Spoiler)
• Bolehkah Mengganti Header pada Event Tertentu?
• Cara Menambahkan Emot Baru Plurk di Blog (Update Emot)
• Tingkatkan Pengunjung dengan Hashtag (Twitter)
• Cara Memasang Papan Pengumuman Bahwa Emot Plurk Telah Diinstal di Blog Kita
• Cara Memasang Emoticon Plurk di Blog
• Cara Membuat Komentar Admin Berbeda (Author Highlight)
• (Ralat) Cara Menambahkan Tombol Share ke Plurk
• Cara Menambahkan Tombol Share ke Plurk
• Merubah Tampilan Caption Blogger
• Cara Membuat Tampilan Blockquote Lebih dari Satu

Tutorial

• Cara Membuat Screenshout Panjang
• Perbaikan Emot Plurk (Dan Update)
• [Wordpress] Menambah Tombol Share Ke Plurk
• Dasar-dasar CSS #5
• Widget Dalam Menu Bar/Navigasi
• Modifikasi (Tampilan) Label ala WordPress
• Troubleshooting: Cara Memasang Emot Plurk Ke Blog
• Dasar-dasar CSS #4
• Membuat Daftar Indeks di Blog
• Cara Membuat Postingan Blog Otomatis Masuk ke Twitter
• Cara Membuat Komentar Admin Berbeda (Author Highlight)
• Efek Gambar Memutar
• Cara Memasang Widget Plurk di Blog
• Teknik-teknik CSS3 yang Anda Harus Tahu
• Cara Membuat Fan Page Blog Anda di Facebook
• Cara Melihat Jumlah Pengunjung yang Sedang Online
• Dasar-dasar CSS #3
• Dasar-dasar CSS #2
• Dasar-dasar CSS #1
• Merancang Template Sendiri dengan Perancang Template
• Mengecek Statistik Blog dengan Indostats
• Cara Membuat Share Pack
• Cara Membuat Kata Bijak Acak pada Blog
• Cara Membuat Template Blogger