Forum, Blogger, diskusi, ilmu, berbagi, blogging, sharing, ide, inspirasi Kamu Forum

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



21 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

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.