 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
The Tags
Make a most beautiful tags cloud on over the world with Facelift and jQuery
The Tags
Simple and easy as copy and paste these HTML code below into your page. The tags below is just an example. In WordPress, Blogger or any others Content Management System maybe vary a little bit.
  <ul>   <li class="tag1"><a href="#java" class="flir">java</a></li>   <li class="tag5"><a href="#jQuery" class="flir">jQuery</a></li>   <li class="tag3"><a href="#Resources" class="flir">Resources</a></li>   <li class="tag5"><a href="#web-design" class="flir">web design</a></li>   <li class="tag2"><a href="#Kwicks" class="flir">Kwicks</a></li>   <li class="tag5"><a href="#CSS" class="flir">CSS</a></li>   <li class="tag3"><a href="#Mootools" class="flir">Mootools</a></li>   <li class="tag2"><a href="#Wordpress" class="flir">WordPress</a></li>   <li class="tag2"><a href="#php" class="flir">blogger</a></li>   <li class="tag4"><a href="#Tutorial" class="flir">Tutorial</a></li>   <li class="tag5"><a href="#Javascript" class="flir">Javascript</a></li>   <li class="tag2"><a href="#tricks" class="flir">tricks</a></li>  </ul>Remember to set the class name of the link. Because we have lots of link in webpage, and we will use this class to identify the link we want to replace.
CSS code:
That’s not important to make up the link using CSS. But the size of tags we have to define. And one more thing, without css styling, the tags can not display as the cloud and we will not call it tags cloud, right?
The CSS code that I’m using in this tutorial will be:
body {Â Â margin:0;Â Â padding:0;Â Â background:#FFF;Â Â font:80% Trebuchet MS, Arial, Helvetica, sans-serif;Â Â color:#555;}a {Â Â color:#222;}img {Â Â border:none;} /* Tag cloud */ Â Â.tags {Â Â width:500px;Â Â margin-top: 150px;Â Â margin-right: auto;Â Â margin-bottom: 0;Â Â margin-left: auto;}.tags ul {Â Â margin:1em 0;Â Â padding:.5em 10px;Â Â text-align:center;}.tags li {Â Â margin-top:0px;Â Â margin-right:5px;Â Â margin-bottom:0px;Â Â margin-left:5px;Â Â padding:0;Â Â list-style:none;Â Â display:inline;}.tags li a {Â Â font-family: loyal, Arial, Helvetica, sans-serif;Â Â text-decoration:none;Â Â color:#000;Â Â line-height: 100%;Â Â background-color: #FFFFFF;Â Â * background-color: none;}.tag1 a {Â Â font-size:100%;Â Â line-height: 10%;}.tag2 a {Â Â font-size:120%;Â Â line-height: 20%;}.tag3 a {Â Â font-size:140%;Â Â line-height: 30%;}.tag4 a {Â Â font-size:200%;Â Â line-height: 80%;}.tag5 a{Â Â font-size:350%;Â Â line-height: 100%;} /* // Tag cloud */Note: Always remember to set the background for the link because Facelift replacement the text by image but can not display the image as transparent unless we set background value. However, with IE, Facelift can not display correct even when set or not set the background. And result I got is:
Maybe it’s a bug of this script maybe not if I get mistake. Sorry to the script’s author!
Поиск по сайту: