Minggu, 01 Agustus 2010

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.

Buzz It

Artikel Menarik Lainnya



22 komentar:

Video Bokep 3gp mengatakan...

ok terima kasih atas tipnya bos, i like it!! teruskan artikel nya yg useful, mantap!

tour and travel mengatakan...

makasih buat infonya

dennis mengatakan...

Thkyu mas..

zackhy mengatakan...

thank mas

Bikinprofil Dot Com mengatakan...

mksh infonya

cHR!$ is $!RHc mengatakan...

Mantab sob artikelnya...
Thanks dah sharing

Johan mengatakan...

makasih banyak

Asam urat mengatakan...

we al"laa makasih yae kebetulan eke lagi belajar!

rental mobil mengatakan...

thanks buat infonya

Alarm Kebocoran Gas Elpiji mengatakan...

terima kasih tutorialnya..

DOWNLOAD FILM SEMI SIPOKEYES mengatakan...

Salam kenal gan...
Mampir k blog ane gan kalo mo
DOWNLOAD FILM TERBARU, update terus dah pokoknya...

DoFollow Blog Indonesia mengatakan...

salam kenal..Sob..kunjung balik ya!

dewi mengatakan...

thx infonya....sukses selalu...

NgePas mengatakan...

wah artikel yg menarik neh... perlu dicoba.. mksh infox sob. Visit back sekedar silaturahmi..

salam

Berita Terkini mengatakan...

Mirip yang dibawah ini yah float imagenya yang bergantung alias melayang itu kan.

Ulfa Rahmasari mengatakan...

nice share ! :)

julicavero mengatakan...

kalo di wp blm bs ya sob?

nugros mengatakan...

ijin pake ya om......

DEDE SURYA UMRI mengatakan...

Makasih Bro...Infonya sangat bermanfaat buat ane yg baru belajar jadi blooger

Mainan Helikopter Murah mengatakan...

mas bro thanks infonya,q uda coba action kok ndak muncul ya padahal uda q lakukan step by stepnya

Anonim mengatakan...

Produk dijamin asli
TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000

poker mengatakan...

poker online
Agen Domino
Agen Poker
Kumpulan Poker
bandar poker
Judi Poker
Judi online terpercaya
bandar qiu

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.