<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'
type='text/javascript' />
<link href='http://bloggerblogwidgets.googlecode.com/svn/trunk/auto-hide-social-bookmarking-way2blogging.css'
rel='stylesheet' type='text/css' />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
var sexyBaseHeight = jQuery('.sexy-bookmarks').height();
var sexyFullHeight = jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight > sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight + 15 + 'px'
}, {
duration: 800,
queue: false
});
}, function() {
jQuery(this).animate({
height: sexyBaseHeight + 'px'
}, {
duration: 800,
queue: false
});
});
}
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth = jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth = jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount = jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow = Math.floor(sexyFullWidth / sexyBookmarkWidth);
var sexyRowWidth = Math.min(numPerRow, sexyBookmarkCount) * sexyBookmarkWidth;
var sexyLeftMargin = (sexyFullWidth - sexyRowWidth) / 2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin + 'px');
}
});
</script>
<b:if cond='data:blog.pageType == "item"'>
<div id='post-width-w2b' style='width:600px;'>
<div class='sexy-bookmarks-bg-caring sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-center '>
<ul class='socials'>
<li class='sexy-yahoomail'>
<a class='external' expr:href='"http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
</li>
<li class='sexy-gmail'>
<a class='external' expr:href='"https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&su=" + data:post.title + "&body=Link:" + data:post.url' rel='nofollow' title='Email this via Gmail'/>
</li>
<li class='sexy-twitter'>
<a class='external' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'/>
</li>
<li class='sexy-facebook'>
<a class='external' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'/>
</li>
<li class='sexy-linkedin'>
<a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'/>
</li>
<li class='sexy-googlebuzz'>
<a class='external' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'/>
</li>
<li class='sexy-yahoobuzz'>
<a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url + "&submitHeadline=" + data:post.title + "&submitSummary=&submitCategory=science&submitAssetType=text"' rel='nofollow' title='Buzz up!'/>
</li>
<li class='sexy-blogger'>
<a class='external' expr:href='"http://www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1"' rel='nofollow' title='Blog this on Blogger'/>
</li>
<li class='sexy-googlebookmarks'>
<a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/>
</li>
<li class='sexy-googlereader'>
<a class='external' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcUrl=" + data:post.url + "&srcTitle=" + data:post.title + "&snippet="' rel='nofollow' title='Add this to Google Reader'/>
</li>
<li class='sexy-stumbleupon'>
<a class='external' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/>
</li>
<li class='sexy-delicious'>
<a class='external' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
</li>
<li class='sexy-digg'>
<a class='external' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'/>
</li>
<li class='sexy-comfeed'>
<a class='external' expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default?alt=rss"' rel='nofollow' title='Subscribe to the comments for this post?'/>
</li>
<li class='sexy-orkut'>
<a class='external' expr:href='"http://promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.title + "&du=" + data:post.url + "&cn="' rel='nofollow' title='Promote this on Orkut'/>
</li>
<li class='sexy-designbump'>
<a class='external' expr:href='"http://designbump.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Bump this on DesignBump'/>
</li>
<li class='sexy-reddit'>
<a class='external' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'/>
</li>
<li class='sexy-designfloat'>
<a class='external' expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/>
</li>
<li class='sexy-friendfeed'>
<a class='external' expr:href='"http://www.friendfeed.com/share?title=" + data:post.title + "&link=" + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
</li>
<li class='sexy-zabox'>
<a class='external' expr:href='"http://www.zabox.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Box this on Zabox'/>
</li>
<li class='sexy-dzone'>
<a class='external' expr:href='"http://www.dzone.com/links/add.html?url=" + data:post.url + "&title=" + data:post.title + "&description="' rel='nofollow' title='Add this to DZone'/>
</li>
<li class='sexy-webblend'>
<a class='external' expr:href='"http://thewebblend.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Blend this!'/>
</li>
<li class='sexy-propeller'>
<a class='external' expr:href='"http://www.propeller.com/submit/?url=" + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
</li>
<li class='sexy-tumblr'>
<a class='external' expr:href='"http://www.tumblr.com/share?v=3&u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
</li>
<li class='sexy-squidoo'>
<a class='external' expr:href='"http://www.squidoo.com/lensmaster/bookmark?" + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
</li>
<li class='sexy-posterous'>
<a class='external' expr:href='"http://posterous.com/share?linkto=" + data:post.url + "&title=" + data:post.title + "&selection="' rel='nofollow' title='Post this to Posterous'/>
</li>
<li class='sexy-technorati'>
<a class='external' expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
</li>
<li class='sexy-hotmail'>
<a class='external' expr:href='"http://mail.live.com/?rru=compose?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
</li>
<li class='sexy-bebo'>
<a class='external' expr:href='"http://www.bebo.com/c/share?Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
</li>
<li class='sexy-bitacoras'>
<a class='external' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url ' rel='nofollow' title='Submit this to Bitacoras'/>
</li>
<li class='sexy-blinklist'>
<a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Blinklist'/>
</li>
<li class='sexy-100zakladok'>
<a class='external' expr:href='"http://www.100zakladok.ru/save/?bmurl=" + data:post.url + "&bmtitle=" + data:post.title ' rel='nofollow' title='Add this to 100 bookmarks'/>
</li>
<li class='sexy-blogengage'>
<a class='external' expr:href='"http://www.blogengage.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Engage with this article!'/>
</li>
<li class='sexy-blogmarks'>
<a class='external' expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
</li>
<li class='sexy-bobrdobr'>
<a class='external' expr:href='"http://bobrdobr.ru/addext.html?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on BobrDobr'/>
</li>
<li class='sexy-bonzobox'>
<a class='external' expr:href='"http://bonzobox.com/toolbar/add?pop=1&u=" + data:post.url + "&t=" + data:post.title + "&d="' rel='nofollow' title='Add this to BonzoBox'/>
</li>
<li class='sexy-boxnet'>
<a class='external' expr:href='"https://www.box.net/api/1.0/import?url=" + data:post.url + "&name=" + data:post.title + "&description=&import_as=link"' rel='nofollow' title='Add this link to Box.net'/>
</li>
<li class='sexy-current'>
<a class='external' expr:href='"http://current.com/clipper.htm?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Post this to Current'/>
</li>
<li class='sexy-diigo'>
<a class='external' expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Post this on Diigo'/>
</li>
<li class='sexy-ekudos'>
<a class='external' expr:href='"http://www.ekudos.nl/artikel/nieuw?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Submit this to eKudos'/>
</li>
<li class='sexy-evernote'>
<a class='external' expr:href='"http://www.evernote.com/clip.action?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
</li>
<li class='sexy-faqpal'>
<a class='external' expr:href='"http://www.faqpal.com/submit?url=" + data:post.url ' rel='nofollow' title='Submit this to FAQpal'/>
</li>
<li class='sexy-fwisp'>
<a class='external' expr:href='"http://fwisp.com/submit?url=" + data:post.url ' rel='nofollow' title='Share this on Fwisp'/>
</li>
<li class='sexy-globalgrind'>
<a class='external' expr:href='"http://globalgrind.com/submission/submit.aspx?url=" + data:post.url + "&type=Article&title=" + data:post.title ' rel='nofollow' title='Grind this! on Global Grind'/>
</li>
<li class='sexy-hackernews'>
<a class='external' expr:href='"http://news.ycombinator.com/submitlink?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
</li>
<li class='sexy-hatena'>
<a class='external' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'/>
</li>
<li class='sexy-hyves'>
<a class='external' expr:href='"http://www.hyves.nl/profilemanage/add/tips/?name=" + data:post.title + "&text=Text about this site+-+" + data:post.url + "&rating=5"' rel='nofollow' title='Share this on Hyves'/>
</li>
<li class='sexy-identica'>
<a class='external' expr:href='"http://identi.ca//index.php?action=newnotice&status_textarea=Reading:" + data:post.title + "+-+from+" + data:post.url ' rel='nofollow' title='Post this to Identica'/>
</li>
<li class='sexy-izeby'>
<a class='external' expr:href='"http://izeby.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Add this to Izeby'/>
</li>
<li class='sexy-jumptags'>
<a class='external' expr:href='"http://www.jumptags.com/add/?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
</li>
<li class='sexy-kaevur'>
<a class='external' expr:href='"http://kaevur.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Kaevur'/>
</li>
<li class='sexy-mail'>
<a class='external' expr:href='"mailto:?subject=%22" + data:post.title + "%22&body=Link: " + data:post.url + " (sent via Way2blogging) "' rel='nofollow' title='Email this to a friend?'/>
</li>
<li class='sexy-memoryru'>
<a class='external' expr:href='"http://memori.ru/link/?sm=1&u_data[url]=" + data:post.url + "&u_data[name]=" + data:post.title ' rel='nofollow' title='Add this to Memory.ru'/>
</li>
<li class='sexy-meneame'>
<a class='external' expr:href='"http://meneame.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
</li>
<li class='sexy-misterwong'>
<a class='external' expr:href='"http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title + "&plugin=sexybookmarks"' rel='nofollow' title='Add this to Mister Wong'/>
</li>
<li class='sexy-moemesto'>
<a class='external' expr:href='"http://moemesto.ru/post.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to MyPlace'/>
</li>
<li class='sexy-mylinkvault'>
<a class='external' expr:href='"http://www.mylinkvault.com/link-page.php?u=" + data:post.url + "&n=" + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
</li>
<li class='sexy-myspace'>
<a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
</li>
<li class='sexy-n4g'>
<a class='external' expr:href='"http://www.n4g.com/tips.aspx?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit tip to N4G'/>
</li>
<li class='sexy-netvibes'>
<a class='external' expr:href='"http://www.netvibes.com/share?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
</li>
<li class='sexy-netvouz'>
<a class='external' expr:href='"http://www.netvouz.com/action/submitBookmark?url=" + data:post.url + "&title=" + data:post.title + "&popup=no"' rel='nofollow' title='Submit this to Netvouz'/>
</li>
<li class='sexy-newsvine'>
<a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "&h=" + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
</li>
<li class='sexy-ning'>
<a class='external' expr:href='"http://bookmarks.ning.com/addItem.php?url=" + data:post.url + "&T=" + data:post.title ' rel='nofollow' title='Add this to Ning'/>
</li>
<li class='sexy-nujij'>
<a class='external' expr:href='"http://nujij.nl/jij.lynkx?t=" + data:post.title + "&u=" + data:post.url + "&b="' rel='nofollow' title='Submit this to NUjij'/>
</li>
<li class='sexy-oknotizie'>
<a class='external' expr:href='"http://oknotizie.virgilio.it/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on OkNotizie'/>
</li>
<li class='sexy-pfbuzz'>
<a class='external' expr:href='"http://pfbuzz.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on PFBuzz'/>
</li>
<li class='sexy-pingfm'>
<a class='external' expr:href='"http://ping.fm/ref/?link=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Ping this on Ping.fm'/>
</li>
<li class='sexy-plaxo'>
<a class='external' expr:href='"http://www.plaxo.com/?share_link=" + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
</li>
<li class='sexy-plurk'>
<a class='external' expr:href='"http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+" + data:post.url + "&qualifier=shares"' rel='nofollow' title='Share this on Plurk'/>
</li>
<li class='sexy-printfriendly'>
<a class='external' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
</li>
<li class='sexy-pusha'>
<a class='external' expr:href='"http://www.pusha.se/posta?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Push this on Pusha'/>
</li>
<li class='sexy-scriptstyle'>
<a class='external' expr:href='"http://scriptandstyle.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to Script & Style'/>
</li>
<li class='sexy-slashdot'>
<a class='external' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
</li>
<li class='sexy-sphinn'>
<a class='external' expr:href='"http://sphinn.com/index.php?c=post&m=submit&link=" + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
</li>
<li class='sexy-springpad'>
<a class='external' expr:href='"http://springpadit.com/clip.action?body=&url=" + data:post.url + "&format=microclip&title=" + data:post.title + "&isselected=true"' rel='nofollow' title='Spring this on SpringPad'/>
</li>
<li class='sexy-strands'>
<a class='external' expr:href='"http://www.strands.com/tools/share/webpage?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Strands'/>
</li>
<li class='sexy-stumpedia'>
<a class='external' expr:href='"http://www.stumpedia.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Stumpedia'/>
</li>
<li class='sexy-techmeme'>
<a class='external' expr:href='"http://twitter.com/home/?status=Tip+@Techmeme+" + data:post.url + "--" + data:post.title + "&source=Way2blogging"' rel='nofollow' title='Tip this to TechMeme'/>
</li>
<li class='sexy-tipd'>
<a class='external' expr:href='"http://tipd.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
</li>
<li class='sexy-tomuse'>
<a class='external' expr:href='"mailto:tips@tomuse.com?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Suggest this article to ToMuse'/>
</li>
<li class='sexy-twittley'>
<a class='external' expr:href='"http://twittley.com/submit/?title=" + data:post.title + "&url=" + data:post.url + "&desc=&pcat=Technology&tags="' rel='nofollow' title='Submit this to Twittley'/>
</li>
<li class='sexy-viadeo'>
<a class='external' expr:href='"http://www.viadeo.com/shareit/share/?url=" + data:post.url + "&title=" + data:post.title + "&urlaffiliate=31138"' rel='nofollow' title='Share this on Viadeo'/>
</li>
<li class='sexy-virb'>
<a class='external' expr:href='"http://virb.com/share?external&v=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Virb'/>
</li>
<li class='sexy-wikio'>
<a class='external' expr:href='"http://www.wikio.com/sharethis?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Wikio'/>
</li>
<li class='sexy-wykop'>
<a class='external' expr:href='"http://www.wykop.pl/dodaj?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Wykop!'/>
</li>
<li class='sexy-xerpi'>
<a class='external' expr:href='"http://www.xerpi.com/block/add_link_from_extension?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Save this to Xerpi'/>
</li>
<li class='sexy-yandex'>
<a class='external' expr:href='"http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=" + data:post.url + "&lname=" + data:post.title ' rel='nofollow' title='Add this to Yandex.Bookmarks'/>
</li>
<li class='sexy-jb'>
<a class='external' href='http://jagoblog.com' rel='follow' title='Grab this Widget'></a>
</li>
</ul>
</div>
</div>
</b:if>
<li class='sexy-facebook'>
<a class='external' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'/>
</li>
Beginilah cara untuk membuat menu tab view tersebut
1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode]]></b:skin> atau kedalam tag CSS.
div.TabView div.Tabs4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}5. Langkah selanjutnya cari code ini </head>
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
.bgsGR_onmos {
height: 32px;
width: 260px;
border: 2px solid #666666;
background: #CCCCCC;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
padding: 5px 5px;
margin: 15px auto;
font: 11px Arial;
color: #003366;
overflow: hidden;
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos:hover {
min-height: 250px;
border: 2px solid #333333;
background: #111;
box-shadow: 0 1px 15px #000;
-moz-box-shadow: 0 1px 15px #000;
-webkit-box-shadow: 0 1px 15px #000;
color: #000; text-shadow: 0 1px 1px #888;
}
.bgsGR_onmos h3, .jerohan h3 {
font-size: 14px;
font-family: Droid Serif;
font-weight: bold;
color: #000;
text-align: center;
text-shadow: 0px 1px 1px #fff; margin: 3px 5px;
padding: 3px 10px;
background: #bbb;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #999;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
.bgsGR_onmos h3:hover {
box-shadow: 0 1px 8px #000;
-moz-box-shadow: 0 1px 8px #000;
-webkit-box-shadow: 0 1px 8px #000;
}
.bgsGR_onmos img.mini, .bgsGR_onmos img.minianima {
width: 70px;
border: 4px solid #666;
padding: 3px;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
float: left; margin: 0 10px 5px 0;
background: #222;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.bgsGR_onmos img.mini:hover, .bgsGR_onmos img.minianima:hover {
box-shadow: 1px 1px 15px #000;
-moz-box-shadow: 1px 1px 15px #000;
-webkit-box-shadow: 1px 1px 15px #000;
border: 4px solid #CCCCCC;
background :#666;
-o-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
margin-top: 20px;
margin-left: 15px;
}
.bgsGR_onmos img.minianima:hover {
-o-transform: scale(1.4) rotate(360deg) translate(0px);
-moz-transform: scale(1.4) rotate(360deg) translate(0px);
-webkit-transform: scale(1.4) rotate(360deg) translate(0px);
}
.jerohan {
margin-top: 15px;
height: 200px;
overflow: auto;
padding: 0 5px;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out; background: #CFE7E9;
}
.jerohan:hover {
background: #333;
color: #eee;
text-shadow: 0 0px 1px #fe0303;
}
.jerohan h3 {
margin: 20px 0;
max-width: 204px;
background: #66CCFF;
box-shadow: 0 1px 12px #eee;
-moz-box-shadow: 0 1px 12px #eee;
-webkit-box-shadow: 0 1px 12px #eee;
}
.jerohan h3:hover {
background: #888;
border: 1px solid #666;
box-shadow: 0 1px 12px #fff;
-moz-box-shadow: 0 1px 12px #fff;
-webkit-box-shadow: 0 1px 12px #fff;
}
.jerohan ul {
padding: 0;
margin: 0;
list-style: none;
}
.jerohan li {
padding: 0;
margin: 0;
list-style: none;
border-bottom:1px dotted #777;
}
.jerohan li a{
color: #03d8fe;
padding: 0;
margin: 0;
text-decoration:none;
font-size: 12px;
-o-transition: all 1.5s;
-moz-transition: all 1.5s;
-webkit-transition: all 1.5s;
}
.jerohan li a:hover {
-o-transform: scale(1.1);
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
color: red;
text-shadow: 0 1px 1px #000;
margin-left: 20px;
}
 |
| SEBELUM |
 |
| SESUDAH DI EDIT |
