Pasang Label Cloud Animasi dengan CSS

Minggu, 10 November 2013

Pasang Label Cloud Animasi dengan CSS

Sekarang akan belajar cara memasang Label Cloud Animasi dengan CSS, dan saya akan berikan 4 macam style Label Cloud Animasi. Sobat tinggal pilih ajj mana yang serek dihati.hehee,.. Berikut Contohnya :

http://picturestack.com/705/199/grHcatsAkI.jpg

Label Cloud 1 :

<b:widget id=Label89 locked=false title=Labels type=Label>
<b:includable id=main>
<b:if cond=data:title><h2><data:title/></h2></b:if>
<div class=widget-content>
<div id=way2blogging_label_cloud style=width:100%;height:250px>
<b:loop values=data:labels var=label>
<a class=tag-link expr:href=data:label.url expr:style="font-size: 1" + data:label.cssSize + "pt;"><data:label.name/></a>
</b:loop>
</div>
<script src=http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js type=text/javascript/>
<p style=font-size:0.6em;text-align:right>Widget by <a href=http://.blogspot.com>Utta Bala Dewa</a></p>
<script type=text/javascript>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = new FatCloud("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Horizontal/Vertical","sizeRatio": "12","colorScheme": "Random","fgColor": "#868A08","mgColor": "#7401DF","sColor": "#F5F6CE","bgColor": "#FFFFFF","font": "Report","randomFont": "yes"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negotiate", "Report"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById("way2blogging_label_cloud").style.visibility = "hidden";
</script>
<b:include name=quickedit/>
</div>
</b:includable>
</b:widget>

http://picturestack.com/705/587/MUZ2knc.jpg

Label Cloud 2 :

<b:widget id=Label89 locked=false title=Labels type=Label>
<b:includable id=main>
<b:if cond=data:title><h2><data:title/></h2></b:if>
<div class=widget-content>
<div id=way2blogging_label_cloud style=width:100%;height:250px>
<b:loop values=data:labels var=label>
<a class=tag-link expr:href=data:label.url expr:style="font-size: 1" + data:label.cssSize + "pt;"><data:label.name/></a>
</b:loop>
</div>
<script src=http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js type=text/javascript/>
<p style=font-size:0.6em;text-align:right>Widget by <a href=http://.blogspot.com>Utta Bala Dewa</a></p>
<script type=text/javascript>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = new FatCloud("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Random (all different)","sizeRatio": "12","colorScheme": "Random","fgColor": "#868A08","mgColor": "#7401DF","sColor": "#F5F6CE","bgColor": "#FFFFFF","font": "Report","randomFont": "yes"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negotiate", "Report"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById("way2blogging_label_cloud").style.visibility = "hidden";
</script>
<b:include name=quickedit/>
</div>
</b:includable>
</b:widget>

http://picturestack.com/705/784/bac3LMN.jpg

Label Cloud 3 :

<b:widget id=Label89 locked=false title=Labels type=Label>
<b:includable id=main>
<b:if cond=data:title><h2><data:title/></h2></b:if>
<div class=widget-content>
<div id=way2blogging_label_cloud style=width:100%;height:250px>
<b:loop values=data:labels var=label>
<a class=tag-link expr:href=data:label.url expr:style="font-size: 1" + data:label.cssSize + "pt;"><data:label.name/></a>
</b:loop>
</div>
<script src=http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js type=text/javascript/>
<p style=font-size:0.6em;text-align:right>Widget by <a href=http://.blogspot.com>Utta Bala Dewa</a></p>
<script type=text/javascript>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = new FatCloud("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "45 Degrees","sizeRatio": "12","colorScheme": "Dessert","fgColor": "#868A08","mgColor": "#7401DF","sColor": "#F5F6CE","bgColor": "#FFFFFF","font": "Report","randomFont": "yes"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negotiate", "Report"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById("way2blogging_label_cloud").style.visibility = "hidden";
</script>
<b:include name=quickedit/>
</div>
</b:includable>
</b:widget>

http://picturestack.com/705/981/a5Q4o9s.jpg

Label Cloud 4 :

<b:widget id=Label89 locked=false title=Labels type=Label>
<b:includable id=main>
<b:if cond=data:title><h2><data:title/></h2></b:if>
<div class=widget-content>
<div id=way2blogging_label_cloud style=width:100%;height:250px>
<b:loop values=data:labels var=label>
<a class=tag-link expr:href=data:label.url expr:style="font-size: 1" + data:label.cssSize + "pt;"><data:label.name/></a>
</b:loop>
</div>
<script src=http://bloggerblogwidgets.googlecode.com/files/FC_Blogger_Way2blogging.js type=text/javascript/>
<p style=font-size:0.6em;text-align:right>Widget by <a href=http://.blogspot.com>Utta Bala Dewa</a></p>
<script type=text/javascript>
fatCloud.SWF = "http://bloggerblogwidgets.googlecode.com/svn/trunk/way2blogging-fatcloud.swf";
var way2blogginglabelcloud_fatcloud = new FatCloud("way2blogging_label_cloud", "Wordle");
way2blogginglabelcloud_fatcloud.options = {"textAngle": "Horizontal","sizeRatio": "12","colorScheme": "Aqua","fgColor": "#868A08","mgColor": "#7401DF","sColor": "#F5F6CE","bgColor": "#FFFFFF","font": "Report","randomFont": "yes"};
fatCloud.fontList = ["Expressway", "Meloche", "Museo", "Negotiate", "Report"];
way2blogginglabelcloud_fatcloud.noXML = true;
way2blogginglabelcloud_fatcloud.saveSkinCacheURL = "/";
document.getElementById("way2blogging_label_cloud").style.visibility = "hidden";
</script>
<b:include name=quickedit/>
</div>
</b:includable>
</b:widget>

Label Cloud 5 (Berputar):

<b:widget id=Label99 locked=false title=Labels type=Label>
<b:includable id=main>
<b:if cond=data:title>
<h2><data:title/></h2>
</b:if>
<div class=widget-content>
<script src=http://sites.google.com/site/bloggerustemplatus/code/swfobject.js type=text/javascript/>
<div id=flashcontent>Blogumulus by <a href=http://.blogspot.com/>Utta Bala Dewa</a></div>
<script type=text/javascript>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values=data:labels var=label><a expr:href=data:label.url style=12><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name=quickedit/>
</div>
</b:includable>
</b:widget>

Berikut Cara Memasangnya :

1. Login ke blogger

2. Tata Letak.

3. Edit HTML.

4. Carilah kode
<b:section class=sidebar id=sidebar preferred=yes> ,lalu letakkan salah satu Kode diatas, tepat dibawah kode
<b:section class=sidebar id=sidebar preferred=yes>.

5. Terakhir Save Template. dan lihat hasilnya.

Semoga Bermanfaat. ^^

karir online

Sponsors

Minggu, 10 November 2013

Pasang Label Cloud Animasi dengan CSS

Tidak ada komentar:

Posting Komentar