Membuat Label Animasi di Blog

Kamis, 15 Oktober 2009

Haloo temen².. membuat label animasi..umm..yuk kita buat yukk.. kayak nya dah ga jaman deh label kayak tampilan di samping.. tampilan seperti inikah yg temen² ingin ni?, di cek doloo dong..jgn mpe beli kucing dalam karung..nyesel nti.. klo iya yuk di lanjut.. karena aku juga Newbie, khan bingung tuh klo langsung liat panduannya..apa lagi klo text aja.., tp tng preenn ini kubuat dengan preview ny ako..so gampang..yukkk..eh pren tapi ada beberapa sarat klo mo bikinlabel animasi lho..bukan sarat penting sih..cuman biar lebih mudah aja.. yg pertama..blog temen² harus sudah ada side widget nya dulu..klo belum add widget aja dulu, terus yg kedua..harus sudah memiliki min 2 judul label.. klo g nti ga kliatan gerak² nuh..ukee setalah semua sarat lengkap..monggo di lanjuutt..

Langkah pertama, temen² masuk dasbord temen² dulu, setelah login temen² akan di hadap kan pada layar dasbord temen², klo udah..pilih blog yg akan di beri laben animasi nya..klo sudah di tentukan blog mana yg di pilih,klik tata letak seperti pada gambar..


Setelah tata letak di klik..langkah selanjut nya..temen² klik tulisan Edit Html seperti pada gambar..




Nah..sekarang udah terlihat rintihan..(eh..ko rintihan sih?^^ maksud ku rentetan) sintaks HTML kan.. sekarang tekan ctrl+f, itu gunanya untuk menampilkan fungsi search(cari kata..ihihi kyk nya sih gituu), itu lho pren seperti yg aku tunjukin pake tanda panah warna biru, terus ketikan <b:section class='sidebar' id='sidebar' preferred='yes'> di input text area seperti yg aku tunjuk menggunakan anak panah warna merah, ga harus sama persis ko pren..minimal ketik ampe sidebar aja, karena pastinya tiap template beda² tulisan nya.. nah tinggal enter deh.. setelah, di enter..tuh ketemu tulisan yg temen² cari..tinggal taruh sintak sHTML berikut di bawah nya.. ini pren sintaks nya..copy paste aja
<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></div>
<script type='text/javascript'>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/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>



Nah klo udah di paste..tinggal di save template aja..seperti pada gambar, tapi isa di modif lagi lho pren tampilan nya..cara nya gampang ko pren, 240 itu ukuran lebar tampilan,sedangkan 300 itu tinggi nya,angka 12 itu besar ny afont pren..klo mo ganti warna tulisan juga isa lho.. itu di sebelah tulisan tcolor ada kode khan? yg di apit tanda" ", nah itu ganti aja kodenya..untuk kode warna nya isa diliat di Sini warna background nya juga isa kok..sama aja,caranya..ganti aja tulisan#ffffff dengankode warna kesukaan temen², klo di rasa editing udah cukup simpan template dan lihat hasil nya..weeeww.. keren khan temen²??, uke.. met menghias tampilan blog kamu ya..^^ tha..thaa...

0 comments

Posting Komentar

Mari berbagi Ilmu..