Senin, 28 Mei 2012

Cara Membuat Label Bergerak Ketika Disentuh Cursor



Pernahkan sobat melihat dibeberapa blog atau website yang apabila kita sentuhkan cursor pada labelnya maka labelnya akan bergerak. Dan tahukan sobat ternyata label bergerak itu merupakan widget yang dibuat dengan basis flash animation. Menarik kan? Kalo sobat berminat ikuti langkah-langkah di bawah ini.

1. Terlebih dahulu sobat login ke blogger atau klik disini
2. Pilih template >> Edit Html >> Lanjutkan
3. Centang Expand widget template

<b:section class='sidebar' id='sidebar' preferred='yes'>

4. Copy Script di bawah ini dan letakkan di bawah code di atas ini

<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://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;); // uncomment next line to enable transparency //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;); so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;); so.addVariable(&quot;mode&quot;, &quot;tags&quot;); so.addVariable(&quot;distr&quot;, &quot;true&quot;); so.addVariable(&quot;tspeed&quot;, &quot;100&quot;); so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;); so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;); so.write(&quot;flashcontent&quot;); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

5. Simpan atau save template

Catatan:
12 menunjukkan ukuran fontnya, 240 menunjukkan lebar dan 300 menunjukkan tinggi
#ffffff menunjukkan warna background
100 menunjukkan kecepatan putaran
// bisa dihilangkan jika sobat menginkan background yang transparan

Selamat mencoba



Tidak ada komentar:

Posting Komentar