Cara Membuat Float Widget Dan Headline News Jquery

Widget akan bermunculan. Mulai dari shoutbox, jam, mesin pencari, dll.  Cara Membuat Float Widget Dan Headline News Jquery

Bagaimana cara membuatnya?  Ah, gampang... Cara Membuat Float Widget Dan Headline News Jquery

Pertama-tama Login ke Blogger, lalu klik Rancangan > Elemen Halaman. Lalu klik Tambah Gadget pada bagian footer, lalu pilihHTML/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. Cara Membuat Float Widget Dan Headline News Jquery

<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:  Cara Membuat Float Widget Dan Headline News Jquery

1. Yang berwarna kuning silakan diisi dengan widget anda.  Cara Membuat Float Widget Dan Headline News Jquery

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://copybinpaste.blogspot.com/feeds/posts/default ganti dengan URL feed blog anda. Atau bagian http://copybinpaste.blogspot.com ganti saja dengan URL blog anda. 
Cara Membuat Float Widget Dan Headline News Jquery
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. 
Cara Membuat Float Widget Dan Headline News Jquery
7. Yang berwarna hijau ganti dengan keinginan kalian. 

Kalau sudah, klik Simpan. 


Sumber Cara Membuat Float Widget Dan Headline News Jquery